// 06 · The Lesson

function TabLesson() {
  const lessons = window.syntheticLessons || [
    { accident: 'Grand Canyon Midair', year: 1956, fatalities: 128, rule: 'Federal Aviation Act of 1958 — created the FAA' },
    { accident: 'Eastern 401 (Everglades)', year: 1972, fatalities: 101, rule: 'Crew Resource Management (CRM) training' },
    { accident: 'Tenerife Runway Collision', year: 1977, fatalities: 583, rule: 'Standardized phraseology / readback requirements' },
    { accident: 'PSA 182 / Cessna Midair', year: 1978, fatalities: 144, rule: 'TCAS mandate for Part 121 aircraft' },
    { accident: 'Air Florida 90 (14th St Bridge)', year: 1982, fatalities: 78, rule: 'De-icing / anti-icing procedure overhaul' },
    { accident: 'USAir 427 (Pittsburgh)', year: 1994, fatalities: 132, rule: 'Rudder redesign mandate (737)' },
    { accident: 'ValuJet 592 (Everglades)', year: 1996, fatalities: 110, rule: 'Cargo compartment fire detection / suppression' },
    { accident: 'Colgan 3407 (Buffalo)', year: 2009, fatalities: 50, rule: 'ATP requirement for Part 121 first officers (1,500-hr rule)' },
  ];

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="06 · THE LESSON"
        title="What aviation learned and what it cost to learn it."
        right="Source · NTSB / FAA · Public Domain" />

      {/* Accident timeline placeholder */}
      <div style={{ marginBottom: 40 }}>
        <Tick color="var(--gold)">&#x258C; ACCIDENT TIMELINE</Tick>
        <div style={{
          border: '1px solid var(--line)', background: 'var(--bg-2)',
          padding: 28, marginTop: 14, height: 120,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span className="mono" style={{ color: 'var(--ink-dimmer)', fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase' }}>
            HORIZONTAL TIMELINE — AWAITING PIPELINE
          </span>
        </div>
      </div>

      {/* Key accidents table */}
      <div style={{ marginBottom: 40 }}>
        <Tick color="var(--gold)">&#x258C; ACCIDENTS THAT CHANGED THE RULES</Tick>
        <div style={{ marginTop: 14, border: '1px solid var(--line)', overflow: 'hidden' }}>
          {/* Header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 80px 100px 1fr',
            background: 'var(--bg-2)', borderBottom: '1px solid var(--line)',
          }}>
            {['ACCIDENT', 'YEAR', 'FATALITIES', 'RULE THAT FOLLOWED'].map(h => (
              <div key={h} style={{ padding: '10px 14px' }}>
                <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 9, letterSpacing: 0.15, textTransform: 'uppercase' }}>{h}</span>
              </div>
            ))}
          </div>
          {/* Rows */}
          {lessons.map((d, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 80px 100px 1fr',
              borderBottom: i < lessons.length - 1 ? '1px solid var(--line)' : 'none',
              transition: 'background 120ms',
              cursor: 'default',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(201,168,76,0.03)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ padding: '10px 14px' }}>
                <span className="serif" style={{ color: 'var(--ink)', fontSize: 13, fontWeight: 400 }}>{d.accident}</span>
              </div>
              <div style={{ padding: '10px 14px' }}>
                <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 11 }}>{d.year}</span>
              </div>
              <div style={{ padding: '10px 14px' }}>
                <span className="mono" style={{ color: 'var(--red)', fontSize: 12, fontWeight: 700 }}>{d.fatalities}</span>
              </div>
              <div style={{ padding: '10px 14px' }}>
                <span className="serif" style={{ color: 'var(--ink-dim)', fontSize: 12.5, lineHeight: 1.4 }}>{d.rule}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* The what-if layer */}
      <div style={{ padding: '24px 28px', border: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <Tick color="var(--gold)">&#x258C; THE WHAT-IF LAYER</Tick>
        <div className="serif" style={{ fontSize: 15, color: 'var(--ink-dim)', lineHeight: 1.7, marginTop: 14, textWrap: 'pretty' }}>
          <strong style={{ color: 'var(--ink)' }}>Every rule in the Federal Aviation Regulations has a story behind it.</strong> Most
          of those stories end with a crash report. The pattern is consistent across a century of flight: an accident
          exposes a gap, the NTSB investigates and recommends, the FAA delays, and another accident forces the rule into
          existence. The 1,500-hour rule took 22 years from first recommendation to implementation. TCAS took 14 years.
          Cargo fire suppression took 8 years after ValuJet 592 burned into the Everglades.
        </div>
        <div className="serif" style={{ fontSize: 15, color: 'var(--ink-dim)', lineHeight: 1.7, marginTop: 12, textWrap: 'pretty' }}>
          The counterfactual is impossible to calculate precisely, but the shape is clear: every delay has a body count.
          The what-if layer of this analysis asks a simple question — if the recommendation had been adopted when first
          issued, how many of the subsequent accidents with the same causal factor could have been prevented?
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TabLesson });