/* Issues screen with tab switcher */

const { useState: useStateI } = React;

const ISSUES = [
  {
    id: 'safety',
    n: '01',
    tab: 'Public safety',
    title: 'Public safety that actually works',
    stand: 'Olympia tied law enforcement\u2019s hands. Pierce County families paid the price.',
    body: [
      'Chuck spent 34 years working shoulder-to-shoulder with Pierce County deputies. He knows what they need because they\u2019ve told him directly: real resources for the mental health, addiction, and homelessness problems that consume their time. Real backing from the county to do their job.',
      'When the legislature took police pursuit authority away in 2021, crime exploded. Auto theft set new state records. Suspects fled because they knew police couldn\u2019t chase them. Even Olympia eventually backed down and restored some pursuit authority \u2014 because the policy didn\u2019t work. The damage to Pierce County families is still being repaired. Chuck supports law enforcement because he worked alongside them for 34 years. He knows what real public safety requires \u2014 and what it doesn\u2019t.',
    ],
    bullets: [
      'Restore full police pursuit authority and stop tying officers\u2019 hands',
      'Real mental health and addiction response infrastructure so deputies aren\u2019t doing the work of social workers',
      'Homelessness response that moves people toward stability instead of perpetuating the crisis',
      'Adequate staffing and resources for Pierce County Sheriff\u2019s deputies and first responders',
    ],
  },
  {
    id: 'affordability',
    n: '02',
    tab: 'Affordability',
    title: 'Make Pierce County affordable again',
    stand: 'Property taxes are crushing families who built their lives here. The county controls more of those levers than people realize.',
    body: [
      'Chuck has run a small business in Pierce County for years. He knows what it costs to build, hire, and operate here \u2014 and he knows the costs are crushing working families. Property taxes are out of control. Cost of living has exploded. Families who have lived in Pierce County for decades are being pushed out of homes they\u2019ve owned their whole lives. Young people can\u2019t afford to buy in.',
      'As Chair of the Key Peninsula Land Use Advisory Council for eight years, Chuck dealt with permitting bureaucracy from the inside. Building a simple accessory dwelling unit on your own property shouldn\u2019t take six months. Affordable housing is sometimes as simple as letting homeowners build a small unit behind the house \u2014 but the current process punishes them for trying.',
    ],
    bullets: [
      'Hold the line on property taxes \u2014 no new taxes without genuine accountability for existing dollars',
      'Streamline ADU permitting so homeowners can actually build',
      'Eliminate redundant regulations that drive up the cost of building anything in Pierce County',
      'Audit county spending against actual outcomes, not budget categories',
    ],
  },
  {
    id: 'government',
    n: '03',
    tab: 'Better government',
    title: 'A county that works for the people who live in it',
    stand: 'The pandemic exposed how brittle our county really is. Decisions were made on politics, not data.',
    body: [
      'As both a Battalion Chief and a general contractor, Chuck has dealt with Pierce County government from every angle. He knows the red tape. He knows where the processes break. Too many county functions are buried in over-complicated regulations that slow down everything from emergency response coordination to a homeowner trying to add a deck.',
      'The pandemic was a test of county emergency management and the county failed parts of that test. Decisions were made on politics instead of data. Elected officials overstepped their roles. The professionals who actually understood emergency operations were sidelined. Chuck has organized chaos for 34 years. As a strike team leader on wildland fires and the chief officer organizing district fires and major accidents, he knows how this works.',
    ],
    bullets: [
      'Streamline permitting and licensing across all county functions',
      'Restore emergency management to the professionals \u2014 elected officials should know their role and stay in it',
      'Decisions based on facts and data, not political pressure or the loudest voice in the room',
      'Listen to the people doing the work before deciding policy that affects them',
    ],
  },
  {
    id: 'infrastructure',
    n: '04',
    tab: 'Infrastructure',
    title: 'Long-range planning Pierce County has never done',
    stand: 'Too many of our roads are the product of evolution, not planning. We can\u2019t keep putting bandaids on major bleeding.',
    body: [
      'Too many Pierce County roads are not the product of planning. They\u2019re the product of evolution \u2014 old logging skid roads that got graded, then graveled, then paved. Now they\u2019re failing, and every year the county spends millions putting bandaids on major bleeding. Chuck believes Pierce County needs to plan infrastructure for the next 50 years and beyond. Fix it right the first time.',
      'This is the work of a Battalion Chief: figure out where the real problem is, allocate resources to actually fix it, and stop reacting to the same crisis over and over. Stop spending good money chasing failed roads, failed water systems, and failed emergency capacity. Spend taxpayer dollars once instead of three times.',
    ],
    bullets: [
      'Long-range infrastructure planning with real engineering and real budgeting',
      'Road repair that fixes the underlying problem, not just the surface',
      'Capital planning that respects taxpayer dollars by spending them once instead of three times',
      'Emergency operations planning so the next pandemic, earthquake, or wildfire season doesn\u2019t catch us flat-footed',
    ],
  },
];

/* Issues hero — Tacoma Narrows Bridge backdrop, dark-left gradient */
const IssuesHero = () => (
  <section className="section issues-hero" style={{
    position: 'relative',
    minHeight: 'min(72vh, 600px)',
    overflow: 'hidden',
    borderBottom: '1px solid var(--divider)',
    background: 'var(--color-ink)',
    color: '#fff',
    display: 'flex',
    alignItems: 'stretch',
  }}>
    <img
      className="issues-hero-img"
      src="assets/hero-bridge.png"
      alt="Tacoma Narrows Bridge at sunset over Pierce County"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover',
        objectPosition: 'center center',
        display: 'block',
      }}
    />
    <div className="issues-hero-overlay" aria-hidden="true" style={{
      position: 'absolute', inset: 0,
      background:
        'linear-gradient(90deg, rgba(8, 12, 24, 0.92) 0%, rgba(8, 12, 24, 0.85) 22%, rgba(8, 12, 24, 0.55) 48%, rgba(8, 12, 24, 0.20) 72%, rgba(8, 12, 24, 0.05) 100%)',
    }} />
    <div className="issues-hero-inner" style={{
      position: 'relative',
      width: '100%',
      maxWidth: 1160,
      margin: '0 auto',
      padding: '120px 32px 96px',
      display: 'flex',
      alignItems: 'center',
    }}>
      <div style={{ maxWidth: 640 }}>
        <span aria-hidden="true" style={{
          display: 'block', width: 56, height: 2,
          background: 'var(--color-gold-base)',
          marginBottom: 24,
        }} />
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--color-gold-300)',
          marginBottom: 26,
        }}>
          Solutions
        </div>
        <h1 style={{
          margin: '0 0 28px',
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 'clamp(2.4rem, 5vw, 4rem)',
          lineHeight: 1.04,
          letterSpacing: '-0.022em',
          color: '#fff',
          maxWidth: '14ch',
          textShadow: '0 2px 28px rgba(0,0,0,0.45)',
        }}>
          What I&rsquo;ll do for Pierce County.
        </h1>
        <p style={{
          margin: 0,
          fontFamily: 'var(--font-serif)',
          fontStyle: 'italic',
          fontSize: 'clamp(1.05rem, 1.4vw, 1.2rem)',
          lineHeight: 1.55,
          color: 'rgba(255,255,255,0.94)',
          maxWidth: '54ch',
          textShadow: '0 1px 18px rgba(0,0,0,0.5)',
        }}>
          Four priorities, drawn from 34 years of doing this work. Public safety. Affordability. A county that actually works. Long-range planning Pierce County has never done. No focus-group phrases. No favors for donors. Just the things I&rsquo;ll fight for on day one.
        </p>
      </div>
    </div>
  </section>
);

const IssuesScreen = ({ onNavigate }) => {
  const [active, setActive] = useStateI(ISSUES[0].id);
  const cur = ISSUES.find(i => i.id === active);

  return (
    <>
    <IssuesHero />
    <section className="section" style={{ padding: '96px 32px 128px', background: 'var(--color-paper)' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>

        {/* Tab bar */}
        <div role="tablist" className="issue-tabs" style={{
          display: 'flex', gap: 4, flexWrap: 'wrap',
          borderBottom: '1px solid var(--divider)',
          marginBottom: 44,
        }}>
          {ISSUES.map(is => {
            const on = is.id === active;
            return (
              <button
                key={is.id}
                role="tab"
                aria-selected={on}
                onClick={() => setActive(is.id)}
                style={{
                  background: 'transparent',
                  border: 'none', borderBottom: on ? '2px solid var(--brand-primary)' : '2px solid transparent',
                  padding: '14px 18px', cursor: 'pointer',
                  fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
                  color: on ? 'var(--brand-primary)' : 'var(--color-ink-soft)',
                  marginBottom: -1,
                  transition: 'color 150ms var(--ease-standard), border-color 150ms var(--ease-standard)',
                  letterSpacing: '0.01em',
                }}>
                <span style={{ color: on ? 'var(--brand-accent)' : 'var(--color-muted)', marginRight: 10, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>{is.n}</span>
                {is.tab}
              </button>
            );
          })}
        </div>

        {/* Active panel */}
        <div key={cur.id} className="split-main" style={{
          animation: 'fadeInUp 300ms var(--ease-standard) both',
        }}>
          <div>
            <div className="issue-num-big" style={{
              fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 800,
              color: 'var(--brand-accent)', lineHeight: 0.9, letterSpacing: '-0.025em',
              marginBottom: 8,
            }}>{cur.n}</div>
            <h2 className="h1" style={{ fontSize: 'clamp(1.75rem, 3.2vw, 2.75rem)', margin: '0 0 24px', maxWidth: '18ch' }}>
              {cur.title}
            </h2>
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 22, fontStyle: 'italic',
              lineHeight: 1.4, color: 'var(--color-ink)',
              margin: '0 0 28px', maxWidth: '36ch',
              paddingLeft: 20, borderLeft: '2px solid var(--color-gold-base)',
            }}>
              {cur.stand}
            </p>
            {cur.body.map((p, i) => (
              <p key={i} className="body" style={{ margin: '0 0 18px', maxWidth: '60ch' }}>{p}</p>
            ))}
          </div>

          <aside style={{
            background: '#fff', border: '1px solid var(--divider)',
            borderTop: '2px solid var(--color-gold-base)',
            borderRadius: 4, padding: '28px 30px',
            position: 'sticky', top: 104,
          }}>
            <Eyebrow>What that means, concretely</Eyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'grid', gap: 14 }}>
              {cur.bullets.map((b, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '22px 1fr', gap: 10,
                  fontSize: 15, lineHeight: 1.5, color: 'var(--color-ink)',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'var(--color-green-100)', color: 'var(--brand-primary)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700, marginTop: 2,
                  }}>✓</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid var(--divider)' }}>
              <Button variant="secondary" fullWidth onClick={() => onNavigate('donate')}>
                Support this platform &nbsp;›
              </Button>
            </div>
          </aside>
        </div>

        {/* Next/Prev */}
        <div className="issue-pager" style={{
          marginTop: 88, paddingTop: 32, borderTop: '1px solid var(--divider)',
          display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
        }}>
          {(() => {
            const idx = ISSUES.findIndex(i => i.id === active);
            const prev = ISSUES[(idx - 1 + ISSUES.length) % ISSUES.length];
            const next = ISSUES[(idx + 1) % ISSUES.length];
            return (
              <>
                <button onClick={() => setActive(prev.id)} style={{
                  background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0,
                }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--color-muted)', fontWeight: 700 }}>← Previous</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--color-ink)', marginTop: 4 }}>{prev.title}</div>
                </button>
                <button onClick={() => setActive(next.id)} style={{
                  background: 'none', border: 'none', cursor: 'pointer', textAlign: 'right', padding: 0,
                }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--color-muted)', fontWeight: 700 }}>Next →</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--color-ink)', marginTop: 4 }}>{next.title}</div>
                </button>
              </>
            );
          })()}
        </div>
      </div>
    </section>
    </>
  );
};

Object.assign(window, { IssuesScreen });
