// RESERVATION + ACCESS + JOURNAL
function PageReservation() {
  const [seat, setSeat] = React.useState("counter");
  const [day, setDay] = React.useState(17);
  const [guests, setGuests] = React.useState(2);
  const [time, setTime] = React.useState("18:00");

  const days = [];
  // April layout: 1st = Wed. 4 leading blanks (Sun=0, Mon=1, Tue=2, Wed=3)
  for (let i = 0; i < 3; i++) days.push({ d: "", muted: true });
  for (let d = 1; d <= 30; d++) {
    // Closed Sundays (cols 0, 7, 14, 21, 28)
    const pos = (3 + d - 1) % 7;
    const isSun = pos === 0;
    const full = [2, 4, 11, 15, 22, 26].includes(d);
    days.push({ d, muted: false, full: isSun || full, sel: d === day });
  }

  return (
    <div className="page page-enter">
      <div className="page-wrap">
        <div className="page-header">
          <div className="ph-num">VI / VIII</div>
          <div className="ph-center">
            <div className="ph-jp">御予約</div>
            <div className="ph-en">Reservation</div>
          </div>
          <div className="ph-kan">八席限定</div>
        </div>

        <div className="reserve-grid">
          <div className="reserve-info">
            <h2>御来店の御案内</h2>
            <p>
              御予約は、ご来店希望日の三ヶ月前、同日午前十時より承ります。
              御予約は一名様より八名様まで、二名様以上の場合は同卓扱いとなります。
            </p>
            <p>
              卓立ては一斉二回転制、十八時と二十一時の開始となります。
              所要時間は約二時間半、開始時刻に遅れる場合はあらかじめ御連絡ください。
            </p>

            <div className="policy">
              <h4>Policy · 御約束</h4>
              <ul>
                <li>御予約の変更・取消は三日前まで承ります。</li>
                <li>前日・当日の取消は全額頂戴いたします。</li>
                <li>香水、写真撮影はお控えください。</li>
                <li>お子様は小学生以上、御同伴のお客様に限ります。</li>
                <li>服装は、ビジネスカジュアル以上を推奨いたします。</li>
              </ul>
            </div>

            <div style={{ marginTop: 48 }}>
              <div className="numeral" style={{ fontSize: 12, marginBottom: 8 }}>By Telephone · お電話にて</div>
              <div style={{ fontFamily: "var(--f-mincho)", fontSize: 32, letterSpacing: ".2em", color: "var(--kin)" }}>03-0000-0000</div>
              <div style={{ fontFamily: "var(--f-latin)", fontStyle: "italic", fontSize: 12, letterSpacing: ".3em", color: "rgba(245,240,230,.5)", marginTop: 8 }}>
                15:00 – 22:00 · closed Sundays
              </div>
            </div>
          </div>

          <div className="reserve-form">
            <div className="form-head">
              <div className="ttl">御予約フォーム</div>
              <div className="sub">Reservation Form</div>
            </div>

            <div className="field">
              <label>御希望日 · Date</label>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0" }}>
                <span style={{ fontFamily: "var(--f-mincho)", fontSize: 16, letterSpacing: ".2em" }}>
                  卯月 {day}日 · April {day}, 2026
                </span>
                <span style={{ fontFamily: "var(--f-latin)", fontStyle: "italic", color: "var(--kin-deep)", fontSize: 12, letterSpacing: ".3em" }}>
                  ← / →
                </span>
              </div>
              <div className="date-picker">
                {["S","M","T","W","T","F","S"].map((c, i) => <div key={"dow"+i} className="dow">{c}</div>)}
                {days.map((x, i) => (
                  <div key={i}
                    className={
                      "day" +
                      (x.muted ? " muted" : "") +
                      (x.full ? " full" : x.muted ? "" : " avail") +
                      (x.sel ? " on" : "")
                    }
                    onClick={() => !x.muted && !x.full && setDay(x.d)}
                  >
                    {x.d}
                    {!x.muted && !x.full && !x.sel && <span className="dot" />}
                  </div>
                ))}
              </div>
            </div>

            <div className="field">
              <label>お席 · Seating</label>
              <div className="seat-select">
                <div className={"seat-opt" + (seat === "counter" ? " on" : "")} onClick={() => setSeat("counter")}>
                  <div className="jp">鮨カウンター</div>
                  <div className="en">Counter · 8 seats</div>
                </div>
                <div className={"seat-opt" + (seat === "room" ? " on" : "")} onClick={() => setSeat("room")}>
                  <div className="jp">離れ</div>
                  <div className="en">Private · 4 seats</div>
                </div>
              </div>
            </div>

            <div className="field-row">
              <div className="field">
                <label>御人数 · Guests</label>
                <select value={guests} onChange={e => setGuests(+e.target.value)}>
                  {[1,2,3,4,5,6,7,8].map(n => <option key={n}>{n}</option>)}
                </select>
              </div>
              <div className="field">
                <label>お時間 · Time</label>
                <select value={time} onChange={e => setTime(e.target.value)}>
                  <option>18:00</option>
                  <option>21:00</option>
                </select>
              </div>
            </div>

            <div className="field-row">
              <div className="field"><label>御芳名 · Name</label><input type="text" placeholder="花見 様" /></div>
              <div className="field"><label>お電話 · Phone</label><input type="tel" placeholder="090-0000-0000" /></div>
            </div>

            <div className="field">
              <label>メール · Email</label>
              <input type="email" placeholder="your@email.jp" />
            </div>

            <div className="field">
              <label>御要望 · Notes (アレルギー等)</label>
              <input type="text" placeholder="" />
            </div>

            <button className="submit">御予約を確認する → Confirm Reservation</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PageAccess() {
  return (
    <div className="page page-enter">
      <div className="page-wrap">
        <div className="page-header">
          <div className="ph-num">VII / VIII</div>
          <div className="ph-center">
            <div className="ph-jp">所在</div>
            <div className="ph-en">Access</div>
          </div>
          <div className="ph-kan">銀座六丁目</div>
        </div>

        <div className="access-grid">
          <div className="access-info">
            <h2>御足労を、感謝いたします。</h2>

            <div className="row">
              <div className="k">Address</div>
              <div className="v"><span className="jp">東京都中央区銀座六丁目八番 華曜ビル 地下一階</span><span className="en">B1, Kayou Bldg., 6-8 Ginza, Chuo-ku, Tokyo 104-0061</span></div>
            </div>
            <div className="row">
              <div className="k">Tel</div>
              <div className="v"><span className="jp" style={{ color: "var(--kin)", fontSize: 20, letterSpacing: ".2em" }}>03-0000-0000</span><span className="en">受付 15:00 – 22:00</span></div>
            </div>
            <div className="row">
              <div className="k">Hours</div>
              <div className="v"><span className="jp">十八時 一斉 / 二十一時 一斉</span><span className="en">Seatings: 18:00 · 21:00</span></div>
            </div>
            <div className="row">
              <div className="k">Closed</div>
              <div className="v"><span className="jp">日曜日・祝日・盆暮</span><span className="en">Sundays · National Holidays</span></div>
            </div>
            <div className="row">
              <div className="k">Subway</div>
              <div className="v"><span className="jp">銀座駅 A2出口 徒歩三分<br />東銀座駅 A1出口 徒歩五分</span><span className="en">Ginza Stn. A2 · 3 min walk</span></div>
            </div>
            <div className="row">
              <div className="k">Dress</div>
              <div className="v"><span className="jp">ビジネスカジュアル以上</span><span className="en">Smart casual or above · no fragrance</span></div>
            </div>
            <div className="row">
              <div className="k">Payment</div>
              <div className="v"><span className="jp">現金・主要クレジット・QR決済</span><span className="en">Cash · Visa · Amex · JCB · PayPay</span></div>
            </div>
          </div>

          <div className="map-box">
            <div className="stamp">
              <div className="nm">鮨 華曜</div>
              <div className="ad">GINZA · 6-8</div>
            </div>
            <svg viewBox="0 0 400 500" style={{ width: "100%", height: "100%" }}>
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(201,169,97,.08)" strokeWidth=".5" />
                </pattern>
                <filter id="glow"><feGaussianBlur stdDeviation="3" /></filter>
              </defs>
              <rect width="400" height="500" fill="#0A0706" />
              <rect width="400" height="500" fill="url(#grid)" />

              {/* Streets — stylized */}
              <g stroke="#2A2420" strokeWidth="18" fill="none">
                <line x1="0" y1="200" x2="400" y2="200" />
                <line x1="0" y1="340" x2="400" y2="340" />
                <line x1="150" y1="0" x2="150" y2="500" />
                <line x1="280" y1="0" x2="280" y2="500" />
              </g>
              <g stroke="#1A1612" strokeWidth="10" fill="none">
                <line x1="0" y1="90" x2="400" y2="90" />
                <line x1="0" y1="440" x2="400" y2="440" />
                <line x1="60" y1="0" x2="60" y2="500" />
                <line x1="360" y1="0" x2="360" y2="500" />
              </g>
              {/* Street names */}
              <text x="380" y="196" fontFamily="serif" fontSize="10" fill="#C9A961" opacity=".6" textAnchor="end" style={{ fontStyle: "italic", letterSpacing: ".2em" }}>CHUO DORI · 中央通り</text>
              <text x="380" y="336" fontFamily="serif" fontSize="10" fill="#C9A961" opacity=".6" textAnchor="end" style={{ fontStyle: "italic", letterSpacing: ".2em" }}>HARUMI DORI · 晴海通り</text>

              {/* Subway stations */}
              <g>
                <circle cx="150" cy="340" r="6" fill="#C9A961" />
                <text x="140" y="362" fontFamily="serif" fontSize="10" fill="#C9A961" textAnchor="end" style={{ letterSpacing: ".15em" }}>銀座</text>
              </g>
              <g>
                <circle cx="280" cy="340" r="6" fill="#C9A961" opacity=".7" />
                <text x="290" y="362" fontFamily="serif" fontSize="10" fill="#C9A961" opacity=".7" style={{ letterSpacing: ".15em" }}>東銀座</text>
              </g>

              {/* Location pin */}
              <g transform="translate(210 260)" filter="url(#glow)">
                <circle cx="0" cy="0" r="24" fill="#C9A961" opacity=".3" />
              </g>
              <g transform="translate(210 260)">
                <circle cx="0" cy="0" r="14" fill="none" stroke="#C9A961" strokeWidth="1" opacity=".7" />
                <circle cx="0" cy="0" r="8" fill="#C9A961" />
                <circle cx="0" cy="0" r="3" fill="#0A0706" />
              </g>
              <g transform="translate(210 260)">
                <line x1="0" y1="-14" x2="0" y2="-30" stroke="#C9A961" strokeWidth=".5" />
                <text x="0" y="-40" fontFamily="serif" fontSize="14" fill="#F5F0E6" textAnchor="middle" style={{ letterSpacing: ".3em" }}>華曜</text>
                <text x="0" y="-54" fontFamily="serif" fontSize="8" fill="#C9A961" textAnchor="middle" style={{ fontStyle: "italic", letterSpacing: ".3em" }}>KAYOU</text>
              </g>

              {/* Compass */}
              <g transform="translate(50 60)" opacity=".6">
                <circle cx="0" cy="0" r="18" fill="none" stroke="#C9A961" strokeWidth=".5" />
                <path d="M 0 -14 L 3 0 L 0 14 L -3 0 Z" fill="#C9A961" />
                <text x="0" y="-22" fontFamily="serif" fontSize="9" fill="#C9A961" textAnchor="middle">N</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function PageJournal() {
  const side = [
    ["卯月 · April 12","初鰹を仕入れた、その朝の話"],
    ["弥生 · March 28","八十年続く、米問屋の選択"],
    ["弥生 · March 14","春子鯛、走りの一番手"],
    ["如月 · February 22","赤酢——ふたつの歳月"],
  ];
  const grid = [
    ["卯月 · April","走り","Cuttlefish Season","墨烏賊、桜前線とともに","春の墨烏賊は、透き通るほど薄い身に、秘めたる甘みを宿す。包丁の入れ方で、光が踊る。"],
    ["弥生 · March","道具","A Knife's Lifetime","包丁の話——三十七年の相棒","初めて手にした柳刃、父から継いだ出刃、そして京都で鍛えてもらった新しい切付。"],
    ["如月 · February","蔵元","Sake Pilgrimage","山形 · 十四代の蔵を訪ねて","冬の山形、雪深い蔵元への訪問記。十四代当主との、薄茶を挟んだ一時間。"],
    ["睦月 · January","新年","New Year's Rites","初仕事、初鮪の初競り","新年の豊洲、祝祭のような競り場。初鮪が競り落とされる瞬間の、静寂と歓声。"],
    ["師走 · December","冬","Winter's Maguro","大間の鮪、二百三十八キロ","一本の鮪と、蔵元と、三年目の若い衆——晩冬の銀座、仕込みの光景。"],
    ["霜月 · November","器","The Kuroraku Plate","楽焼十五代、黒楽の新作","京都・楽家十五代より届いた、黒楽の鮨皿。三年を待った、静かな器。"],
  ];
  return (
    <div className="page page-enter">
      <div className="page-wrap">
        <div className="page-header">
          <div className="ph-num">VIII / VIII</div>
          <div className="ph-center">
            <div className="ph-jp">便り</div>
            <div className="ph-en">Journal</div>
          </div>
          <div className="ph-kan">店主の随筆</div>
        </div>

        <div className="journal-hero">
          <div className="journal-feature">
            <div className="img"><Ph kind="fish" slotId="journal-feature" /></div>
            <div className="meta">
              <span>卯月 · April 15, 2026</span>
              <span>Essay · 随筆</span>
              <span>9 min read</span>
            </div>
            <h2>
              一貫の、<br />
              向こう側にあるもの。
            </h2>
            <p>
              鮨職人になって三十七年。今も、握るたびに手が震える瞬間がある。
              それは、魚が教えてくれる日がある、ということ——。
            </p>
          </div>
          <div className="journal-side">
            <div className="numeral" style={{ fontSize: 12, marginBottom: 24 }}>— Recent Entries —</div>
            {side.map(([meta, title], i) => (
              <div key={i} className="item">
                <div className="meta">{meta}</div>
                <h4>{title}</h4>
              </div>
            ))}
          </div>
        </div>

        <div className="journal-grid">
          {grid.map(([meta, cat, en, jp, excerpt], i) => (
            <div key={i} className="journal-card">
              <div className="img">
                <Ph kind={["fish","counter","sake","plate","washi","moon"][i % 6]} slotId={`journal-${i}`} />
              </div>
              <div className="meta"><span>{meta}</span> · <span>{cat}</span></div>
              <h3>{jp}</h3>
              <p>{excerpt}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageReservation, PageAccess, PageJournal });