// ============================================================
// Header
// ============================================================
const NAV_ITEMS = [
  { id: "home", label: "ホーム" },
  { id: "reasons", label: "選ばれる理由" },
  { id: "works", label: "制作実績" },
  { id: "pricing", label: "料金プラン" },
  { id: "flow", label: "制作の流れ" },
  { id: "profile", label: "プロフィール" },
  { id: "contact", label: "お問い合わせ" },
];

function Brand() {
  return (
    <a href="#home" className="brand" aria-label="松木悠人 | Web制作 ホームへ">
      <div className="brand-title">
        <span>松木悠人</span>
        <span className="bar">|</span>
        <span>Web制作</span>
      </div>
      <div className="brand-sub">小規模事業者向けWebサイト制作</div>
    </a>
  );
}

function Header({ active, onJump }) {
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = drawer ? "hidden" : "";
  }, [drawer]);
  return (
    <header className="site-header">
      <div className="container header-inner">
        <Brand/>
        <nav className="nav" aria-label="メインナビゲーション">
          {NAV_ITEMS.map(n => (
            <a key={n.id} href={`#${n.id}`}
               className={active === n.id ? "active" : ""}
               onClick={(e)=>{e.preventDefault(); onJump(n.id);}}>
              {n.label}
            </a>
          ))}
        </nav>
        <button className="header-cta" onClick={()=>onJump("contact")}>無料相談する</button>
        <button className="menu-toggle" aria-label="メニューを開く" onClick={()=>setDrawer(true)}>
          <Icon.Menu/>
        </button>
      </div>
      <div className={"mobile-drawer" + (drawer ? " open" : "")} onClick={()=>setDrawer(false)}>
        <aside className="mobile-drawer-panel" onClick={(e)=>e.stopPropagation()} aria-label="モバイルナビ">
          <div className="drawer-head">
            <Brand/>
            <button className="drawer-close" aria-label="閉じる" onClick={()=>setDrawer(false)}>
              <Icon.Close/>
            </button>
          </div>
          <div className="drawer-nav">
            {NAV_ITEMS.map(n => (
              <a key={n.id} href={`#${n.id}`}
                 className={active === n.id ? "active" : ""}
                 onClick={(e)=>{e.preventDefault(); setDrawer(false); onJump(n.id);}}>
                {n.label}
              </a>
            ))}
          </div>
          <div className="drawer-cta">
            <button className="btn btn-primary" style={{width:"100%"}} onClick={()=>{setDrawer(false); onJump("contact");}}>
              無料相談する <Icon.ArrowRight/>
            </button>
          </div>
        </aside>
      </div>
    </header>
  );
}

// ============================================================
// Hero
// ============================================================
function FakeRestoSite() {
  return (
    <div className="fake-site-resto">
      <div className="fs-nav">
        <div className="fs-logo">Bistro えん</div>
        <div className="fs-links">
          <span>コンセプト</span><span>メニュー</span><span>店舗情報</span><span>予約</span>
        </div>
      </div>
      <div className="fs-headline">人と人をつなぐ、<br/>やさしい時間を。</div>
      <div className="fs-news">NEWS · 新メニュー公開中</div>
    </div>
  );
}

function FakePhoneSite() {
  return (
    <div className="fake-site-rent">
      <div className="fr-hero">
        <div className="fr-title">理想の住まい探しを、<br/>まっすぐサポート。</div>
      </div>
      <div className="fr-cards">
        {[0,1,2,3].map(i => (
          <div className="fr-card" key={i}>
            <div className="fr-thumb"/>
            <div className="fr-lines">
              <div className="fr-line"/>
              <div className="fr-line short"/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroMock() {
  return (
    <div className="mock-stage" role="img" aria-label="制作実績のプレビュー">
      <div className="laptop">
        <div className="laptop-screen">
          <img src="images/work-en.jpg" alt="創作Bistroえん（PC版）" loading="eager"/>
        </div>
        <div className="laptop-base"/>
      </div>
      <div className="phone">
        <div className="phone-frame">
          <div className="phone-screen">
            <img src="images/work-taimei-mobile.jpg" alt="株式会社泰明不動産（スマホ版）" loading="eager"/>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero({ onJump }) {
  return (
    <section className="hero" id="home">
      <div className="container hero-grid">
        <div className="reveal">
          <h1>
            <span>ホームページが必要だけど、</span>
            <span>高くて手が出ない</span>
          </h1>
          <p className="hero-sub">
            そんな小規模事業者のために、最新技術を活用して<br/>
            低価格・短納期で本格的なWebサイトを制作します。
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-primary btn-lg" onClick={()=>onJump("contact")}>
              無料相談する <Icon.ArrowRight/>
            </button>
          </div>
          <div className="hero-note">
            <span className="coin"><Icon.Coin width={11} height={11}/></span>
            制作費50,000円〜、月額サポート5,000円から
          </div>
        </div>
        <div className="reveal" style={{transitionDelay:"0.1s"}}>
          <HeroMock/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Reasons
// ============================================================
function Reasons() {
  const items = [
    { num: 1, title: "最新技術で低価格・短納期", icon: <Icon.ClockCheck/>, body: "ノーコード・最新ツールを活用し、無駄を省くことで低価格と短納期を実現します。" },
    { num: 2, title: "本格的なクオリティ", icon: <Icon.Diamond/>, body: "デザイン・使いやすさ・スマホ対応まで、ビジネスにふさわしい本格的なサイトを制作します。" },
    { num: 3, title: "月額サポートで長く付き合える", icon: <Icon.Handshake/>, body: "公開後の更新・保守・改善まで、月額サポートで長期的に伴走し、安心をお届けします。" },
  ];
  return (
    <section className="section section-reasons" id="reasons">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">選ばれる3つの理由</h2>
        </div>
        <div className="reasons-grid">
          {items.map((it, i) => (
            <div className="reason-card reveal" key={it.num} style={{transitionDelay: `${i*0.08}s`}}>
              <div className="reason-num num">{it.num}</div>
              <h3>{it.title}</h3>
              <div className="reason-icon">{it.icon}</div>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Works
// ============================================================
function Works({ onJump }) {
  return (
    <section className="section section-works" id="works">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">制作実績</h2>
        </div>
        <div className="works-grid">
          <article className="work-card reveal">
            <a className="work-thumb" href="#works" onClick={(e)=>e.preventDefault()} aria-label="創作Bistroえん サイトプレビュー">
              <img src="images/work-en.jpg" alt="創作Bistroえんのトップページ" loading="lazy"/>
            </a>
            <div className="work-body">
              <h3>創作Bistroえん（飲食店）</h3>
              <p>温かみのあるデザインでお店の世界観を表現。予約導線を最適化し、集客とリピートにつながるサイトを制作。</p>
              <span className="work-tag">飲食・レストラン</span>
            </div>
          </article>

          <article className="work-card reveal" style={{transitionDelay:"0.08s"}}>
            <a className="work-thumb" href="#works" onClick={(e)=>e.preventDefault()} aria-label="不動産仲介サイト サイトプレビュー">
              <img src="images/work-taimei.jpg" alt="不動産仲介サイトのトップページ" loading="lazy"/>
            </a>
            <div className="work-body">
              <span className="work-label">提案・デモ事例</span>
              <h3>不動産仲介サイト</h3>
              <p>不動産仲介向けに制作した提案用デモ。信頼感のあるデザインと分かりやすい物件検索導線で、問い合わせにつながる構成を設計しました。</p>
              <span className="work-tag">不動産・不動産仲介</span>
            </div>
          </article>
        </div>
        <div className="works-foot reveal">
          <button className="btn btn-ghost-outline" onClick={()=>onJump("contact")}>
            制作実績一覧を見る <Icon.ChevronRight/>
          </button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Pricing
// ============================================================
function Pricing() {
  return (
    <section className="section section-pricing" id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">料金プラン</h2>
        </div>
        <div className="pricing-grid">
          <div className="price-card reveal">
            <div className="price-icon"><Icon.Monitor/></div>
            <div>
              <div className="price-head">
                <span className="price-name">制 作 費</span>
                <span className="price-amount num">50,000<span className="yen">円</span><span className="from">〜</span></span>
              </div>
              <ul className="price-list">
                <li>トップページ＋下層ページ（〜5ページ目安）</li>
                <li>スマホ対応（レスポンシブ）</li>
                <li>基本的なSEO対策</li>
                <li>お問い合わせフォーム設置</li>
              </ul>
              <p className="price-note">※内容によりお見積りいたします。</p>
            </div>
          </div>
          <div className="price-card reveal" style={{transitionDelay:"0.08s"}}>
            <div className="price-icon"><Icon.Headset/></div>
            <div>
              <div className="price-head">
                <span className="price-name">月額サポート</span>
                <span className="price-amount num">5,000<span className="yen">円</span><span className="from">〜</span></span>
              </div>
              <ul className="price-list">
                <li>サイトの更新サポート</li>
                <li>テキスト・画像の軽微な修正</li>
                <li>バックアップ・セキュリティ対応</li>
                <li>ご相談・改善提案</li>
              </ul>
              <p className="price-note">※ご希望に応じたプランをご用意します。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Flow
// ============================================================
function Flow() {
  const steps = [
    { n: 1, title: "相談", icon: <Icon.Chat/>, body: "お問い合わせフォームよりメールでお気軽にご相談ください。" },
    { n: 2, title: "ヒアリング", icon: <Icon.Clipboard/>, body: "事業内容やご要望を丁寧にヒアリングし、課題や目的を整理します。" },
    { n: 3, title: "ご提案", icon: <Icon.Bulb/>, body: "要件に基づき、構成やデザインの方向性、見積りをご提案します。" },
    { n: 4, title: "制作", icon: <Icon.MonitorEdit/>, body: "デザイン・構築・細部仕上げを進め、高品質なサイトを制作します。" },
    { n: 5, title: "公開・運用", icon: <Icon.Globe/>, body: "テスト後に公開。公開後もサポートしながら運用を支援します。" },
  ];
  return (
    <section className="section section-flow" id="flow">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">制作の流れ</h2>
        </div>
        <div className="flow-row reveal">
          {steps.map((s, i) => (
            <React.Fragment key={s.n}>
              <div className="flow-card">
                <div className="flow-step-num num">{s.n}</div>
                <div className="flow-icon">{s.icon}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
              {i < steps.length - 1 && (
                <div className="flow-arrow"><Icon.ChevronRight width={20} height={20}/></div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Profile
// ============================================================
function Avatar() {
  // Flat illustration: man in jacket
  return (
    <div className="profile-avatar" aria-label="松木悠人">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <clipPath id="circ">
            <circle cx="100" cy="100" r="100"/>
          </clipPath>
        </defs>
        <g clipPath="url(#circ)">
          {/* hair */}
          <ellipse cx="100" cy="70" rx="38" ry="38" fill="#2a2118"/>
          {/* face */}
          <ellipse cx="100" cy="84" rx="30" ry="34" fill="#f1d4b8"/>
          {/* hair front */}
          <path d="M70 68 Q88 46 100 50 Q118 46 132 70 Q126 64 116 64 Q108 56 100 60 Q92 56 84 64 Q74 64 70 68 Z" fill="#2a2118"/>
          {/* eyes */}
          <ellipse cx="89" cy="84" rx="2.4" ry="3" fill="#1f1810"/>
          <ellipse cx="111" cy="84" rx="2.4" ry="3" fill="#1f1810"/>
          {/* mouth */}
          <path d="M93 100 Q100 106 107 100" stroke="#5b3a23" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
          {/* neck */}
          <rect x="92" y="116" width="16" height="14" fill="#e2c0a1"/>
          {/* shirt (white) */}
          <path d="M62 200 Q60 150 92 132 L100 142 L108 132 Q140 150 138 200 Z" fill="#f8fafc"/>
          {/* jacket */}
          <path d="M52 200 Q50 156 84 138 L100 158 L116 138 Q150 156 148 200 Z" fill="#2c4f8a"/>
          {/* lapels */}
          <path d="M84 138 L100 158 L92 200 Q86 170 84 138 Z" fill="#234680"/>
          <path d="M116 138 L100 158 L108 200 Q114 170 116 138 Z" fill="#234680"/>
        </g>
      </svg>
    </div>
  );
}

function Profile() {
  return (
    <section className="section section-profile" id="profile">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">プロフィール</h2>
        </div>
        <div className="profile-grid">
          <div className="reveal" style={{justifySelf:"center"}}>
            <Avatar/>
          </div>
          <div className="reveal" style={{transitionDelay:"0.06s"}}>
            <div className="profile-eyebrow">PROFILE</div>
            <h3 className="profile-name">松木悠人<small>Web制作</small></h3>
            <div className="profile-loc">
              <Icon.Pin/> 埼玉県越谷市
            </div>
            <p className="profile-bio">
              埼玉県越谷市を拠点に、小規模事業者向けのWebサイト制作を行っています。
              「ホームページを作りたいけれど、費用が心配」「何から始めればいいかわからない」
              そんなお悩みに寄り添い、最新技術を活用して低価格・短納期で本格的なサイトをご提供します。
              公開後も長く安心してお任せいただけるパートナーを目指しています。
            </p>
          </div>
          <div className="reveal" style={{transitionDelay:"0.12s"}}>
            <ul className="profile-check">
              <li>
                <span className="ck"><Icon.Check/></span>
                <span>小規模事業者のサポートが得意です<br/>（飲食・美容・士業・不動産・サービス業など）</span>
              </li>
              <li>
                <span className="ck"><Icon.Check/></span>
                <span>デザインから構築・運用まで一貫対応</span>
              </li>
              <li>
                <span className="ck"><Icon.Check/></span>
                <span>迅速・丁寧なコミュニケーション</span>
              </li>
              <li>
                <span className="ck"><Icon.Check/></span>
                <span>越谷市・埼玉エリアを中心に対応</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Contact
// ============================================================
function Contact() {
  const [form, setForm] = React.useState({ name:"", company:"", email:"", message:"" });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));

  function submit(e) {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = "お名前をご入力ください。";
    if (!form.email.trim()) next.email = "メールアドレスをご入力ください。";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) next.email = "メールアドレスの形式が正しくありません。";
    if (!form.message.trim()) next.message = "お問い合わせ内容をご入力ください。";
    setErrs(next);
    if (Object.keys(next).length === 0) {
      setSent(true);
      setForm({ name:"", company:"", email:"", message:"" });
      setTimeout(()=>setSent(false), 6000);
    }
  }

  return (
    <section className="section section-contact" id="contact">
      <div className="container">
        <div className="section-head reveal">
          <h2 className="section-title">お問い合わせ</h2>
        </div>
        <div className="contact-card reveal">
          <form className="form-grid" onSubmit={submit} noValidate>
            <div className="field">
              <label htmlFor="f-name">お名前 <span className="required">必須</span></label>
              <input id="f-name" type="text" placeholder="例）松木 悠人" value={form.name} onChange={set("name")}
                     className={errs.name ? "invalid" : ""} aria-invalid={!!errs.name}/>
              {errs.name && <div className="err">{errs.name}</div>}
            </div>
            <div className="field">
              <label htmlFor="f-co">会社名・屋号</label>
              <input id="f-co" type="text" placeholder="例）株式会社○○" value={form.company} onChange={set("company")}/>
            </div>
            <div className="field">
              <label htmlFor="f-email">メールアドレス <span className="required">必須</span></label>
              <input id="f-email" type="email" placeholder="例）info@example.com" value={form.email} onChange={set("email")}
                     className={errs.email ? "invalid" : ""} aria-invalid={!!errs.email}/>
              {errs.email && <div className="err">{errs.email}</div>}
            </div>
            <div className="field full">
              <label htmlFor="f-msg">お問い合わせ内容 <span className="required">必須</span></label>
              <textarea id="f-msg" placeholder="ご相談内容やご希望を自由にご記入ください。" value={form.message} onChange={set("message")}
                        className={errs.message ? "invalid" : ""} aria-invalid={!!errs.message}/>
              {errs.message && <div className="err">{errs.message}</div>}
            </div>
            <div className="form-submit field full">
              <button type="submit" className="btn btn-primary btn-lg">送信する <Icon.ArrowRight/></button>
            </div>
            {sent && <div className="form-success field full">送信しました。3営業日以内にご返信いたします。</div>}
          </form>
          <p className="form-note">※ご入力いただいた個人情報は、お問い合わせへの返信以外の目的では使用いたしません。</p>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer({ onJump }) {
  const navL = [
    { id: "home", label: "ホーム" },
    { id: "reasons", label: "選ばれる理由" },
    { id: "works", label: "制作実績" },
  ];
  const navR = [
    { id: "pricing", label: "料金プラン" },
    { id: "flow", label: "制作の流れ" },
    { id: "profile", label: "プロフィール" },
    { id: "contact", label: "お問い合わせ" },
  ];
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="ft-title">
              <span>松木悠人</span>
              <span className="bar">|</span>
              <span>Web制作</span>
            </div>
            <div className="ft-sub">小規模事業者向けWebサイト制作</div>
            <p className="ft-desc">最新技術で低価格・短納期。本格的なクオリティをお届けします。</p>
          </div>
          <div className="footer-col">
            <h5>ナビゲーション</h5>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"10px 16px"}}>
              <ul>
                {navL.map(n => (
                  <li key={n.id}><a href={`#${n.id}`} onClick={(e)=>{e.preventDefault(); onJump(n.id);}}>{n.label}</a></li>
                ))}
              </ul>
              <ul>
                {navR.map(n => (
                  <li key={n.id}><a href={`#${n.id}`} onClick={(e)=>{e.preventDefault(); onJump(n.id);}}>{n.label}</a></li>
                ))}
              </ul>
            </div>
          </div>
          <div className="footer-col">
            <h5>ご連絡先</h5>
            <ul className="footer-contact">
              <li><Icon.Mail/> <span>お問い合わせフォームよりご連絡ください</span></li>
              <li><Icon.Pin/> <span>埼玉県越谷市（全国対応可能）</span></li>
            </ul>
          </div>
          <div className="footer-col footer-sns">
            <h5>SNS</h5>
            <a href="#" aria-label="X (旧Twitter)" onClick={(e)=>e.preventDefault()}><Icon.X/></a>
          </div>
        </div>
        <div className="footer-copy">© 2026 松木悠人 All Rights Reserved.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Reasons, Works, Pricing, Flow, Profile, Contact, Footer, NAV_ITEMS });