// scene6_cta.jsx — Landing on "Open the prototype" CTA

function Scene6CTA() {
  const { localTime, duration } = useSprite();
  const timeline = useTimeline();

  const p = localTime;
  const titleP = clamp(p / 0.8, 0, 1);
  const subP   = clamp((p - 0.8) / 0.6, 0, 1);
  const ctaP   = clamp((p - 1.5) / 0.6, 0, 1);
  const actualTime = timeline.actualTime ?? timeline.time;
  const replayP = clamp((actualTime - timeline.duration + 0.8) / 0.8, 0, 1);
  const hasEnded = actualTime >= timeline.duration - 0.1;

  const pulseScale = 1 + 0.03 * Math.sin(p * 2.6) * (p > 2.0 ? 1 : 0);
  const enterP = clamp(p / 1.5, 0, 1); // scene fade-in 0 → 1.5s (final scene, no exit)
  const handleReplay = () => {
    timeline.setTime(0);
    timeline.setPlaying(true);
    if (typeof window.__startAudio === 'function') window.__startAudio();
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: ASI_COLORS.canvas, overflow:'hidden',
      display:'flex', flexDirection:'column',
      alignItems:'center', justifyContent:'center',
      opacity: enterP,
    }}>
      {/* faint grid */}
      <div style={{
        position:'absolute', inset:0,
        backgroundImage: 'radial-gradient(#d4d7dc 1px, transparent 1px)',
        backgroundSize: '28px 28px',
        opacity: 0.25,
      }}/>

      {/* Subtle orbit glyphs — 5 tier markers rotating very slowly around center */}
      <OrbitGlyphs time={p}/>

      {/* Small eyebrow */}
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.08em',
        textTransform: 'uppercase', color: ASI_COLORS.accent,
        opacity: titleP,
        marginBottom: 20,
        transform: `translateY(${(1-titleP)*10}px)`,
      }}>WTW ASI · 2026 · France prototype</div>

      {/* Main title */}
      <div style={{
        fontSize: 86, fontWeight: 600, letterSpacing: '-0.025em',
        color: ASI_COLORS.ink, textAlign:'center', lineHeight: 1.05,
        opacity: titleP,
        transform: `translateY(${(1-titleP)*18}px)`,
        maxWidth: 1400,
      }}>
        One cycle.<br/>
        <span style={{ color: ASI_COLORS.accent }}>One source of truth.</span>
      </div>

      <div style={{
        marginTop: 24, fontSize: 20, color: ASI_COLORS.inkSoft,
        textAlign:'center', lineHeight: 1.5,
        opacity: subP, maxWidth: 820,
        transform: `translateY(${(1-subP)*12}px)`,
      }}>
        Ranges, matrix, budget, and manager guidance —<br/>
        modeled, calibrated, and ready to upload to Oracle.
      </div>

      {/* CTA button */}
      <div style={{
        marginTop: 56,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 18,
        flexWrap: 'wrap',
        opacity: ctaP,
        transform: `translateY(${(1-ctaP)*14}px) scale(${pulseScale})`,
      }}>
        <a
          href="app.html"
          style={{
          display:'inline-flex', alignItems:'center', gap: 14,
          background: ASI_COLORS.accent,
          color: '#fff',
          padding: '18px 32px',
          borderRadius: 999,
          textDecoration: 'none',
          fontSize: 18, fontWeight: 600, letterSpacing: '-0.005em',
          boxShadow: '0 10px 28px rgba(127,53,178,0.32)',
          cursor: 'pointer',
          position: 'relative',
          zIndex: 10,
        }}>
          <span>Open the prototype</span>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M4 10h12M12 5l5 5-5 5" stroke="#fff" strokeWidth="2"
                  strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
        {hasEnded && (
          <button
            type="button"
            onClick={handleReplay}
            style={{
              display:'inline-flex', alignItems:'center', gap: 12,
              background: '#fff',
              color: ASI_COLORS.ink,
              padding: '17px 28px',
              borderRadius: 999,
              border: '1px solid rgba(26,29,33,0.12)',
              fontSize: 18, fontWeight: 600, letterSpacing: '-0.005em',
              boxShadow: '0 10px 28px rgba(26,29,33,0.12)',
              cursor: 'pointer',
              position: 'relative',
              zIndex: 10,
              opacity: replayP,
              transform: `translateY(${(1-replayP)*10}px)`,
            }}
          >
            <span>Play Again</span>
            <svg width="19" height="19" viewBox="0 0 20 20" fill="none">
              <path d="M16 10a6 6 0 1 1-1.76-4.24" stroke="currentColor" strokeWidth="2"
                    strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M16 4v5h-5" stroke="currentColor" strokeWidth="2"
                    strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        )}
      </div>

      {/* Small footer */}
      <div style={{
        position:'absolute', bottom: 40, left: 0, right: 0,
        textAlign: 'center',
        fontSize: 16, color: ASI_COLORS.inkMuted,
        letterSpacing: '0.04em', textTransform: 'uppercase',
        opacity: ctaP,
      }}>The film stops here · choose Open prototype or Play Again</div>
    </div>
  );
}

function OrbitGlyphs({ time }) {
  // 7 glyphs in a wide ellipse
  const tiers = ['High','Meets','Low','High','Meets','High','Meets'];
  const cx = 960, cy = 540;
  const rx = 660, ry = 300;
  return (
    <>
      {tiers.map((t, i) => {
        const angle = (i / tiers.length) * Math.PI * 2 + time * 0.15;
        const x = cx + Math.cos(angle) * rx;
        const y = cy + Math.sin(angle) * ry;
        const behindness = (Math.sin(angle) + 1) / 2; // 0..1
        const scale = 0.7 + behindness * 0.6;
        const op = 0.25 + behindness * 0.35;
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            transform: `translate(-50%,-50%) scale(${scale})`,
            opacity: op,
          }}>
            <TierGlyph tier={t} size={28}/>
          </div>
        );
      })}
    </>
  );
}

Object.assign(window, { Scene6CTA });