/* About Chuck */

const AboutScreen = ({ onNavigate }) => {
  const milestones = [
  { year: '1986', label: 'Washington State Fire Academy — IFSAC certification' },
  { year: '2007', label: 'Key Peninsula Lions Citizen of the Year' },
  { year: '2008', label: 'Chair, Key Peninsula Land Use Advisory Council (through 2016)' },
  { year: '2012', label: 'Co-founded Key Free Clinic — Chair to present' },
  { year: '2019', label: 'Elected — Peninsula School Board' },
  { year: '2023', label: 'Re-elected — Peninsula School Board' },
  { year: '2026', label: 'Running for Pierce County Council, District 7' }];


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

        <div className="split-about">
          <div>
            <p className="lead" style={{ margin: '0 0 28px', maxWidth: '54ch', fontStyle: 'italic' }}>
              For 34 years, when something went wrong on the Key Peninsula, Chuck West showed up. House fires. Car accidents. Wildland fires across the state. Heart attacks at 3 AM. He spent his career running toward the things most people run from.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>Chuck served his community as a firefighter, then as an EMT, finally retiring as the Battalion Chief responsible for organizing chaos when other people couldn’t. He raised his family on the Key Peninsula. He built a small business here — a licensed general contracting firm with eight employees. He served on the Peninsula School Board for two terms. He co-founded the Key Free Clinic in 2012 and still chairs it today. He’s served on more local boards than most people can count.

            </p>
            <figure style={{ margin: '28px 0 28px' }}>
              <img
                src="assets/about-family.jpeg"
                alt="Chuck West with his family"
                style={{
                  display: 'block',
                  width: '100%',
                  height: 'auto',
                  borderRadius: 4,
                  boxShadow: '0 8px 24px rgba(10, 39, 84, 0.10)',
                }}
              />
            </figure>
            <p className="body" style={{ margin: '0 0 18px' }}>
              Now Pierce County is in trouble. Crime is up. Costs are up. Families are being priced out of homes they&rsquo;ve worked their whole lives to keep. The roads are failing. The county can&rsquo;t get out of its own way. Chuck West is running for Pierce County Council because he&rsquo;s spent 34 years organizing chaos — and Pierce County needs someone who knows how to do it.
            </p>
            <p className="body" style={{ margin: '0 0 18px' }}>
              He&rsquo;s not a career politician. He won&rsquo;t talk over you. He won&rsquo;t read from a consultant&rsquo;s script. He&rsquo;ll tell you what he actually thinks — and then he&rsquo;ll go do what he said. That&rsquo;s what 34 years as a Battalion Chief teaches you: the job comes first.
            </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-serif)', fontSize: 20, fontStyle: 'italic',
                lineHeight: 1.5, color: 'var(--color-ink)', margin: '12px 0 14px'
              }}>
                &ldquo;I&rsquo;m not running to represent a party. I&rsquo;m running to represent Pierce County. I&rsquo;ll work with anyone — Democrat, Republican, or independent — who&rsquo;s serious about fixing what&rsquo;s broken.&rdquo;
              </p>
              <div style={{ fontSize: 13, color: 'var(--color-muted)', fontWeight: 600, letterSpacing: '0.06em' }}>
                — Chuck West
              </div>
            </div>

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

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

            <div style={{ marginTop: 44 }}>
              <Eyebrow>Career timeline</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)'
                  }}>{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 });