/* Home screen */

const { useState: useStateH, useEffect: useEffectH } = React;

/* Hero — full-bleed documentary portrait with editorial overlay */
const Hero = ({ onNavigate }) =>
<section className="section home-hero" style={{
  position: 'relative',
  minHeight: 'min(92vh, 820px)',
  overflow: 'hidden',
  borderBottom: '1px solid var(--divider)',
  background: 'var(--color-ink)',
  color: '#fff',
  display: 'flex',
  alignItems: 'stretch'
}}>
    {/* Background image */}
    <img
    className="home-hero-img"
    src="assets/chuck-hero.png"
    alt="Chuck West at sunset on the Key Peninsula"
    style={{
      position: 'absolute', inset: 0,
      width: '100%', height: '100%',
      objectFit: 'cover',
      objectPosition: 'center 30%',
      display: 'block'
    }} />
  
    {/* Legibility overlay — strong on left, fading to clear on the right where Chuck stands */}
    <div className="home-hero-overlay" aria-hidden="true" style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(90deg, rgba(7, 24, 4, 0.92) 0%, rgba(7, 24, 4, 0.78) 28%, rgba(7, 24, 4, 0.45) 52%, rgba(7, 24, 4, 0.10) 72%, rgba(7, 24, 4, 0) 88%)'
  }} />
    {/* Subtle bottom darkening for the badge row + a bit of top to lift the eyebrow */}
    <div className="home-hero-overlay-vert" aria-hidden="true" style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(180deg, rgba(7,24,4,0.32) 0%, rgba(7,24,4,0) 22%, rgba(7,24,4,0) 70%, rgba(7,24,4,0.55) 100%)'
  }} />

    {/* Content */}
    <div className="home-hero-inner" style={{
    position: 'relative',
    width: '100%',
    maxWidth: 1280,
    margin: '0 auto',
    padding: '120px 32px 56px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    gap: 48
  }}>
      <div className="hero-copy" style={{ maxWidth: 620 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <span style={{
          display: 'inline-block', width: 36, height: 2,
          background: 'var(--color-gold-base)'
        }} />
          <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.20em', textTransform: 'uppercase',
          color: 'var(--color-gold-300)'
        }}>
            Pierce County Council · District Seven · 2026
          </span>
        </div>
        <h1 className="display-lg" style={{
        margin: '0 0 26px',
        color: '#fff',
        maxWidth: '12ch',
        textShadow: '0 2px 28px rgba(0,0,0,0.35)'
      }}>
          Steady.<br />Trusted.<br />
          <span style={{ color: 'var(--brand-accent)' }}>Local.</span>
        </h1>
        <p className="lead" style={{
        maxWidth: '46ch', margin: '0 0 36px',
        color: 'rgba(255,255,255,0.92)',
        fontStyle: 'normal',
        fontSize: '1.18rem',
        textShadow: '0 1px 18px rgba(0,0,0,0.45)'
      }}>
          34 years as a Battalion Chief. Two terms on the Peninsula School Board. Co-founder of the Key Free Clinic. Chuck West is running for Pierce County Council because Pierce County deserves someone who has actually done the work.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="gold" onClick={() => onNavigate('donate')}
        style={{ padding: '14px 26px', fontSize: 15, whiteSpace: 'nowrap' }}>
            Donate today
          </Button>
          <Button variant="onDark" onClick={() => onNavigate('about')}
        style={{ padding: '14px 26px', fontSize: 15, whiteSpace: 'nowrap' }}>
            Meet Chuck &nbsp;›
          </Button>
        </div>
      </div>

      {/* Bottom badge strip — replaces the right-side cameo */}
      <div className="hero-badges" style={{
      display: 'flex',
      gap: 32,
      alignItems: 'flex-end',
      flexWrap: 'wrap',
      justifyContent: 'space-between'
    }}>
        <div style={{
        display: 'flex', gap: 24, alignItems: 'center',
        flexWrap: 'wrap'
      }}>
          <div className="hero-stat" style={{
          display: 'flex', alignItems: 'baseline', gap: 12,
          paddingRight: 24,
          borderRight: '1px solid rgba(255,255,255,0.18)'
        }}>
            <div style={{
            fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 800,
            lineHeight: 1, letterSpacing: '-0.025em',
            color: 'var(--color-gold-300)'
          }}>34</div>
            <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 13,
            color: 'rgba(255,255,255,0.78)', maxWidth: '16ch', lineHeight: 1.3
          }}>
              years serving<br />Pierce County.
            </div>
          </div>
          <div className="hero-tagline" style={{ maxWidth: '32ch' }}>
            <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--color-gold-300)', marginBottom: 6
          }}>
              On the ballot · November 2026
            </div>
            <div style={{
            fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
            lineHeight: 1.3, color: '#fff'
          }}>
              A battalion chief. A builder. A neighbor.
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>;


/* Pledge line — single sentence set large, editorial */
const Pledge = () =>
<Reveal>
    <section className="section" style={{ background: '#fff', padding: '96px 32px' }}>
      <div style={{ maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
        <GoldRule style={{ margin: '0 auto' }} />
        <p style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(1.75rem, 3.4vw, 2.8rem)',
        fontWeight: 600, fontStyle: 'italic',
        letterSpacing: '-0.015em', lineHeight: 1.25,
        color: 'var(--color-ink)',
        margin: '28px auto 20px', maxWidth: '28ch',
        textWrap: 'pretty'
      }}>
          &ldquo;I&rsquo;m not running to start a political career. I&rsquo;m running because Pierce County is in trouble and I know how to fix it.&rdquo;
        </p>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-muted)' }}>
          — Chuck West
        </div>
      </div>
    </section>
  </Reveal>;


/* Stats — thin editorial strip (paper background) */
const Stats = () => {
  const stats = [
  { num: '34', unit: 'years', label: 'Serving Pierce County' },
  { num: '2×', unit: '', label: 'Elected to the Peninsula School Board' },
  { num: '14+', unit: 'years', label: 'Co-founder & Chair, Key Free Clinic' },
  { num: '8', unit: 'years', label: 'Chair, Land Use Advisory Council' }];

  return (
    <Reveal>
      <section className="section" style={{
        background: 'var(--brand-accent)',
        padding: '84px 32px',
        borderTop: '1px solid var(--color-gold-700)',
        borderBottom: '1px solid var(--color-gold-700)',
        color: 'var(--color-gold-900)'
      }}>
        <div className="grid-4" style={{ maxWidth: 1160, margin: '0 auto' }}>
          {stats.map((s, i) =>
          <div key={i}>
              <div className="stat-num" style={{
              fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 800,
              lineHeight: 0.95, color: '#fff', letterSpacing: '-0.025em'
            }}>
                {s.num}
                {s.unit && <span style={{ fontSize: 20, color: '#fff', marginLeft: 8, fontWeight: 700 }}>{s.unit}</span>}
              </div>
              <div aria-hidden="true" style={{ width: 24, height: 2, background: '#fff', margin: '16px 0' }} />
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: '#fff', lineHeight: 1.45, maxWidth: '26ch' }}>
                {s.label}
              </div>
            </div>
          )}
        </div>
      </section>
    </Reveal>);

};

/* Issues preview */
const IssuesPreview = ({ onNavigate }) => {
  const issues = [
  { n: '01', title: 'Public safety that actually works',
    blurb: 'Olympia tied law enforcement\u2019s hands and Pierce County families paid the price. Chuck spent 34 years working alongside deputies. He knows what real public safety requires.' },
  { n: '02', title: 'Make Pierce County affordable again',
    blurb: 'Property taxes are crushing working families. Building a simple ADU on your own property shouldn\u2019t take six months of paperwork. Chuck has run a small business here. He knows where the costs come from.' },
  { n: '03', title: 'A county that works for the people who live in it',
    blurb: '34 years organizing chaos as a Battalion Chief. Chuck knows how to streamline broken processes, restore emergency management to the professionals, and run a county on facts instead of politics.' }];

  return (
    <section className="section" style={{ padding: '112px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <Reveal>
          <GoldRule />
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'end',
            marginTop: 20, marginBottom: 48, flexWrap: 'wrap', gap: 24
          }}>
            <div>
              <Eyebrow>Solutions</Eyebrow>
              <h2 className="h1" style={{ margin: '14px 0 0', maxWidth: '18ch' }}>
                Four priorities. 34 years of preparation.
              </h2>
            </div>
            <Button variant="link" onClick={() => onNavigate('issues')}>See the full platform &nbsp;›</Button>
          </div>
        </Reveal>
        <div className="grid-3">
          {issues.map((is, i) =>
          <Reveal key={is.n} delay={i * 80}>
              <IssueCard {...is} onClick={() => onNavigate('issues')} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const IssueCard = ({ n, title, blurb, onClick }) => {
  const [hover, setHover] = useStateH(false);
  return (
    <article
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff',
        border: '1px solid var(--divider)',
        borderTop: '2px solid var(--color-gold-base)',
        borderRadius: 4, padding: '28px 28px 24px',
        display: 'flex', flexDirection: 'column', gap: 10,
        cursor: 'pointer',
        height: '100%',
        transition: 'transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), border-color 200ms var(--ease-standard)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover ? '0 18px 42px rgba(10, 39, 84, 0.10), 0 4px 10px rgba(10, 39, 84, 0.05)' : 'none'
      }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 700,
        color: 'var(--color-muted)', letterSpacing: '0.16em'
      }}>{n} — Priority</div>
      <h3 className="h3" style={{ margin: '4px 0 6px', color: 'var(--color-ink)' }}>{title}</h3>
      <p className="body" style={{ margin: 0, fontSize: 15, lineHeight: 1.55 }}>{blurb}</p>
      <div style={{
        marginTop: 'auto', paddingTop: 16,
        color: hover ? 'var(--color-blue-900)' : 'var(--color-blue-700)',
        fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600
      }}>
        Read the plan &nbsp;›
      </div>
    </article>);

};

/* Service Record (replaces Endorsements) */
const ServiceRecord = () => {
  const records = [
  { eyebrow: '34 YEARS · FIRE SERVICE',
    body: 'Retired Battalion Chief, Key Peninsula Fire Department. Strike team leader on wildland fires. Certified IFSAC Fire Service Instructor and Fire Officer. The job was organizing chaos when other people couldn\u2019t.',
    caption: '— Key Peninsula Fire Department, 1986\u2013retirement' },
  { eyebrow: '14+ YEARS · COMMUNITY HEALTH',
    body: 'Co-founder and Chair of the Key Free Clinic since 2012. Built a free medical clinic from the ground up to serve working families on the Key Peninsula who couldn\u2019t afford care. It\u2019s still serving them today.',
    caption: '— Key Free Clinic, 2012\u2013present' },
  { eyebrow: '15+ YEARS · LOCAL GOVERNANCE',
    body: 'Two terms on the Peninsula School Board. Eight years as Chair of the Key Peninsula Land Use Advisory Council. Past Chair of the Key Peninsula Community Council. Past President of the Key Peninsula Business Association. Pierce County Flood Control Advisory Board representing unincorporated Pierce County.',
    caption: '— Multiple boards, 2008\u2013present' }];

  return (
    <section className="section" style={{ background: 'var(--color-paper)', padding: '112px 32px' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <GoldRule style={{ margin: '0 auto' }} />
            <Eyebrow style={{ marginTop: 20 }}>Where Chuck has served</Eyebrow>
            <h2 className="h1" style={{ margin: '14px auto 0', maxWidth: '22ch' }}>
              34 years of showing up for Pierce County.
            </h2>
          </div>
        </Reveal>
        <div className="grid-3">
          {records.map((r, i) =>
          <Reveal key={i} delay={i * 90}>
              <figure style={{
              background: '#fff', border: '1px solid var(--divider)',
              borderTop: '2px solid var(--color-gold-base)',
              borderRadius: 4, padding: '26px 28px', margin: 0,
              height: '100%', display: 'flex', flexDirection: 'column', gap: 14
            }}>
                <Eyebrow>{r.eyebrow}</Eyebrow>
                <p style={{
                fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6,
                margin: 0, color: 'var(--color-ink)'
              }}>{r.body}</p>
                <figcaption style={{ marginTop: 'auto' }}>
                  <div style={{ fontSize: 12, color: 'var(--color-muted)', fontWeight: 600, letterSpacing: '0.04em' }}>{r.caption}</div>
                </figcaption>
              </figure>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

/* Donate CTA strip */
const DonateStrip = ({ onNavigate }) =>
<section className="section" style={{
  position: 'relative', overflow: 'hidden',
  color: '#fff',
  padding: '96px 32px',
  background: 'var(--color-blue-900)'
}}>
    <img
    src="assets/donate-strip-bridge.png"
    alt="Tacoma Narrows Bridge at sunset"
    style={{
      position: 'absolute', inset: 0,
      width: '100%', height: '100%',
      objectFit: 'cover', objectPosition: 'center center',
      display: 'block'
    }} />
  
    <div aria-hidden="true" style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 28%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.05) 100%)'
  }} />
    <div className="donate-strip-inner" style={{
    maxWidth: 1160, margin: '0 auto', position: 'relative',
    display: 'flex', gap: 48, alignItems: 'center', flexWrap: 'wrap',
    justifyContent: 'space-between'
  }}>
      <div style={{ maxWidth: '46ch' }}>
        <Eyebrow color="var(--color-gold-300)">Chip in</Eyebrow>
        <h2 className="h1" style={{
        margin: '14px 0 14px', color: '#fff',
        textShadow: '0 2px 24px rgba(0,0,0,0.5)'
      }}>
          This campaign runs on Pierce County.
        </h2>
        <p className="lead" style={{
        color: 'rgba(255,255,255,0.92)', margin: 0, fontStyle: 'normal',
        textShadow: '0 1px 16px rgba(0,0,0,0.55)'
      }}>No corporate PACs. No out-of-state money chasing this race. Just neighbors who’ve watched Chuck show up for 34 years and want him to keep doing it.

      </p>
      </div>
      <Button variant="gold" onClick={() => onNavigate('donate')}
    style={{ padding: '15px 28px', fontSize: 16, whiteSpace: 'nowrap' }}>
        Donate today
      </Button>
    </div>
  </section>;


const HomeScreen = ({ onNavigate }) =>
<>
    <Hero onNavigate={onNavigate} />
    <Stats />
    <Pledge />
    <IssuesPreview onNavigate={onNavigate} />
    <ServiceRecord />
    <DonateStrip onNavigate={onNavigate} />
  </>;


Object.assign(window, { HomeScreen });