// Home page — 4K video hero feel + editorial sections
const { useEffect, useRef, useState } = React;

// ---- HERO ----
function Hero({ onNav }) {
  const [phase, setPhase] = useState(0); // 0..3 for crossfade scenes

  useEffect(() => {
    const id = setInterval(() => setPhase((p) => (p + 1) % 4), 7000);
    return () => clearInterval(id);
  }, []);

  // Four "4K scenes" — each is an animated SVG/gradient simulating footage
  const scenes = [
    { id: "moon",    label: "Moonrise over Sengokuhara" },
    { id: "onsen",   label: "The private onsen at dusk" },
    { id: "kaiseki", label: "The master's hand, at work" },
    { id: "susuki",  label: "Silver pampas, at twilight" },
  ];

  return (
    <section className="hero">
      <div className="hero-media">
        {scenes.map((s, i) => (
          <div key={s.id} className={`scene scene-${s.id} ${phase === i ? "on" : ""}`} aria-hidden>
            {s.id === "moon"    && <SceneMoon />}
            {s.id === "onsen"   && <SceneOnsen />}
            {s.id === "kaiseki" && <SceneKaiseki />}
            {s.id === "susuki"  && <SceneSusuki />}
          </div>
        ))}
        <div className="hero-vignette" />
      </div>

      <div className="hero-content">
        <div className="hero-top">
          <div className="hero-kicker">
            <span className="hr-tick" />
            <span>箱根 仙石原 · 全七棟の離れ宿</span>
          </div>
        </div>

        <h1 className="hero-title">
          <span className="line l1">月に抱かれて、</span>
          <span className="line l2">心をほどく。</span>
          <span className="line l3 en">Held by the moon, unbound.</span>
        </h1>

        <div className="hero-foot">
          <div className="hero-foot-left">
            <div className="scene-caption">
              <span className="num">0{phase + 1}<span className="num-slash"> / 04</span></span>
              <span className="cap-text">{scenes[phase].label}</span>
            </div>
          </div>
          <div className="hero-foot-right">
            <a className="hero-cta" href="#/reserve" onClick={(e) => { e.preventDefault(); onNav("reserve"); }}>
              <span className="cta-label">ご予約</span>
              <span className="cta-en">Reserve your stay</span>
              <span className="cta-arrow">→</span>
            </a>
          </div>
        </div>

        <div className="hero-dots">
          {scenes.map((_, i) => (
            <span key={i} className={`dot ${phase === i ? "on" : ""}`} onClick={() => setPhase(i)} />
          ))}
        </div>
      </div>

      <div className="scroll-ind">
        <span>SCROLL</span>
        <span className="line" />
      </div>

      <style>{`
        .hero {
          position: relative;
          height: 100vh; min-height: 760px;
          width: 100%;
          overflow: hidden;
          background: #0A0F17;
        }
        .hero-media { position: absolute; inset: 0; }
        .scene {
          position: absolute; inset: 0;
          opacity: 0;
          transition: opacity 2s ease;
        }
        .scene.on { opacity: 1; }
        .hero-vignette {
          position: absolute; inset: 0; pointer-events: none;
          background:
            linear-gradient(to bottom, rgba(10,15,23,0.55) 0%, transparent 30%, transparent 60%, rgba(10,15,23,0.85) 100%),
            linear-gradient(to right, rgba(10,15,23,0.45), transparent 35%, transparent 65%, rgba(10,15,23,0.45));
        }
        .hero-content {
          position: relative; z-index: 2;
          height: 100%;
          padding: 120px var(--pad) 80px;
          display: grid;
          grid-template-rows: auto 1fr auto auto;
          color: var(--moon);
        }
        .hero-top { display: flex; justify-content: center; }
        .hero-kicker {
          display: inline-flex; align-items: center; gap: 18px;
          font-size: 12px; letter-spacing: 0.4em;
          color: var(--moon); opacity: 0.9;
        }
        .hr-tick { width: 36px; height: 1px; background: var(--gold-3); display: inline-block; }
        .hero-title {
          align-self: center; text-align: center;
          font-size: clamp(38px, 6.6vw, 96px);
          line-height: 1.28; letter-spacing: 0.12em;
          font-weight: 300;
          text-shadow: 0 2px 40px rgba(0,0,0,0.4);
        }
        .hero-title .line { display: block; opacity: 0; transform: translateY(20px); animation: heroLine 1.2s ease forwards; }
        .hero-title .l1 { animation-delay: 0.3s; }
        .hero-title .l2 { animation-delay: 0.7s; color: var(--gold-3); }
        .hero-title .l3 { animation-delay: 1.3s; font-size: 16px; margin-top: 32px; letter-spacing: 0.4em; color: var(--moon-2); opacity: 0.85 !important; }
        @keyframes heroLine {
          to { opacity: 1; transform: translateY(0); }
        }
        .hero-foot {
          display: flex; justify-content: space-between; align-items: flex-end;
          gap: 48px;
          padding-bottom: 40px;
        }
        .scene-caption {
          display: flex; align-items: center; gap: 22px;
          font-family: var(--serif-en); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
          color: var(--moon-2); opacity: 0.8;
        }
        .num-slash { opacity: 0.55; }
        .cap-text { font-style: italic; }
        .hero-cta {
          display: inline-flex; align-items: center; gap: 22px;
          padding: 20px 30px;
          border: 1px solid var(--moon-2); color: var(--moon);
          transition: all .5s ease;
        }
        .hero-cta:hover { background: var(--gold); border-color: var(--gold); }
        .cta-label { font-size: 14px; letter-spacing: 0.32em; }
        .cta-en { font-family: var(--serif-en); font-size: 10px; letter-spacing: 0.4em; opacity: 0.75; text-transform: uppercase; }
        .cta-arrow { font-family: var(--serif-en); }

        .hero-dots {
          position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
          display: flex; flex-direction: column; gap: 14px;
        }
        .hero-dots .dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: rgba(241,235,216,0.25);
          cursor: pointer; transition: all .4s;
        }
        .hero-dots .dot.on { background: var(--gold-3); transform: scale(1.4); }

        @media (max-width: 900px) {
          .hero-foot { flex-direction: column; align-items: flex-start; }
          .hero-dots { display: none; }
        }
      `}</style>
    </section>
  );
}

// ---- Scenes: Hakone Sengokuhara — real Japanese ryokan / nature photos ----
function PhotoScene({ src, alt, kenBurns = "kbSlowZoom", tint = "rgba(10,15,23,0.42)" }) {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <img
        src={src}
        alt={alt}
        loading="eager"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          animation: `${kenBurns} 22s ease-in-out infinite alternate`,
        }}
      />
      {/* tonal overlay to keep editorial color palette */}
      <div style={{ position: "absolute", inset: 0, background: tint, pointerEvents: "none" }} />
      <style>{`
        @keyframes kbSlowZoom { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
        @keyframes kbPanRight { 0% { transform: scale(1.10) translateX(-2%); } 100% { transform: scale(1.10) translateX(2%); } }
        @keyframes kbDriftUp  { 0% { transform: scale(1.05) translateY(2%); } 100% { transform: scale(1.14) translateY(-2%); } }
      `}</style>
    </div>
  );
}

function SceneMoon() {
  return (
    <PhotoScene
      src="https://images.unsplash.com/photo-1746890988362-f4f45dcac064?auto=format&fit=crop&w=2400&q=85"
      alt="夜に照らされた伝統的な日本旅館 — 仙石原の夜"
      kenBurns="kbDriftUp"
      tint="linear-gradient(180deg, rgba(10,15,23,0.55) 0%, rgba(10,15,23,0.20) 45%, rgba(10,15,23,0.70) 100%)"
    />
  );
}

function SceneOnsen() {
  return (
    <PhotoScene
      src="https://images.unsplash.com/photo-1733653024328-9d3f37fdfb73?auto=format&fit=crop&w=2400&q=85"
      alt="夕暮れの貸切露天風呂"
      kenBurns="kbSlowZoom"
      tint="linear-gradient(180deg, rgba(15,25,37,0.30) 0%, rgba(15,25,37,0.10) 50%, rgba(15,25,37,0.55) 100%)"
    />
  );
}

function SceneKaiseki() {
  return (
    <PhotoScene
      src="https://images.unsplash.com/photo-1766582931800-fd79665257fa?auto=format&fit=crop&w=2400&q=85"
      alt="月彩の懐石 — 椀物・八寸"
      kenBurns="kbPanRight"
      tint="linear-gradient(180deg, rgba(20,16,10,0.35) 0%, rgba(20,16,10,0.10) 50%, rgba(20,16,10,0.60) 100%)"
    />
  );
}

function SceneSusuki() {
  return (
    <PhotoScene
      src="https://images.unsplash.com/photo-1762256267252-f0ce77a45e96?auto=format&fit=crop&w=2400&q=85"
      alt="ススキ越しの富士 — 仙石原"
      kenBurns="kbSlowZoom"
      tint="linear-gradient(180deg, rgba(43,29,15,0.25) 0%, rgba(43,29,15,0.10) 50%, rgba(43,29,15,0.60) 100%)"
    />
  );
}

// keep legacy SVG functions below for fallback / archive
function _SceneMoonSVG() {
  return (
    <div className="sc sc-moon" style={{ position: "absolute", inset: 0 }}>
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(ellipse 90% 70% at 50% 110%, #1B2A3E 0%, #0F1925 40%, #060A13 100%)",
      }} />
      {/* Moon */}
      <div style={{
        position: "absolute", left: "62%", top: "22%",
        width: "280px", height: "280px", borderRadius: "50%",
        background: "radial-gradient(circle at 38% 38%, #FBF7EB 0%, #F1EBD8 40%, #D4C9A8 70%, #8F7349 100%)",
        boxShadow: "0 0 120px rgba(241,235,216,0.35), 0 0 260px rgba(185,152,106,0.25)",
        animation: "moonDrift 22s ease-in-out infinite",
      }} />
      {/* Clouds — thin ink wash */}
      <svg style={{ position: "absolute", inset: 0 }} width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1920 1080">
        <defs>
          <linearGradient id="cloud" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#1B2A3E" stopOpacity="0.9" />
            <stop offset="1" stopColor="#1B2A3E" stopOpacity="0" />
          </linearGradient>
          <filter id="sumi"><feGaussianBlur stdDeviation="18" /></filter>
        </defs>
        <g filter="url(#sumi)" opacity="0.75">
          <ellipse cx="1200" cy="330" rx="500" ry="24" fill="url(#cloud)" />
          <ellipse cx="500" cy="420" rx="700" ry="32" fill="url(#cloud)" />
          <ellipse cx="1500" cy="520" rx="900" ry="40" fill="url(#cloud)" />
        </g>
        {/* Distant mountains */}
        <path d="M0 820 L180 700 L340 770 L520 660 L720 760 L920 640 L1120 740 L1320 650 L1520 730 L1720 670 L1920 760 L1920 1080 L0 1080 Z" fill="#0A0F17" opacity="0.95" />
        <path d="M0 900 L220 830 L420 880 L620 800 L820 870 L1020 820 L1220 900 L1420 830 L1620 880 L1820 820 L1920 870 L1920 1080 L0 1080 Z" fill="#060A13" />
      </svg>
      {/* Stars */}
      <div style={{ position: "absolute", inset: 0 }}>
        {Array.from({ length: 60 }).map((_, i) => {
          const l = (i * 53.7) % 100, t = (i * 29.3) % 60;
          const sz = (i % 3) + 1;
          return (
            <span key={i} style={{
              position: "absolute", left: `${l}%`, top: `${t}%`,
              width: sz, height: sz, background: "#F1EBD8", borderRadius: "50%",
              opacity: 0.2 + (i % 5) * 0.15,
              animation: `twinkle ${3 + (i % 4)}s ease-in-out ${i * 0.2}s infinite`,
            }} />
          );
        })}
      </div>
      <style>{`
        @keyframes moonDrift {
          0%, 100% { transform: translateY(0) translateX(0); }
          50% { transform: translateY(-14px) translateX(8px); }
        }
        @keyframes twinkle {
          0%, 100% { opacity: 0.2; }
          50% { opacity: 0.9; }
        }
      `}</style>
    </div>
  );
}

function _SceneOnsenSVG() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, #1B2A3E 0%, #283B53 40%, #1B2A3E 80%, #0F1925 100%)",
      }} />
      {/* Lantern glow */}
      <div style={{
        position: "absolute", right: "18%", top: "30%",
        width: "200px", height: "400px",
        background: "radial-gradient(ellipse at center, rgba(185,152,106,0.55) 0%, rgba(185,152,106,0.1) 50%, transparent 70%)",
        animation: "flicker 4s ease-in-out infinite",
      }} />
      {/* Onsen water */}
      <svg style={{ position: "absolute", inset: 0 }} width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1920 1080">
        <defs>
          <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1B2A3E" stopOpacity="0" />
            <stop offset="1" stopColor="#0F1925" stopOpacity="0.9" />
          </linearGradient>
        </defs>
        {/* Stone edge */}
        <rect x="0" y="640" width="1920" height="40" fill="#0A0F17" />
        <rect x="0" y="660" width="1920" height="24" fill="#1B2A3E" opacity="0.7" />
        {/* Water surface with ripples */}
        <rect x="0" y="680" width="1920" height="400" fill="url(#water)" />
        <g opacity="0.4" stroke="#B9986A" strokeWidth="0.5" fill="none">
          <ellipse cx="960" cy="820" rx="300" ry="14">
            <animate attributeName="rx" values="300;340;300" dur="5s" repeatCount="indefinite" />
          </ellipse>
          <ellipse cx="960" cy="820" rx="200" ry="10">
            <animate attributeName="rx" values="200;240;200" dur="4s" repeatCount="indefinite" />
          </ellipse>
          <ellipse cx="960" cy="820" rx="100" ry="6">
            <animate attributeName="rx" values="100;140;100" dur="3s" repeatCount="indefinite" />
          </ellipse>
        </g>
        {/* Steam */}
        <g opacity="0.25" fill="#F1EBD8">
          {Array.from({ length: 8 }).map((_, i) => (
            <circle key={i} cx={400 + i * 180} cy="600" r={40 + (i % 3) * 20}>
              <animate attributeName="cy" values="600;400;600" dur={`${8 + i}s`} repeatCount="indefinite" />
              <animate attributeName="opacity" values="0;0.25;0" dur={`${8 + i}s`} repeatCount="indefinite" />
            </circle>
          ))}
        </g>
        {/* Distant mountain silhouette */}
        <path d="M0 640 L300 500 L600 600 L900 460 L1200 580 L1500 480 L1920 600 L1920 640 Z" fill="#060A13" />
      </svg>
      <style>{`
        @keyframes flicker {
          0%, 100% { opacity: 0.8; }
          50% { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

function _SceneKaisekiSVG() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 70% 60% at 50% 50%, #2A1F15 0%, #14100A 60%, #060403 100%)",
      }} />
      {/* Spotlight on black lacquer table */}
      <svg style={{ position: "absolute", inset: 0 }} width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 1080">
        <defs>
          <radialGradient id="spot" cx="50%" cy="55%" r="50%">
            <stop offset="0" stopColor="#B9986A" stopOpacity="0.25" />
            <stop offset="1" stopColor="#000" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect x="0" y="0" width="1920" height="1080" fill="url(#spot)" />
        {/* Lacquer tray */}
        <ellipse cx="960" cy="640" rx="640" ry="180" fill="#0A0606" />
        <ellipse cx="960" cy="620" rx="600" ry="160" fill="#1A1008" />
        {/* Bowl 1 — hassun */}
        <g>
          <ellipse cx="760" cy="600" rx="110" ry="40" fill="#0A0606" />
          <ellipse cx="760" cy="590" rx="100" ry="32" fill="#3B2D1C" />
          <ellipse cx="760" cy="585" rx="90" ry="26" fill="#8F7349" />
          {/* garnish */}
          <circle cx="740" cy="580" r="8" fill="#C8442B" />
          <circle cx="770" cy="578" r="5" fill="#6B7843" />
          <path d="M755 585 Q760 572 775 580" stroke="#D4B884" strokeWidth="1.2" fill="none" />
        </g>
        {/* Bowl 2 — wan */}
        <g>
          <ellipse cx="1020" cy="620" rx="90" ry="30" fill="#0A0606" />
          <ellipse cx="1020" cy="612" rx="80" ry="24" fill="#1B2A3E" />
          <ellipse cx="1020" cy="610" rx="72" ry="20" fill="#283B53" />
          <ellipse cx="1020" cy="608" rx="60" ry="16" fill="#F1EBD8" opacity="0.3" />
        </g>
        {/* Sake cup */}
        <g>
          <ellipse cx="1180" cy="640" rx="36" ry="12" fill="#0A0606" />
          <ellipse cx="1180" cy="636" rx="32" ry="10" fill="#3B2D1C" />
          <ellipse cx="1180" cy="634" rx="28" ry="8" fill="#D4B884" />
        </g>
        {/* Chopsticks */}
        <rect x="600" y="700" width="240" height="4" fill="#0A0606" />
        <rect x="600" y="700" width="240" height="2" fill="#8F7349" opacity="0.5" />
        <rect x="600" y="712" width="220" height="4" fill="#0A0606" />
        <rect x="600" y="712" width="220" height="2" fill="#8F7349" opacity="0.5" />
        {/* Steam from wan */}
        <g opacity="0.3" fill="#F1EBD8">
          <circle cx="1020" cy="580" r="12">
            <animate attributeName="cy" values="580;500;580" dur="4s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;0.3;0" dur="4s" repeatCount="indefinite" />
          </circle>
          <circle cx="1040" cy="590" r="8">
            <animate attributeName="cy" values="590;480;590" dur="5s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;0.25;0" dur="5s" repeatCount="indefinite" />
          </circle>
        </g>
      </svg>
    </div>
  );
}

function _SceneSusukiSVG() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, #B9986A 0%, #D4B884 30%, #8F7349 70%, #3B2D1C 100%)",
      }} />
      <svg style={{ position: "absolute", inset: 0 }} width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 1080">
        {/* Sun low */}
        <circle cx="1400" cy="380" r="120" fill="#F1EBD8" opacity="0.9" />
        <circle cx="1400" cy="380" r="200" fill="#F1EBD8" opacity="0.2" />
        {/* Mountain */}
        <path d="M0 620 L400 440 L800 550 L1200 400 L1600 520 L1920 450 L1920 1080 L0 1080 Z" fill="#3B2D1C" opacity="0.7" />
        <path d="M0 680 L300 580 L600 630 L900 560 L1200 640 L1500 580 L1920 650 L1920 1080 L0 1080 Z" fill="#2A1F15" opacity="0.85" />
        {/* Pampas grass silhouettes */}
        <g fill="#1B2A3E" opacity="0.9">
          {Array.from({ length: 40 }).map((_, i) => {
            const x = i * 50 + ((i % 3) * 15);
            const h = 200 + (i % 4) * 60;
            const bendDur = 3 + (i % 3);
            return (
              <g key={i} transform={`translate(${x} 1080)`}>
                <path d={`M0 0 Q 4 ${-h/2} 2 ${-h}`} stroke="#0F1925" strokeWidth="2" fill="none">
                  <animateTransform attributeName="transform" type="rotate" values="-2;2;-2" dur={`${bendDur}s`} repeatCount="indefinite" />
                </path>
                <ellipse cx="2" cy={-h} rx="14" ry="28" fill="#F1EBD8" opacity="0.75">
                  <animateTransform attributeName="transform" type="rotate" values="-4;4;-4" dur={`${bendDur}s`} repeatCount="indefinite" />
                </ellipse>
              </g>
            );
          })}
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { Hero, SceneMoon, SceneOnsen, SceneKaiseki, SceneSusuki });