// 03 · The Failure Modes

function TabFailure() {
  const axes = [
    { label: 'Weather', color: 'var(--blue)' },
    { label: 'Mechanical', color: 'var(--amber)' },
    { label: 'Human', color: 'var(--red)' },
    { label: 'Navigation', color: 'var(--gold)' },
    { label: 'Communications', color: 'var(--steel)' },
    { label: 'Maintenance', color: 'var(--ink-dim)' },
  ];

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="03 · THE FAILURE MODES"
        title="What brought aircraft down, decade by decade."
        right="Source · NTSB · Public Domain" />

      <div style={{ marginBottom: 14 }}><Confidence level="candidate" /></div>

      {/* Radial fingerprint placeholder */}
      <div style={{ marginTop: 24 }}>
        <Tick color="var(--gold)">&#x258C; FAILURE MODE FINGERPRINT</Tick>
        <div style={{
          border: '1px solid var(--line)', background: 'var(--bg-2)',
          padding: 28, marginTop: 14, minHeight: 360,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 20,
        }}>
          {/* Placeholder radial hint */}
          <div style={{
            width: 200, height: 200, borderRadius: '50%',
            border: '1px dashed var(--line-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <span className="mono" style={{ color: 'var(--ink-dimmer)', fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase' }}>
              RADIAL CHART
            </span>
          </div>

          {/* 6-axis legend */}
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: 'center' }}>
            {axes.map(a => (
              <div key={a.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 8, height: 8, background: a.color, borderRadius: '50%' }} />
                <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 10, letterSpacing: 0.1, textTransform: 'uppercase' }}>{a.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

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

Object.assign(window, { TabFailure });