// site-about.jsx — drewmcguire.ai about page

const DREW_AVATARS = [
  { src: 'img/landscape_blue_shirt.webp',    label: 'Bureau',       note: 'Professional · office',   orientation: 'landscape' },
  { src: 'img/landscape_orange_shirt.webp',  label: 'Off-grid',     note: 'Casual · home',           orientation: 'landscape' },
  { src: 'img/at_desk.webp',                 label: 'The rig',      note: 'At the monitors',         orientation: 'portrait' },
  { src: 'img/podcaster_bookshelves.webp',   label: 'Deep Cut',     note: 'Bookshelves · moody',     orientation: 'portrait' },
  { src: 'img/desk_gazer.webp',              label: 'Signal watch',  note: 'Mic · looking down',      orientation: 'portrait' },
];

function AboutPage() {
  return (
    <main>
      {/* Synthetic disclosure hero — front and center, no hedging */}
      <section className="section section--lg grain" style={{ position: 'relative', borderBottom: '1px solid rgba(236, 231, 220, 0.08)', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse at 50% 70%, rgba(42, 134, 147, 0.10) 0%, transparent 60%), linear-gradient(180deg, var(--ink-950), var(--ink-900))`,
          pointerEvents: 'none',
        }} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="g-about-hero" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <Reveal>
                <Bureau>About · Bureau of Documented Record</Bureau>
              </Reveal>
              <Reveal delay={80}>
                <h1 className="t-cond" style={{
                  margin: '24px 0 0',
                  fontSize: 'clamp(64px, 9vw, 140px)',
                  lineHeight: 0.88,
                  letterSpacing: '-0.025em',
                  textTransform: 'uppercase',
                  textWrap: 'balance',
                }}>
                  Drew is not<br/>
                  <span style={{ color: 'var(--amber-400)' }}>a real person.</span>
                </h1>
              </Reveal>
              <Reveal delay={160}>
                <p className="t-serif" style={{
                  margin: '40px 0 0',
                  fontSize: 'clamp(20px, 2.2vw, 28px)',
                  lineHeight: 1.4,
                  maxWidth: 640,
                  textWrap: 'pretty',
                  color: 'var(--paper)',
                }}>
                  He is an AI-generated avatar with a cloned voice. He runs twenty-four hours a day, off the grid, on two NVIDIA RTX 3090 graphics cards. We say so in the intro video, here, the methodology, and the pinned comment on every release. <span style={{ color: 'var(--teal-400)' }}>Transparency is the brand.</span>
                </p>
              </Reveal>
            </div>
            <Reveal delay={200}>
              <div style={{
                position: 'relative',
                aspectRatio: '3 / 4',
                overflow: 'hidden',
                border: '1px solid rgba(236, 231, 220, 0.12)',
              }}>
                <img src="img/desk_gazer.webp" alt="Drew McGuire — AI-generated avatar" style={{
                  width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%',
                  filter: 'grayscale(0.15) contrast(1.05)',
                }} />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, transparent 50%, rgba(7, 9, 10, 0.7) 100%)',
                  pointerEvents: 'none',
                }} />
                <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                  <div>
                    <Kicker color="var(--amber-400)">Rendered · not filmed</Kicker>
                    <div className="t-cond" style={{ fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.005em', marginTop: 4 }}>Drew McGuire</div>
                  </div>
                  <Kicker color="var(--gray-300)">HeyGen · avatar</Kicker>
                </div>
                {/* corner ticks */}
                <span style={{ position: 'absolute', top: 10, left: 10, width: 14, height: 14, borderLeft: '1.5px solid var(--teal-400)', borderTop: '1.5px solid var(--teal-400)', opacity: 0.7 }} />
                <span style={{ position: 'absolute', top: 10, right: 10, width: 14, height: 14, borderRight: '1.5px solid var(--teal-400)', borderTop: '1.5px solid var(--teal-400)', opacity: 0.7 }} />
                <span style={{ position: 'absolute', bottom: 10, left: 10, width: 14, height: 14, borderLeft: '1.5px solid var(--teal-400)', borderBottom: '1.5px solid var(--teal-400)', opacity: 0.7 }} />
                <span style={{ position: 'absolute', bottom: 10, right: 10, width: 14, height: 14, borderRight: '1.5px solid var(--teal-400)', borderBottom: '1.5px solid var(--teal-400)', opacity: 0.7 }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Avatar gallery — all looks */}
      <section className="section section--lg" style={{ background: 'var(--ink-870)', borderBottom: '1px solid rgba(236, 231, 220, 0.06)' }}>
        <div className="container">
          <Reveal>
            <Bureau>The avatar · every look on file</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <p className="t-bodyL" style={{ marginTop: 16, maxWidth: 700 }}>
              Drew&rsquo;s face is rendered by HeyGen. Five looks, each purpose-built for a different context. None of them are photographs. All of them are disclosed.
            </p>
          </Reveal>
          <Reveal delay={140}>
            <div className="g-avatars" style={{
              marginTop: 36,
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 12,
            }}>
              {DREW_AVATARS.map((av, i) => (
                <div key={av.label} style={{
                  position: 'relative',
                  aspectRatio: av.orientation === 'landscape' ? '16 / 10' : '3 / 4',
                  overflow: 'hidden',
                  border: '1px solid rgba(236, 231, 220, 0.08)',
                  gridColumn: av.orientation === 'landscape' ? 'span 2' : 'span 1',
                }}>
                  <img src={av.src} alt={`Drew McGuire — ${av.label}`} loading="lazy" style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    transition: 'transform .4s ease',
                  }}
                  onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.04)'}
                  onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
                  />
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'linear-gradient(180deg, transparent 55%, rgba(7, 9, 10, 0.85) 100%)',
                    pointerEvents: 'none',
                  }} />
                  <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12 }}>
                    <div className="t-cond" style={{ fontSize: 16, textTransform: 'uppercase', letterSpacing: '-0.005em', lineHeight: 1.1 }}>{av.label}</div>
                    <Kicker color="var(--gray-300)" style={{ fontSize: 9 }}>{av.note}</Kicker>
                  </div>
                  <div style={{ position: 'absolute', top: 8, right: 8 }}>
                    <span className="t-mono" style={{ fontSize: 9, letterSpacing: '0.22em', color: 'var(--gray-400)', background: 'rgba(7, 9, 10, 0.6)', padding: '3px 6px' }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 18, display: 'flex', justifyContent: 'flex-end' }}>
              <Kicker color="var(--gray-400)">All renders · HeyGen avatar · AI-generated</Kicker>
            </div>
          </Reveal>
        </div>
      </section>

      {/* The build */}
      <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container">
          <div className="g-aside" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
            <Reveal>
              <Bureau>The build</Bureau>
            </Reveal>
            <div>
              <Reveal>
                <h2 className="t-cond" style={{ margin: 0, fontSize: 'clamp(40px, 5.2vw, 72px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
                  Off the grid<br/>by design.
                </h2>
              </Reveal>
              <Reveal delay={80}>
                <p className="t-bodyL" style={{ marginTop: 24, maxWidth: 640 }}>
                  Drew investigates institutions whose infrastructure consumes water and power on a scale most cities can&rsquo;t see. So the production system that runs Drew does not draw on the resources Drew investigates.
                </p>
              </Reveal>
              <Reveal delay={140}>
                <div className="g-pillars" style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(236, 231, 220, 0.1)' }}>
                  {[
                    ['Compute',  '2× NVIDIA RTX 3090',           'Twenty-four hours a day.'],
                    ['Power',    'Off-grid solar + battery',     'No public power.'],
                    ['Water',    'Captured + filtered',           'No public water.'],
                  ].map(([label, value, note]) => (
                    <div key={label} style={{ padding: '20px 0', borderRight: '1px solid rgba(236, 231, 220, 0.1)', paddingRight: 18, paddingLeft: 0 }}>
                      <Kicker color="var(--teal-400)">{label}</Kicker>
                      <div className="t-cond" style={{ marginTop: 8, fontSize: 20, letterSpacing: '-0.005em', textTransform: 'uppercase', color: 'var(--paper)' }}>{value}</div>
                      <div className="t-mono" style={{ marginTop: 6, fontSize: 11, color: 'var(--gray-400)', letterSpacing: '0.06em' }}>{note}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Three voices */}
      <section className="section section--lg" style={{ background: 'var(--ink-870)' }}>
        <div className="container">
          <div className="g-aside" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
            <Reveal>
              <Bureau>The three voices</Bureau>
            </Reveal>
            <div>
              <Reveal>
                <h2 className="t-cond" style={{ margin: 0, fontSize: 'clamp(40px, 5.2vw, 72px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
                  Three voices.<br/>
                  <span style={{ color: 'var(--amber-400)' }}>One file.</span>
                </h2>
              </Reveal>
              <Reveal delay={80}>
                <p className="t-bodyL" style={{ marginTop: 24, maxWidth: 600 }}>
                  Every investigation is built from three cloned voices. None of them belong to a person. All of them are clearly labeled when they speak.
                </p>
              </Reveal>
              <Reveal delay={140}>
                <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr', gap: 0, borderTop: '1px solid rgba(236, 231, 220, 0.1)' }}>
                  {[
                    { role: 'Drew',     pct: '70%', color: 'var(--amber-400)', note: 'The host. Drives the investigation. Reads the cold open, the chapter checkpoints, and the call to action.' },
                    { role: 'Resident', pct: '15%', color: 'var(--teal-400)',  note: 'A composite voice from the community being investigated. Anonymized for safety. Carries the emotional weight of the story.' },
                    { role: 'Data',     pct: '15%', color: 'var(--red-400)',   note: 'A neutral, clinical voice. Reads only the verified numbers. Source on screen.' },
                  ].map(v => (
                    <div key={v.role} className="g-voice-row" style={{ display: 'grid', gridTemplateColumns: '100px 100px 1fr', gap: 24, padding: '22px 0', borderBottom: '1px solid rgba(236, 231, 220, 0.08)', alignItems: 'baseline' }}>
                      <Kicker color={v.color}>{v.role}</Kicker>
                      <span className="t-cond" style={{ fontSize: 28, color: v.color, letterSpacing: '-0.01em' }}>{v.pct}</span>
                      <p className="t-body" style={{ margin: 0, fontSize: 14 }}>{v.note}</p>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* What Drew is not */}
      <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(--red-600)' }} />
              <span className="t-mono" style={{ fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--ink-500)' }}>What Drew is not</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' }}>
              We say no to a lot.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div className="g-2col" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '2px solid var(--ink-900)' }}>
              {[
                ['Pundit',       'He does not tell people what to think.'],
                ['Educator',     'He does not teach lessons.'],
                ['Activist',     'He does not run campaigns.'],
                ['Personality',  'No vlogs. No collabs. No react content.'],
              ].map(([what, why], i) => (
                <div key={what} style={{
                  display: 'flex', flexDirection: 'column', gap: 10,
                  padding: '32px 32px 32px 0',
                  paddingRight: i % 2 === 0 ? 48 : 32,
                  paddingLeft: i % 2 === 1 ? 48 : 0,
                  borderRight: i % 2 === 0 ? '1px solid rgba(13, 18, 20, 0.18)' : 'none',
                  borderBottom: i < 2 ? '1px solid rgba(13, 18, 20, 0.18)' : 'none',
                }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                    <span style={{ color: 'var(--red-600)', fontFamily: "'IBM Plex Mono', monospace", fontSize: 22, fontWeight: 600 }}>✕</span>
                    <h3 className="t-cond" style={{ margin: 0, fontSize: 40, letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 1 }}>{what}</h3>
                  </div>
                  <p className="t-serif" style={{ margin: 0, fontSize: 18, lineHeight: 1.45, color: 'var(--ink-700)' }}>{why}</p>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 40, borderTop: '2px solid var(--ink-900)', paddingTop: 28 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span style={{ color: 'var(--teal-700)', fontFamily: "'IBM Plex Mono', monospace", fontSize: 22, fontWeight: 600 }}>→</span>
                <h3 className="t-cond" style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 1 }}>Drew is a reporter.</h3>
              </div>
              <p className="t-serif" style={{ margin: '12px 0 0', fontSize: 22, lineHeight: 1.45, color: 'var(--ink-700)', maxWidth: 720 }}>
                He finds things, confirms them, and reports them.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Subscribe — repeat the CTA */}
      <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <Reveal>
            <Bureau>Subscribe</Bureau>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="t-cond" style={{ margin: '16px 0 0', fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
              Get the file<br/>the night it drops.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ marginTop: 28 }}>
              <NewsletterForm />
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });