// ════════════════════════════════════════════════════════════════
// Scenes — myth content + layered layout
// Each scene pairs a classical myth with the modern story it echoes.
// Layers carry data-depth; the scroll engine (parallax-app) drives them.
// ════════════════════════════════════════════════════════════════

// Gold-dust motes for a scene (count scales with the --dust tweak via CSS)
function Dust({ n = 14, seed = 1 }) {
  const motes = [];
  let r = seed * 9301;
  const rnd = () => { r = (r * 9301 + 49297) % 233280; return r / 233280; };
  for (let i = 0; i < n; i++) {
    const size = 2 + rnd() * 4;
    motes.push(
      <i key={i} className="mote" style={{
        left: rnd() * 100 + "%",
        top: 20 + rnd() * 70 + "%",
        width: size, height: size,
        "--dur": (7 + rnd() * 7).toFixed(1) + "s",
        "--del": (-rnd() * 8).toFixed(1) + "s",
        "--dx": (rnd() * 24 - 12).toFixed(0) + "px",
      }} />
    );
  }
  return <div className="dust" data-layer data-depth="120">{motes}</div>;
}

function Scene({ idx, roman, greek, name, line, echoTag, echoText, Constellation,
                 side = "left", dark = false, glyph, glyphPos }) {
  const etchSide = side === "left"; // text left → etch right
  const Etch = (
    <div className="etch etch--side layer" data-layer data-depth="-50"
         style={{ flex: "0 0 auto", width: "min(42vw, 460px)", position: "relative" }}>
      <div style={{
        position: "absolute", inset: "-12% -8%", zIndex: 0,
        background: "radial-gradient(closest-side, rgba(231,206,140,0.18), transparent 72%)",
        pointerEvents: "none",
      }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <Constellation draw={1} />
      </div>
    </div>
  );
  const Text = (
    <div className="tablet layer" data-layer data-depth="22" style={{ flex: "1 1 0", minWidth: 0 }}>
      <div className="kicker">
        <span className="rule" />
        <span>Chapter {roman}</span>
        <span className="greek">· {greek}</span>
      </div>
      <h2 className="myth-name" dangerouslySetInnerHTML={{ __html: name }} />
      <p className="myth-line" dangerouslySetInnerHTML={{ __html: line }} />
      <div className="echo">
        <span className="tag">{echoTag}</span>
        <span dangerouslySetInnerHTML={{ __html: echoText }} />
      </div>
    </div>
  );

  return (
    <section className={"scene" + (side === "right" ? " scene--right" : "") + (dark ? " scene--dark" : "")}
             data-scene={idx} data-roman={roman}>
      <div className="ghost-glyph layer" data-layer data-depth="90" aria-hidden="true"
           style={{
             color: dark ? "rgba(231,206,140,0.07)" : "rgba(135,99,38,0.08)",
             fontSize: "clamp(220px, 34vw, 560px)",
             ...glyphPos,
           }}>
        {glyph}
      </div>
      <Dust seed={idx + 2} n={13} />
      <div className="scene-wrap">
        <div style={{ display: "flex", alignItems: "center", gap: "clamp(24px, 5vw, 90px)",
                      flexDirection: etchSide ? "row" : "row-reverse" }}>
          {Text}
          {Etch}
        </div>
      </div>
    </section>
  );
}

// ── Content ─────────────────────────────────────────────────────
const SCENES = [
  {
    idx: 1, roman: "I", greek: "Προμηθεύς", glyph: "Π",
    name: 'Prome<span class="foil">theus</span>',
    line: "He stole fire from the gods and handed it to us — then was chained to a rock to pay for the gift.",
    echoTag: "Today",
    echoText: "Every founder who ships the thing the world wasn't ready for. <em>Every breakthrough was, first, forbidden.</em>",
    Constellation: window.ConPrometheus, side: "left", dark: false,
    glyphPos: { right: "2%", top: "8%" },
  },
  {
    idx: 2, roman: "II", greek: "Ἴκαρος", glyph: "Ι",
    name: '<span class="foil">Icarus</span>',
    line: "Given wings, he was warned — not too low, not too high. He flew at the sun anyway.",
    echoTag: "Today",
    echoText: "The meteoric rise. The all-nighter. The burnout. <em>Ambition and warning are the same wing.</em>",
    Constellation: window.ConIcarus, side: "right", dark: false,
    glyphPos: { left: "0%", top: "4%" },
  },
  {
    idx: 3, roman: "III", greek: "Σίσυφος", glyph: "Σ",
    name: 'Sis<span class="foil">yphus</span>',
    line: "Condemned to heave the boulder up the slope, only to watch it roll back down — forever.",
    echoTag: "Today",
    echoText: "The daily practice. The inbox. The rep. <em>One must imagine Sisyphus happy.</em>",
    Constellation: window.ConSisyphus, side: "left", dark: true,
    glyphPos: { right: "1%", top: "10%" },
  },
  {
    idx: 4, roman: "IV", greek: "Ἀριάδνη", glyph: "Α",
    name: 'Ari<span class="foil">adne</span>',
    line: "She gave him a single thread, so that having gone into the labyrinth, he could find the way back out.",
    echoTag: "Today",
    echoText: "Every note you leave yourself is a thread into the dark. <em>Memory is how you walk back out of the maze.</em>",
    Constellation: window.ConAriadne, side: "right", dark: true,
    glyphPos: { left: "1%", top: "6%" },
  },
];

// ── Overture ────────────────────────────────────────────────────
function Overture() {
  return (
    <section className="scene overture" data-scene={0} data-roman="0">
      <div className="ghost-glyph layer" data-layer data-depth="70" aria-hidden="true"
           style={{ color: "rgba(135,99,38,0.06)", fontSize: "clamp(260px, 40vw, 640px)",
                    left: "50%", top: "50%", transform: "translate(-50%,-50%)" }}>
        ✶
      </div>
      <div className="layer" data-layer data-depth="-40"
           style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center",
                    justifyContent: "center", zIndex: 2, opacity: 0.9, pointerEvents: "none" }}>
        <div className="etch" style={{ width: "min(58vw, 560px)" }}>
          <window.ConStarfield />
        </div>
      </div>
      <div className="scene-wrap" style={{ textAlign: "center", position: "relative", zIndex: 4 }}>
        <div className="layer" data-layer data-depth="16">
          <div className="wm"><span className="d" />NARA</div>
          <div className="eyebrow">Sapere aude · Dare to know</div>
          <h1>We have always<br />told the same<br /><span className="disp-i foil">stories.</span></h1>
          <p className="lede">
            Four myths, etched in gold. Each is also a story you are living <em>now</em>.
            Scroll — and fall through them, from the first light to the dark at the center of the maze.
          </p>
        </div>
      </div>
      <div className="scroll-cue"><span>Descend</span><span className="line" /></div>
    </section>
  );
}

// ── Finale (Nara CTA) ───────────────────────────────────────────
function Finale() {
  return (
    <section className="finale" data-scene={5} data-roman="V">
      <div className="finale-inner">
        <div className="seal" aria-hidden="true">
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
            <path d="M15 3 L15 27 M5 9 L25 21 M25 9 L5 21" stroke="currentColor" strokeWidth="1" opacity="0.5" />
            <circle cx="15" cy="15" r="5.5" stroke="currentColor" strokeWidth="1.2" />
            <circle cx="15" cy="15" r="1.6" fill="currentColor" />
          </svg>
        </div>
        <span className="eyebrow">Your myth · Your thread</span>
        <h2>Your story is the<br />oldest story.<br /><span className="disp-i foil">Keep it in gold.</span></h2>
        <p className="sub">
          Nara holds the thread for you — the moments worth finding your way back to,
          carried out of the labyrinth and kept. <em>Sapere aude.</em>
        </p>
        <div className="finale-actions">
          <a className="btn-gold" href="#" onClick={(e) => e.preventDefault()}>Begin your thread</a>
          <a className="btn-line" href="#overture" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>Read the myths again</a>
        </div>
        <div className="colophon">
          <div className="wm"><span className="d" />NARA</div>
          <div className="aude">Sapere aude — dare to know.</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Scene, Overture, Finale, Dust, SCENES });