// Scene 6: Outro (40–45s, 5s) — cinematic dictionary end card
function SceneOutro() {
  const { localTime } = useSprite();

  // Staged reveal:
  //  0.0 – 0.8  : breath (empty black)
  //  0.3 – 1.3  : quill fades/scales in
  //  1.0 – 1.9  : ÆWITA wordmark reveals (letter by letter mask)
  //  1.9 – 2.6  : dictionary line: "ǣwita (n.)  Old English."
  //  2.6 – 3.4  : definition: "A counselor of the law."
  //  3.4 – 4.2  : CTA button
  //  4.2 – 5.0  : url + subtle fade polish

  const logoIn    = clamp((localTime - 0.3) / 0.9, 0, 1);
  const wordIn    = clamp((localTime - 1.0) / 0.9, 0, 1);
  const dictIn    = clamp((localTime - 1.9) / 0.7, 0, 1);
  const defIn     = clamp((localTime - 2.6) / 0.8, 0, 1);
  const ctaIn     = clamp((localTime - 3.4) / 0.7, 0, 1);
  const urlIn     = clamp((localTime - 4.2) / 0.6, 0, 1);

  const logoOp = Easing.easeOutCubic(logoIn);
  const logoScale = 0.85 + logoIn * 0.15;

  // Subtle continuous breathing on the whole composition after reveal
  const breath = Math.sin(localTime * 0.8) * 0.002 + 1;

  const letters = ['Æ','W','I','T','A'];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: '#0A0B0C',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      {/* Warm vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, rgba(30,18,14,0.5) 0%, transparent 55%), radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.65) 100%)',
        pointerEvents: 'none',
      }}/>

      {/* Subtle grain (pseudo) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-radial-gradient(circle at 30% 40%, rgba(232,224,216,0.015) 0 1px, transparent 1px 3px)',
        pointerEvents: 'none',
        mixBlendMode: 'overlay',
      }}/>

      <div style={{
        transform: `scale(${breath})`,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        willChange: 'transform',
      }}>
        {/* Quill */}
        <div style={{
          opacity: logoOp,
          transform: `scale(${logoScale})`,
          marginBottom: 36,
          filter: `drop-shadow(0 0 40px rgba(217,72,78,${0.25 * logoOp}))`,
        }}>
          <AewitaQuill size={96} />
        </div>

        {/* ÆWITA wordmark — letter-by-letter reveal with mask */}
        <div style={{
          display: 'flex',
          gap: '0.14em',
          fontFamily: '"Cormorant Garamond", "Trajan Pro", Georgia, serif',
          fontSize: 92,
          fontWeight: 500,
          color: COLORS.textPrimary,
          letterSpacing: '0.12em',
          lineHeight: 1,
          marginBottom: 48,
          textTransform: 'uppercase',
          paddingLeft: '0.12em', // compensate letter-spacing visual
        }}>
          {letters.map((l, i) => {
            const letterT = clamp((localTime - 1.0 - i * 0.12) / 0.7, 0, 1);
            const eased = Easing.easeOutCubic(letterT);
            return (
              <span key={i} style={{
                display: 'inline-block',
                opacity: eased,
                transform: `translateY(${(1 - eased) * 18}px)`,
                filter: `blur(${(1 - eased) * 6}px)`,
                willChange: 'transform, opacity, filter',
              }}>{l}</span>
            );
          })}
        </div>

        {/* Hairline divider */}
        <div style={{
          width: 80 * Math.min(wordIn, dictIn),
          height: 1,
          background: 'rgba(200,133,107,0.5)',
          marginBottom: 26,
          transition: 'width 400ms',
        }}/>

        {/* Dictionary header: ǣwita (n.) — Old English. */}
        <div style={{
          fontFamily: '"Cormorant Garamond", Georgia, serif',
          fontSize: 22,
          fontStyle: 'italic',
          color: COLORS.textSecondary,
          letterSpacing: '0.02em',
          marginBottom: 14,
          opacity: Easing.easeOutCubic(dictIn),
          transform: `translateY(${(1 - dictIn) * 8}px)`,
          fontFeatureSettings: '"liga" 1, "dlig" 1',
        }}>
          <span style={{ color: COLORS.copper }}>ǣwita</span>
          <span style={{ color: COLORS.textMuted, margin: '0 10px' }}>(n.)</span>
          <span style={{ color: COLORS.textSecondary }}>— Old English.</span>
        </div>

        {/* Definition */}
        <div style={{
          fontFamily: '"Cormorant Garamond", Georgia, serif',
          fontSize: 30,
          fontWeight: 500,
          color: COLORS.textPrimary,
          letterSpacing: '0.01em',
          marginBottom: 56,
          opacity: Easing.easeOutCubic(defIn),
          transform: `translateY(${(1 - defIn) * 10}px)`,
        }}>
          A counselor of the law.
        </div>

        {/* CTA button */}
        <div style={{
          opacity: Easing.easeOutCubic(ctaIn),
          transform: `translateY(${(1 - ctaIn) * 14}px) scale(${0.96 + ctaIn * 0.04})`,
          padding: '15px 36px',
          background: COLORS.accent,
          borderRadius: 10,
          color: '#fff',
          fontSize: 15, fontWeight: 500,
          letterSpacing: '0.04em',
          fontFamily: FONTS.sans,
          boxShadow: `0 0 40px rgba(217,72,78,${0.25 * ctaIn}), 0 10px 30px rgba(0,0,0,0.3)`,
          marginBottom: 28,
          cursor: 'pointer',
        }}>
          Request a Demo
        </div>

        {/* URL */}
        <div style={{
          opacity: urlIn,
          fontFamily: FONTS.mono,
          fontSize: 13,
          color: COLORS.textMuted,
          letterSpacing: '0.18em',
        }}>
          aewita.com
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SceneOutro });