// 07 · The Methodology — data sources, cleaning decisions, gap handling.

function TabMethodology() {
  const sources = [
    { name: 'DHS Yearbook of Immigration Statistics', coverage: '1820–present', confidence: 'high', notes: 'Primary arrival data. Excel tables available. Format varies by decade.' },
    { name: 'National Archives — Ellis Island Records', coverage: '1892–1957', confidence: 'high', notes: 'Individual manifest records. Public domain.' },
    { name: 'TRAC Immigration', coverage: '1996–present', confidence: 'high', notes: 'Individual-level removal data from FOIA.' },
    { name: 'deportationdata.org', coverage: '2012–present', confidence: 'high', notes: 'ACLU/academic FOIA compilation.' },
    { name: 'USPTO Patent Database', coverage: '1976–present', confidence: 'high', notes: 'Patent authorship for innovation analysis.' },
    { name: 'US Census ACS', coverage: '2005–present', confidence: 'high', notes: 'County-level immigrant workforce data.' },
    { name: 'NBER Working Paper 30797', coverage: '1990–2016', confidence: 'high', notes: 'Bernstein et al. immigrant patent contribution.' },
    { name: 'American Immigration Council', coverage: '2011–present', confidence: 'high', notes: 'Fortune 500 immigrant founder data.' },
    { name: 'Library of Congress — Congressional Record', coverage: '1873–present', confidence: 'high', notes: 'Public domain. 1924 debate quotes verbatim.' },
    { name: 'GAO Report GAO-24-106233', coverage: '2019–2022', confidence: 'high', notes: 'ICE detention undercount analysis.' },
  ];

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="07 · THE METHODOLOGY"
        title="Data sources, cleaning decisions, gap handling."
        right="Full reproducibility" />

      {/* Data sources table */}
      <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 0.8fr 3fr',
          padding: '12px 16px', borderBottom: '1px solid #2A2218',
        }}>
          <span className="mono" style={{ color: '#C9A84C', fontSize: 10, letterSpacing: 0.2, textTransform: 'uppercase', fontWeight: 700 }}>Source</span>
          <span className="mono" style={{ color: '#C9A84C', fontSize: 10, letterSpacing: 0.2, textTransform: 'uppercase', fontWeight: 700 }}>Coverage</span>
          <span className="mono" style={{ color: '#C9A84C', fontSize: 10, letterSpacing: 0.2, textTransform: 'uppercase', fontWeight: 700 }}>Confidence</span>
          <span className="mono" style={{ color: '#C9A84C', fontSize: 10, letterSpacing: 0.2, textTransform: 'uppercase', fontWeight: 700 }}>Notes</span>
        </div>
        {sources.map((s, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '2fr 1fr 0.8fr 3fr',
            padding: '10px 16px', borderBottom: '1px solid #1A1510',
            background: i % 2 === 0 ? 'transparent' : 'rgba(30,24,16,0.3)',
          }}>
            <span className="serif" style={{ color: '#D4C8B8', fontSize: 14 }}>{s.name}</span>
            <span className="mono" style={{ color: '#8A7E6A', fontSize: 11 }}>{s.coverage}</span>
            <span><Confidence level={s.confidence} /></span>
            <span className="serif" style={{ color: '#8A7E6A', fontSize: 13 }}>{s.notes}</span>
          </div>
        ))}
      </div>

      {/* Confidence labeling */}
      <div style={{ marginTop: 32 }}>
        <HRule>CONFIDENCE LABELING</HRule>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 16 }}>
          {[
            { level: 'high', meaning: 'Sourced from government data or peer-reviewed research with replication.' },
            { level: 'candidate', meaning: 'Supported by available data but dependent on methodology assumptions.' },
            { level: 'speculative', meaning: 'Suggestive pattern, data too thin for strong claims.' },
          ].map(c => (
            <div key={c.level} style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '16px 20px' }}>
              <Confidence level={c.level} />
              <div className="serif" style={{ color: '#8A7E6A', fontSize: 13, marginTop: 10, lineHeight: 1.5 }}>
                {c.meaning}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Known gaps */}
      <div style={{ marginTop: 32 }}>
        <HRule>KNOWN DATA GAPS</HRule>
        <div style={{ marginTop: 16, border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '20px 24px' }}>
          {[
            { gap: 'Overland entries pre-1908', detail: 'Arrivals from Canada and Mexico by land were not systematically counted until the early 20th century. Pre-1908 totals undercount actual arrivals.' },
            { gap: 'Deportation definition change (1996)', detail: 'IIRIRA redefined "removal" vs "return." Pre-1996 and post-1996 deportation figures are not directly comparable without adjustment. This app documents the discontinuity.' },
            { gap: 'ICE data gap (early 2026)', detail: 'ICE stopped publishing certain enforcement data entirely during a period in early 2026. The gap in the data is itself data.' },
            { gap: 'GAO detention undercount', detail: 'ICE official detention numbers exclude tens of thousands of people booked into temporary facilities before transfer to immigration detention. GAO-24-106233 documents this systematically.' },
          ].map((g, i) => (
            <div key={i} style={{ padding: '14px 0', borderBottom: i < 3 ? '1px solid #1A1510' : 'none' }}>
              <div className="mono" style={{ color: '#C9A84C', fontSize: 12, fontWeight: 700 }}>{g.gap}</div>
              <div className="serif" style={{ color: '#8A7E6A', fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{g.detail}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ML Models */}
      <div style={{ marginTop: 32 }}>
        <HRule>ML ARCHITECTURE</HRule>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 16 }}>
          {[
            {
              id: 'M1', name: 'Migration Flow Prediction',
              method: 'Gradient boosting regression with SHAP values.',
              purpose: 'Surface which historical factors most strongly predicted migration flow volume and origin shifts.',
              validation: 'Held-out decades (train 1820–1990, test 1991–2024).',
              scope: 'Explicitly not used to project future flows. Used only to explain the past.',
            },
            {
              id: 'M2', name: 'Name Diffusion Model',
              method: 'Spatial diffusion kernel on Census surname frequency by county.',
              purpose: 'Model geographic spread of surname clusters associated with specific origins and arrival eras.',
              validation: 'Compared against known migration patterns (Italian community NYC→NJ→CT).',
              scope: 'Output: diffusion animation showing how immigrant communities became American communities.',
            },
            {
              id: 'M3', name: 'Enforcement Pattern Classifier',
              method: 'Random forest on TRAC individual-level removal data.',
              purpose: 'Surface that the composition of who is being removed has changed significantly, not just the volume.',
              validation: 'Criminal/non-criminal split validated against published ICE figures.',
              scope: 'Classifies by interior vs. border, criminal vs. non-criminal, family vs. individual.',
            },
          ].map(m => (
            <div key={m.id} style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="mono" style={{ color: '#C9A84C', fontSize: 11, fontWeight: 700 }}>{m.id}</span>
                <span className="serif" style={{ color: '#D4C8B8', fontSize: 15 }}>{m.name}</span>
              </div>
              <div style={{ marginTop: 12 }}>
                {[
                  ['METHOD', m.method],
                  ['PURPOSE', m.purpose],
                  ['VALIDATION', m.validation],
                  ['SCOPE', m.scope],
                ].map(([label, text]) => (
                  <div key={label} style={{ marginTop: 8 }}>
                    <div className="mono" style={{ color: '#5A4E3A', fontSize: 9, letterSpacing: 0.15, textTransform: 'uppercase' }}>{label}</div>
                    <div className="serif" style={{ color: '#8A7E6A', fontSize: 12, lineHeight: 1.4, marginTop: 2 }}>{text}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Citation */}
      <div style={{ marginTop: 32, padding: '20px 24px', border: '1px solid #2A2218', background: '#1E1810' }}>
        <Tick color="#C9A84C">{'▌'} CITATION</Tick>
        <pre className="mono" style={{
          color: '#8A7E6A', fontSize: 11, marginTop: 12, lineHeight: 1.6,
          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
        }}>
{`@misc{haynes2026crossing,
  title   = {The Crossing: A Century of US Immigration Data},
  author  = {Haynes, Jeremy},
  year    = {2026},
  url     = {https://crossing.onehundredyears.report},
  note    = {One Hundred Years — Issue 07. MIT License.}
}`}
        </pre>
      </div>
    </div>
  );
}

Object.assign(window, { TabMethodology });