// App shell — tab navigation

const TABS = [
  { id: 'baseline', n: '01', label: 'The Baseline' },
  { id: 'strangest', n: '02', label: 'The Strangest Day' },
  { id: 'fronts', n: '03', label: 'The Fronts' },
  { id: 'keepers', n: '04', label: 'The Record Keepers' },
  { id: 'shift', n: '05', label: 'The Shift' },
  { id: 'methodology', n: '06', label: 'The Methodology' },
];

function App() {
  const [phase, setPhase] = React.useState('splash'); // 'splash' | 'app'
  const [tab, setTab] = React.useState('baseline');
  const [transitioning, setTransitioning] = React.useState(false);

  const enter = () => {
    setTransitioning(true);
    setTimeout(() => {
      setPhase('app');
      setTransitioning(false);
    }, 700);
  };

  React.useEffect(() => {
    const k = (e) => { if (phase === 'splash' && (e.key === 'Enter' || e.key === ' ')) enter(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [phase]);

  if (phase === 'splash') {
    return (
      <div style={{ position: 'relative' }}>
        <Splash onEnter={enter} />
        {transitioning && (
          <div style={{
            position: 'fixed', inset: 0, background: '#0A0F1A',
            animation: 'fade 700ms ease both', zIndex: 1000, pointerEvents: 'none',
          }} />
        )}
      </div>
    );
  }

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)' }}>
      <TopBar tab={tab} setTab={setTab} />
      <div style={{ animation: 'fadeUp 600ms cubic-bezier(.2,.7,.2,1) both' }} key={tab}>
        {tab === 'baseline' && <TabBaseline />}
        {tab === 'strangest' && <TabStrangest />}
        {tab === 'fronts' && <TabFronts />}
        {tab === 'keepers' && <TabKeepers />}
        {tab === 'shift' && <TabShift />}
        {tab === 'methodology' && <TabMethodology />}
      </div>
      <Footer />
    </div>
  );
}

function TopBar({ tab, setTab }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(10,15,26,0.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid #1B2740' }}>
      {/* Top instrument strip */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 56px 12px' }}>
        <SeriesMark />
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          <LiveReadout label="NOW" value={(() => { const l = window.annualAnomaly?.[window.annualAnomaly.length-1]; return l ? `${l.anomaly > 0 ? '+' : ''}${l.anomaly.toFixed(2)}°F` : '—'; })()} color="#D73027" pulse />
          <LiveReadout label="STATIONS" value="1,218" />
          <LiveReadout label="GHCN-DAILY" value="v3.30" />
          <LiveReadout label="UPDATED" value="22 MAY 2026 18:42Z" />
        </div>
      </div>
      {/* Tab strip */}
      <div style={{ display: 'flex', padding: '0 56px', gap: 0, borderTop: '1px solid #1B2740' }}>
        {TABS.map(t => {
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '16px 22px', position: 'relative',
              display: 'flex', alignItems: 'baseline', gap: 8,
              color: active ? '#C9A84C' : '#8BAFC7',
              transition: 'color 180ms',
            }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: 0.2, color: active ? '#C9A84C' : '#4E6A82' }}>
                {t.n}
              </span>
              <span className="serif" style={{ fontSize: 15, letterSpacing: -0.1 }}>{t.label}</span>
              {active && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -1, height: 2, background: '#C9A84C' }} />}
            </button>
          );
        })}
        <div style={{ flex: 1 }} />
        <button style={{
          background: 'transparent', border: 'none', cursor: 'pointer', padding: '16px 22px',
          color: '#8BAFC7', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Crosshair size={12} color="#8BAFC7" />
          <span className="mono" style={{ fontSize: 11, letterSpacing: 0.15, textTransform: 'uppercase' }}>Find a station</span>
        </button>
      </div>
    </div>
  );
}

function LiveReadout({ label, value, color = '#E6ECF2', pulse }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span className="mono" style={{ color: '#4E6A82', fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase' }}>{label}</span>
      <span className="mono" style={{ color, fontSize: 12, fontWeight: 700, letterSpacing: 0.04 }}>{value}</span>
      {pulse && <span style={{ width: 6, height: 6, background: color, borderRadius: '50%', animation: 'pulse 1.6s ease-in-out infinite' }} />}
    </div>
  );
}

function Footer() {
  return (
    <div style={{ borderTop: '1px solid #1B2740', padding: '24px 56px 36px', marginTop: 40, background: 'rgba(10,15,26,0.6)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ display: 'flex', gap: 32, alignItems: 'baseline' }}>
          <SeriesMark />
          <Tick>VOL. III · ISSUE 04 · THE ATMOSPHERE</Tick>
        </div>
        <div style={{ display: 'flex', gap: 24 }}>
          <Tick>← PREV · THE WATER</Tick>
          <Tick color="#C9A84C">NEXT · THE GROUND →</Tick>
        </div>
      </div>
      <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', borderTop: '1px solid #1B2740', paddingTop: 14 }}>
        <Tick>SOURCE · NOAA NCEI · GHCN-DAILY · CC0</Tick>
        <Tick>METHODOLOGY · § 06</Tick>
        <Tick>SHARE · COPY LINK · /one-hundred-years/atmosphere</Tick>
      </div>
    </div>
  );
}

// Wait for real data to load, then render
(window._realDataPromise || Promise.resolve()).then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
});