// site-methodology.jsx — drewmcguire.ai methodology / Show Your Work page

function MethodologyPage() {
  return (
    <main>
      <PageHeader
        kicker="Methodology · Show your work"
        title={<span>Every tool.<br/><span style={{ color: 'var(--amber-400)' }}>Disclosed.</span></span>}
        subtitle="Drew is a synthetic reporter. This page exists so you don't have to take that on faith. Below: every system in the production pipeline, what it does, what it doesn't do, and where the disclosure lives."
      />

      {/* CLOUD vs LOCAL — the only cloud dep is Opus */}
      <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container">
          <Reveal>
            <Bureau>One cloud dependency. Everything else local.</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="t-cond" style={{ margin: '20px 0 36px', fontSize: 'clamp(44px, 5.4vw, 80px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: 1100 }}>
              One model leaves the rig.<br/>
              <span style={{ color: 'var(--amber-400)' }}>The rest never do.</span>
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div className="g-cloud-local" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 16 }}>
              {/* Cloud side */}
              <div style={{ background: 'var(--ink-870)', border: '1px solid rgba(236, 231, 220, 0.08)', padding: 32, position: 'relative' }}>
                <div style={{ position: 'absolute', top: 16, right: 16, padding: '4px 8px', border: '1px solid var(--amber-400)', color: 'var(--amber-400)', fontFamily: "'IBM Plex Mono', monospace", fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase' }}>Cloud · 1</div>
                <Kicker color="var(--amber-400)">Outbound</Kicker>
                <h3 className="t-cond" style={{ margin: '14px 0 0', fontSize: 40, letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 0.95 }}>
                  Claude Opus 4
                </h3>
                <p className="t-body" style={{ marginTop: 18, fontSize: 14 }}>
                  Scriptwriting only. Every script runs through the scriptwriter skill — three voices, zero em dashes, anti-AI rules. Every line is human-edited before air.
                </p>
                <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid rgba(236, 231, 220, 0.08)' }}>
                  <Kicker color="var(--gray-400)">What it sees</Kicker>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '10px 0 0', display: 'grid', gap: 6, fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: 'var(--gray-300)' }}>
                    <li>Source briefs · verified</li>
                    <li>Story discovery candidates · scored</li>
                    <li>The scriptwriter skill · in full</li>
                  </ul>
                </div>
                <div style={{ marginTop: 22 }}>
                  <Kicker color="var(--gray-400)">What it does not</Kicker>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '10px 0 0', display: 'grid', gap: 6, fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: 'var(--gray-300)' }}>
                    <li>Score signals</li>
                    <li>Generate visuals · voice · b-roll</li>
                    <li>Ingest sources</li>
                    <li>Render avatar</li>
                  </ul>
                </div>
              </div>

              {/* Local side */}
              <div style={{ background: 'var(--ink-900)', border: '1px solid rgba(88, 171, 184, 0.25)', padding: 32, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 80% 100%, rgba(42, 134, 147, 0.10) 0%, transparent 55%)', pointerEvents: 'none' }} />
                <div style={{ position: 'relative' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Kicker color="var(--teal-400)">Off-grid · on the rig</Kicker>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red-500)', boxShadow: '0 0 6px var(--red-500)', animation: 'pulse 1.4s ease-in-out infinite' }} />
                      <span className="t-mono" style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--paper)' }}>Live · 24/7</span>
                    </div>
                  </div>
                  <h3 className="t-cond" style={{ margin: '14px 0 0', fontSize: 40, letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 0.95 }}>
                    Two NVIDIA RTX 3090s
                  </h3>
                  <p className="t-body" style={{ marginTop: 18, fontSize: 14, maxWidth: 540 }}>
                    Everything that isn&rsquo;t Claude runs here. Voice. Avatar. Scoring. B-roll. Stills. Document ingestion. Anomaly detection. The Meridian intake. No public power. No public water.
                  </p>
                  <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid rgba(236, 231, 220, 0.08)' }}>
                    <Kicker color="var(--gray-400)">What runs here</Kicker>
                    <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                      {[
                        ['Qwen 3 27B', 'Signal scoring'],
                        ['HeyGen', 'Avatar render'],
                        ['11Labs', 'Voice clone'],
                        ['Wan 2.2', 'Cinematics'],
                        ['Flux', 'Stills · documents'],
                        ['yt-dlp', 'Hearings · clips'],
                        ['Meridian', 'Intake · 618 sources'],
                        ['Sentinel', '15 detectors'],
                      ].map(([n, r]) => (
                        <div key={n} style={{ display: 'flex', flexDirection: 'column', gap: 2, paddingBottom: 10, borderBottom: '1px solid rgba(236, 231, 220, 0.06)' }}>
                          <span className="t-cond" style={{ fontSize: 18, letterSpacing: '-0.005em', textTransform: 'uppercase', color: 'var(--paper)', lineHeight: 1 }}>{n}</span>
                          <span className="t-mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gray-400)' }}>{r}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 18, display: 'flex', justifyContent: 'flex-end' }}>
              <QAStamp />
            </div>
          </Reveal>
        </div>
      </section>

      {/* Tool table */}
      <section className="section section--lg">
        <div className="container">
          <Reveal>
            <Bureau>Production stack</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <div style={{ marginTop: 28, borderTop: '2px solid var(--paper)' }}>
              <div className="t-mono g-tool-row" style={{
                display: 'grid',
                gridTemplateColumns: '120px 1.4fr 1fr 2fr 1fr',
                gap: 24,
                padding: '14px 4px',
                fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: 'var(--gray-400)',
                borderBottom: '1px solid rgba(236, 231, 220, 0.1)',
              }}>
                <span>Kind</span>
                <span>Tool</span>
                <span>Role</span>
                <span>What it does</span>
                <span>Where disclosed</span>
              </div>
              {window.TOOLS.map((t) => {
                const accent = t.kind === 'hardware' ? 'var(--paper)' : t.kind === 'tool' ? 'var(--teal-400)' : t.kind === 'cloud' ? 'var(--amber-400)' : 'var(--teal-300)';
                const kindLabel = t.kind === 'cloud' ? 'Cloud' : t.kind === 'local-ai' ? 'Local · AI' : t.kind === 'hardware' ? 'Hardware' : 'Tool';
                return (
                  <div key={t.name} className="g-tool-row" style={{
                    display: 'grid',
                    gridTemplateColumns: '120px 1.4fr 1fr 2fr 1fr',
                    gap: 24,
                    padding: '24px 4px',
                    borderBottom: '1px solid rgba(236, 231, 220, 0.08)',
                    alignItems: 'baseline',
                  }}>
                    <span style={{ color: accent }}>
                      <Kicker color={accent}>{kindLabel}</Kicker>
                    </span>
                    <span className="t-cond" style={{ fontSize: 24, letterSpacing: '-0.005em', textTransform: 'uppercase', color: 'var(--paper)' }}>{t.name}</span>
                    <span className="t-mono" style={{ fontSize: 12, color: 'var(--paper)' }}>{t.role}</span>
                    <p className="t-body" style={{ margin: 0, fontSize: 14 }}>{t.purpose}</p>
                    <span className="t-mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--gray-300)' }}>{t.disclosed}</span>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>
      </section>

      {/* AI vs human-verified split */}
      <section className="section section--lg" style={{ background: 'var(--ink-870)' }}>
        <div className="container">
          <Reveal>
            <Bureau>What is generated. What is verified.</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <div className="g-2col" style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid rgba(236, 231, 220, 0.1)' }}>
              <div style={{ padding: 36 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 18, height: 1.5, background: 'var(--amber-400)' }} />
                  <Kicker color="var(--amber-400)">Generated</Kicker>
                </div>
                <h3 className="t-cond" style={{ margin: '14px 0 18px', fontSize: 32, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>
                  By machine.
                </h3>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
                  {[
                    'The avatar you see on camera. Drew\u2019s face is rendered.',
                    'The voice you hear. Three cloned voices.',
                    'B-roll cinematics, atmospheres, mannequin reenactments.',
                    'Document mockups and abstract data scenes.',
                    'Research surfacing and drafting (human-edited before air).',
                  ].map(line => (
                    <li key={line} className="t-body" style={{ fontSize: 14, paddingLeft: 22, position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1.5, background: 'var(--amber-400)' }} />
                      {line}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ padding: 36, borderLeft: '1px solid rgba(236, 231, 220, 0.1)', background: 'var(--ink-850)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 18, height: 1.5, background: 'var(--teal-400)' }} />
                  <Kicker color="var(--teal-400)">Verified</Kicker>
                </div>
                <h3 className="t-cond" style={{ margin: '14px 0 18px', fontSize: 32, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>
                  By human.
                </h3>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
                  {[
                    'Every number. Sourced to a primary document. Linked on the episode page.',
                    'Every quoted line. Read back against the original recording.',
                    'Every claim that a person did a thing. Confirmed with at least one independent reference.',
                    'Every legal claim. Reviewed against the statute or filing.',
                    'Every map and dataset. Reproduced from the original government source.',
                  ].map(line => (
                    <li key={line} className="t-body" style={{ fontSize: 14, paddingLeft: 22, position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1.5, background: 'var(--teal-400)' }} />
                      {line}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Rules of the house */}
      <section className="section section--lg" style={{ background: 'var(--paper)', color: 'var(--ink-900)' }}>
        <div className="container">
          <Reveal>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-block', width: 18, height: 1.5, background: 'var(--teal-700)' }} />
              <span className="t-mono" style={{ fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--ink-500)' }}>Rules of the house</span>
            </span>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="t-cond" style={{ margin: '20px 0 40px', fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
              Seven non-negotiables.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, counterReset: 'rule', borderTop: '2px solid var(--ink-900)' }}>
              {window.RULES.map((rule, i) => (
                <li key={i} className="g-rule" style={{
                  display: 'grid', gridTemplateColumns: '90px 1fr', gap: 32,
                  padding: '24px 0',
                  borderBottom: '1px solid rgba(13, 18, 20, 0.18)',
                  alignItems: 'baseline',
                }}>
                  <span className="t-cond" style={{ fontSize: 42, color: 'var(--teal-700)', letterSpacing: '-0.01em' }}>
                    § {String(i + 1).padStart(2, '0')}
                  </span>
                  <p className="t-serif" style={{ margin: 0, fontSize: 22, lineHeight: 1.45, color: 'var(--ink-900)', textWrap: 'pretty' }}>
                    {rule}
                  </p>
                </li>
              ))}
            </ol>
          </Reveal>
        </div>
      </section>

      {/* Corrections / disputes */}
      <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container">
          <div className="g-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            <Reveal>
              <div>
                <Bureau>Corrections</Bureau>
                <h2 className="t-cond" style={{ margin: '16px 0 0', fontSize: 'clamp(36px, 4.4vw, 56px)', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 0.95 }}>
                  Something off?
                </h2>
                <p className="t-bodyL" style={{ marginTop: 18, maxWidth: 460 }}>
                  If a number is wrong, a source is misattributed, or a citation breaks, write to us. Corrections appear at the top of the relevant episode page, dated, and signed.
                </p>
                <a href="mailto:corrections@drewmcguire.ai" className="t-mono" style={{ display: 'inline-block', marginTop: 24, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--amber-400)', borderBottom: '1px solid var(--amber-500)', paddingBottom: 4 }}>
                  corrections@drewmcguire.ai →
                </a>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div>
                <Bureau>Disputes</Bureau>
                <h2 className="t-cond" style={{ margin: '16px 0 0', fontSize: 'clamp(36px, 4.4vw, 56px)', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 0.95 }}>
                  Subject of a piece?
                </h2>
                <p className="t-bodyL" style={{ marginTop: 18, maxWidth: 460 }}>
                  Right of reply is built in. Send a response on the record. It will be added to the episode page, in full, dated, signed, and unedited.
                </p>
                <a href="mailto:reply@drewmcguire.ai" className="t-mono" style={{ display: 'inline-block', marginTop: 24, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--teal-400)', borderBottom: '1px solid var(--teal-600)', paddingBottom: 4 }}>
                  reply@drewmcguire.ai →
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { MethodologyPage });