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

function HomeHero() {
  const { navigate } = React.useContext(RouterCtx);
  return (
    <section style={{ position: 'relative', minHeight: 'min(82vh, 820px)', overflow: 'hidden' }} className="grain">
      {/* atmospheric background */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse at 50% 58%, rgba(42, 134, 147, 0.16) 0%, transparent 55%),
          radial-gradient(ellipse at 22% 92%, rgba(14, 59, 67, 0.45) 0%, transparent 55%),
          radial-gradient(ellipse at 78% 92%, rgba(14, 59, 67, 0.4) 0%, transparent 55%),
          linear-gradient(180deg, #05080A 0%, #081113 60%, #050B0D 100%)
        `,
      }} />
      {/* scanlines */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px)',
        opacity: 0.7, pointerEvents: 'none',
      }} />
      {/* horizon */}
      <svg style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', height: '34%' }} viewBox="0 0 2560 460" preserveAspectRatio="none">
        <defs>
          <linearGradient id="hh-fade" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#020405" stopOpacity="0.0" />
            <stop offset="100%" stopColor="#000000" stopOpacity="0.85" />
          </linearGradient>
        </defs>
        <path d="M0,460 L0,350 L120,350 L120,310 L260,310 L260,360 L420,360 L420,300 L520,300 L520,330 L680,330 L680,280 L820,280 L820,340 L980,340 L980,320 L1120,320 L1120,290 L1280,290 L1280,310 L1460,310 L1460,275 L1620,275 L1620,330 L1780,330 L1780,295 L1940,295 L1940,340 L2100,340 L2100,305 L2280,305 L2280,335 L2420,335 L2420,310 L2560,310 L2560,460 Z"
              fill="#020405" opacity="0.95" />
        <g fill="#040708" opacity="0.95">
          <path d="M2200,460 L2200,200 C2200,190 2206,180 2218,175 L2230,165 L2238,165 L2250,175 C2262,180 2268,190 2268,200 L2268,460 Z" />
          <path d="M2300,460 L2300,170 C2300,158 2308,148 2322,142 L2336,132 L2346,132 L2360,142 C2374,148 2382,158 2382,170 L2382,460 Z" />
        </g>
        <ellipse cx="2341" cy="120" rx="50" ry="14" fill="#1A2A2E" opacity="0.45" />
        <ellipse cx="2341" cy="105" rx="38" ry="10" fill="#1A2A2E" opacity="0.3" />
        <rect x="1462" y="278" width="3" height="4" fill="#E5AC58" opacity="0.85" />
        <rect x="983" y="322" width="3" height="4" fill="#E5AC58" opacity="0.7" />
        <rect width="2560" height="460" fill="url(#hh-fade)" />
      </svg>

      {/* letterbox bars */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 40, background: 'var(--ink-950)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 40, background: 'var(--ink-950)' }} />

      {/* top kicker rail */}
      <div className="container hero-rail" style={{ position: 'absolute', top: 56, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Bureau />
        <Kicker color="var(--gray-300)">EST. MMXXVI</Kicker>
      </div>

      {/* centered lockup */}
      <div style={{ position: 'relative', minHeight: 'min(82vh, 820px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '120px 24px' }}>
        <Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32 }}>
            {/* mark */}
            <div style={{
              width: 132, height: 132, position: 'relative',
              border: '2px solid var(--paper)',
              fontFamily: "'IBM Plex Sans Condensed', sans-serif",
            }}>
              <span style={{ position: 'absolute', top: 8, left: 8, width: 10, height: 10, borderLeft: '1.5px solid var(--paper)', borderTop: '1.5px solid var(--paper)', opacity: 0.6 }} />
              <span style={{ position: 'absolute', top: 8, right: 8, width: 10, height: 10, borderRight: '1.5px solid var(--paper)', borderTop: '1.5px solid var(--paper)', opacity: 0.6 }} />
              <span style={{ position: 'absolute', bottom: 8, left: 8, width: 10, height: 10, borderLeft: '1.5px solid var(--paper)', borderBottom: '1.5px solid var(--paper)', opacity: 0.6 }} />
              <span style={{ position: 'absolute', bottom: 8, right: 8, width: 10, height: 10, borderRight: '1.5px solid var(--paper)', borderBottom: '1.5px solid var(--paper)', opacity: 0.6 }} />
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 80, lineHeight: 1, letterSpacing: '-0.04em', paddingBottom: 12 }}>
                <span>D</span><span style={{ color: 'var(--teal-400)' }}>M</span>
              </div>
              <div style={{ position: 'absolute', left: 22, right: 22, bottom: 28, height: 2, background: 'var(--teal-400)' }} />
              <div style={{ position: 'absolute', bottom: 12, left: 0, right: 0, textAlign: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.85, color: 'var(--paper)' }}>Bureau · 26</div>
            </div>
            {/* name */}
            <div className="t-cond" style={{ fontSize: 'clamp(64px, 9vw, 132px)', lineHeight: 0.92, letterSpacing: '-0.02em', textTransform: 'uppercase', textAlign: 'center' }}>
              Drew McGuire
            </div>
            {/* tagline */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 26, height: 1.5, background: 'var(--teal-400)' }} />
              <Kicker color="var(--paper)">Off-grid. On record.</Kicker>
              <div style={{ width: 26, height: 1.5, background: 'var(--teal-400)' }} />
            </div>
          </div>
        </Reveal>
      </div>

      {/* bottom rail */}
      <div className="container hero-rail" style={{ position: 'absolute', bottom: 56, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--red-500)', boxShadow: '0 0 10px var(--red-500)' }} />
          <Kicker color="var(--gray-300)">Running off-grid · 24/7 · 2× RTX 3090</Kicker>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Kicker color="var(--gray-400)">Scroll</Kicker>
          <div style={{ width: 40, height: 1, background: 'var(--gray-400)' }} />
        </div>
      </div>
    </section>
  );
}

function LatestFile() {
  const ep = EPISODES[0];
  const { navigate } = React.useContext(RouterCtx);
  return (
    <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
            <Bureau>Latest file · {ep.id} · {ep.date}</Bureau>
            <Kicker color="var(--gray-400)">{ep.runtime} · {ep.themes.join(' · ')}</Kicker>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div className="g-latest" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <Kicker color="var(--amber-400)">The Number</Kicker>
              <div className="t-cond" style={{
                marginTop: 14,
                fontSize: 'clamp(72px, 13vw, 196px)', lineHeight: 0.86,
                letterSpacing: '-0.03em',
                fontVariantNumeric: 'tabular-nums',
              }}>
                <Odometer value="355,142,887" />
              </div>
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="t-cond" style={{ fontSize: 36, color: 'var(--amber-400)', textTransform: 'lowercase', letterSpacing: '0.01em' }}>gallons</span>
                <span className="t-mono" style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gray-400)' }}>one year · one customer · one river</span>
              </div>
              <p className="t-bodyL" style={{ marginTop: 32, maxWidth: 540 }}>
                {ep.deck}
              </p>
              <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 18 }}>
                <button
                  onClick={() => navigate(`episode/${ep.slug}`)}
                  style={{
                    background: 'var(--amber-400)', color: 'var(--ink-950)',
                    padding: '14px 24px',
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 11, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase',
                    cursor: 'pointer',
                    transition: 'background .15s',
                  }}
                  onMouseOver={(e) => e.currentTarget.style.background = 'var(--amber-300)'}
                  onMouseOut={(e) => e.currentTarget.style.background = 'var(--amber-400)'}
                >Open the file →</button>
                <a
                  href={`https://${SITE.youtube}/${ep.slug}`}
                  target="_blank"
                  rel="noopener"
                  className="t-mono"
                  style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--gray-300)', borderBottom: '1px solid var(--gray-500)', paddingBottom: 4 }}
                >Watch on YouTube</a>
              </div>
            </div>

            {/* the visual right side — Drew at desk with episode overlay */}
            <div style={{
              aspectRatio: '5 / 6',
              position: 'relative',
              background: 'linear-gradient(160deg, #0A1416 0%, #050A0C 100%)',
              border: '1px solid rgba(88, 171, 184, 0.18)',
              overflow: 'hidden',
            }}>
              {/* Drew avatar as backdrop */}
              <img src="img/landscape_blue_shirt.webp" alt="" style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center 25%',
                opacity: 0.35,
                filter: 'grayscale(0.3) contrast(1.1)',
              }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, rgba(10,20,22,0.7) 0%, rgba(5,10,12,0.85) 100%)' }} />
              {/* episode meta overlay */}
              <div style={{ position: 'absolute', top: 18, left: 18, right: 18, display: 'flex', justifyContent: 'space-between' }}>
                <Kicker color="var(--amber-400)">{ep.id}</Kicker>
                <Kicker color="var(--gray-300)">45.59°N 121.18°W</Kicker>
              </div>
              {/* title at bottom */}
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '24px 22px', background: 'linear-gradient(180deg, transparent 0%, rgba(7, 9, 10, 0.92) 60%)' }}>
                <div className="t-cond" style={{ fontSize: 26, textTransform: 'uppercase', letterSpacing: '-0.005em', lineHeight: 1.05 }}>
                  {ep.title}
                </div>
                <div style={{ marginTop: 8 }}>
                  <Kicker color="var(--gray-300)">Deep Cut · {ep.runtime}</Kicker>
                </div>
              </div>
              {/* trade secret stamp */}
              <div style={{
                position: 'absolute', right: -14, top: '34%',
                transform: 'rotate(-10deg)',
                border: '2px solid var(--red-500)', color: 'var(--red-500)',
                padding: '6px 12px',
                fontFamily: "'IBM Plex Mono', monospace",
                fontWeight: 700, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                background: 'rgba(7, 9, 10, 0.75)',
              }}>Trade Secret</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="section section--lg" style={{ background: 'var(--ink-870)', borderBottom: '1px solid rgba(236, 231, 220, 0.06)' }}>
      <div className="container">
        <div className="g-manifesto" style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 56, alignItems: 'start' }}>
          <div>
            <Reveal>
              <Bureau>Mission</Bureau>
            </Reveal>
            <Reveal delay={80}>
              <p className="t-serif" style={{
                margin: '32px 0 0',
                fontSize: 'clamp(26px, 3vw, 40px)',
                lineHeight: 1.25,
                letterSpacing: '-0.01em',
                color: 'var(--paper)',
                textWrap: 'pretty',
              }}>
                Drew McGuire is a synthetic investigative reporter running off-grid, around the clock, on two NVIDIA graphics cards. No public water. No public power. He exists to find the numbers that powerful institutions are hiding from the people those numbers affect. <span style={{ color: 'var(--amber-400)' }}>Water classified as a trade secret.</span> <span style={{ color: 'var(--teal-400)' }}>Tax breaks negotiated behind NDAs.</span> <span style={{ color: 'var(--paper)' }}>Bills passed by voice vote with nobody on record.</span> Drew finds the number and says it out loud.
              </p>
            </Reveal>
            <Reveal delay={160}>
              <div className="g-pillars" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(236, 231, 220, 0.08)' }}>
                {[
                  ['Off-grid', 'Two NVIDIA RTX 3090s. No public power. No public water.'],
                  ['On record', 'Every claim is sourced. Every source is public.'],
                  ['Synthetic', 'Drew is AI-generated. We say so every time.'],
                ].map(([label, text]) => (
                  <div key={label} style={{ padding: '32px 28px 0', borderRight: '1px solid rgba(236, 231, 220, 0.08)' }}>
                    <Kicker color="var(--teal-400)">{label}</Kicker>
                    <p className="t-body" style={{ marginTop: 12, fontSize: 14 }}>{text}</p>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div style={{
              position: 'relative',
              aspectRatio: '3 / 4',
              overflow: 'hidden',
              border: '1px solid rgba(236, 231, 220, 0.10)',
              marginTop: 32,
            }}>
              <img src="img/podcaster_bookshelves.webp" alt="Drew McGuire" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                filter: 'contrast(1.05)',
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 40%, rgba(7, 9, 10, 0.75) 100%)',
                pointerEvents: 'none',
              }} />
              <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <Kicker color="var(--paper)">Drew McGuire</Kicker>
                <Kicker color="var(--gray-400)">AI-generated</Kicker>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function NewsletterSection() {
  return (
    <section id="newsletter" className="section section--lg" style={{ position: 'relative', borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
      <div className="container">
        <div className="g-newsletter" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <Reveal>
              <Bureau>The off-grid briefing</Bureau>
            </Reveal>
            <Reveal delay={80}>
              <h2 className="t-cond" style={{ margin: '20px 0 0', fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
                One file<br/>a week.<br/>
                <span style={{ color: 'var(--amber-400)' }}>One number</span><br/>
                we couldn&rsquo;t fit.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="t-bodyL" style={{ marginTop: 28, maxWidth: 480 }}>
                The week&rsquo;s investigation, in plain prose. Every source linked. Plus one number that didn&rsquo;t make the cut — usually because it was the worst one.
              </p>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div style={{
              background: 'var(--ink-870)',
              border: '1px solid rgba(236, 231, 220, 0.08)',
              padding: '36px 36px 32px',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: -1, left: -1, right: -1, height: 26,
                background: 'var(--ink-950)', borderBottom: '1px solid rgba(236,231,220,0.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '0 14px',
              }}>
                <Kicker color="var(--gray-300)">Form / DM-NL-001</Kicker>
                <Kicker color="var(--gray-300)">Weekly · Free</Kicker>
              </div>
              <div style={{ marginTop: 28 }}>
                <Kicker color="var(--amber-400)">Subscribe</Kicker>
                <p className="t-bodyL" style={{ marginTop: 12, marginBottom: 20 }}>
                  Email only. Sent the night the investigation drops.
                </p>
                <NewsletterForm />
              </div>
              {/* receipt-style footer */}
              <div style={{ marginTop: 32, paddingTop: 18, borderTop: '1px dashed rgba(236, 231, 220, 0.18)', display: 'flex', justifyContent: 'space-between' }}>
                <Kicker color="var(--gray-400)">Issued by The Bureau</Kicker>
                <Kicker color="var(--gray-400)">{SITE.domain}</Kicker>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ForthcomingSection() {
  const upcoming = EPISODES.filter(e => e.status === 'forthcoming');
  const { navigate } = React.useContext(RouterCtx);
  return (
    <section className="section section--lg" style={{ borderBottom: '1px solid rgba(236, 231, 220, 0.08)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
            <div>
              <Bureau>Forthcoming</Bureau>
              <h2 className="t-cond" style={{ margin: '16px 0 0', fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
                On the desk
              </h2>
            </div>
            <a onClick={(e)=>{e.preventDefault(); navigate('archive');}} href="#/archive" className="t-mono" style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--gray-300)', borderBottom: '1px solid var(--gray-500)', paddingBottom: 4 }}>
              Full archive →
            </a>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="g-cards" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {upcoming.map(ep => <EpisodeCard key={ep.id} ep={ep} />)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function MethodologyPreview() {
  const { navigate } = React.useContext(RouterCtx);
  return (
    <section className="section section--lg" style={{ background: 'var(--paper)', color: 'var(--ink-900)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
            <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)' }}>Show your work</span>
            </span>
            <a onClick={(e)=>{e.preventDefault(); navigate('methodology');}} href="#/methodology" className="t-mono" style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--ink-700)', borderBottom: '1px solid var(--ink-500)', paddingBottom: 4 }}>
              Read the full methodology →
            </a>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 className="t-cond" style={{ margin: '24px 0 0', fontSize: 'clamp(44px, 5.4vw, 76px)', lineHeight: 0.95, letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: 980 }}>
            Drew is synthetic.<br/>
            <span style={{ color: 'var(--teal-700)' }}>Every tool he uses is disclosed.</span>
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <div className="g-tools-preview" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '2px solid var(--ink-900)' }}>
            {TOOLS.slice(0, 4).map(t => {
              const label = t.kind === 'cloud' ? 'Cloud' : t.kind === 'local-ai' ? 'Local · AI' : t.kind === 'hardware' ? 'Hardware' : 'Tool';
              return (
              <div key={t.name} style={{ padding: '22px 22px 24px', borderRight: '1px solid rgba(13, 18, 20, 0.18)' }}>
                <span className="t-mono" style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: t.kind === 'cloud' ? 'var(--amber-600)' : 'var(--ink-500)' }}>{label}</span>
                <div className="t-cond" style={{ marginTop: 8, fontSize: 22, letterSpacing: '-0.005em', textTransform: 'uppercase', color: 'var(--ink-900)' }}>{t.name}</div>
                <div style={{ marginTop: 6, fontSize: 13, color: 'var(--ink-500)' }}>{t.role}</div>
              </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <main>
      <HomeHero />
      <WireMarquee tone="dark" />
      <LatestFile />
      <Manifesto />
      <NewsletterSection />
      <ForthcomingSection />
      <MethodologyPreview />
    </main>
  );
}

Object.assign(window, { HomePage });