/* ========== Full Menu Page ========== */

const FULL_MENU = [
  {
    category: "定番",
    categoryEn: "REGULAR MENU",
    desc: "創業以来、変わらず焼き続けてきた定番。",
    items: [
      { id: "ogura", label: "小倉あん", price: 180, tag: "一番人気", desc: "北海道産小豆を独自配合で炊き上げた、たっぷり庵の代表作。粒あん。" },
      { id: "shiro", label: "白あん", price: 180, tag: "上品", desc: "白いんげん豆の上品な甘み。さっぱりした口当たり。" },
      { id: "cream", label: "カスタードクリーム", price: 180, tag: "定番", desc: "卵と牛乳をたっぷり。なめらかでとろける口当たり。" },
      { id: "matcha", label: "宇治抹茶あん", price: 220, tag: "", desc: "京都・宇治抹茶を贅沢に使用。ほろ苦さと上品な甘み。" },
    ],
  },
  {
    category: "贅沢",
    categoryEn: "SPECIAL",
    desc: "素材を組み合わせた、ちょっと贅沢な一品。",
    items: [
      { id: "ogura_cheese", label: "小倉チーズ", price: 250, tag: "店長一推し", desc: "粒あんとクリームチーズの絶妙な甘じょっぱさ。" },
      { id: "matcha", label: "抹茶あずき", price: 240, tag: "", desc: "抹茶あんと粒あんの二層仕立て。" },
    ],
  },
  {
    category: "季節限定",
    categoryEn: "SEASONAL",
    desc: "季節ごとに変わる、その時だけの味。",
    items: [
      { id: "seasonal", label: "桜あん", price: 220, tag: "春限定", desc: "桜の塩漬けを練り込んだ、春の味わい。" },
      { id: "seasonal", label: "ずんだあん", price: 220, tag: "夏限定", desc: "枝豆の風味豊かな、爽やかな緑の餡。" },
    ],
  },
];

const MenuHero = ({ isMobile }) => (
  <section className={`menu-hero ${isMobile ? "is-mobile" : ""}`}>
    <SeigaihaPattern color="var(--t-accent)" opacity={0.06} />
    <div className="menu-hero__inner">
      <span className="eyebrow">OUR MENU</span>
      <h1 className="menu-hero__title">お品書き、<br /><span className="brush-under">十一品</span>。</h1>
      <p className="menu-hero__lede">
        毎日焼きたて、あんこたっぷり。<br />
        定番から季節の限定まで、自慢の味をご用意しております。
      </p>
    </div>
    <div className="menu-hero__fish-row">
      <TaiyakiSVG flavor="ogura" size={isMobile ? 130 : 180} />
      <TaiyakiSVG flavor="shiro" size={isMobile ? 130 : 180} />
      <TaiyakiSVG flavor="cream" size={isMobile ? 130 : 180} />
      <TaiyakiSVG flavor="matcha" size={isMobile ? 130 : 180} />
    </div>
  </section>
);

const MenuCategorySection = ({ cat, isMobile }) => (
  <section className="menu-cat reveal">
    <div className="menu-cat__head">
      <div className="menu-cat__kanji">{cat.category}</div>
      <div>
        <div className="menu-cat__en">{cat.categoryEn}</div>
        <h2 className="menu-cat__title">{cat.category}メニュー</h2>
        <p className="menu-cat__desc">{cat.desc}</p>
      </div>
    </div>
    <div className={`menu-cat__grid ${isMobile ? "is-mobile" : ""}`}>
      {cat.items.map((it, i) => (
        <article className="menu-item reveal" key={`${cat.category}-${i}`} style={{ transitionDelay: `${i * 0.05}s` }}>
          <div className="menu-item__media">
            <TaiyakiSVG flavor={it.id} size={isMobile ? 200 : 260} />
            {it.tag && <div className="menu-item__tag">{it.tag}</div>}
          </div>
          <div className="menu-item__body">
            <h3 className="menu-item__name">{it.label}</h3>
            <p className="menu-item__desc">{it.desc}</p>
            <div className="menu-item__price-row">
              <span className="menu-item__price">¥{it.price}</span>
              <span className="menu-item__price-tax">税込</span>
            </div>
          </div>
        </article>
      ))}
    </div>
  </section>
);

const MenuBuyNote = () => (
  <section className="menu-note reveal">
    <div className="menu-note__inner">
      <div className="menu-note__col">
        <div className="menu-note__icon">📦</div>
        <h3>お持ち帰り</h3>
        <p>全店舗でテイクアウト可能。10個以上のご予約は前日までにお電話を。</p>
      </div>
      <div className="menu-note__col">
        <div className="menu-note__icon">🎁</div>
        <h3>ギフト箱</h3>
        <p>+¥100で和柄の専用箱をご用意。手土産・贈り物にもどうぞ。</p>
      </div>
      <div className="menu-note__col">
        <div className="menu-note__icon">📞</div>
        <h3>大口ご注文</h3>
        <p>50個以上は3日前までに各店舗へお電話ください。</p>
      </div>
    </div>
  </section>
);

const MenuPage = ({ isMobile = false }) => {
  useReveal();
  return (
    <div className="page">
      {isMobile ? <Nav variant="mobile" active="menu" /> : <Nav active="menu" />}
      <MenuHero isMobile={isMobile} />
      {FULL_MENU.map((cat, i) => (
        <MenuCategorySection key={i} cat={cat} isMobile={isMobile} />
      ))}
      <MenuBuyNote />
      <Footer />
    </div>
  );
};

Object.assign(window, { MenuPage });