// intro-curtain.jsx — CSS-only, reliable

function IntroCurtain({ onDone, accent = '#991539' }) {
  const [phase, setPhase] = React.useState('phrase'); // phrase → switch → chapter → exit
  const [progress, setProgress] = React.useState(0);

  // Progress bar ~4s
  React.useEffect(() => {
    let raf, start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 4000);
      setProgress(1 - Math.pow(1 - p, 3));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Phase timeline
  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase('switch'),  2200);
    const t2 = setTimeout(() => setPhase('chapter'), 3000);
    const t3 = setTimeout(() => setPhase('exit'),    4600);
    const t4 = setTimeout(() => { onDone && onDone(); }, 5800);
    return () => [t1,t2,t3,t4].forEach(clearTimeout);
  }, [onDone]);

  const pct = Math.round(progress * 100);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 9000,
      background: '#0a0908',
      pointerEvents: phase === 'exit' ? 'none' : 'auto',
      opacity: phase === 'exit' ? 0 : 1,
      transition: phase === 'exit' ? 'opacity 1.1s cubic-bezier(.4,0,.2,1)' : 'none',
    }}>
      <style>{`
        @keyframes fadeSlideUp {
          from { opacity: 0; transform: translateY(32px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeSlideDown {
          from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
          to   { opacity: 0; transform: translateY(-24px) scale(0.97); filter: blur(6px); }
        }
        @keyframes fadeSlideIn {
          from { opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(6px); }
          to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
        }
        @keyframes bottomBarIn {
          from { opacity: 0; transform: translateY(10px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        .phrase-line1 { animation: fadeSlideUp .9s cubic-bezier(.16,1,.3,1) .2s both; }
        .phrase-line2 { animation: fadeSlideUp .9s cubic-bezier(.16,1,.3,1) .42s both; }

        .phrase-out { animation: fadeSlideDown .7s cubic-bezier(.4,0,.6,1) both; }
        .phrase-out-2 { animation: fadeSlideDown .7s cubic-bezier(.4,0,.6,1) .08s both; }

        .chapter-in { animation: fadeSlideIn .9s cubic-bezier(.16,1,.3,1) both; }
      `}</style>

      {/* Centre stage */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        textAlign: 'center',
      }}>

        {/* Phrase */}
        {(phase === 'phrase' || phase === 'switch') && (
          <div>
            <div
              className={phase === 'switch' ? 'phrase-out' : 'phrase-line1'}
              style={{
                fontFamily: "'Fraunces', Georgia, serif",
                fontSize: 'clamp(38px, 6.5vw, 100px)',
                fontWeight: 300,
                letterSpacing: '-.03em',
                lineHeight: 1.08,
                color: '#f0ebe2',
                marginBottom: '0.1em',
                willChange: 'transform, opacity',
              }}>Made for Dreamers,</div>
            <div
              className={phase === 'switch' ? 'phrase-out-2' : 'phrase-line2'}
              style={{
                fontFamily: "'Fraunces', Georgia, serif",
                fontSize: 'clamp(38px, 6.5vw, 100px)',
                fontWeight: 300,
                fontStyle: 'italic',
                letterSpacing: '-.03em',
                lineHeight: 1.08,
                color: accent,
                willChange: 'transform, opacity',
              }}>by Dreamers.</div>
          </div>
        )}

        {/* Chapter One */}
        {(phase === 'chapter' || phase === 'exit') && (
          <div className="chapter-in" style={{
            fontFamily: "'Fraunces', Georgia, serif",
            fontSize: 'clamp(56px, 10vw, 180px)',
            fontWeight: 300,
            letterSpacing: '-.04em',
            lineHeight: .92,
            whiteSpace: 'nowrap',
            willChange: 'transform, opacity',
          }}>
            <span style={{ color: '#f0ebe2' }}>Chapter </span>
            <span style={{ color: accent, fontStyle: 'italic' }}>One.</span>
          </div>
        )}
      </div>

      {/* Bottom bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 3,
        padding: '0 32px 36px',
        animation: 'bottomBarIn .9s ease .7s both',
      }}>
        {/* Full-width progress line */}
        <div style={{
          height: 1, background: 'rgba(240,235,226,.1)',
          marginBottom: 20, position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, height: '100%',
            width: `${pct}%`, background: accent,
            boxShadow: `0 0 10px ${accent}99`,
            transition: 'width .12s linear',
          }} />
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          alignItems: 'center',
          fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
          fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase',
          color: 'rgba(240,235,226,.5)',
        }}>
          <span>Branding &amp; Storytelling</span>
          <div style={{ textAlign: 'center', color: accent, fontVariantNumeric: 'tabular-nums' }}>
            {String(pct).padStart(3, '0')}
          </div>
          <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 }}>
            <span style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontSize: 'clamp(13px, 1.3vw, 18px)',
              fontWeight: 300, fontStyle: 'italic',
              letterSpacing: '-.01em', textTransform: 'none',
              color: 'rgba(240,235,226,.7)',
            }}>Chapter One</span>
            <span style={{ opacity: .4, fontSize: 9 }}>Est. 2023</span>
          </div>
        </div>
      </div>

      {/* Grain */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        mixBlendMode: 'overlay', opacity: .13,
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>")`,
        backgroundSize: '200px 200px',
      }} />
    </div>
  );
}

Object.assign(window, { IntroCurtain });