// Splash screen — three beats.

function Splash({ onEnter }) {
  // Use real latest anomaly if available
  const latest = window.annualAnomaly?.[window.annualAnomaly.length - 1];
  const splashNumber = latest ? (latest.anomaly > 0 ? '+' : '') + latest.anomaly.toFixed(2) : '+3.55';

  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: 'var(--bg)', position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: '60px 80px', overflow: 'hidden',
    }}>
      {/* Background pressure gradient */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}>
        <defs>
          <radialGradient id="splashGlow" cx="50%" cy="55%" r="60%">
            <stop offset="0%" stopColor="#D73027" stopOpacity="0.35" />
            <stop offset="35%" stopColor="#A50026" stopOpacity="0.15" />
            <stop offset="100%" stopColor="#0A0F1A" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#splashGlow)" />
      </svg>

      {/* Isobar lines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.10 }}>
        {Array.from({ length: 14 }).map((_, i) => (
          <ellipse key={i}
            cx="50%" cy="55%"
            rx={120 + i * 90} ry={70 + i * 55}
            fill="none" stroke="#8BAFC7" strokeWidth="0.6"
            strokeDasharray={i % 3 === 0 ? '0' : '2 6'}
          />
        ))}
      </svg>

      {/* Top-left brand bar */}
      <div style={{
        position: 'absolute', top: 28, left: 36, display: 'flex', alignItems: 'center', gap: 16,
        color: 'var(--ink-dim)',
      }}>
        <SeriesMark />
        <span className="mono" style={{ fontSize: 10, letterSpacing: 0.3, textTransform: 'uppercase', color: '#4E6A82' }}>
          Vol. III — Issue 04 / The Atmosphere
        </span>
      </div>
      <div style={{ position: 'absolute', top: 28, right: 36, display: 'flex', gap: 24 }}>
        <Tick>52.731°N · 124.901°W</Tick>
        <Tick>22 May 2026 · 18:42:07 UTC</Tick>
      </div>

      {/* Stage */}
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <div className="mono" style={{
          color: '#4E6A82', fontSize: 11, letterSpacing: 0.4, textTransform: 'uppercase',
          marginBottom: 28, animation: 'fade 1s ease both',
        }}>
          [ Initializing · GHCN-Daily · 1,218 stations loaded ]
        </div>

        <div style={{ position: 'relative', display: 'inline-block' }}>
          <div className="mono" style={{
            fontSize: 256, lineHeight: 0.9, fontWeight: 700, letterSpacing: -8,
            color: '#D73027',
            textShadow: '0 0 80px rgba(215,48,39,0.25)',
            animation: 'fadeUp 1.4s cubic-bezier(.2,.7,.2,1) both',
          }}>
            {splashNumber}
          </div>
          {/* Crosshair around the number */}
          <svg width="80" height="80" style={{ position: 'absolute', top: -20, left: -50 }}>
            <path d="M0,0 L0,30 M0,0 L30,0" stroke="#C9A84C" strokeWidth="1" fill="none" opacity="0.6" />
          </svg>
          <svg width="80" height="80" style={{ position: 'absolute', bottom: -20, right: -50 }}>
            <path d="M80,80 L80,50 M80,80 L50,80" stroke="#C9A84C" strokeWidth="1" fill="none" opacity="0.6" />
          </svg>
        </div>

        <div className="mono" style={{
          color: '#8BAFC7', fontSize: 13, letterSpacing: 0.15, marginTop: 16,
          opacity: beat >= 1 ? 1 : 0, transition: 'opacity 800ms ease',
        }}>
          °F above the 1900–1950 baseline. Today.
        </div>

        <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="serif" style={{
            fontSize: 84, lineHeight: 0.95, letterSpacing: -2.5, color: '#E6ECF2', fontWeight: 300,
          }}>
            The Atmosphere
          </div>
          <div className="serif" style={{
            color: '#8BAFC7', fontSize: 18, marginTop: 20, fontStyle: 'italic',
            maxWidth: 720, textWrap: 'balance',
          }}>
            A century of weather. Every station. Every record. What the atmosphere is telling us.
          </div>
        </div>

        <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 = '#0A0F1A'; }}
          onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#C9A84C'; }}>
            Enter the data
            <span style={{ fontSize: 14 }}>→</span>
          </button>
          <div className="mono" style={{ color: '#4E6A82', 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 #1B2740', paddingTop: 12,
      }}>
        <Tick>NOAA · GHCN-Daily · CC0</Tick>
        <Tick color="#8BAFC7">One Hundred Years — A reporting series</Tick>
        <Tick>METHODOLOGY § 06</Tick>
      </div>
    </div>
  );
}

function SeriesMark() {
  return (
    <a href="https://onehundredyears.report" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', border: 'none' }}>
      <svg width="14" height="56" viewBox="0 0 18 72">
        <line x1="0" y1="0" x2="0" y2="72" stroke="#C9A84C" strokeWidth="1.5"/>
        <line x1="0" y1="0"  x2="12" y2="0"  stroke="#C9A84C" strokeWidth="1.5"/>
        <line x1="0" y1="8"  x2="7"  y2="8"  stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="16" x2="7"  y2="16" stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="24" x2="12" y2="24" stroke="#C9A84C" strokeWidth="1.5"/>
        <line x1="0" y1="32" x2="7"  y2="32" stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="40" x2="7"  y2="40" stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="48" x2="12" y2="48" stroke="#C9A84C" strokeWidth="1.5"/>
        <line x1="0" y1="56" x2="7"  y2="56" stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="64" x2="7"  y2="64" stroke="#C9A84C" strokeWidth="0.8"/>
        <line x1="0" y1="72" x2="12" y2="72" stroke="#C9A84C" strokeWidth="1.5"/>
      </svg>
      <div style={{ lineHeight: 1.1 }}>
        <div className="mono" style={{ color: '#C9A84C', fontSize: 11, letterSpacing: 0.25, textTransform: 'uppercase', fontWeight: 700 }}>
          One Hundred Years
        </div>
        <div className="mono" style={{ color: '#4E6A82', fontSize: 9, letterSpacing: 0.25, textTransform: 'uppercase' }}>
          A reporting series
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { Splash, SeriesMark });