/* 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/vanpelt-hero.png"
    alt="Matthew Van Pelt on the Island County waterfront"
    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 Matthew stands */}
    <div className="home-hero-overlay" aria-hidden="true" style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(90deg, rgba(0, 16, 38, 0.92) 0%, rgba(0, 16, 38, 0.78) 28%, rgba(0, 16, 38, 0.45) 52%, rgba(0, 16, 38, 0.10) 72%, rgba(0, 16, 38, 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(0,16,38,0.32) 0%, rgba(0,16,38,0) 22%, rgba(0,16,38,0) 70%, rgba(0,16,38,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)'
        }}>
            Island County Commissioner · Position 3 · 2026
          </span>
        </div>
        <h1 className="display-lg" style={{
        margin: '0 0 26px',
        color: '#fff',
        maxWidth: '14ch',
        textShadow: '0 2px 28px rgba(0,0,0,0.35)'
      }}>
          Cooperation.<br />Accountability.<br />
          <span style={{ color: 'var(--brand-accent)' }}>Results.</span>
        </h1>
        <p className="lead" style={{
        maxWidth: '50ch', 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)'
      }}>
          Twenty-three years in the United States Navy. Twenty-two years rooted in Island County. Three small businesses employing your neighbors. Matthew Van Pelt is running for County Commissioner because Island County deserves practical leadership that puts community before politics.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="gold" onClick={window.openDonate}
        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 Matthew &nbsp;›
          </Button>
        </div>
      </div>

      {/* Bottom badge strip */}
      <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: 400,
            lineHeight: 1, letterSpacing: '-0.025em',
            color: 'var(--color-gold-300)'
          }}>23</div>
            <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 13,
            color: 'rgba(255,255,255,0.78)', maxWidth: '16ch', lineHeight: 1.3
          }}>
              years honorable<br />U.S. Navy service.
            </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: 22, fontWeight: 400,
            lineHeight: 1.15, color: '#fff', letterSpacing: '0.01em'
          }}>
              A veteran. A business owner. 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.6rem)',
        fontWeight: 400, fontStyle: 'normal',
        letterSpacing: '0.005em', lineHeight: 1.2,
        color: 'var(--color-ink)',
        margin: '28px auto 20px', maxWidth: '32ch',
        textWrap: 'pretty', textTransform: 'uppercase'
      }}>
          &ldquo;Residents want leadership focused on cooperation, accountability, and results &mdash; not division and conflict.&rdquo;
        </p>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-muted)' }}>
          — Matthew Van Pelt
        </div>
      </div>
    </section>
  </Reveal>;


/* Stats — thin editorial strip (gold background) */
const Stats = () => {
  const stats = [
  { num: '23', unit: 'years', label: 'Honorable U.S. Navy service' },
  { num: '22', unit: 'years', label: 'Rooted in Island County' },
  { num: '3', unit: '', label: 'Small businesses owned · 5 local employees & countless collaborations' },
  { num: '1,400', unit: 'meals', label: 'Free Thanksgiving meals served each year' }];

  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: 400,
              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: 'Protect Island County healthcare',
    blurb: 'New state housing pressures mean more residents needing care. Island County Hospital is already stretched. We need to partner proactively with the state to fund the medical capacity our community is going to need.' },
  { n: '02', title: 'Make housing attainable again',
    blurb: 'Non-essential building codes are driving up construction costs and pricing families out of homes they’ve worked to keep. We can reduce that cost without compromising safety — and we should.' },
  { n: '03', title: 'Real public safety for Island County',
    blurb: 'Shortage of detectives. Limited police presence on Camano. Gaps in specialized investigative training. The Sheriff runs his shop — my job is to make sure he has the resources, funding, and backing he needs.' }];

  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>Issues</Eyebrow>
              <h2 className="h1" style={{ margin: '14px 0 0', maxWidth: '22ch' }}>
                Five priorities. Practical leadership for Island County.
              </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(0, 16, 38, 0.10), 0 4px 10px rgba(0, 16, 38, 0.05)' : 'none'
      }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 400,
        color: 'var(--color-muted)', letterSpacing: '0.16em', textTransform: 'uppercase'
      }}>{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-green-900)' : 'var(--color-green-700)',
        fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600
      }}>
        Read the plan &nbsp;›
      </div>
    </article>);

};

/* Service Record (replaces Endorsements) */
const ServiceRecord = () => {
  const records = [
  { eyebrow: '23 YEARS · UNITED STATES NAVY',
    body: 'Honorable service in the United States Navy. Studied Business and Political Science at Chapman College and completed multiple Naval schools. The discipline, leadership, and steadiness that come from a long career of putting the mission first.',
    caption: '— U.S. Navy, retired' },
  { eyebrow: 'SMALL BUSINESS OWNER · ISLAND COUNTY',
    body: 'Owner and operator of three Island County small businesses employing five local residents and collaborated with countless others on various large and small projects. Knows firsthand what it costs to build, hire, and operate here — and how local government policy moves those numbers up or down.',
    caption: '— Three Island County businesses' },
  { eyebrow: 'COMMUNITY SERVICE · ISLAND COUNTY',
    body: 'Project Captain for Hearts & Hammers. Scoutmaster for Boy Scout Troop 4059. Organizer of an annual Thanksgiving meal giveaway that has fed more than 1,400 families. A long, quiet record of showing up where help is needed.',
    caption: '— Multiple Island County community programs' }];

  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 Matthew has served</Eyebrow>
            <h2 className="h1" style={{ margin: '14px auto 0', maxWidth: '26ch' }}>
              A career of service. A record of showing up.
            </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-sans)', 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/vanpelt-deception-pass.jpg"
    alt="Deception Pass Bridge at sunset, Whidbey Island"
    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, 16, 38, 0.92) 0%, rgba(0, 16, 38, 0.78) 28%, rgba(0, 16, 38, 0.45) 55%, rgba(0, 16, 38, 0.20) 78%, rgba(0, 16, 38, 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: '50ch' }}>
        <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 Island 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 outside money. No favors. Just neighbors who know what Matthew brings: practical experience, steady leadership, and a long record of showing up for Island County.

      </p>
      </div>
      <Button variant="gold" onClick={window.openDonate}
    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 });