// App shell — tab navigation, splash routing.

const TABS = [
  { id: 'waves', n: '01', label: 'The Waves' },
  { id: 'door', n: '02', label: 'The Door' },
  { id: 'flow', n: '03', label: 'The Flow' },
  { id: 'enforcement', n: '04', label: 'The Enforcement Machine' },
  { id: 'names', n: '05', label: 'The Names' },
  { id: 'reckoning', n: '06', label: 'The Reckoning' },
  { id: 'methodology', n: '07', label: 'The Methodology' },
];

function App() {
  const [phase, setPhase] = React.useState(
    sessionStorage.getItem('corpus_the-crossing_seen') ? 'app' : 'splash'
  );
  const [tab, setTab] = React.useState('waves');
  const [transitioning, setTransitioning] = React.useState(false);

  const enter = () => {
    sessionStorage.setItem('corpus_the-crossing_seen', '1');
    setTransitioning(true);
    setTimeout(() => {
      setPhase('app');
      setTransitioning(false);
    }, 700);
  };

  // Keyboard navigation
  React.useEffect(() => {
    const k = (e) => {
      if (phase === 'splash' && (e.key === 'Enter' || e.key === ' ')) enter();
      if (phase === 'app') {
        const idx = TABS.findIndex(t => t.id === tab);
        if (e.key === 'ArrowRight' && idx < TABS.length - 1) { setTab(TABS[idx + 1].id); window.scrollTo({ top: 0, behavior: 'smooth' }); }
        if (e.key === 'ArrowLeft' && idx > 0) { setTab(TABS[idx - 1].id); window.scrollTo({ top: 0, behavior: 'smooth' }); }
      }
    };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [phase, tab]);

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

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)' }}>
      <TopBar tab={tab} setTab={setTab} />
      <main id="main-content" role="main" aria-label={TABS.find(t => t.id === tab)?.label}>
      <div style={{ animation: 'fadeUp 600ms cubic-bezier(.2,.7,.2,1) both' }} key={tab}>
        {tab === 'waves' && <TabWaves />}
        {tab === 'door' && <TabDoor />}
        {tab === 'flow' && <TabFlow />}
        {tab === 'enforcement' && <TabEnforcement />}
        {tab === 'names' && <TabNames />}
        {tab === 'reckoning' && <TabReckoning />}
        {tab === 'methodology' && <TabMethodology />}
      </div>
      </main>
      <Footer />
    </div>
  );
}

function TopBar({ tab, setTab }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(16,12,8,0.92)', backdropFilter: 'blur(8px)',
      borderBottom: '1px solid #2A2218',
    }}>
      {/* Top instrument strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 56px 12px',
      }}>
        <a href="https://onehundredyears.report" style={{ textDecoration: 'none' }}>
          <SeriesMark />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          <LiveReadout label="ARRIVALS" value={fmt(window.META.totalArrivals)} color="#C9A84C" />
          <LiveReadout label="SOURCE" value="DHS YEARBOOK" />
          <LiveCounter />
          <LiveReadout label="UPDATED" value="22 MAY 2026" />
        </div>
      </div>
      {/* Tab strip */}
      <div role="tablist" aria-label="Issue sections" style={{
        display: 'flex', padding: '0 56px', gap: 0,
        borderTop: '1px solid #2A2218', overflowX: 'auto',
      }}>
        {TABS.map(t => {
          const active = tab === t.id;
          return (
            <button key={t.id} role="tab" aria-selected={active} aria-controls={`panel-${t.id}`} onClick={() => { setTab(t.id); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '16px 18px', position: 'relative',
              display: 'flex', alignItems: 'baseline', gap: 8,
              color: active ? '#C9A84C' : '#8A7E6A',
              transition: 'color 180ms', whiteSpace: 'nowrap',
            }}>
              <span className="mono" style={{
                fontSize: 10, letterSpacing: 0.2,
                color: active ? '#C9A84C' : '#5A4E3A',
              }}>
                {t.n}
              </span>
              <span className="serif" style={{ fontSize: 14.5, letterSpacing: -0.1 }}>{t.label}</span>
              {active && <span style={{
                position: 'absolute', left: 0, right: 0, bottom: -1,
                height: 2, background: '#C9A84C',
              }} />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div style={{
      borderTop: '1px solid #2A2218', padding: '24px 56px 36px',
      marginTop: 40, background: 'rgba(16,12,8,0.6)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ display: 'flex', gap: 32, alignItems: 'baseline' }}>
          <SeriesMark />
          <Tick>VOL. III {'·'} ISSUE 07 {'·'} THE CROSSING</Tick>
        </div>
        <div style={{ display: 'flex', gap: 24 }}>
          <Tick>← PREV {'·'} DISASTER DECLARATIONS</Tick>
          <Tick color="#C9A84C">NEXT {'·'} AMERICAN PRISONS {'→'}</Tick>
        </div>
      </div>
      <div style={{
        marginTop: 18, display: 'flex', justifyContent: 'space-between',
        borderTop: '1px solid #2A2218', paddingTop: 14,
      }}>
        <Tick>SOURCE {'·'} DHS {'·'} INS {'·'} NATIONAL ARCHIVES {'·'} TRAC {'·'} PUBLIC DOMAIN</Tick>
        <Tick>METHODOLOGY {'·'} {'§'} 07</Tick>
        <Tick>MIT LICENSE {'·'} OPEN DATA {'·'} NO TRACKING</Tick>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);