/* ========== Home Page ========== */

const HomeHero = ({ variant = "split", isMobile = false }) => {
  // variant: split | center | tategaki | full

  if (variant === "tategaki") {
    return (
      <section className={`hero hero--tategaki ${isMobile ? "is-mobile" : ""}`}>
        <SeigaihaPattern color="var(--t-accent)" opacity={0.06} />
        <div className="hero__tategaki-wrap">
          <div className="hero__tategaki-text tategaki">
            <div className="hero__tategaki-badge">創業二〇〇一年</div>
            <h1 className="hero__tategaki-title">
              <span>た</span><span>っ</span><span>ぷ</span><span>り</span><span>、</span>
              <span className="brush-under">あふれる</span>
              <span>、</span><span>う</span><span>ま</span><span>さ</span><span>。</span>
            </h1>
            <p className="hero__tategaki-sub">
              皮からあんこがはみ出るほど。<br />
              一筋に焼き続けて、二十五年。
            </p>
          </div>
          <div className="hero__tategaki-fish">
            <TaiyakiSVG flavor="ogura" size={isMobile ? 320 : 540} />
            <SteamWisps count={4} />
          </div>
        </div>
        <div className="hero__cta-row">
          <a href="#menu" className="btn">お品書きを見る</a>
          <a href="#stores" className="btn btn-ghost">お近くの店舗</a>
        </div>
      </section>
    );
  }

  if (variant === "center") {
    return (
      <section className={`hero hero--center ${isMobile ? "is-mobile" : ""}`}>
        <SakuraScatter count={isMobile ? 5 : 10} />
        <div className="hero__center-eyebrow">
          <span className="hero__center-line"></span>
          <span>SINCE 2001 ・ 創業二十五年</span>
          <span className="hero__center-line"></span>
        </div>
        <h1 className="hero__center-title">
          たっぷり、<span className="brush-under">あふれる</span>、<br />うまさ。
        </h1>
        <p className="hero__center-sub">
          皮からあんこがはみ出るほど、たっぷり詰め込んだ本物のたい焼き。<br />
          一口頬張れば、幸せがあふれ出す。
        </p>
        <div className="hero__center-fish" style={{ position: "relative" }}>
          <TaiyakiSVG flavor="ogura" size={isMobile ? 280 : 480} />
          <SteamWisps count={4} />
        </div>
        <div className="hero__cta-row">
          <a href="#menu" className="btn">お品書きを見る</a>
          <a href="#stores" className="btn btn-ghost">お近くの店舗</a>
        </div>
      </section>
    );
  }

  // split (default)
  return (
    <section className={`hero hero--split ${isMobile ? "is-mobile" : ""}`}>
      <div className="hero__bg-pattern">
        <AsanohaPattern color="var(--t-accent)" opacity={0.05} />
      </div>
      <div className="hero__split-text">
        <div className="hero__badge">
          <span className="hero__badge-dot"></span>
          創業 2001年・たい焼き一筋
        </div>
        <h1 className="hero__title">
          たっぷり、<br />
          <span className="hero__title-em brush-under">あふれる</span>、<br />
          うまさ。
        </h1>
        <p className="hero__sub">
          皮からあんこがはみ出るほど、たっぷり詰め込んだ本物のたい焼き。<br />
          一口頬張れば、幸せがあふれ出す。
        </p>
        <div className="hero__cta-row">
          <a href="#menu" className="btn">お品書きを見る</a>
          <a href="#stores" className="btn btn-ghost">お近くの店舗</a>
        </div>
        <div className="hero__stats">
          <div className="hero__stat"><div className="hero__stat-num">25</div><div className="hero__stat-lbl">年の歴史</div></div>
          <div className="hero__stat-divider"></div>
          <div className="hero__stat"><div className="hero__stat-num">3</div><div className="hero__stat-lbl">店舗展開</div></div>
          <div className="hero__stat-divider"></div>
          <div className="hero__stat"><div className="hero__stat-num">8+</div><div className="hero__stat-lbl">の味</div></div>
        </div>
      </div>
      <div className="hero__split-image">
        <div className="hero__plate">
          <div className="hero__plate-circle"></div>
          <div className="hero__fish-wrap">
            <TaiyakiSVG flavor="ogura" size={isMobile ? 320 : 560} />
            <SteamWisps count={4} />
          </div>
          <div className="hero__hanko">
            <div className="hanko">庵</div>
          </div>
          <div className="hero__floating-tag hero__floating-tag--1">
            <div style={{ fontSize: 11, color: "var(--t-accent)", letterSpacing: "0.2em" }}>POPULAR No.1</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700 }}>小倉あん</div>
            <div style={{ fontSize: 13 }}>¥180</div>
          </div>
          <div className="hero__floating-tag hero__floating-tag--2">
            <div style={{ fontSize: 22 }}>🔥</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600 }}>毎日焼きたて</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const HomeSeasonal = () => (
  <section className="seasonal reveal">
    <div className="seasonal__inner">
      <div className="seasonal__sakura">
        <SakuraScatter count={8} />
      </div>
      <div className="seasonal__content">
        <div className="seasonal__tag">🌸 期間限定</div>
        <h2 className="seasonal__title">季節の特別あん、<br />登場。</h2>
        <p className="seasonal__sub">桜あん・宇治抹茶・ずんだあんなど、季節ごとに変わる限定フレーバー。数量限定・なくなり次第終了です。</p>
        <a href="#menu" className="btn">今すぐチェック →</a>
      </div>
      <div className="seasonal__fish">
        <TaiyakiSVG flavor="seasonal" size={360} />
      </div>
    </div>
  </section>
);

const HomeMenu = ({ isMobile = false }) => {
  const items = [
    { id: "ogura", label: "小倉あん", price: "¥180", tag: "一番人気", desc: "北海道産小豆を独自配合の生地でたっぷり包んだ一番人気。甘さ控えめの粒あんが皮からはみ出すほど。" },
    { id: "shiro", label: "白あん", price: "¥180", tag: "上品な甘み", desc: "白いんげん豆の上品な甘みとさっぱりした口当たり。女性やお子様にも大人気。" },
    { id: "cream", label: "クリーム", price: "¥180", tag: "定番", desc: "卵と牛乳をたっぷり使ったなめらかカスタード。とろける口当たりとやさしい甘さ。" },
    { id: "ogura_cheese", label: "小倉チーズ", price: "¥250", tag: "店長一推し", desc: "北海道産小豆の粒あんとコクのあるクリームチーズが絶妙にマッチ。甘じょっぱい組み合わせ。" },
  ];
  return (
    <section className="menu-section reveal" id="menu">
      <div className="menu-section__head">
        <span className="eyebrow">POPULAR MENU</span>
        <h2 className="section-title">人気のお品書き</h2>
        <p className="section-lede">毎日焼きたて。あんこ・クリームたっぷりの<br />定番から、旬の味まで。</p>
      </div>

      <div className={`menu-grid ${isMobile ? "is-mobile" : ""}`}>
        {items.map((it, i) => (
          <article className="menu-card reveal" key={it.id} style={{ transitionDelay: `${i * 0.06}s` }}>
            <div className="menu-card__tag">{it.tag}</div>
            <div className="menu-card__fish">
              <TaiyakiSVG flavor={it.id} size={260} />
            </div>
            <div className="menu-card__body">
              <div className="menu-card__name">{it.label}</div>
              <p className="menu-card__desc">{it.desc}</p>
              <div className="menu-card__price-row">
                <span className="menu-card__price">{it.price}</span>
                <span className="menu-card__price-tax">税込</span>
              </div>
            </div>
          </article>
        ))}
      </div>

      <div className="menu-section__cta">
        <a href="#menu" className="btn">全てのお品書きを見る →</a>
      </div>
    </section>
  );
};

const HomePride = () => {
  const items = [
    { kanji: "餡", title: "あんこたっぷり", desc: "皮からはみ出るほどのあんこが「たっぷり庵」の代名詞。妥協なき量と質を守り続けます。" },
    { kanji: "焼", title: "毎日手作り", desc: "開店前から仕込みを始め、毎日焼きたてをお届け。冷凍食品は一切使いません。" },
    { kanji: "選", title: "選び抜いた素材", desc: "小豆・白いんげん豆など原材料は厳選。素材の味を活かしたシンプルな配合。" },
    { kanji: "心", title: "笑顔のサービス", desc: "お子様からご年配の方まで、いつでも温かい対応で。地域に愛される店を目指して。" },
  ];
  return (
    <section className="pride reveal">
      <div className="pride__inner">
        <div className="pride__head">
          <span className="eyebrow" style={{ color: "var(--t-gold-soft)" }}>OUR PRIDE</span>
          <h2 className="section-title" style={{ color: "var(--t-cream)" }}>たっぷり庵の<br />こだわり、四つ。</h2>
          <p className="section-lede" style={{ color: "rgba(251,244,232,0.75)" }}>2001年の創業以来、変わらない味と姿勢で<br />たい焼きを作り続けています。</p>
        </div>
        <div className="pride__grid">
          {items.map((it, i) => (
            <div className="pride__card reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="pride__kanji">{it.kanji}</div>
              <div className="pride__num">0{i + 1}</div>
              <h3 className="pride__title">{it.title}</h3>
              <p className="pride__desc">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const HomeStores = () => {
  const stores = [
    { id: "honten", name: "本店（いわき）", addr: "福島県いわき市平月見町字三倉62-1", tel: "0246-23-0181", hours: "9:30 〜 18:30", since: "2001" },
    { id: "hitachinaka", name: "ひたちなか店", addr: "茨城県ひたちなか市新光町34-1", tel: "0292-12-5516", hours: "9:30 〜 19:30", since: "2008" },
    { id: "chiba", name: "千葉ニュータウン店", addr: "千葉県印西市牧の原2丁目", tel: "0476-36-8018", hours: "9:30 〜 19:00", since: "2015" },
  ];
  return (
    <section className="stores reveal" id="stores">
      <div className="stores__head">
        <span className="eyebrow">OUR STORES</span>
        <h2 className="section-title">店舗のご案内</h2>
        <p className="section-lede">福島・茨城・千葉の三店舗で<br />お待ちしております。</p>
      </div>
      <div className="stores__grid">
        {stores.map((s, i) => (
          <article className="store-card reveal" key={s.id} style={{ transitionDelay: `${i * 0.08}s` }}>
            <div className="store-card__since">since {s.since}</div>
            <div className="store-card__map-placeholder">
              <svg viewBox="0 0 240 140" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                <rect width="240" height="140" fill="#E8DCC4" />
                <path d="M 0 80 Q 60 70 120 85 T 240 90" stroke="#C9A07A" strokeWidth="2" fill="none" />
                <path d="M 30 0 L 35 140" stroke="#D4B896" strokeWidth="1.5" />
                <path d="M 180 0 L 175 140" stroke="#D4B896" strokeWidth="1.5" />
                <path d="M 0 50 L 240 45" stroke="#D4B896" strokeWidth="1.5" />
                <circle cx="120" cy="70" r="8" fill="var(--t-accent)" />
                <circle cx="120" cy="70" r="14" fill="none" stroke="var(--t-accent)" strokeWidth="1.5" opacity="0.5" />
              </svg>
            </div>
            <div className="store-card__body">
              <h3 className="store-card__name">{s.name}</h3>
              <ul className="store-card__info">
                <li><span>📍</span><span>{s.addr}</span></li>
                <li><span>📞</span><span>{s.tel}</span></li>
                <li><span>🕐</span><span>{s.hours} ／ 元日休</span></li>
              </ul>
              <a href="#stores" className="store-card__more">地図を見る →</a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

const HomeRecruit = () => (
  <section className="recruit-band reveal" id="recruit">
    <div className="recruit-band__inner">
      <div className="recruit-band__text">
        <span className="eyebrow" style={{ color: "var(--t-cream)" }}>RECRUIT</span>
        <h2 className="recruit-band__title">一緒に焼きませんか、<br />たっぷりの毎日を。</h2>
        <p className="recruit-band__sub">未経験大歓迎。アットホームな職場で、あなたらしく働けます。</p>
        <a href="#recruit" className="btn" style={{ background: "var(--t-cream)", color: "var(--t-accent)" }}>採用情報を見る →</a>
      </div>
      <div className="recruit-band__decoration">
        <TaiyakiSVG flavor="cream" size={300} />
        <TaiyakiSVG flavor="ogura" size={240} />
      </div>
    </div>
  </section>
);

const HomePage = ({ isMobile = false, heroVariant = "split" }) => {
  useReveal();
  return (
    <div className="page">
      {isMobile ? <Nav variant="mobile" active="home" /> : <Nav active="home" />}
      <HomeHero isMobile={isMobile} variant={heroVariant} />
      <HomeSeasonal />
      <HomeMenu isMobile={isMobile} />
      <HomePride />
      <HomeStores />
      <HomeRecruit />
      <Footer />
    </div>
  );
};

Object.assign(window, { HomePage, HomeHero, HomeMenu, HomePride, HomeStores, HomeRecruit, HomeSeasonal });