// Scene 3: Landing page hero + cursor drifts to demo card + answer streams with citations.

function MockCursor({ x, y, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, opacity,
      pointerEvents: 'none', zIndex: 50,
      filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.5))',
      transition: 'transform 0.1s',
    }}>
      <svg width="28" height="28" viewBox="0 0 24 24">
        <path d="M3 2 L3 18 L7 14 L10 21 L13 20 L10 13 L16 12 Z" fill="#fff" stroke="#000" strokeWidth="1.5"/>
      </svg>
    </div>
  );
}

function Scene3Hero() {
  const { localTime, duration } = useSprite();

  // Overall scene zoom: ken-burns in across full scene
  const zoomScale = interpolate([0, duration], [1.0, 1.04], Easing.linear)(localTime);
  const exitOp = animate({ from: 1, to: 0, start: duration - 0.4, end: duration, ease: Easing.easeInCubic })(localTime);

  // Cursor path: starts far left (after hero CTA), drifts right to demo card, then to citation
  // Card is right side of hero. Cursor target coords approx:
  const cursorX = interpolate(
    [0, 1.5, 3.5, 5.5, 7.0, 8.5],
    [260, 320, 1180, 1240, 1340, 1420],
    Easing.easeInOutCubic
  )(localTime);
  const cursorY = interpolate(
    [0, 1.5, 3.5, 5.5, 7.0, 8.5],
    [700, 680, 560, 640, 720, 760],
    Easing.easeInOutCubic
  )(localTime);
  const cursorOp = animate({ from: 0, to: 1, start: 0.2, end: 0.8 })(localTime);

  // Stream answer words into card
  const answerWords = ['Isolér', 'området,', 'evakuér', '100', 'm', 'radius', 'vinduespil', 'retning,', 'påfør', 'SCBA', 'og', 'klor-kemikaliedragt.'];
  const streamStart = 3.6, streamEnd = 6.2;
  const nWords = Math.floor(clamp((localTime - streamStart) / (streamEnd - streamStart), 0, 1) * answerWords.length);
  const answerText = answerWords.slice(0, nWords).join(' ');
  const streaming = localTime >= streamStart && localTime < streamEnd;

  // Citations pop in after answer
  const cit1Op = animate({ from: 0, to: 1, start: 6.3, end: 6.7, ease: Easing.easeOutBack })(localTime);
  const cit2Op = animate({ from: 0, to: 1, start: 6.6, end: 7.0, ease: Easing.easeOutBack })(localTime);

  // Highlight ring on demo card when cursor lands
  const ringOp = animate({ from: 0, to: 1, start: 5.3, end: 5.7 })(localTime) * animate({ from: 1, to: 0.3, start: 6.5, end: 7.5 })(localTime);

  // Citation click pulse at end
  const clickPulse = localTime > 7.8 && localTime < 8.2 ? Math.sin((localTime - 7.8) * Math.PI / 0.4) : 0;

  return (
    <div style={{
      position: 'absolute', inset: 0, background: V.bg0,
      opacity: exitOp,
      transform: `scale(${zoomScale})`, transformOrigin: '70% 50%',
    }}>
      {/* Nav */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 72,
        borderBottom: `1px solid ${V.lineSoft}`,
        display: 'flex', alignItems: 'center', padding: '0 60px', gap: 36,
        background: 'color-mix(in oklch, ' + V.bg0 + ' 90%, transparent)',
      }}>
        <CMLogo size={32}/>
        <div style={{ display: 'flex', gap: 32, marginLeft: 40, fontFamily: V.font, fontSize: 15, color: V.fg2 }}>
          <span>Produkt</span><span>On-prem</span><span>Sikkerhed</span><span>Demo</span><span>Docs</span>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
          <div style={{ padding: '8px 16px', fontFamily: V.font, fontSize: 14, color: V.fg1, border: `1px solid ${V.line}`, borderRadius: 6 }}>Log ind</div>
          <div style={{ padding: '8px 16px', fontFamily: V.font, fontSize: 14, background: V.primary, color: V.primaryFg, borderRadius: 6, fontWeight: 600 }}>Tal med os</div>
        </div>
      </div>

      {/* Hero left */}
      <div style={{ position: 'absolute', left: 140, top: 170, width: 820 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: `color-mix(in oklch, ${V.blue} 12%, transparent)`,
          border: `1px solid color-mix(in oklch, ${V.blue} 30%, transparent)`,
          color: V.blue, fontFamily: V.font, fontSize: 14, fontWeight: 500, marginBottom: 32,
        }}>
          🛡 EU Data Boundary · GDPR DPA · EU-hosted
        </div>
        <div style={{ fontFamily: V.font, fontSize: 86, fontWeight: 600, lineHeight: 1.02, color: V.fg0, letterSpacing: '-0.025em', marginBottom: 28 }}>
          Overblik over alt<br/>
          det I <span style={{ color: V.cyan }}>ved I skal.</span>
        </div>
        <div style={{ fontFamily: V.font, fontSize: 23, color: V.fg1, lineHeight: 1.45, maxWidth: 700, marginBottom: 40 }}>
          AI der styrker jeres rådgivning — ikke erstatter den.<br/>Svarene er jeres. Kilderne er jeres. I bestemmer.
        </div>
        <div style={{ display: 'flex', gap: 14 }}>
          <div style={{ padding: '14px 24px', background: V.primary, color: V.primaryFg, borderRadius: 8, fontFamily: V.font, fontSize: 17, fontWeight: 600 }}>
            Tal med os →
          </div>
          <div style={{ padding: '14px 24px', border: `1px solid ${V.line}`, color: V.fg1, borderRadius: 8, fontFamily: V.font, fontSize: 17, fontWeight: 500 }}>
            ▶ Se 2-min demo
          </div>
        </div>
      </div>

      {/* Hero right — demo card */}
      <div style={{
        position: 'absolute', left: 1080, top: 280, width: 720,
        background: V.bg1, borderRadius: 14,
        border: `1px solid ${V.lineSoft}`,
        padding: 28,
        boxShadow: `0 20px 60px rgba(0,0,0,0.35), 0 0 0 ${ringOp * 3}px color-mix(in oklch, ${V.primary} ${ringOp * 50}%, transparent)`,
      }}>
        {/* window chrome */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {[0,1,2].map(i => <div key={i} style={{ width: 12, height: 12, borderRadius: 6, background: V.line }}/>)}
          </div>
          <span style={{ fontFamily: V.mono, fontSize: 14, color: V.fg3, marginLeft: 8 }}>
            demo.coremindvault.com
          </span>
          <div style={{
            marginLeft: 'auto', padding: '4px 10px', borderRadius: 999,
            background: `color-mix(in oklch, ${V.green} 12%, transparent)`,
            color: V.green, fontFamily: V.font, fontSize: 13, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>● Foreslåede</div>
        </div>

        {/* user bubble */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 18 }}>
          <div style={{
            background: V.primary, color: V.primaryFg,
            padding: '14px 20px', borderRadius: '16px 16px 4px 16px',
            fontFamily: V.font, fontSize: 19, fontWeight: 500, maxWidth: '75%',
          }}>
            Hvad gør jeg ved klor-udslip?
          </div>
        </div>

        {/* answer bubble (appears once streaming starts) */}
        {localTime >= 3.4 && (
          <div style={{
            background: V.bg2, padding: '16px 20px',
            borderRadius: '16px 16px 16px 4px',
            fontFamily: V.font, fontSize: 19, lineHeight: 1.55, color: V.fg0,
            marginBottom: 14, minHeight: 64,
          }}>
            {answerText}
            {streaming && <span style={{
              display: 'inline-block', width: 3, height: 20, background: V.fg2,
              marginLeft: 3, verticalAlign: 'middle',
              opacity: Math.floor(localTime * 4) % 2 === 0 ? 1 : 0,
            }}/>}
          </div>
        )}

        {/* citation chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <div style={{
            opacity: cit1Op, transform: `scale(${0.85 + cit1Op * 0.15 + clickPulse * 0.08})`,
            padding: '8px 14px', borderRadius: 999,
            background: `color-mix(in oklch, ${V.blue} 14%, transparent)`,
            border: `1px solid color-mix(in oklch, ${V.blue} ${clickPulse > 0 ? 80 : 35}%, transparent)`,
            color: V.blue, fontFamily: V.font, fontSize: 14, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 8,
            boxShadow: clickPulse > 0 ? `0 0 20px color-mix(in oklch, ${V.blue} 50%, transparent)` : 'none',
          }}>
            📄 Brandprocedure-2024 § 4.2 · s. 12
          </div>
          <div style={{
            opacity: cit2Op, transform: `scale(${0.85 + cit2Op * 0.15})`,
            padding: '8px 14px', borderRadius: 999,
            background: `color-mix(in oklch, ${V.blue} 14%, transparent)`,
            border: `1px solid color-mix(in oklch, ${V.blue} 35%, transparent)`,
            color: V.blue, fontFamily: V.font, fontSize: 14, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            📄 Kemi-datablad-klor · s. 3
          </div>
        </div>

        {/* latency pill */}
        <div style={{
          position: 'absolute', top: -16, right: -16,
          background: V.bg2, border: `1px solid ${V.line}`,
          padding: '8px 14px', borderRadius: 999,
          fontFamily: V.font, fontSize: 13, color: V.fg1, fontWeight: 500,
          boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
          display: 'flex', alignItems: 'center', gap: 6,
          opacity: animate({ from: 0, to: 1, start: 6.8, end: 7.2, ease: Easing.easeOutBack })(localTime),
        }}>
          <span style={{ color: V.amber }}>⚡</span> 2,1 s svartid
        </div>
      </div>

      <MockCursor x={cursorX} y={cursorY} opacity={cursorOp}/>
    </div>
  );
}

// ───────── SCENE 4 · Three-step how-it-works cards ─────────

function Scene4Steps() {
  const { localTime, duration } = useSprite();
  const exitOp = animate({ from: 1, to: 0, start: duration - 0.4, end: duration, ease: Easing.easeInCubic })(localTime);

  // Slow pan downward + slight scale
  const panY = interpolate([0, duration], [0, -40], Easing.easeInOutCubic)(localTime);

  const steps = [
    { n: '01', t: 'I lægger ind', d: 'Jeres overenskomster, procedurer,\ndatablade. ACL per rolle.', icon: '↑' },
    { n: '02', t: 'I spørger', d: 'Som I ville spørge en erfaren\nkollega. Vi finder afsnittet.', icon: '✦' },
    { n: '03', t: 'I beslutter', d: 'Hvert svar har kilde. I verificerer,\ntilpasser, står på mål.', icon: '✓' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: V.bg0, opacity: exitOp }}>
      {/* section label */}
      <div style={{
        position: 'absolute', left: 160, top: 140 + panY,
        opacity: animate({ from: 0, to: 1, start: 0.1, end: 0.6 })(localTime),
      }}>
        <div style={{
          fontFamily: V.font, fontSize: 15, fontWeight: 500,
          color: V.primaryStrong, textTransform: 'uppercase', letterSpacing: '0.1em',
          marginBottom: 14,
        }}>Sådan arbejder I med Vault</div>
        <div style={{
          fontFamily: V.font, fontSize: 68, fontWeight: 600,
          color: V.fg0, letterSpacing: '-0.025em', lineHeight: 1.05,
        }}>Jeres viden.<br/><span style={{ color: V.cyan }}>Fundet frem. Uden omveje.</span></div>
      </div>

      {/* cards */}
      <div style={{
        position: 'absolute', left: 160, right: 160, top: 540 + panY,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28,
      }}>
        {steps.map((s, i) => {
          const cardStart = 0.8 + i * 0.4;
          const op = animate({ from: 0, to: 1, start: cardStart, end: cardStart + 0.5, ease: Easing.easeOutCubic })(localTime);
          const ty = animate({ from: 30, to: 0, start: cardStart, end: cardStart + 0.5, ease: Easing.easeOutBack })(localTime);
          const iconLit = localTime > cardStart + 0.2;
          return (
            <div key={s.n} style={{
              opacity: op, transform: `translateY(${ty}px)`,
              background: V.bg1, border: `1px solid ${V.lineSoft}`,
              borderRadius: 14, padding: 34,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 26 }}>
                <span style={{ fontFamily: V.mono, fontSize: 14, color: V.fg3 }}>{s.n}</span>
                <div style={{ flex: 1, height: 1, background: V.lineSoft }}/>
                <div style={{
                  width: 56, height: 56, borderRadius: 12,
                  background: iconLit ? `color-mix(in oklch, ${V.primary} 28%, transparent)` : V.bg2,
                  color: iconLit ? V.primaryStrong : V.fg3,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 28, fontWeight: 600,
                  transition: 'background 0.4s, color 0.4s',
                  boxShadow: iconLit ? `0 0 24px color-mix(in oklch, ${V.primary} 40%, transparent)` : 'none',
                }}>{s.icon}</div>
              </div>
              <div style={{ fontFamily: V.font, fontSize: 32, fontWeight: 600, color: V.fg0, marginBottom: 12, letterSpacing: '-0.01em' }}>{s.t}</div>
              <div style={{ fontFamily: V.font, fontSize: 18, color: V.fg2, lineHeight: 1.5, whiteSpace: 'pre-line' }}>{s.d}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Scene3Hero, Scene4Steps, MockCursor });