// 05 · The Gap

function TabGap() {
  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="05 · THE GAP"
        title="Same sky. Same physics. 100 times safer if someone is watching."
        right="Source · NTSB / FAA · Public Domain" />

      {/* 100x stat callout */}
      <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 24, marginBottom: 40 }}>
        <Readout label="Fatal Accident Rate Gap" value="100\u00D7" accent="var(--red)" size={56} />
        <div style={{
          border: '1px solid var(--line)', background: 'var(--bg-2)', padding: '20px 24px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10,
        }}>
          <div className="serif" style={{ fontSize: 17, color: 'var(--ink)', lineHeight: 1.5, fontWeight: 300, textWrap: 'pretty' }}>
            The fatal accident rate in general aviation vs commercial aviation. Same sky. Different outcomes.
          </div>
          <Confidence level="high" />
        </div>
      </div>

      {/* US map placeholder */}
      <div style={{ marginTop: 24 }}>
        <Tick color="var(--gold)">&#x258C; GEOGRAPHIC DISTRIBUTION</Tick>
        <div style={{
          border: '1px solid var(--line)', background: 'var(--bg-2)',
          padding: 28, marginTop: 14, height: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 12,
        }}>
          <Icon name="map" size={24} color="var(--ink-dimmer)" />
          <span className="mono" style={{ color: 'var(--ink-dimmer)', fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase' }}>
            US ACCIDENT MAP — AWAITING PIPELINE
          </span>
        </div>
      </div>

      {/* Weather problem narrative */}
      <div style={{ marginTop: 40, padding: '24px 28px', border: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <Tick color="var(--gold)">&#x258C; THE WEATHER PROBLEM</Tick>
        <div className="serif" style={{ fontSize: 15, color: 'var(--ink-dim)', lineHeight: 1.7, marginTop: 14, textWrap: 'pretty' }}>
          <strong style={{ color: 'var(--ink)' }}>Weather has always been the great equalizer.</strong> Commercial
          aviation solved it with instrument approaches, dual-redundant autopilots, predictive windshear systems,
          and mandatory weather radar. General aviation largely did not. A VFR-into-IMC event in a Cessna 172
          has roughly the same lethality today as it did in 1975. The technology exists. The mandate does not.
          The gap between what is possible and what is required is where the accidents live.
        </div>
        <div className="serif" style={{ fontSize: 15, color: 'var(--ink-dim)', lineHeight: 1.7, marginTop: 12, textWrap: 'pretty' }}>
          The NTSB has recommended enhanced weather training, affordable ADS-B weather uplinks, and terrain
          awareness systems for Part 91 operations repeatedly since the 1990s. Many of those recommendations
          remain open. The gap is not a mystery. It is a policy choice.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TabGap });