// Home page sections (below hero)
const { useEffect: useE, useRef: useR, useState: useS } = React;

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: Tag = "div", ...rest }) {
  const ref = useR(null);
  const [seen, setSeen] = useS(false);
  useE(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} {...rest} className={`reveal ${seen ? "in" : ""} ${rest.className || ""}`}
         style={{ transitionDelay: `${delay}ms`, ...(rest.style || {}) }}>
      {children}
    </Tag>
  );
}

// ---- Philosophy / intro ----
function Philosophy() {
  return (
    <section className="phil">
      <div className="phil-bg"><div className="sumi-bg" /></div>
      <div className="phil-inner w-col">
        <div className="phil-left">
          <Reveal>
            <span className="kicker">Philosophy · 宿の想い</span>
            <h2 className="section-title">
              月は、<br/>約束のように昇る。
              <span className="en-sub">The moon rises, as a quiet promise.</span>
            </h2>
          </Reveal>
        </div>
        <div className="phil-right">
          <Reveal delay={200}>
            <p className="prose">
              箱根仙石原、薄(すすき)の原を奥へ。<br/>
              樹齢百五十年の楢(なら)と紅葉に抱かれた敷地に、わずか七棟の離れと、ひとつの貴賓棟。月彩(つきさい)は、それだけのための宿です。
            </p>
            <p className="prose" style={{ marginTop: 20 }}>
              玄関はなく、門と石段だけ。棟はそれぞれ独立し、他の客と一度も顔を合わせず滞在を終えることができます。全棟に専用の露天風呂。すべての部屋の天井が高く、広縁が長く、夜が深い。完全紹介制としているのは、この静けさを、守るためです。
            </p>
            <div className="phil-meta">
              <div><span className="v-label">紹介制</span></div>
              <div className="phil-meta-text">
                <div className="meta-line"><span className="num">01</span>&nbsp;完全紹介制 · 会員および既存ゲストのご紹介のみ</div>
                <div className="meta-line"><span className="num">02</span>&nbsp;全七棟 + 貴賓棟「宙」</div>
                <div className="meta-line"><span className="num">03</span>&nbsp;全棟専用露天風呂 · 源泉掛け流し</div>
                <div className="meta-line"><span className="num">04</span>&nbsp;1泊2食 ¥168,000より</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .phil { position: relative; padding: 140px 0 160px; background: var(--moon-3); overflow: hidden; }
        .phil-bg { position: absolute; inset: 0; }
        .phil-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; }
        .phil-right .prose { color: var(--ink-3); }
        .phil-meta { display: grid; grid-template-columns: auto 1fr; gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
        .phil-meta-text { display: grid; gap: 14px; font-size: 13px; letter-spacing: 0.1em; }
        .meta-line { color: var(--ink); }
        @media (max-width: 900px) { .phil-inner { grid-template-columns: 1fr; gap: 60px; } }
      `}</style>
    </section>
  );
}

// ---- Villas preview strip ----
function VillasPreview({ onNav }) {
  return (
    <section className="v-prev">
      <div className="v-prev-head w-col">
        <div>
          <span className="kicker">Villas · 離れ 全七棟</span>
          <h2 className="section-title">
            七棟、七つの季節。
            <span className="en-sub">Seven villas, seven seasons, seven silences.</span>
          </h2>
        </div>
        <a className="btn-ghost" href="#/villas" onClick={(e) => { e.preventDefault(); onNav("villas"); }}>
          すべての棟を見る <span>→</span>
        </a>
      </div>
      <div className="v-prev-scroll">
        {VILLAS.map((v, i) => (
          <Reveal key={v.id} delay={i * 80} as="a" href={`#/villa/${v.id}`}
                  className="v-card"
                  onClick={(e) => { e.preventDefault(); onNav(`villa:${v.id}`); }}
                  style={{ background: v.hue.bg }}>
            <div className="v-card-media"><VillaSilhouette villa={v} /></div>
            <div className="v-card-body" style={{ color: v.hue.ink }}>
              <div className="v-card-top">
                <span className="num">{v.no}</span>
                <span className="v-card-season" style={{ color: v.hue.accent }}>{v.theme}</span>
              </div>
              <div className="v-card-jp">{v.jp}</div>
              <div className="v-card-yomi">{v.yomi}</div>
              <div className="v-card-sub">{v.subtitle}</div>
              <div className="v-card-foot">
                <span>{v.size}</span>
                <span>{v.price}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <style>{`
        .v-prev { padding: 140px 0 160px; background: var(--ink-2); color: var(--moon); }
        .v-prev-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 72px; }
        .v-prev-head .section-title { color: var(--moon); }
        .v-prev-head .en-sub { color: var(--gold-3); }
        .v-prev-head .btn-ghost { color: var(--moon); border-color: var(--gold); }
        .v-prev-scroll {
          display: grid; grid-auto-flow: column; grid-auto-columns: 360px;
          gap: 24px;
          overflow-x: auto; scroll-snap-type: x mandatory;
          padding: 0 var(--pad) 24px;
        }
        .v-card { scroll-snap-align: start; display: block; transition: transform .5s; }
        .v-card:hover { transform: translateY(-8px); }
        .v-card-media { aspect-ratio: 4/3; overflow: hidden; }
        .v-card-body { padding: 28px 30px 36px; }
        .v-card-top { display: flex; justify-content: space-between; font-family: var(--serif-en); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.8; }
        .v-card-jp { font-size: 64px; line-height: 1; letter-spacing: 0.1em; margin: 16px 0 6px; }
        .v-card-yomi { font-family: var(--serif-en); font-style: italic; font-size: 18px; letter-spacing: 0.3em; opacity: 0.6; margin-bottom: 24px; }
        .v-card-sub { font-size: 13px; letter-spacing: 0.1em; margin-bottom: 28px; opacity: 0.85; }
        .v-card-foot { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.15); font-family: var(--serif-en); font-size: 11px; letter-spacing: 0.22em; }
      `}</style>
    </section>
  );
}

// Stylized villa silhouette (no real photos — ink-wash architectural sketch)
function VillaSilhouette({ villa }) {
  const accent = villa.hue.accent;
  const ink = villa.hue.ink;
  return (
    <svg width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={`sky-${villa.id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={ink} stopOpacity="0.15" />
          <stop offset="1" stopColor={ink} stopOpacity="0" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="480" height="360" fill="url(#sky-${villa.id})" />
      {/* distant mountain */}
      <path d="M0 180 L100 130 L180 160 L260 120 L340 155 L420 125 L480 150 L480 220 L0 220 Z" fill={ink} opacity="0.12" />
      {/* middle garden hill */}
      <path d="M0 240 L120 200 L260 230 L380 210 L480 235 L480 360 L0 360 Z" fill={ink} opacity="0.08" />
      {/* Villa roof */}
      <g transform="translate(90 140)">
        {/* main roof */}
        <path d="M0 90 L150 20 L300 90 L280 100 L150 36 L20 100 Z" fill={ink} opacity="0.92" />
        <rect x="40" y="100" width="220" height="90" fill={ink} opacity="0.85" />
        {/* shoji windows */}
        <rect x="56" y="120" width="58" height="60" fill={villa.hue.bg} opacity="0.88" />
        <rect x="124" y="120" width="58" height="60" fill={villa.hue.bg} opacity="0.88" />
        <rect x="192" y="120" width="58" height="60" fill={villa.hue.bg} opacity="0.88" />
        {/* window grid */}
        {[56, 124, 192].map((x) => (
          <g key={x} stroke={ink} strokeWidth="0.8" opacity="0.6">
            <line x1={x + 19} y1="120" x2={x + 19} y2="180" />
            <line x1={x + 39} y1="120" x2={x + 39} y2="180" />
            <line x1={x} y1="140" x2={x + 58} y2="140" />
            <line x1={x} y1="160" x2={x + 58} y2="160" />
          </g>
        ))}
        {/* engawa — raised porch */}
        <rect x="30" y="188" width="240" height="8" fill={ink} opacity="0.6" />
      </g>
      {/* Season motif */}
      <g transform="translate(360 70)" opacity="0.9">
        {villa.theme.includes("桜") && (
          <g fill={accent}>
            {[[0,0,10],[-20,10,7],[18,12,8],[-10,30,6],[20,35,9],[5,50,8]].map(([x,y,r],i)=>(<circle key={i} cx={x} cy={y} r={r} opacity="0.85" />))}
          </g>
        )}
        {villa.theme.includes("紅葉") && (
          <g fill={accent}>
            <path d="M0 0 L8 -14 L14 -6 L22 -20 L30 -4 L40 -18 L46 0 L52 -8 L54 8 L40 14 L34 22 L20 18 L10 26 L2 16 L-10 22 L-14 10 Z" />
            <path d="M40 30 L48 16 L54 24 L62 10 L70 26 L80 12 L86 30 Z" opacity="0.7" />
          </g>
        )}
        {villa.theme.includes("雪") && (
          <g fill={accent} opacity="0.9">
            {Array.from({length:14}).map((_,i)=>(<circle key={i} cx={(i*11)%80} cy={(i*23)%70} r={3} />))}
          </g>
        )}
        {villa.theme.includes("蛍") && (
          <g fill={accent}>
            {[[10,0],[30,20],[0,30],[40,10],[20,50]].map(([x,y],i)=>(<circle key={i} cx={x} cy={y} r="3" opacity="0.9" />))}
          </g>
        )}
        {villa.theme.includes("苔") && (
          <g fill={accent}>
            <path d="M0 30 Q 10 0 30 20 Q 50 0 70 30 Q 50 50 30 30 Q 10 50 0 30 Z" opacity="0.7" />
          </g>
        )}
        {villa.theme.includes("月") && (
          <g>
            <circle cx="30" cy="30" r="28" fill={accent} opacity="0.95" />
            <circle cx="38" cy="22" r="28" fill={villa.hue.bg} />
          </g>
        )}
        {villa.theme.includes("薄") && (
          <g stroke={accent} strokeWidth="1.2" fill="none">
            {Array.from({length:8}).map((_,i)=>(<path key={i} d={`M${i*10} 60 Q ${i*10+4} 30 ${i*10+2} 0`} />))}
          </g>
        )}
      </g>
    </svg>
  );
}

// ---- Kaiseki teaser ----
function KaisekiTeaser({ onNav }) {
  return (
    <section className="kai">
      <div className="kai-grid w-col">
        <div className="kai-img">
          <Reveal>
            <div className="kai-img-frame">
              <KaisekiArt />
              <div className="kai-cap">
                <span className="v-label">月彩懐石</span>
              </div>
            </div>
          </Reveal>
        </div>
        <div className="kai-text">
          <Reveal delay={150}>
            <span className="kicker">Kaiseki · 月彩懐石</span>
            <h2 className="section-title">
              山の景色を、<br/>皿の上に映す。
              <span className="en-sub">The landscape, served on a plate.</span>
            </h2>
            <p className="prose" style={{ marginTop: 36 }}>
              料理長・鈴木 昭洋。京都・祇園の老舗にて十八年の研鑽ののち、箱根の土地そのものに移り住んで十年。箱根山系の山菜、駿河湾の魚、小田原の野菜。その日、その朝に仕入れられたものだけを、月彩流の手さばきで仕立てます。
            </p>
            <p className="prose" style={{ marginTop: 18 }}>
              お食事は、棟の広縁に設えた個室か、貴賓棟「宙」内の料亭「七曜」にて。時間も、品数も、お客さま個々にお合わせいたします。
            </p>
            <div className="kai-cta" style={{ marginTop: 44 }}>
              <a className="btn-ghost" href="#/kaiseki" onClick={(e) => { e.preventDefault(); onNav("kaiseki"); }}>
                献立を見る <span>→</span>
              </a>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .kai { padding: 160px 0; background: var(--moon-3); }
        .kai-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; align-items: center; }
        .kai-img-frame { position: relative; aspect-ratio: 4/5; background: #0A0606; overflow: hidden; }
        .kai-cap { position: absolute; top: 24px; right: 24px; color: var(--gold-3); }
        @media (max-width: 900px) { .kai-grid { grid-template-columns: 1fr; gap: 60px; } }
      `}</style>
    </section>
  );
}

function KaisekiArt() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 600 750" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="kai-spot" cx="50%" cy="45%" r="60%">
          <stop offset="0" stopColor="#B9986A" stopOpacity="0.3" />
          <stop offset="1" stopColor="#000" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="600" height="750" fill="#14100A" />
      <rect x="0" y="0" width="600" height="750" fill="url(#kai-spot)" />
      {/* Lacquer tray shadow */}
      <ellipse cx="300" cy="410" rx="260" ry="70" fill="#000" opacity="0.5" />
      {/* Tray */}
      <rect x="80" y="340" width="440" height="120" fill="#0A0606" />
      <rect x="80" y="340" width="440" height="8" fill="#3B2D1C" />
      {/* Center bowl — wan */}
      <g>
        <ellipse cx="300" cy="380" rx="120" ry="30" fill="#000" opacity="0.8" />
        <ellipse cx="300" cy="370" rx="110" ry="26" fill="#1B2A3E" />
        <ellipse cx="300" cy="366" rx="100" ry="22" fill="#283B53" />
        <ellipse cx="300" cy="364" rx="86" ry="18" fill="#F1EBD8" opacity="0.35" />
        {/* gold moon crest on rim */}
        <circle cx="390" cy="370" r="3" fill="#B9986A" />
      </g>
      {/* Left small bowl */}
      <g>
        <ellipse cx="170" cy="400" rx="54" ry="14" fill="#000" opacity="0.8" />
        <ellipse cx="170" cy="394" rx="48" ry="12" fill="#3B2D1C" />
        <ellipse cx="170" cy="392" rx="42" ry="10" fill="#8F7349" />
        <circle cx="160" cy="390" r="5" fill="#C8442B" />
        <circle cx="178" cy="389" r="3" fill="#6B7843" />
      </g>
      {/* Right sake */}
      <g>
        <ellipse cx="450" cy="410" rx="30" ry="8" fill="#000" opacity="0.8" />
        <ellipse cx="450" cy="405" rx="24" ry="6" fill="#3B2D1C" />
        <ellipse cx="450" cy="403" rx="20" ry="5" fill="#D4B884" />
      </g>
      {/* Chopsticks */}
      <rect x="180" y="470" width="240" height="3" fill="#1A1008" transform="rotate(-2 300 471)" />
      <rect x="180" y="482" width="220" height="3" fill="#1A1008" transform="rotate(-2 290 483)" />
      <rect x="410" y="468" width="14" height="3" fill="#B9986A" transform="rotate(-2 417 469)" />
      <rect x="390" y="480" width="14" height="3" fill="#B9986A" transform="rotate(-2 397 481)" />
      {/* Top — menu brush calligraphy */}
      <g opacity="0.85" fill="#F1EBD8">
        <text x="80" y="110" fontFamily="Shippori Mincho, serif" fontSize="64" letterSpacing="12">月</text>
        <text x="80" y="180" fontFamily="Shippori Mincho, serif" fontSize="28" letterSpacing="8">今宵の献立</text>
        <text x="80" y="215" fontFamily="Cormorant Garamond, serif" fontSize="12" letterSpacing="4" fontStyle="italic" opacity="0.7">TONIGHT · KAISEKI</text>
      </g>
      {/* Steam */}
      <g fill="#F1EBD8" opacity="0.3">
        <circle cx="300" cy="320">
          <animate attributeName="cy" values="320;220;320" dur="5s" repeatCount="indefinite" />
          <animate attributeName="r" values="10;20;10" dur="5s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0.3;0" dur="5s" repeatCount="indefinite" />
        </circle>
        <circle cx="320" cy="340">
          <animate attributeName="cy" values="340;220;340" dur="6s" repeatCount="indefinite" />
          <animate attributeName="r" values="8;18;8" dur="6s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0.25;0" dur="6s" repeatCount="indefinite" />
        </circle>
      </g>
      {/* gold foil accents */}
      <g fill="#B9986A" opacity="0.5">
        <rect x="520" y="520" width="40" height="1" />
        <rect x="520" y="540" width="24" height="1" />
        <text x="520" y="580" fontFamily="Cormorant Garamond, serif" fontSize="11" letterSpacing="4" fontStyle="italic" fill="#B9986A">— 七品 · hassun</text>
      </g>
    </svg>
  );
}

// ---- Onsen teaser ----
function OnsenTeaser({ onNav }) {
  return (
    <section className="ons">
      <div className="ons-bg" aria-hidden><SceneOnsen /></div>
      <div className="ons-inner w-col">
        <Reveal>
          <span className="kicker" style={{ color: "var(--gold-3)" }}>
            <span style={{ background: "var(--gold-3)" }} /> Onsen · 温泉
          </span>
          <h2 className="section-title" style={{ color: "var(--moon)" }}>
            湯は、黙して、<br/>語る。
            <span className="en-sub" style={{ color: "var(--gold-3)" }}>The waters, eloquent in their silence.</span>
          </h2>
          <p className="prose" style={{ color: "var(--moon-2)", maxWidth: "46ch", marginTop: 36 }}>
            全七棟と貴賓棟のすべてに、源泉掛け流しの露天風呂。泉質は大涌谷系の白濁硫酸塩泉。肌を包み、ゆっくりと解(ほど)いていきます。
          </p>
          <div className="ons-stats">
            <div><span className="num">01</span><span>源泉掛け流し · 加水加温なし</span></div>
            <div><span className="num">02</span><span>泉質 · 単純硫酸塩泉 (pH 7.8)</span></div>
            <div><span className="num">03</span><span>湯温 · 棟ごと三段階調整可</span></div>
          </div>
          <a className="btn-ghost" href="#/onsen" style={{ color: "var(--moon)", borderColor: "var(--gold)", marginTop: 40 }}
             onClick={(e) => { e.preventDefault(); onNav("onsen"); }}>
            温泉について <span>→</span>
          </a>
        </Reveal>
      </div>
      <style>{`
        .ons { position: relative; height: 100vh; min-height: 700px; overflow: hidden; background: #0F1925; }
        .ons-bg { position: absolute; inset: 0; opacity: 0.88; }
        .ons-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); }
        .ons .kicker { display: inline-flex; align-items: center; gap: 14px; }
        .ons .kicker::before { display: none; }
        .ons .kicker span:first-child { width: 40px; height: 1px; display: inline-block; }
        .ons-stats { margin-top: 44px; display: grid; gap: 12px; color: var(--moon-2); font-size: 13px; letter-spacing: 0.14em; }
        .ons-stats > div { display: flex; gap: 18px; align-items: baseline; }
      `}</style>
    </section>
  );
}

// ---- Four Seasons parallax ----
function Seasons() {
  const ref = useR(null);
  const [p, setP] = useS(0); // 0..1 scroll progress within section
  useE(() => {
    const onS = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const prog = Math.max(0, Math.min(1, -r.top / total));
      setP(prog);
    };
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);

  const idx = Math.min(3, Math.floor(p * 4));
  const seasons = [
    { id: "spr", jp: "春", en: "Spring", sub: "山桜の頃", phrase: "三月末、敷地の山桜から、順に花ひらく。", bg: "#E8DFC5", ink: "#B85434" },
    { id: "sum", jp: "夏", en: "Summer", sub: "蛍と夕立ち", phrase: "六月の末、水辺に小さな星が瞬く夜。", bg: "#D8E4D1", ink: "#6B7A5F" },
    { id: "aut", jp: "秋", en: "Autumn", sub: "薄と紅葉", phrase: "十月下旬から、山がゆっくりと燃える。", bg: "#E9D5B8", ink: "#B85434" },
    { id: "win", jp: "冬", en: "Winter", sub: "雪と燗酒", phrase: "一月、雪見障子の向こう、庭が絵になる。", bg: "#F1EBD8", ink: "#1B2A3E" },
  ];
  const cur = seasons[idx];
  return (
    <section ref={ref} className="seasons" style={{ height: "240vh" }}>
      <div className="seasons-sticky">
        <div className="seasons-bg" style={{ background: cur.bg }} />
        <div className="seasons-grid w-col">
          <div className="seasons-left">
            <span className="kicker">Four Seasons · 四季</span>
            <div className="seasons-jp" style={{ color: cur.ink }}>{cur.jp}</div>
            <div className="seasons-en">{cur.en}</div>
            <div className="seasons-sub">— {cur.sub}</div>
            <p className="seasons-phrase" style={{ color: cur.ink }}>{cur.phrase}</p>
          </div>
          <div className="seasons-right">
            <SeasonScene season={cur.id} />
          </div>
        </div>
        <div className="seasons-dots">
          {seasons.map((s, i) => (
            <div key={s.id} className={`s-dot ${i === idx ? "on" : ""}`}>
              <span>{s.jp}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .seasons { position: relative; }
        .seasons-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
        .seasons-bg { position: absolute; inset: 0; transition: background 1.2s ease; }
        .seasons-grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; padding: 0 var(--pad); gap: 80px; }
        .seasons-jp { font-size: clamp(140px, 22vw, 320px); line-height: 1; letter-spacing: 0.04em; transition: color 1.2s ease; }
        .seasons-en { font-family: var(--serif-en); font-size: 36px; letter-spacing: 0.4em; font-style: italic; color: var(--ink-3); margin-top: -20px; }
        .seasons-sub { font-size: 14px; letter-spacing: 0.32em; color: var(--gold-2); margin-top: 16px; }
        .seasons-phrase { font-size: 22px; line-height: 2; letter-spacing: 0.16em; margin-top: 48px; max-width: 22ch; transition: color 1.2s ease; }
        .seasons-right { height: 100%; display: flex; align-items: center; justify-content: center; }
        .seasons-dots { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; z-index: 3; }
        .s-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: 0.2em; color: var(--ink-3); opacity: 0.4; transition: all .6s; border: 1px solid transparent; }
        .s-dot.on { opacity: 1; border-color: var(--gold); color: var(--ink); }
        @media (max-width: 900px) { .seasons-grid { grid-template-columns: 1fr; } .seasons-right { display: none; } }
      `}</style>
    </section>
  );
}

function SeasonScene({ season }) {
  // A big framed piece per season
  return (
    <div style={{ width: "min(600px, 100%)", aspectRatio: "3/4", position: "relative" }}>
      {season === "spr" && (
        <svg viewBox="0 0 600 800" width="100%" height="100%">
          <rect width="600" height="800" fill="#F1EBD8" />
          {/* branch */}
          <path d="M20 120 Q 180 200 400 140 Q 520 110 580 180" stroke="#3B2D1C" strokeWidth="4" fill="none" />
          <path d="M200 170 Q 230 280 180 360" stroke="#3B2D1C" strokeWidth="3" fill="none" />
          <path d="M400 150 Q 440 250 420 360" stroke="#3B2D1C" strokeWidth="3" fill="none" />
          {/* petals */}
          <g fill="#D4A5A5">
            {Array.from({length:60}).map((_,i)=>{
              const x = (i*47 + 20) % 580;
              const y = 100 + (i*31) % 600;
              const r = 4 + (i%4)*3;
              return <circle key={i} cx={x} cy={y} r={r} opacity={0.7+(i%3)*0.1}><animate attributeName="cy" values={`${y};${y+60};${y}`} dur={`${6+(i%4)}s`} repeatCount="indefinite" /></circle>;
            })}
          </g>
          <text x="520" y="760" fontFamily="Shippori Mincho, serif" fontSize="44" fill="#B85434" opacity="0.3">春</text>
        </svg>
      )}
      {season === "sum" && (
        <svg viewBox="0 0 600 800" width="100%" height="100%">
          <rect width="600" height="800" fill="#1B2A3E" />
          <rect x="0" y="400" width="600" height="400" fill="#0F1925" />
          {/* reeds */}
          <g stroke="#283B53" strokeWidth="2" fill="none">
            {Array.from({length:12}).map((_,i)=>(
              <path key={i} d={`M${i*50+20} 800 Q ${i*50+24} 650 ${i*50+22} 500`} />
            ))}
          </g>
          {/* fireflies */}
          <g fill="#F1EBD8">
            {Array.from({length:30}).map((_,i)=>{
              const x = (i*47) % 580 + 10;
              const y = 100 + (i*41) % 600;
              return <circle key={i} cx={x} cy={y} r="3" opacity="0.9">
                <animate attributeName="opacity" values="0;1;0" dur={`${2+(i%3)}s`} repeatCount="indefinite" begin={`${i*0.2}s`} />
                <animate attributeName="r" values="2;5;2" dur={`${2+(i%3)}s`} repeatCount="indefinite" />
              </circle>;
            })}
          </g>
          <text x="480" y="760" fontFamily="Shippori Mincho, serif" fontSize="44" fill="#8FAE7D" opacity="0.5">蛍</text>
        </svg>
      )}
      {season === "aut" && (
        <svg viewBox="0 0 600 800" width="100%" height="100%">
          <rect width="600" height="800" fill="#E9D5B8" />
          {/* maples */}
          <g fill="#B85434">
            {Array.from({length:26}).map((_,i)=>{
              const x = (i*57+30) % 570;
              const y = (i*43) % 720;
              return <path key={i} transform={`translate(${x} ${y}) rotate(${i*12})`} d="M0 0 L5 -12 L10 -4 L16 -14 L22 -2 L16 10 L22 14 L10 14 L4 20 L-2 12 L-10 16 L-4 6 L-10 -4 Z" opacity={0.7+(i%3)*0.1}><animateTransform attributeName="transform" type="translate" additive="sum" values={`0 0; 0 ${30+i%30}; 0 0`} dur={`${8+(i%3)}s`} repeatCount="indefinite" /></path>;
            })}
          </g>
          {/* branch */}
          <path d="M0 180 Q 200 140 600 200" stroke="#3B2D1C" strokeWidth="5" fill="none" />
          <text x="500" y="760" fontFamily="Shippori Mincho, serif" fontSize="44" fill="#B85434" opacity="0.3">紅葉</text>
        </svg>
      )}
      {season === "win" && (
        <svg viewBox="0 0 600 800" width="100%" height="100%">
          <rect width="600" height="800" fill="#F1EBD8" />
          {/* mountains */}
          <path d="M0 500 L150 300 L280 450 L420 280 L560 420 L600 390 L600 800 L0 800 Z" fill="#98A4B8" opacity="0.7" />
          <path d="M0 600 L200 500 L400 580 L600 530 L600 800 L0 800 Z" fill="#1B2A3E" opacity="0.8" />
          {/* snow */}
          <g fill="#FBF7EB">
            {Array.from({length:80}).map((_,i)=>{
              const x = (i*31) % 600;
              const y = (i*17) % 600;
              const r = 2 + (i%3);
              return <circle key={i} cx={x} cy={y} r={r} opacity="0.95">
                <animate attributeName="cy" values={`${y};${y+100};${y}`} dur={`${8+(i%4)}s`} repeatCount="indefinite" />
              </circle>;
            })}
          </g>
          <text x="500" y="760" fontFamily="Shippori Mincho, serif" fontSize="44" fill="#1B2A3E" opacity="0.4">雪</text>
        </svg>
      )}
    </div>
  );
}

// ---- Stories teaser ----
function StoriesTeaser({ onNav }) {
  const posts = [
    { num: "ISSUE 07", date: "APR 2026", jp: "桜の頃、露天風呂に花弁が落ちる夜のこと", en: "When petals fall into the bath, at night" },
    { num: "ISSUE 06", date: "MAR 2026", jp: "料理長・鈴木 昭洋、春の山菜を語る", en: "On spring sansai, by Chef Suzuki" },
    { num: "ISSUE 05", date: "FEB 2026", jp: "雪見障子という、日本のしつらえ", en: "Yukimi shoji — a Japanese invention" },
  ];
  return (
    <section className="stor">
      <div className="w-col">
        <div className="stor-head">
          <Reveal>
            <span className="kicker">Stories · 月彩の綴り</span>
            <h2 className="section-title">
              月彩の、<br/>静かな綴り。
              <span className="en-sub">Quiet notes, from our innkeepers.</span>
            </h2>
          </Reveal>
          <a className="btn-ghost" href="#/stories" onClick={(e) => { e.preventDefault(); onNav("stories"); }}>
            綴りをすべて見る →
          </a>
        </div>
        <div className="stor-list">
          {posts.map((p, i) => (
            <Reveal key={p.num} delay={i * 150}>
              <a className="stor-row" href="#/stories" onClick={(e) => { e.preventDefault(); onNav("stories"); }}>
                <span className="num">{p.num}</span>
                <span className="s-date">{p.date}</span>
                <span className="s-jp">{p.jp}</span>
                <span className="s-en">{p.en}</span>
                <span className="s-arrow">→</span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .stor { padding: 160px 0; background: var(--moon-3); }
        .stor-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px; }
        .stor-list { border-top: 1px solid var(--line); }
        .stor-row {
          display: grid; grid-template-columns: 120px 100px 1fr auto 40px;
          gap: 40px; align-items: center;
          padding: 32px 0; border-bottom: 1px solid var(--line);
          transition: all .5s;
        }
        .stor-row:hover { padding-left: 16px; background: linear-gradient(to right, var(--moon-2), transparent 40%); }
        .s-date { font-family: var(--serif-en); font-size: 11px; letter-spacing: 0.32em; color: var(--ash); }
        .s-jp { font-size: 22px; letter-spacing: 0.1em; color: var(--ink); }
        .s-en { font-family: var(--serif-en); font-style: italic; font-size: 14px; color: var(--gold-2); letter-spacing: 0.15em; }
        .s-arrow { color: var(--gold); font-family: var(--serif-en); font-size: 18px; }
      `}</style>
    </section>
  );
}

// ---- CTA / Access teaser ----
function CTABand({ onNav }) {
  return (
    <section className="cta-band">
      <div className="w-col">
        <div className="cta-grid">
          <div>
            <span className="v-label">Introduction only</span>
          </div>
          <div>
            <h2 className="section-title" style={{ color: "var(--moon)" }}>
              ひとたびの滞在を、<br/>ご予約ください。
              <span className="en-sub" style={{ color: "var(--gold-3)" }}>For a single stay, by introduction.</span>
            </h2>
            <p className="prose" style={{ color: "var(--moon-2)", maxWidth: "46ch", marginTop: 28 }}>
              月彩は完全紹介制の宿です。会員または既存のご利用者様からのご紹介をもって、ご予約を承ります。初めてのお客様は、下記よりお問い合わせください。
            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
              <a className="btn-ghost" style={{ color: "var(--moon)", borderColor: "var(--moon)" }}
                 href="#/reserve" onClick={(e) => { e.preventDefault(); onNav("reserve"); }}>ご予約 →</a>
              <a className="btn-ghost" style={{ color: "var(--gold-3)", borderColor: "var(--gold)" }}
                 href="#/access" onClick={(e) => { e.preventDefault(); onNav("access"); }}>アクセス →</a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-band { padding: 160px 0; background: var(--ink-2); color: var(--moon); position: relative; overflow: hidden; }
        .cta-band::before { content: ""; position: absolute; right: -100px; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; border-radius: 50%;
          background: radial-gradient(circle, rgba(185,152,106,0.15) 0%, transparent 70%); }
        .cta-grid { display: grid; grid-template-columns: auto 1fr; gap: 80px; }
      `}</style>
    </section>
  );
}

Object.assign(window, { Reveal, Philosophy, VillasPreview, VillaSilhouette, KaisekiTeaser, KaisekiArt, OnsenTeaser, Seasons, SeasonScene, StoriesTeaser, CTABand });