// Splash screen — three beats.

function Splash({ onEnter }) {
  const SESSION_KEY = 'corpus_the-black-box_seen';
  const [beat, setBeat] = React.useState(0);
  const [exiting, setExiting] = React.useState(false);
  const [bgColor, setBgColor] = React.useState('#0A0A12');

  React.useEffect(() => {
    const ts = [
      setTimeout(() => setBeat(1), 3000),
      setTimeout(() => setBeat(2), 6000),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  // Keyboard listener
  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === 'Enter' && beat >= 2) handleEnter();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [beat]);

  function handleEnter() {
    if (exiting) return;
    setExiting(true);
    // Altitude-climb transition: bg shifts to deeper blue
    setBgColor('#0A1530');
    setTimeout(() => {
      sessionStorage.setItem(SESSION_KEY, '1');
      onEnter();
    }, 700);
  }

  // Generate altitude lines
  const altitudeLines = React.useMemo(() => {
    const lines = [];
    for (let i = 0; i < 40; i++) {
      const y = 2.5 + i * 2.5; // every 2.5% of viewport
      const isMajor = i % 5 === 0;
      lines.push({
        y: `${y}%`,
        opacity: isMajor ? 0.08 : 0.03,
        width: isMajor ? '60%' : '30%',
        left: isMajor ? '20%' : `${35 + (i % 3) * 10}%`,
      });
    }
    return lines;
  }, []);

  return (
    <div style={{
      minHeight: '100vh',
      background: bgColor,
      transition: 'background 600ms ease',
      position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: '60px 80px', overflow: 'hidden',
    }}>
      {/* Fade-out overlay */}
      {exiting && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 9998,
          background: 'var(--bg)',
          animation: 'fade 600ms ease 200ms both',
        }} />
      )}

      {/* Background: altitude lines (altimeter tape) */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        {altitudeLines.map((line, i) => (
          <div key={i} style={{
            position: 'absolute',
            top: line.y,
            left: line.left,
            width: line.width,
            height: 1,
            background: '#E8F0F8',
            opacity: line.opacity,
          }} />
        ))}
      </div>

      {/* Top-left brand bar */}
      <div style={{
        position: 'absolute', top: 28, left: 36, display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <SeriesMark />
        <Tick>Vol. IV — Issue 12 / The Black Box</Tick>
      </div>
      <div style={{ position: 'absolute', top: 28, right: 36, display: 'flex', gap: 24 }}>
        <Tick>NTSB · Aviation Accident Database · 1926–2024</Tick>
      </div>

      {/* Stage */}
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>

        {/* Beat 1: Two years side by side */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 100 }}>
          <div className="mono" style={{
            fontSize: 180, lineHeight: 0.9, fontWeight: 700, letterSpacing: -4,
            color: '#C0392B',
            textShadow: '0 0 60px rgba(192,57,43,0.20)',
            animation: 'fadeUp 1.4s cubic-bezier(.2,.7,.2,1) both',
          }}>
            1930
          </div>
          <div className="mono" style={{
            fontSize: 180, lineHeight: 0.9, fontWeight: 700, letterSpacing: -4,
            color: '#E8A838',
            textShadow: '0 0 60px rgba(232,168,56,0.20)',
            animation: 'fadeUp 1.4s cubic-bezier(.2,.7,.2,1) 200ms both',
          }}>
            2009
          </div>
        </div>

        {/* Beat 2: Labels + tagline */}
        <div style={{
          marginTop: 20,
          opacity: beat >= 1 ? 1 : 0, transition: 'opacity 800ms ease',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 40 }}>
            <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 12, letterSpacing: 0.15, maxWidth: 320, lineHeight: 1.5 }}>
              the last year it was normal for airlines to kill passengers
            </span>
            <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 12, letterSpacing: 0.15, maxWidth: 320, lineHeight: 1.5 }}>
              the last year a major US airline killed a passenger
            </span>
          </div>
          <div className="serif" style={{
            color: 'var(--ink-dim)', fontSize: 20, marginTop: 28, fontStyle: 'italic',
          }}>
            Seventy-nine years. One decision.
          </div>
        </div>

        {/* Beat 3: Title + thesis + enter button */}
        <div style={{
          marginTop: 64,
          opacity: beat >= 2 ? 1 : 0, transform: beat >= 2 ? 'none' : 'translateY(10px)',
          transition: 'all 900ms cubic-bezier(.2,.7,.2,1)',
        }}>
          <div className="garamond" style={{
            fontSize: 84, lineHeight: 0.95, letterSpacing: -2.5, color: 'var(--ink)', fontWeight: 400,
          }}>
            The Black Box
          </div>
          <div className="serif" style={{
            color: 'var(--ink-dim)', fontSize: 18, marginTop: 20, fontStyle: 'italic',
            maxWidth: 720, margin: '20px auto 0', textWrap: 'balance',
          }}>
            Every rule in commercial aviation was paid for with a hull. Every checklist exists because someone died without it. The accident rate fell from 40 per 100,000 hours to near zero — not by luck, but by investigation. This is the record.
          </div>

          <div style={{
            marginTop: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          }}>
            <button onClick={handleEnter} className="mono" style={{
              background: 'transparent', color: 'var(--gold)',
              border: '1px solid var(--gold)', padding: '14px 28px',
              fontSize: 12, letterSpacing: 0.3, textTransform: 'uppercase',
              cursor: 'pointer', fontFamily: "'Space Mono', monospace",
              transition: 'all 200ms', display: 'inline-flex', alignItems: 'center', gap: 14,
            }}
            onMouseOver={e => { e.currentTarget.style.background = 'var(--gold)'; e.currentTarget.style.color = 'var(--bg)'; }}
            onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--gold)'; }}>
              Enter the record
              <span style={{ fontSize: 14 }}>&rarr;</span>
            </button>
            <div className="mono" style={{ color: 'var(--ink-dimmer)', fontSize: 10, letterSpacing: 0.3, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="corner-down-left" size={11} color="var(--ink-dimmer)" /> Press return · or click to continue
            </div>
          </div>
        </div>
      </div>

      {/* Bottom rule */}
      <div style={{
        position: 'absolute', left: 36, right: 36, bottom: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderTop: '1px solid var(--line)', paddingTop: 12,
      }}>
        <Tick>Source · NTSB · Public Domain</Tick>
        <Tick color="var(--ink-dim)">One Hundred Years</Tick>
        <Tick>Methodology &sect; 07</Tick>
      </div>
    </div>
  );
}

Object.assign(window, { Splash });