// SAKE + INTERIOR pages
function PageSake() {
  const [tab, setTab] = React.useState("junmai");
  const data = {
    junmai: [
      ["Yamagata · 山形", "十四代", "Juyondai", "純米大吟醸", "上品な吟醸香、米の旨味が花開く。"],
      ["Niigata · 新潟", "〆張鶴", "Shimeharitsuru", "純米吟醸", "辛口淡麗、刺身の脇役として。"],
      ["Yamaguchi · 山口", "獺祭 磨き二割三分", "Dassai 23", "純米大吟醸", "華やかな吟醸香、優雅な余韻。"],
      ["Hyogo · 兵庫", "剣菱", "Kenbishi", "黒松", "五百年の伝統、熟成の深み。"],
      ["Akita · 秋田", "新政 No.6", "Aramasa", "生酛純米", "きめ細やかな泡立ち、果実香。"],
      ["Fukushima · 福島", "飛露喜", "Hiroki", "特別純米", "柔らかな口当たり、米の甘み。"],
    ],
    koshu: [
      ["Hyogo · 兵庫", "達磨正宗 二十年古酒", "Darumamasamune", "二十年熟成", "琥珀色、蜜と木樽の風韻。"],
      ["Ishikawa · 石川", "遊穂 古酒", "Yuho", "十年熟成", "酸と甘みが溶け合う時間の味。"],
      ["Yamagata · 山形", "初孫 貴醸酒", "Hatsumago", "貴醸酒", "濃密、甘美、食後の一献に。"],
    ],
    sparkling: [
      ["Nagano · 長野", "水尾 スパークリング", "Mizuo", "発泡純米", "きめ細やかな泡、食前酒に。"],
      ["Kyoto · 京都", "玉乃光 TAMA", "Tamanohikari", "発泡", "酸味が鋭く、握りの前段に。"],
    ],
  };
  return (
    <div className="page page-enter">
      <div className="page-wrap">
        <div className="page-header">
          <div className="ph-num">IV / VIII</div>
          <div className="ph-center">
            <div className="ph-jp">日本酒</div>
            <div className="ph-en">Sake Selection</div>
          </div>
          <div className="ph-kan">全国六十銘柄</div>
        </div>

        <div className="sake-hero">
          <div className="copy">
            <h2>
              鮨に寄り添う、<br />
              六十の銘柄。
            </h2>
            <p>
              全国の蔵元より、店主自ら選び抜いた純米酒を中心に揃えました。
              握りの流れに合わせ、先付には穏やかな吟醸、中盤に辛口、
              大とろには古酒の濃密——と、六杯前後を組み立てます。
            </p>
            <p style={{ marginTop: 24 }}>
              お任せの酒類は八千円より。ペアリングは二万円より承ります。
            </p>
          </div>
          <div className="sake-bottles">
            <Ph kind="sake" />
          </div>
        </div>

        <div className="sake-list">
          <h3>酒銘</h3>
          <div className="sake-tabs">
            <button className={tab === "junmai" ? "on" : ""} onClick={() => setTab("junmai")}>純米 · Junmai</button>
            <button className={tab === "koshu" ? "on" : ""} onClick={() => setTab("koshu")}>古酒 · Koshu</button>
            <button className={tab === "sparkling" ? "on" : ""} onClick={() => setTab("sparkling")}>発泡 · Sparkling</button>
          </div>
          <div className="sake-grid">
            {data[tab].map(([region, name, rom, type, note]) => (
              <div key={name} className="sake-item">
                <div className="region">{region}</div>
                <div className="nm">{name}</div>
                <div className="ty">{rom} · {type}</div>
                <div className="note">{note}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function PageInterior() {
  return (
    <div className="page page-enter">
      <div className="page-wrap">
        <div className="page-header">
          <div className="ph-num">V / VIII</div>
          <div className="ph-center">
            <div className="ph-jp">店内</div>
            <div className="ph-en">Interior</div>
          </div>
          <div className="ph-kan">八席の静謐</div>
        </div>

        <div className="interior-intro">
          <h2>
            樹齢二百年の檜、<br />
            一枚板の鮨カウンター。
          </h2>
          <p>
            木曾の山中より切り出した樹齢二百年の檜を、一枚の板に。
            照明は手漉き和紙の行灯のみ。音は、石臼で摺るわさびと、店主の包丁の音だけ。
          </p>
        </div>

        <div className="gallery">
          <div className="tile t-wide">
            <Ph kind="counter" slotId="int-counter" />
            <div className="cap"><div className="en">The Counter</div><div className="jp">檜一枚板</div></div>
          </div>
          <div className="tile t-tall">
            <Ph kind="tatami" slotId="int-private" />
            <div className="cap"><div className="en">Private Room</div><div className="jp">離れ・四席</div></div>
          </div>
          <div className="tile t-sq">
            <Ph kind="fish" slotId="int-tanebako" />
            <div className="cap"><div className="en">Tane-bako</div><div className="jp">種箱</div></div>
          </div>
          <div className="tile t-sq">
            <Ph kind="washi" slotId="int-noren" />
            <div className="cap"><div className="en">Noren</div><div className="jp">暖簾</div></div>
          </div>
          <div className="tile t-sq">
            <Ph kind="plate" slotId="int-kuroraku" />
            <div className="cap"><div className="en">Kuroraku ware</div><div className="jp">黒楽の皿</div></div>
          </div>
          <div className="tile t-sq">
            <Ph kind="sake" slotId="int-sakazuki" />
            <div className="cap"><div className="en">Sakazuki</div><div className="jp">盃</div></div>
          </div>
          <div className="tile t-wide">
            <Ph kind="moon" slotId="int-tokonoma" />
            <div className="cap"><div className="en">Tokonoma</div><div className="jp">床の間 · 卯月の掛軸</div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageSake, PageInterior });