/* About Matthew */

const AboutScreen = ({ onNavigate }) => {
  const milestones = [
  { year: '23 yrs', label: 'United States Navy — honorable service' },
  { year: '2004', label: 'Settled in Island County (22 years ago)' },
  { year: 'Owner', label: 'Three Island County small businesses · 5 local employees & countless collaborations' },
  { year: 'Captain', label: 'Project Captain — Hearts & Hammers' },
  { year: 'Scoutmaster', label: 'Boy Scout Troop 4059' },
  { year: '1,400 / yr', label: 'Free Thanksgiving meal giveaway' },
  { year: '2026', label: 'Running for Island County Commissioner, Position 3' }];


  return (
    <section className="section" style={{ padding: '96px 32px 128px', background: '#fff' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <GoldRule />
        <Eyebrow style={{ marginTop: 20 }}>About Matthew</Eyebrow>
        <h1 className="h1" style={{ margin: '14px 0 20px', maxWidth: '24ch' }}>
          A Navy veteran. A small business owner. <span style={{ color: 'var(--brand-accent)' }}>A neighbor.</span>
        </h1>

        <div className="split-about">
          <div>
            <p className="lead" style={{ margin: '0 0 28px', maxWidth: '56ch', fontStyle: 'normal' }}>
              For 22 years, Matthew Van Pelt has called Island County home. Before that, he served twenty-three honorable years in the United States Navy &mdash; building the discipline, leadership, and steadiness that come from a long career of putting the mission first.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>
              Today, Matthew owns and operates three Island County small businesses that employ five local residents. He and his wife are raising five children and have eleven grandchildren &mdash; a family deeply rooted in this community. He studied Business and Political Science at Chapman College and completed multiple Naval schools across his career.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>
              Matthew spends his time in Island County serving where it matters. He organizes an annual Thanksgiving meal giveaway that has fed more than 1,400 families to date. He serves as Project Captain for Hearts & Hammers, helping neighbors in need with home repairs they can&rsquo;t do alone. He leads Boy Scout Troop 4059 as Scoutmaster, teaching the next generation what service and discipline look like in practice.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>
              Now Island County faces real challenges. Healthcare infrastructure is stretched. Housing is becoming unaffordable for the families who built this community. Public safety needs more resources and better support. Local government employees are leaving for opportunities elsewhere. Tourism &mdash; the lifeblood of this place &mdash; needs leadership that understands and protects it.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>
              Matthew Van Pelt is running for Island County Commissioner because he believes the county deserves practical leadership that puts community before politics. He&rsquo;s a veteran. He&rsquo;s a father and grandfather. He&rsquo;s a small-business owner who knows what it takes to lead, listen, and get things done.
            </p>

            <div style={{
              marginTop: 40, padding: '28px 32px',
              background: 'var(--color-paper)', border: '1px solid var(--divider)',
              borderLeft: '3px solid var(--color-gold-base)', borderRadius: 4
            }}>
              <Eyebrow>The frame</Eyebrow>
              <p style={{
                fontFamily: 'var(--font-sans)', fontSize: 20, fontStyle: 'normal',
                lineHeight: 1.5, color: 'var(--color-ink)', margin: '12px 0 14px',
                fontWeight: 500
              }}>
                &ldquo;I believe residents want leadership focused on cooperation, accountability, and results &mdash; not division and conflict. Together, we can build a stronger future for Island County.&rdquo;
              </p>
              <div style={{ fontSize: 13, color: 'var(--color-muted)', fontWeight: 600, letterSpacing: '0.06em' }}>
                — Matthew Van Pelt
              </div>
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => onNavigate('issues')}>See the five priorities &nbsp;›</Button>
              <Button variant="quiet" onClick={() => onNavigate('events')}>Meet him in person &nbsp;›</Button>
            </div>
          </div>

          {/* Right column: portrait + timeline */}
          <aside>
            <div style={{
              aspectRatio: '4 / 5',
              background: 'var(--color-green-base)',
              borderRadius: 4, overflow: 'hidden',
              position: 'relative'
            }}>
              <img src="assets/vanpelt-portrait.png" alt="Matthew Van Pelt"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center top',
                display: 'block'
              }} />
            </div>

            <div style={{ marginTop: 44 }}>
              <Eyebrow>Service record</Eyebrow>
              <ul style={{
                listStyle: 'none', padding: 0,
                margin: '20px 0 0',
                borderLeft: '2px solid var(--color-gold-base)'
              }}>
                {milestones.map((m, i) =>
                <li key={i} style={{ padding: '12px 0 12px 22px', position: 'relative' }}>
                    <div style={{
                    position: 'absolute', left: -7, top: 18,
                    width: 12, height: 12, background: 'var(--brand-primary)',
                    borderRadius: '50%', border: '2px solid #fff'
                  }} />
                    <div style={{
                    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
                    letterSpacing: '0.12em', color: 'var(--brand-accent-warm)',
                    textTransform: 'uppercase'
                  }}>{m.year}</div>
                    <div style={{ fontSize: 15, color: 'var(--color-ink)', marginTop: 4, lineHeight: 1.4 }}>
                      {m.label}
                    </div>
                  </li>
                )}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};

Object.assign(window, { AboutScreen });