// Splash screen — three beats. Ship manifest aesthetic.

function Splash({ onEnter }) {
  const [beat, setBeat] = React.useState(0);
  React.useEffect(() => {
    const ts = [
      setTimeout(() => setBeat(1), 1400),
      setTimeout(() => setBeat(2), 2800),
      setTimeout(() => setBeat(3), 4400),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div style={{
      minHeight: '100vh', background: '#100C08', position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: '60px 80px', overflow: 'hidden',
    }}>
      {/* Manifest ruled lines (background) */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06 }}>
        {Array.from({ length: 40 }).map((_, i) => (
          <line key={i} x1="0" x2="100%" y1={60 + i * 28} y2={60 + i * 28}
            stroke="#C9A84C" strokeWidth="0.5" />
        ))}
        {/* Vertical columns like a ledger */}
        {[0.15, 0.35, 0.5, 0.65, 0.85].map((x, i) => (
          <line key={`v${i}`} x1={`${x * 100}%`} x2={`${x * 100}%`} y1="0" y2="100%"
            stroke="#C9A84C" strokeWidth="0.3" strokeDasharray="2 8" />
        ))}
      </svg>

      {/* Warm glow */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.15 }}>
        <defs>
          <radialGradient id="splashGlow" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#C9A84C" stopOpacity="0.20" />
            <stop offset="60%" stopColor="#1E1810" stopOpacity="0.05" />
            <stop offset="100%" stopColor="#100C08" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#splashGlow)" />
      </svg>

      {/* Top-left brand bar */}
      <div style={{
        position: 'absolute', top: 28, left: 36, display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <SeriesMark />
        <span className="mono" style={{ fontSize: 10, letterSpacing: 0.3, textTransform: 'uppercase', color: '#5A4E3A' }}>
          Vol. III — Issue 07 / The Crossing
        </span>
      </div>
      <div style={{ position: 'absolute', top: 28, right: 36, display: 'flex', gap: 24 }}>
        <Tick>DHS Yearbook · 1820–2024</Tick>
        <Tick>INS/ICE · TRAC · Ellis Island</Tick>
      </div>

      {/* Stage */}
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        {/* Initializing line */}
        <div className="mono" style={{
          color: '#5A4E3A', fontSize: 11, letterSpacing: 0.4, textTransform: 'uppercase',
          marginBottom: 28, animation: 'fade 1s ease both',
        }}>
          [ Initializing · DHS Yearbook · 204 years loaded ]
        </div>

        {/* Beat 1: The number */}
        <div className="mono" style={{
          fontSize: 200, lineHeight: 0.9, fontWeight: 700, letterSpacing: -6,
          color: '#F2EBD9',
          textShadow: '0 0 80px rgba(201,168,76,0.15)',
          animation: 'fadeUp 1.4s cubic-bezier(.2,.7,.2,1) both',
        }}>
          {window.META ? window.META.totalArrivals.toLocaleString() : '72,000,000'}
        </div>

        {/* Beat 2: The label */}
        <div className="serif" style={{
          color: '#8A7E6A', fontSize: 18, letterSpacing: 0.05, marginTop: 20,
          opacity: beat >= 1 ? 1 : 0, transition: 'opacity 800ms ease',
        }}>
          people who crossed to become American. Since 1820.
        </div>

        {/* Beat 3: Title */}
        <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="display" style={{
            fontSize: 84, lineHeight: 0.95, letterSpacing: -2.5, color: '#F2EBD9', fontWeight: 400,
          }}>
            The Crossing
          </div>
          <div className="serif" style={{
            color: '#8A7E6A', fontSize: 17, marginTop: 20, fontStyle: 'italic',
            maxWidth: 680, textWrap: 'balance', margin: '20px auto 0',
          }}>
            A century of arrivals, a century of departures. What the record shows about who was welcome, and when, and why.
          </div>
        </div>

        {/* Beat 4: Enter */}
        <div style={{
          marginTop: 64, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          opacity: beat >= 3 ? 1 : 0, transition: 'opacity 700ms ease',
        }}>
          <button onClick={onEnter} className="mono" style={{
            background: 'transparent', color: '#C9A84C',
            border: '1px solid #C9A84C', 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 = '#C9A84C'; e.currentTarget.style.color = '#100C08'; }}
          onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#C9A84C'; }}>
            Enter the record
            <span style={{ fontSize: 14 }}>{'→'}</span>
          </button>
          <div className="mono" style={{ color: '#5A4E3A', fontSize: 10, letterSpacing: 0.3, textTransform: 'uppercase' }}>
            {'↩'} Press return {'·'} or click to continue
          </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 #2A2218', paddingTop: 12,
      }}>
        <Tick>DHS {'·'} INS {'·'} NATIONAL ARCHIVES {'·'} PUBLIC DOMAIN</Tick>
        <Tick color="#8A7E6A">One Hundred Years {'—'} A reporting series</Tick>
        <Tick>METHODOLOGY {'§'} 07</Tick>
      </div>
    </div>
  );
}

Object.assign(window, { Splash });