// 02 · The Investigation

function TabInvestigation() {
  const recs = window.syntheticRecommendations || {};
  const total = recs.total || 15000;
  const adopted = recs.adopted || 65;
  const rejected = recs.rejected || 4;
  const open = recs.open || 18;
  const superseded = recs.superseded || 13;

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="02 · THE INVESTIGATION"
        title="Every accident. Every finding. Every recommendation."
        right="Source · NTSB · Public Domain" />

      {/* Recommendation stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }}>
        <Readout label="Total Recommendations" value={total.toLocaleString()} accent="var(--ink)" />
        <Readout label="Adopted" value={`${adopted}%`} sub="Closed — Acceptable Action" accent="var(--amber)" />
        <Readout label="Open / In Progress" value={`${open}%`} sub="Awaiting response" accent="var(--blue)" />
        <Readout label="Rejected" value={`${rejected}%`} sub="Closed — Unacceptable Action" accent="var(--red)" />
      </div>

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

      {/* Probable cause search — placeholder */}
      <div style={{ marginTop: 32 }}>
        <Tick color="var(--gold)">&#x258C; PROBABLE CAUSE SEARCH</Tick>
        <div style={{
          border: '1px solid var(--line)', background: 'var(--bg-2)',
          width: 400, height: 220, marginTop: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 12,
        }}>
          <Icon name="search" size={20} color="var(--ink-dimmer)" />
          <span className="mono" style={{
            color: 'var(--ink-dimmer)', fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase',
          }}>
            AWAITING PIPELINE
          </span>
        </div>
      </div>

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

          {/* Legend */}
          <div style={{ display: 'flex', gap: 24, marginTop: 12 }}>
            {[
              { label: 'Adopted', color: 'var(--amber)' },
              { label: 'Open', color: 'var(--blue)' },
              { label: 'Superseded', color: 'var(--steel)' },
              { label: 'Rejected', color: 'var(--red)' },
            ].map(l => (
              <div key={l.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 3, background: l.color, borderRadius: 1 }} />
                <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 10, letterSpacing: 0.1, textTransform: 'uppercase' }}>{l.label}</span>
              </div>
            ))}
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="arrow-right" size={10} color="var(--ink-dimmer)" />
              <span className="mono" style={{ color: 'var(--ink-dim)', fontSize: 10, letterSpacing: 0.1, textTransform: 'uppercase' }}>Similar Accident</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TabInvestigation });