// Kaiseki, Onsen, Niwa, Ichinichi, Reserve, Access, Stories pages

function KaisekiPage({ onNav }) {
  const menu = [
    { no: "一", jp: "先付", en: "Sakizuke", desc: "箱根山系の山葵と、駿河湾の鯛の昆布締め" },
    { no: "二", jp: "八寸", en: "Hassun", desc: "月見の意匠にて、季節の七品を盛り合わせ" },
    { no: "三", jp: "椀物", en: "Wanmono", desc: "鮎と、蓴菜(じゅんさい)の清汁仕立て" },
    { no: "四", jp: "向付", en: "Mukouzuke", desc: "相模湾の鮪と、剣先烏賊の細造り" },
    { no: "五", jp: "焼物", en: "Yakimono", desc: "箱根山の天然山女魚、炭火塩焼" },
    { no: "六", jp: "強肴", en: "Shiizakana", desc: "小田原野菜の炊き合わせ、黒トリュフ" },
    { no: "七", jp: "食事", en: "Shokuji", desc: "小田原の新米、柚子香の留椀、香の物" },
    { no: "八", jp: "水菓子", en: "Mizugashi", desc: "季節の果実と、月彩特製の葛きり" },
  ];
  return (
    <main className="page-enter">
      <PageHero kicker="Kaiseki · 月彩懐石"
        jp={<>山の景色を、<br/>皿に映して。</>}
        en="The landscape, served on a plate."
        sub="月彩の懐石は、八品より十二品。その日に仕入れた食材と、お客さまの体調・お好みに合わせ、毎朝、料理長 鈴木 昭洋が献立を決めます。" />

      <section style={{ padding: "140px 0", background: "var(--moon-3)" }}>
        <div className="w-col" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <span className="kicker">Chef · 料理長</span>
            <h2 className="section-title" style={{ fontSize: "clamp(30px, 3.4vw, 46px)", marginTop: 20 }}>
              鈴木 昭洋<span className="en-sub">Akihiro Suzuki</span>
            </h2>
            <p className="prose" style={{ marginTop: 32 }}>
              京都祇園「松下」にて十八年。箱根に居を移し十年。月彩の厨(くりや)を、開業よりお預かりしています。
            </p>
            <p className="prose" style={{ marginTop: 20 }}>
              「山の景色を、そのまま皿の上に。料理は、その土地で育ったものが、その土地で食べられて、はじめて完成すると思います。」
            </p>
            <div style={{ marginTop: 40, padding: "28px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--serif-en)", fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--ash)", marginBottom: 10 }}>Approach</div>
              <div style={{ fontSize: 15, lineHeight: 2 }}>一汁三菜の精神 / 旬と地の食材 / 盛付に季節の意匠</div>
            </div>
          </div>
          <div>
            <div className="en-up" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 32 }}>Tonight's Menu · 本日の献立</div>
            <ul className="menu-list">
              {menu.map((m) => (
                <li key={m.no}>
                  <span className="m-no">{m.no}</span>
                  <div className="m-jp">{m.jp}</div>
                  <div className="m-en">{m.en}</div>
                  <div className="m-desc">{m.desc}</div>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 48, padding: 28, background: "var(--ink-2)", color: "var(--moon)" }}>
              <div className="en-up" style={{ fontSize: 11, color: "var(--gold-3)", marginBottom: 12 }}>Pairing</div>
              <div style={{ fontSize: 17, lineHeight: 1.9, letterSpacing: "0.1em" }}>地酒三種 + 箱根純米吟醸「月彩」<br/><span style={{ fontFamily: "var(--serif-en)", fontSize: 13, fontStyle: "italic", opacity: 0.7 }}>Sake pairing · ¥12,000 / 名</span></div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 0 140px", background: "var(--moon-3)" }}>
        <div className="w-col">
          <KaisekiArt />
        </div>
      </section>
      <CTABand onNav={onNav} />

      <style>{`
        .menu-list { list-style: none; padding: 0; margin: 0; }
        .menu-list li { display: grid; grid-template-columns: 60px 1fr 1fr 2fr; gap: 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); }
        .menu-list li:last-child { border-bottom: 1px solid var(--line); }
        .m-no { font-size: 34px; color: var(--gold); font-family: var(--serif-jp); }
        .m-jp { font-size: 22px; letter-spacing: 0.2em; }
        .m-en { font-family: var(--serif-en); font-style: italic; font-size: 14px; letter-spacing: 0.3em; color: var(--gold-2); }
        .m-desc { font-size: 14px; color: var(--ink-3); line-height: 1.8; }
      `}</style>
    </main>
  );
}

// ============================================================
function OnsenPage({ onNav }) {
  return (
    <main className="page-enter">
      <section style={{ position: "relative", height: "100vh", minHeight: 700, overflow: "hidden", background: "#0A0F17", color: "var(--moon)" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.9 }}><SceneOnsen /></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(10,15,23,0.3), rgba(10,15,23,0.6))" }} />
        <div className="w-col" style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 var(--pad)" }}>
          <div className="kh-kicker"><span style={{ width: 40, height: 1, background: "var(--gold-3)", display: "inline-block" }} /> Onsen · 温泉</div>
          <h1 className="kh-title" style={{ fontSize: "clamp(100px, 14vw, 200px)" }}>温泉</h1>
          <p className="kh-tag">湯は、黙して、語る。</p>
          <p className="prose" style={{ color: "var(--moon-2)", maxWidth: "48ch", marginTop: 20 }}>
            大涌谷を源(みなもと)とする、上質の単純硫酸塩泉。全棟に、それぞれ異なるしつらえの専用露天風呂を設けています。
          </p>
        </div>
      </section>

      <section style={{ padding: "140px 0", background: "var(--moon-3)" }}>
        <div className="w-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100 }}>
          <div>
            <span className="kicker">Source · 湯の由来</span>
            <h2 className="section-title" style={{ fontSize: "clamp(30px, 3.4vw, 46px)", marginTop: 20 }}>大涌谷から、地下を伝って。</h2>
            <p className="prose" style={{ marginTop: 32 }}>
              月彩の源泉は、大涌谷の蒸気造成ではなく、仙石原のみに湧く天然の湯脈。地表に出た時点で絹のような肌触りを持ち、温度と湯量が年を通じて安定しています。加水・加温を一切行わず、源泉掛け流しにて全棟へ配湯しています。
            </p>
          </div>
          <div>
            <div className="en-up" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 24 }}>Spec</div>
            <table className="ons-table">
              <tbody>
                <tr><th>泉質</th><td>単純硫酸塩泉(弱アルカリ性低張性温泉)</td></tr>
                <tr><th>泉温</th><td>源泉 62.4℃ / 湯船 40〜43℃</td></tr>
                <tr><th>pH</th><td>7.8</td></tr>
                <tr><th>湧出量</th><td>毎分 128L</td></tr>
                <tr><th>効能</th><td>神経痛・筋肉痛・疲労回復・冷え性・美肌</td></tr>
                <tr><th>源泉</th><td>仙石原 月彩 一号源泉・二号源泉</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section style={{ padding: "40px 0 140px", background: "var(--moon-3)" }}>
        <div className="w-col">
          <div className="en-up" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 40 }}>Seven Baths · 七棟の湯</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
            {VILLAS.map((v) => (
              <div key={v.id} style={{ background: v.hue.bg, padding: 28 }}>
                <div style={{ aspectRatio: "4/3", marginBottom: 20 }}>
                  <RoomSketch villa={v} kind="onsen" />
                </div>
                <div className="num" style={{ color: v.hue.accent }}>{v.no}</div>
                <div style={{ fontSize: 28, letterSpacing: "0.1em", color: v.hue.ink, marginTop: 8 }}>{v.jp}</div>
                <div style={{ fontSize: 13, letterSpacing: "0.08em", color: v.hue.ink, opacity: 0.7, marginTop: 8 }}>{v.subtitle}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onNav={onNav} />

      <style>{`
        .ons-table { width: 100%; border-collapse: collapse; }
        .ons-table th, .ons-table td { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: 0.08em; vertical-align: top; }
        .ons-table th { width: 32%; color: var(--ash); font-family: var(--serif-en); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; }
      `}</style>
    </main>
  );
}

// ============================================================
function NiwaPage({ onNav }) {
  return (
    <main className="page-enter">
      <PageHero bg="#E9D5B8" ink="#1B2A3E" accent="#B85434"
        kicker="Garden · 庭と四季"
        jp={<>庭は、<br/>宿の、もうひとつの客。</>}
        en="The garden, our other honored guest."
        sub="敷地は8,400㎡。樹齢百五十年の山紅葉と楢(なら)、そして百年を越える山桜。庭師 池野 宗次郎が、十年をかけて整えました。" />
      <section style={{ padding: "140px 0", background: "var(--moon-3)" }}>
        <div className="w-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100 }}>
          <div>
            <span className="kicker">Gardener · 庭師</span>
            <h2 className="section-title" style={{ fontSize: "clamp(26px, 3vw, 40px)", marginTop: 20 }}>
              池野 宗次郎<span className="en-sub">Sojiro Ikeno</span>
            </h2>
            <p className="prose" style={{ marginTop: 28 }}>
              京都「植治」出身。枯山水ではなく、仙石原の自然そのものを、少しだけ整える──それが月彩の庭のつくり方です。池、苔、敷石、そして八本の古木。それだけ。
            </p>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 40 }}>
              {["敷地面積 8,400㎡", "古木 八本(山桜三・山紅葉三・楢二)", "苔庭 520㎡", "湧き水 月彩小川", "石組み 小田原 根府川石"].map((t, i) => (
                <li key={i} style={{ padding: "18px 0", borderBottom: "1px solid var(--line)", display: "flex", gap: 20, fontSize: 15 }}>
                  <span className="num">0{i+1}</span>{t}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <GardenMap />
          </div>
        </div>
      </section>

      <Seasons />

      <CTABand onNav={onNav} />
    </main>
  );
}

function GardenMap() {
  return (
    <svg viewBox="0 0 600 800" width="100%" style={{ background: "#F1EBD8" }}>
      {/* Boundary */}
      <rect x="20" y="20" width="560" height="760" fill="none" stroke="#1B2A3E" strokeWidth="1" opacity="0.3" />
      {/* Forest trees */}
      <g fill="#6B7A5F" opacity="0.5">
        <circle cx="80" cy="80" r="40" /><circle cx="520" cy="80" r="35" />
        <circle cx="120" cy="680" r="50" /><circle cx="480" cy="700" r="45" />
      </g>
      {/* Path */}
      <path d="M300 780 Q 280 680 320 600 Q 350 500 300 420 Q 260 340 310 250 Q 320 180 300 80" stroke="#8F7349" strokeWidth="10" fill="none" opacity="0.5" />
      <path d="M300 780 Q 280 680 320 600 Q 350 500 300 420 Q 260 340 310 250 Q 320 180 300 80" stroke="#8F7349" strokeWidth="3" fill="none" strokeDasharray="4 8" />
      {/* Villa markers */}
      {[
        { x: 150, y: 180, label: "霞 01" },
        { x: 440, y: 200, label: "蛍 02" },
        { x: 180, y: 340, label: "露 03" },
        { x: 430, y: 380, label: "凩 04" },
        { x: 160, y: 520, label: "雪 05" },
        { x: 440, y: 540, label: "月 06" },
        { x: 300, y: 670, label: "風 07" },
      ].map((p, i) => (
        <g key={i}>
          <rect x={p.x - 28} y={p.y - 18} width="56" height="36" fill="#1B2A3E" />
          <rect x={p.x - 24} y={p.y - 14} width="48" height="28" fill="#F1EBD8" />
          <text x={p.x} y={p.y + 4} fontFamily="Shippori Mincho, serif" fontSize="12" fill="#1B2A3E" textAnchor="middle" letterSpacing="2">{p.label}</text>
        </g>
      ))}
      {/* Kihin */}
      <g>
        <rect x="200" y="700" width="200" height="60" fill="#1B2A3E" />
        <text x="300" y="730" fontFamily="Shippori Mincho, serif" fontSize="18" fill="#B9986A" textAnchor="middle" letterSpacing="6">貴賓棟 宙</text>
        <text x="300" y="750" fontFamily="Cormorant Garamond, serif" fontSize="10" fill="#F1EBD8" textAnchor="middle" letterSpacing="4" fontStyle="italic">THE GRAND VILLA · SORA</text>
      </g>
      {/* Pond */}
      <ellipse cx="300" cy="440" rx="90" ry="40" fill="#1B2A3E" opacity="0.35" />
      <text x="300" y="445" fontFamily="Shippori Mincho, serif" fontSize="11" fill="#1B2A3E" textAnchor="middle" letterSpacing="3" opacity="0.7">月の池</text>
      {/* Compass */}
      <g transform="translate(540 60)">
        <circle r="20" fill="none" stroke="#1B2A3E" strokeWidth="0.6" />
        <line y1="-22" y2="22" stroke="#1B2A3E" strokeWidth="0.6" />
        <text y="-26" fontFamily="Cormorant Garamond, serif" fontSize="9" textAnchor="middle" fill="#1B2A3E">N</text>
      </g>
      {/* Entry */}
      <g>
        <path d="M280 20 L300 10 L320 20" stroke="#1B2A3E" strokeWidth="1.5" fill="none" />
        <text x="300" y="50" fontFamily="Shippori Mincho, serif" fontSize="11" fill="#8F7349" textAnchor="middle" letterSpacing="4">表門</text>
      </g>
    </svg>
  );
}

// ============================================================
function IchinichiPage({ onNav }) {
  const schedule = [
    { t: "15:00", jp: "お迎え", en: "Arrival", desc: "黒塗り車にて箱根湯本駅より二十分。専用の石段を上り、棟へ。仲居が朝摘みの花とお茶でお迎えします。" },
    { t: "16:00", jp: "湯浴み", en: "First bath", desc: "夕刻、専用の露天風呂。陽が落ちる前に、一度、お湯に身をゆだねて。" },
    { t: "18:00", jp: "黄昏", en: "Dusk", desc: "広縁で、季節の酒と小さな肴を。庭がゆっくりと沈んでゆく音を、お耳に。" },
    { t: "19:00", jp: "夕餉", en: "Dinner", desc: "月彩懐石。棟の広縁、または料亭「七曜」にて、二時間を。" },
    { t: "21:30", jp: "星を見る", en: "Stargazing", desc: "燈りを落とし、広縁にて。仙石原は、関東でも屈指の星空。月の夜は、月のみを仰いで。" },
    { t: "23:00", jp: "夜の湯", en: "Night bath", desc: "もう一度、湯へ。月を湯面に映しながら。" },
    { t: "07:00", jp: "朝餉", en: "Breakfast", desc: "朝摘みの野菜と、小田原港の干物。土鍋で炊く、小田原米。" },
    { t: "10:00", jp: "散策", en: "Walk", desc: "仙石原のすすき野、湿生花園、ポーラ美術館。お送りいたします。" },
    { t: "12:00", jp: "お見送り", en: "Departure", desc: "石段の下まで、仲居がお見送りを。次のご滞在を、心よりお待ちしております。" },
  ];
  return (
    <main className="page-enter">
      <PageHero kicker="A Day · 宿での一日"
        jp={<>月に抱かれた、<br/>一日のかたち。</>}
        en="A day at Tsukisai, from dusk to dawn."
        sub="一泊二日のご滞在を、月彩はこう設えます。時間は、あくまで目安。すべては、お客さまのお心のままに。" />
      <section style={{ padding: "120px 0", background: "var(--moon-3)" }}>
        <div className="w-col">
          <div className="timeline">
            {schedule.map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="tl-row">
                  <div className="tl-time">
                    <div className="tl-hhmm">{s.t}</div>
                    <div className="tl-lb">{i < 6 ? "Day 1" : "Day 2"}</div>
                  </div>
                  <div className="tl-dot">
                    <span className="tl-circ" />
                  </div>
                  <div className="tl-body">
                    <div className="tl-jp">{s.jp}</div>
                    <div className="tl-en en">{s.en}</div>
                    <p className="prose" style={{ marginTop: 12, maxWidth: "50ch" }}>{s.desc}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <CTABand onNav={onNav} />
      <style>{`
        .timeline { position: relative; }
        .tl-row { display: grid; grid-template-columns: 160px 40px 1fr; gap: 28px; padding: 40px 0; border-bottom: 1px solid var(--line); }
        .tl-row:first-child { border-top: 1px solid var(--line); }
        .tl-hhmm { font-family: var(--serif-en); font-size: 26px; letter-spacing: 0.2em; color: var(--gold-2); }
        .tl-lb { font-family: var(--serif-en); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ash); margin-top: 6px; }
        .tl-dot { position: relative; display: flex; justify-content: center; padding-top: 8px; }
        .tl-dot::before { content: ""; position: absolute; top: 0; bottom: -40px; left: 50%; width: 1px; background: var(--line); transform: translateX(-50%); }
        .tl-circ { width: 12px; height: 12px; border-radius: 50%; background: var(--moon-3); border: 1px solid var(--gold); position: relative; z-index: 1; }
        .tl-jp { font-size: 28px; letter-spacing: 0.16em; }
        .tl-en { font-size: 14px; letter-spacing: 0.3em; color: var(--gold-2); margin-top: 6px; font-style: italic; }
      `}</style>
    </main>
  );
}

// ============================================================
function ReservePage({ onNav }) {
  const [d, setD] = uS({ villa: "tsuki", adults: 2, nights: 1, name: "", email: "", referral: "", message: "" });
  const [sent, setSent] = uS(false);
  return (
    <main className="page-enter">
      <PageHero bg="var(--ink-2)" ink="var(--moon)" accent="var(--gold-3)"
        kicker="Reserve · ご予約"
        jp={<>完全紹介制にて、<br/>承ります。</>}
        en="By introduction only."
        sub="月彩は、会員および既存のお客さまからのご紹介により、ご予約を承る宿です。下記フォームよりお問い合わせください。三日以内に、お返事を差し上げます。" />

      <section style={{ padding: "120px 0", background: "var(--moon-3)" }}>
        <div className="w-col" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 100 }}>
          <div>
            <span className="kicker">Introduction · 紹介について</span>
            <h2 className="section-title" style={{ fontSize: "clamp(26px, 3vw, 38px)", marginTop: 20 }}>ご紹介者さまのお名前を、お忘れなく。</h2>
            <p className="prose" style={{ marginTop: 28 }}>
              ご予約には、既存のお客さま、または月彩倶楽部 会員様のお名前が必要です。お心当たりのない方は「倶楽部事務局」宛に、ご自身のお立場を添えてお問い合わせください。
            </p>
            <div style={{ marginTop: 40, padding: 28, background: "var(--ink-2)", color: "var(--moon)" }}>
              <div className="en-up" style={{ fontSize: 11, color: "var(--gold-3)", marginBottom: 10 }}>Contact</div>
              <div style={{ fontSize: 17, letterSpacing: "0.12em", lineHeight: 2 }}>
                0460-84-XXXX<br/>
                reserve@tsukisai.jp<br/>
                <span style={{ fontSize: 13, opacity: 0.7 }}>受付 10:00–18:00 / 月曜定休</span>
              </div>
            </div>
          </div>

          <div>
            {sent ? (
              <div style={{ padding: 60, border: "1px solid var(--gold)", textAlign: "center" }}>
                <div style={{ fontSize: 48, color: "var(--gold)", marginBottom: 20 }}>月</div>
                <h3 style={{ fontSize: 28, letterSpacing: "0.16em", marginBottom: 20 }}>お問い合わせを承りました。</h3>
                <p className="prose" style={{ margin: "0 auto" }}>
                  三日以内に、ご連絡差し上げます。<br/>ご縁を賜り、ありがとうございます。
                </p>
              </div>
            ) : (
              <form className="res-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="en-up" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 32 }}>Request a Stay</div>
                <div className="f-grid">
                  <label>
                    <span>ご希望の棟</span>
                    <select value={d.villa} onChange={(e) => setD({...d, villa: e.target.value})}>
                      {VILLAS.map(v => <option key={v.id} value={v.id}>{v.jp} {v.yomi} — {v.price}</option>)}
                      <option value="sora">貴賓棟 宙 Sora — ¥480,000〜</option>
                    </select>
                  </label>
                  <label>
                    <span>ご宿泊人数</span>
                    <select value={d.adults} onChange={(e) => setD({...d, adults: +e.target.value})}>
                      {[1,2,3,4].map(n => <option key={n} value={n}>{n} 名様</option>)}
                    </select>
                  </label>
                  <label>
                    <span>ご宿泊数</span>
                    <select value={d.nights} onChange={(e) => setD({...d, nights: +e.target.value})}>
                      {[1,2,3].map(n => <option key={n} value={n}>{n} 泊</option>)}
                    </select>
                  </label>
                  <label>
                    <span>ご希望日</span>
                    <input type="date" defaultValue="2026-05-12" />
                  </label>
                  <label className="wide">
                    <span>お名前</span>
                    <input type="text" value={d.name} onChange={(e) => setD({...d, name: e.target.value})} placeholder="山田 太郎" />
                  </label>
                  <label className="wide">
                    <span>メールアドレス</span>
                    <input type="email" value={d.email} onChange={(e) => setD({...d, email: e.target.value})} placeholder="name@example.jp" />
                  </label>
                  <label className="wide">
                    <span>ご紹介者 / 会員番号</span>
                    <input type="text" value={d.referral} onChange={(e) => setD({...d, referral: e.target.value})} placeholder="山田 花子 様 より / M-XXX-XXXX" />
                  </label>
                  <label className="wide">
                    <span>ご要望</span>
                    <textarea rows={4} value={d.message} onChange={(e) => setD({...d, message: e.target.value})} placeholder="記念日、食事制限、お迎えのご相談など" />
                  </label>
                </div>
                <button type="submit" className="btn-solid" style={{ marginTop: 36 }}>
                  問い合わせを送る →
                </button>
                <div style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--ash)", marginTop: 20, lineHeight: 1.8 }}>
                  ※ ご予約確定には、倶楽部事務局からのご確認メールをもってといたします。<br/>※ キャンセルポリシーは、確認メールにてご案内いたします。
                </div>
              </form>
            )}
          </div>
        </div>
      </section>

      <style>{`
        .res-form { padding: 44px; background: var(--moon-3); border: 1px solid var(--line); }
        .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .res-form label { display: flex; flex-direction: column; gap: 10px; font-size: 12px; letter-spacing: 0.2em; color: var(--ash); font-family: var(--serif-en); text-transform: uppercase; }
        .res-form label.wide { grid-column: 1 / -1; }
        .res-form input, .res-form select, .res-form textarea {
          font-family: var(--serif-jp); font-size: 15px; letter-spacing: 0.08em;
          padding: 14px 16px; border: 1px solid var(--line); background: var(--moon-3); color: var(--ink);
          outline: none; transition: border-color .3s;
        }
        .res-form input:focus, .res-form select:focus, .res-form textarea:focus { border-color: var(--gold); }
      `}</style>
    </main>
  );
}

// ============================================================
function AccessPage({ onNav }) {
  return (
    <main className="page-enter">
      <PageHero kicker="Access · 道程"
        jp={<>箱根仙石原、<br/>薄の原の奥へ。</>}
        en="To the end of the silver grass."
        sub="新宿より小田急ロマンスカーで箱根湯本。そこから、黒塗りの車で二十分。石段を上れば、門。門の向こうに、月彩。" />
      <section style={{ padding: "120px 0", background: "var(--moon-3)" }}>
        <div className="w-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <span className="kicker">By Train · お電車にて</span>
            <ul className="access-list">
              <li><span className="a-time">85分</span><div><div className="a-jp">新宿 — 箱根湯本</div><div className="a-en">Odakyu Romancecar</div></div></li>
              <li><span className="a-time">20分</span><div><div className="a-jp">箱根湯本 — 月彩</div><div className="a-en">Private car (included)</div></div></li>
            </ul>
            <span className="kicker" style={{ marginTop: 40, display: "inline-block" }}>By Car · お車にて</span>
            <ul className="access-list">
              <li><span className="a-time">90分</span><div><div className="a-jp">東京 IC — 御殿場 IC</div><div className="a-en">Tomei Expressway</div></div></li>
              <li><span className="a-time">25分</span><div><div className="a-jp">御殿場 IC — 月彩</div><div className="a-en">Via Sengoku Pass</div></div></li>
            </ul>
            <div style={{ marginTop: 48, padding: 28, background: "var(--ink-2)", color: "var(--moon)" }}>
              <div className="en-up" style={{ fontSize: 11, color: "var(--gold-3)", marginBottom: 10 }}>Address</div>
              <div style={{ fontSize: 17, letterSpacing: "0.12em", lineHeight: 1.9 }}>
                〒250-0631<br/>
                神奈川県足柄下郡箱根町仙石原 X-XXXX<br/>
                <span style={{ opacity: 0.7, fontSize: 13 }}>※ 看板・目印はございません。ご予約時に地図をお送りします。</span>
              </div>
            </div>
          </div>
          <div>
            <AccessMap />
          </div>
        </div>
      </section>
      <CTABand onNav={onNav} />
      <style>{`
        .access-list { list-style: none; padding: 0; margin: 20px 0 0; }
        .access-list li { display: flex; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
        .a-time { font-family: var(--serif-en); font-size: 24px; font-style: italic; color: var(--gold); letter-spacing: 0.1em; min-width: 80px; }
        .a-jp { font-size: 18px; letter-spacing: 0.14em; }
        .a-en { font-family: var(--serif-en); font-style: italic; font-size: 13px; letter-spacing: 0.28em; color: var(--ash); margin-top: 4px; }
      `}</style>
    </main>
  );
}

function AccessMap() {
  return (
    <svg viewBox="0 0 600 700" width="100%" style={{ background: "#1B2A3E", color: "#F1EBD8" }}>
      {/* ink wash Mt Fuji */}
      <g opacity="0.2">
        <path d="M50 280 L250 100 L450 280 L400 260 L250 140 L100 260 Z" fill="#F1EBD8" />
        <path d="M200 160 L250 100 L300 160 L290 170 L250 130 L210 170 Z" fill="#FBF7EB" />
      </g>
      {/* Lake Ashi */}
      <path d="M60 580 Q 140 540 200 570 Q 270 600 240 640 Q 180 680 120 660 Q 60 640 60 580 Z" fill="#283B53" opacity="0.6" />
      <text x="150" y="620" fontFamily="Shippori Mincho, serif" fontSize="14" fill="#F1EBD8" opacity="0.6" letterSpacing="6">芦ノ湖</text>
      {/* Roads */}
      <path d="M560 50 L500 150 L420 260 L380 380 L350 500 L300 620" stroke="#B9986A" strokeWidth="2" strokeDasharray="4 6" fill="none" opacity="0.8" />
      {/* Stations */}
      <g>
        <circle cx="560" cy="50" r="5" fill="#B9986A" />
        <text x="545" y="40" fontFamily="Shippori Mincho, serif" fontSize="12" fill="#F1EBD8" textAnchor="end">御殿場 IC</text>
      </g>
      <g>
        <circle cx="520" cy="650" r="5" fill="#B9986A" />
        <text x="510" y="640" fontFamily="Shippori Mincho, serif" fontSize="12" fill="#F1EBD8" textAnchor="end">箱根湯本駅</text>
        <path d="M520 650 Q 450 620 380 560" stroke="#B9986A" strokeWidth="1.5" strokeDasharray="3 5" fill="none" opacity="0.8" />
      </g>
      {/* Susuki field */}
      <g opacity="0.4">
        {Array.from({length: 20}).map((_, i) => (
          <path key={i} d={`M${200 + i * 12} 450 Q ${202 + i*12} 420 ${200 + i*12} 380`} stroke="#F1EBD8" strokeWidth="1" fill="none" />
        ))}
      </g>
      <text x="260" y="470" fontFamily="Shippori Mincho, serif" fontSize="11" fill="#F1EBD8" opacity="0.5" letterSpacing="4">仙石原 薄原</text>
      {/* Tsukisai marker */}
      <g>
        <circle cx="350" cy="410" r="36" fill="none" stroke="#B9986A" strokeWidth="1" opacity="0.6" />
        <circle cx="350" cy="410" r="24" fill="none" stroke="#B9986A" strokeWidth="1" />
        <circle cx="350" cy="410" r="6" fill="#B9986A" />
        <text x="350" y="370" fontFamily="Shippori Mincho, serif" fontSize="20" fill="#B9986A" textAnchor="middle" letterSpacing="6">月彩</text>
        <text x="350" y="460" fontFamily="Cormorant Garamond, serif" fontSize="10" fill="#B9986A" textAnchor="middle" letterSpacing="4" fontStyle="italic">TSUKISAI</text>
      </g>
      {/* compass */}
      <g transform="translate(540 620)" opacity="0.6">
        <circle r="18" fill="none" stroke="#F1EBD8" strokeWidth="0.6" />
        <line y1="-20" y2="20" stroke="#F1EBD8" strokeWidth="0.6" />
        <text y="-24" fontFamily="Cormorant Garamond, serif" fontSize="9" textAnchor="middle" fill="#F1EBD8">N</text>
      </g>
    </svg>
  );
}

// ============================================================
function StoriesPage({ onNav }) {
  const posts = [
    { n: "07", d: "APR 2026", t: "Spring", jp: "桜の頃、露天風呂に花弁が落ちる夜のこと", en: "When petals fall into the bath, at night", excerpt: "四月の中旬、敷地の北東、『霞』の棟の前にある一本の古木の山桜が、満開を迎えます。その夜、湯に浸かっていると、一枚、また一枚と、花弁が湯面に落ちてくるのです。..." },
    { n: "06", d: "MAR 2026", t: "Cuisine", jp: "料理長・鈴木 昭洋、春の山菜を語る", en: "On spring sansai, by Chef Suzuki", excerpt: "春の山菜は、苦みが命です。苦みは、冬の間に溜め込んだものを、身体から出してくれます。月彩では、その苦みを少しも削ぎ落とさず、..." },
    { n: "05", d: "FEB 2026", t: "Design", jp: "雪見障子という、日本のしつらえ", en: "Yukimi shoji — a Japanese invention", excerpt: "雪見障子とは、下半分だけを上下にスライドできる障子のこと。『雪』の棟では、内湯に浸かったまま、この障子を開けることができます。..." },
    { n: "04", d: "JAN 2026", t: "Garden", jp: "庭師 池野 宗次郎、月彩の庭を語る", en: "The garden, by Sojiro Ikeno", excerpt: "この庭をつくるのに十年。そしてこれから、百年かけて、育てていきます。..." },
    { n: "03", d: "DEC 2025", t: "Onsen", jp: "湯のこと、大涌谷のこと", en: "On the waters of Owakudani", excerpt: "月彩の源泉は、地表に出た時点で62.4℃。加水も加温も必要ない温度です。..." },
    { n: "02", d: "NOV 2025", t: "Stay", jp: "月見のための、中秋の夜", en: "A night for the harvest moon", excerpt: "『月』の棟は、月の出る方角に広縁が開いています。中秋の名月の夜、露天風呂に浸かったまま、..." },
    { n: "01", d: "OCT 2025", t: "Opening", jp: "月彩、開業のご挨拶", en: "Opening letter", excerpt: "月彩は、二〇二五年十月、箱根仙石原に開業いたしました。七棟の離れと、ひとつの貴賓棟。..." },
  ];
  return (
    <main className="page-enter">
      <PageHero kicker="Stories · 月彩の綴り"
        jp={<>月彩の、<br/>静かな綴り。</>}
        en="Quiet notes, from our innkeepers."
        sub="宿のこと、庭のこと、料理のこと、そして箱根のこと。月彩の仲居と料理長、そして庭師が、月に一度、静かに綴ります。" />
      <section style={{ padding: "120px 0", background: "var(--moon-3)" }}>
        <div className="w-col">
          <article className="feat-story">
            <div className="feat-media"><SceneSusuki /></div>
            <div className="feat-body">
              <div className="num" style={{ color: "var(--gold)" }}>ISSUE 07 · APR 2026</div>
              <h2 style={{ fontSize: "clamp(32px, 3.8vw, 48px)", letterSpacing: "0.12em", marginTop: 20, lineHeight: 1.4 }}>
                桜の頃、露天風呂に<br/>花弁が落ちる夜のこと
              </h2>
              <div className="en" style={{ marginTop: 20, fontSize: 15, color: "var(--gold-2)" }}>When petals fall into the bath, at night</div>
              <p className="prose" style={{ marginTop: 28 }}>
                四月の中旬、敷地の北東、『霞』の棟の前にある一本の古木の山桜が、満開を迎えます。その夜、湯に浸かっていると、一枚、また一枚と、花弁が湯面に落ちてくるのです。すくい上げようとしても、指の間からすり抜けていく。その儚さ(はかなさ)だけが、春の、本当の贅沢なのかもしれません——
              </p>
              <a className="btn-ghost" style={{ marginTop: 36 }} href="#">Read more →</a>
            </div>
          </article>

          <div className="stories-grid">
            {posts.slice(1).map((p) => (
              <Reveal key={p.n}>
                <a href="#" className="st-card">
                  <div className="st-num">ISSUE {p.n} · {p.d}</div>
                  <div className="st-tag">— {p.t}</div>
                  <div className="st-jp">{p.jp}</div>
                  <div className="st-en en">{p.en}</div>
                  <p className="prose" style={{ marginTop: 14, fontSize: 13, lineHeight: 1.9 }}>{p.excerpt}</p>
                  <div className="st-more">Read →</div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <style>{`
        .feat-story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; padding-bottom: 100px; margin-bottom: 80px; border-bottom: 1px solid var(--line); }
        .feat-media { aspect-ratio: 4/5; background: #0A0F17; position: relative; overflow: hidden; }
        .feat-body { display: flex; flex-direction: column; justify-content: center; }
        .stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px 60px; }
        .st-card { display: block; padding: 32px 0; border-top: 1px solid var(--line); transition: padding-left .4s; }
        .st-card:hover { padding-left: 12px; }
        .st-num { font-family: var(--serif-en); font-size: 10px; letter-spacing: 0.36em; color: var(--ash); text-transform: uppercase; }
        .st-tag { font-family: var(--serif-en); font-style: italic; font-size: 12px; color: var(--gold); letter-spacing: 0.2em; margin-top: 6px; }
        .st-jp { font-size: 22px; letter-spacing: 0.1em; margin-top: 16px; color: var(--ink); line-height: 1.5; }
        .st-en { font-size: 12px; letter-spacing: 0.28em; color: var(--gold-2); margin-top: 8px; }
        .st-more { margin-top: 20px; font-family: var(--serif-en); font-size: 11px; letter-spacing: 0.36em; color: var(--gold); text-transform: uppercase; }
        @media (max-width: 900px) { .feat-story { grid-template-columns: 1fr; } }
      `}</style>
    </main>
  );
}

Object.assign(window, { KaisekiPage, OnsenPage, NiwaPage, GardenMap, IchinichiPage, ReservePage, AccessPage, AccessMap, StoriesPage });