// 06 · The Methodology

function TabMethodology() {
  const sections = [
    {
      n: 'M1',
      title: 'Station Anomaly Engine',
      conf: 'high',
      lede: 'Per station, per calendar date — what does an ordinary day look like, and how far is this one from that?',
      body: [
        'For each GHCN station with ≥ 30 years of record, we fit a non-parametric kernel density estimate to every recorded observation that shares the same calendar date. The fit captures the full shape of the empirical distribution — mean, variance, skewness, kurtosis — because daily temperature distributions are rarely Gaussian.',
        'The anomaly score for an observation is the negative log-probability of that value under the fitted density, scaled to a σ equivalent so that magnitudes can be compared across stations. A −40°F January day in International Falls is unremarkable; the same value in April is the strangest day in the record. The model knows the difference.',
      ],
      params: [
        ['Min record', '≥ 30 years'],
        ['Kernel', 'Gaussian, Silverman bw'],
        ['Date window', '±3 days, weighted'],
        ['Edge effects', 'Reflective bdry'],
      ],
    },
    {
      n: 'M2',
      title: 'Spatial Co-occurrence Clustering',
      conf: 'high',
      lede: 'Many stations going extreme on the same day. When is that one storm versus a hundred small coincidences?',
      body: [
        'For every day in the record, we extract the set of stations reporting an extreme anomaly (|z| ≥ 3.5 under M1). HDBSCAN is run over the station coordinates of that set, with a minimum cluster size scaled to the density of long-record stations in the region.',
        'Days where the extreme observations form a spatially-coherent cluster — rather than a scatter — are flagged as candidate atmospheric events. These are the clusters that appear on The Fronts map. The model surfaces structure that looks like weather, not noise.',
      ],
      params: [
        ['Anomaly threshold', '|z| ≥ 3.5'],
        ['Algorithm', 'HDBSCAN, haversine'],
        ['Min cluster', '8 stations'],
        ['Coherence cutoff', '≥ 0.65'],
      ],
    },
    {
      n: 'M3',
      title: 'Non-Stationary Extreme Value Model',
      conf: 'candidate',
      lede: 'Fit a GEV to a station\'s annual maxima, but let the location parameter slide with time.',
      body: [
        'For each station with ≥ 50 years of record and < 10% missing values in its annual maximum series, we fit a Generalized Extreme Value distribution with a time-varying location parameter μ(t) = μ₀ + β·t and stationary scale and shape parameters. Maximum likelihood. Confidence intervals via 1000-iteration parametric bootstrap.',
        'The output is a return period for any temperature threshold at any year — including projections forward under the assumption that the trend continues. Projections are labeled CANDIDATE and depend on continued trend assumptions; historical fits are HIGH CONFIDENCE.',
      ],
      params: [
        ['Min record', '≥ 50 years'],
        ['Missing data', '< 10% of years'],
        ['Estimator', 'MLE'],
        ['CI', 'parametric bootstrap (n=1000)'],
      ],
    },
  ];

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="06 · METHODOLOGY"
        title="Three models. The dataset. The known unknowns."
        right="Source · GHCN-Daily · CC0" />

      {/* Dataset card */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, marginBottom: 40 }}>
        <div style={{ border: '1px solid #1B2740', background: 'rgba(14,20,34,0.6)', padding: 28 }}>
          <Tick color="#C9A84C">▌ THE DATASET</Tick>
          <div className="serif" style={{ fontSize: 24, color: '#E6ECF2', marginTop: 12, letterSpacing: -0.2, fontWeight: 300 }}>
            Global Historical Climatology Network — Daily
          </div>
          <div className="serif" style={{ fontSize: 14, color: '#8BAFC7', marginTop: 14, lineHeight: 1.6, textWrap: 'pretty' }}>
            GHCN-Daily is the canonical archive of daily land-surface temperature observations maintained by NOAA.
            Records from over 100,000 stations across 180 countries; the oldest extend back to 1763.
            Distributed under CC0 — public domain, no restrictions.
            This analysis is limited to the continental United States and to stations with ≥ 30 years of continuous daily record.
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: '#1B2740', border: '1px solid #1B2740' }}>
          {[
            { l: 'TOTAL STATIONS (GHCN)', v: '100k+' },
            { l: 'COUNTRIES', v: '180' },
            { l: 'EARLIEST RECORD', v: '1763' },
            { l: 'LONGEST RUN US', v: '141 yr' },
            { l: 'STATIONS USED', v: '12,847' },
            { l: 'LICENSE', v: 'CC0' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--bg-2)', padding: '14px 14px' }}>
              <div className="mono" style={{ color: '#4E6A82', fontSize: 9, letterSpacing: 0.15, textTransform: 'uppercase' }}>{s.l}</div>
              <div className="mono" style={{ color: '#E6ECF2', fontSize: 18, fontWeight: 700, marginTop: 4 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Three models */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {sections.map(s => (
          <div key={s.n} style={{ border: '1px solid #1B2740', background: 'rgba(14,20,34,0.6)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr 300px', gap: 0 }}>
              {/* Left column — model id */}
              <div style={{ padding: '28px 24px', borderRight: '1px solid #1B2740', background: 'rgba(201,168,76,0.02)' }}>
                <div className="mono" style={{ color: '#C9A84C', fontSize: 36, fontWeight: 700, letterSpacing: -1, lineHeight: 1 }}>{s.n}</div>
                <div className="serif" style={{ color: '#E6ECF2', fontSize: 17, marginTop: 12, letterSpacing: -0.1, lineHeight: 1.3 }}>{s.title}</div>
                <div style={{ marginTop: 14 }}><Confidence level={s.conf} /></div>
              </div>

              {/* Middle — narrative */}
              <div style={{ padding: '28px 30px' }}>
                <div className="serif" style={{ fontSize: 18, color: '#E6ECF2', fontStyle: 'italic', lineHeight: 1.35, marginBottom: 14, textWrap: 'pretty', fontWeight: 300 }}>
                  {s.lede}
                </div>
                {s.body.map((p, i) => (
                  <div key={i} className="serif" style={{ fontSize: 13.5, color: '#8BAFC7', lineHeight: 1.65, marginTop: i ? 10 : 0, textWrap: 'pretty' }}>
                    {p}
                  </div>
                ))}
              </div>

              {/* Right — parameters table */}
              <div style={{ borderLeft: '1px solid #1B2740', padding: '28px 24px', background: 'rgba(10,15,26,0.4)' }}>
                <Tick>▌ PARAMETERS</Tick>
                <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {s.params.map((p, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px dashed #1B2740', paddingBottom: 8 }}>
                      <span className="mono" style={{ color: '#4E6A82', fontSize: 10, letterSpacing: 0.1, textTransform: 'uppercase' }}>{p[0]}</span>
                      <span className="mono" style={{ color: '#E6ECF2', fontSize: 11 }}>{p[1]}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Known unknowns */}
      <div style={{ marginTop: 40, padding: '24px 28px', border: '1px dashed #243353', background: 'rgba(14,20,34,0.4)' }}>
        <Tick color="#FDAE61">▌ KNOWN UNKNOWNS — INHOMOGENEITY</Tick>
        <div className="serif" style={{ fontSize: 14.5, color: '#8BAFC7', marginTop: 12, lineHeight: 1.65, maxWidth: 1000, textWrap: 'pretty' }}>
          GHCN station records contain documented inhomogeneities — shifts in observation time, station relocations,
          urbanization around long-record sites, instrument changes from liquid-in-glass to electronic sensors.
          NOAA publishes quality flags for each observation. We exclude flagged values from the M1 density fits and
          from the M3 annual-maximum series. The M2 clustering operates on z-scores, which absorb most station-specific
          bias. We do not attempt to correct for siting class — that is a separate paper.
        </div>
      </div>

      {/* Citations / footer */}
      <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid #1B2740', paddingTop: 18 }}>
        <Tick>NOAA · NCEI · GHCN-Daily v3.30 · Accessed 2026-05</Tick>
        <Tick color="#C9A84C">ONE HUNDRED YEARS — VOL. III, ISSUE 04 — © FAIR USE</Tick>
      </div>
    </div>
  );
}

Object.assign(window, { TabMethodology });