// HOME page — hero + 3 content sections
function PageHome({ onNav }) {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero grain">
        <img
          src="maguro.jpg"
          alt="鮨 華曜 - 本鮪握り"
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center 45%",
            zIndex: 0,
          }}
        />
        <div className="hero-vignette" style={{ zIndex: 1 }}></div>

        <div className="chapter">
          <div className="num">I</div>
          <div className="of">/ VIII</div>
          <div className="name">表紙</div>
        </div>

        <div className="hero-content">
          <div className="hero-tate-left">
            <div className="tate text">銀座六丁目・昭和六十二年創業</div>
          </div>
          <div className="hero-tate-right">
            <div className="tate text">一期一会・江戸前の仕事</div>
          </div>

          <div className="hero-center">
            <div className="hero-eyebrow">Sushi Kayou · Ginza · Est. 1987</div>
            <h1 className="hero-title">
              <span className="sm">鮨</span>
              華 曜
            </h1>
            <div className="hero-sub">An Omakase Experience in Ginza</div>
            <button className="btn-kin" onClick={() => onNav("reservation")}>
              御予約を承る
              <span className="arr">→</span>
            </button>
          </div>

          <div className="hero-scroll">
            <div className="line"></div>
            <div className="label">Scroll</div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section className="home-section">
        <div className="home-section-inner">
          <div className="home-philosophy">
            <div className="tate">一 期 一 會</div>
            <div className="center">
              <div className="small">Our Philosophy · 心得</div>
              <h2>其の一瞬に、<br />誠を尽くす。</h2>
              <p>
                握りは、一瞬の所作にすべてを込める。米の温度、魚の締まり、手のひらの湿り。
                その日その刻にしか為し得ぬ一貫を、八席のお客様だけに捧げます。
              </p>
              <p style={{ fontFamily: "var(--f-latin)", fontStyle: "italic", color: "var(--kin)", letterSpacing: ".3em", fontSize: 14, marginTop: 32 }}>
                — Takeshi Hanami, Third-generation Shokunin
              </p>
            </div>
            <div className="tate">歳 月 不 待</div>
          </div>
        </div>
      </section>

      {/* SPLIT — Omakase */}
      <section className="home-split">
        <div className="visual"><Ph kind="plate" /></div>
        <div className="copy">
          <div className="small">Chapter II · お任せ</div>
          <h2>十五貫の道行き</h2>
          <p>
            季節の走り・盛り・名残を映す、十五貫のお任せ。
            豊洲より厳選した魚と、仕込みに三日をかけるシャリ。
            お一人様九万八千円、十九時一斉の二回転制にて。
          </p>
          <p>
            その日の仕入れにより、先付から赤だしまで十八品目。
            お酒も店主が組み立てます。
          </p>
          <div style={{ marginTop: 40 }}>
            <button className="btn-kin" onClick={() => onNav("omakase")}>
              コースを見る
              <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* SPLIT — Chef */}
      <section className="home-split" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <div className="copy">
          <div className="small">Chapter III · 店主</div>
          <h2>花見 剛<br /><span style={{ fontSize: 20, letterSpacing: ".4em", color: "var(--kin)" }}>三代目</span></h2>
          <p>
            祖父・父の暖簾を継ぎ、三十七年。
            朝四時の豊洲から、夜の〆まで、
            一日の全てを鮨に捧げる男の、静かな矜持。
          </p>
          <p>
            ミシュラン三つ星を十二年連続で保持。
            世界五十のベスト・レストラン、二〇二四年版にてアジア第四位。
          </p>
          <div style={{ marginTop: 40 }}>
            <button className="btn-kin" onClick={() => onNav("shokunin")}>
              店主を知る
              <span className="arr">→</span>
            </button>
          </div>
        </div>
        <div className="visual"><Ph kind="chef" /></div>
      </section>

      {/* FEATURE — washi */}
      <section className="home-feature">
        <div className="small">Invitation · 御案内</div>
        <h2>八席のみの<br />静かなる晩餐</h2>
        <p>
          御予約は三ヶ月前の朔日、午前十時より承ります。
          直接のお電話、または御予約フォームより。
        </p>
        <button className="btn-ink" onClick={() => onNav("reservation")}>
          御予約はこちら <span>→</span>
        </button>
      </section>
    </div>
  );
}

Object.assign(window, { PageHome });