/* Issues screen with tab switcher */

const { useState: useStateI } = React;

const ISSUES = [
  {
    id: 'healthcare',
    n: '01',
    tab: 'Healthcare',
    title: 'Protect Island County healthcare',
    stand: 'New state housing pressures mean more residents needing care. Island County Hospital is already stretched. We have to plan now.',
    body: [
      'Washington State’s five-year low-income housing plan is commendable for tackling housing affordability — but it will increase the population of Island County residents with limited financial means. That means a meaningful rise in demand for medical services, particularly among those unable to fully cover their care.',
      'Island County Hospital is already operating under resource constraints that limit its ability to absorb that load without compromising quality or accessibility. Staffing levels, funding streams, and essential medical infrastructure are stretched thin. Without targeted support, the hospital risks overextension that will negatively impact patient outcomes.',
      'Local leadership must collaborate proactively with the state to secure the funding and resources Island County will need. Aligning state housing initiatives with appropriate healthcare investment is how we keep the hospital a reliable anchor of quality care — capable of meeting the evolving needs of the community as it grows.',
    ],
    bullets: [
      'Proactive partnership with state government on healthcare funding tied to housing growth',
      'Adequate staffing and resources for Island County Hospital',
      'Investment in medical infrastructure before the demand arrives, not after',
      'Public-health planning that protects both residents and patients in need',
    ],
  },
  {
    id: 'housing',
    n: '02',
    tab: 'Housing costs',
    title: 'Prevent unnecessary housing cost increases',
    stand: 'Non-essential building codes are driving up construction costs and pricing families out of homes they’ve worked to keep.',
    body: [
      'Island County is facing an urgent housing affordability crisis, made worse by new building codes that do not address essential safety or environmental needs but significantly drive up construction costs. Regulation is necessary to ensure safety and sustainability — but adopting non-essential or overly burdensome codes raises the cost of building homes and makes homeownership less attainable for many residents.',
      'These additional requirements create financial barriers for builders that are ultimately passed on to buyers through higher home prices. In a county already challenged on affordability, this trend threatens to price out long-term residents and potential newcomers alike, undermining efforts to grow accessible housing options.',
      'A critical reassessment of building codes is overdue. We have to distinguish between regulations that genuinely protect health and safety and those that simply inflate costs without proportional benefit. By limiting or eliminating non-essential codes, Island County can reduce construction expenses, stimulate development, and help make homeownership more attainable.',
    ],
    bullets: [
      'Reassess and trim non-essential building codes that drive up housing costs',
      'Protect the safety and environmental codes that matter',
      'Cut permitting delays that punish homeowners and small builders',
      'Make Island County a place working families can actually afford to live',
    ],
  },
  {
    id: 'public-safety',
    n: '03',
    tab: 'Public safety',
    title: 'Real public safety for Island County',
    stand: 'A shortage of detectives. Limited police presence on Camano. Gaps in specialized investigative training.',
    body: [
      'Island County faces a critical shortage of detectives and a limited police presence on Camano Island. There is a notable gap in the number of officers who have received the specialized training necessary to effectively gather evidence in major criminal investigations. These shortfalls undermine community safety and the ability of law enforcement to deliver timely, effective justice.',
      'Law enforcement operations fall under the jurisdiction of the Sheriff’s Office. As County Commissioner, my job is to work shoulder to shoulder with the Sheriff and his team to address these issues head on. That means advocating tirelessly for the resources, funding, and training programs needed to bolster our detective units and expand officer presence across the islands.',
    ],
    bullets: [
      'Advocate for resources and funding to fill the detective shortage',
      'Expand law enforcement presence on Camano Island',
      'Invest in specialized investigative training so major cases are worked properly',
      'Support the Sheriff’s Office without trying to do their job for them',
    ],
  },
  {
    id: 'retention',
    n: '04',
    tab: 'Employee retention',
    title: 'Retain the people who keep the county running',
    stand: 'When government workers leave for better jobs, services suffer. We have to build a workplace people want to stay in.',
    body: [
      'Island County faces real challenges in retaining government employees — and that turnover directly impacts the quality and consistency of services provided to residents. The fix isn’t a single program; it’s a culture that prioritizes work-life balance, employee well-being, and respect for the people doing the work.',
      'I will work to create a workplace where employees feel supported, valued, and motivated. That means promoting flexible work arrangements where they make sense, encouraging professional development, and keeping open communication channels between leadership and staff. I will work with other elected officials to make sure they have the resources, support, and guidance needed to implement these changes effectively.',
    ],
    bullets: [
      'Build a county workplace people want to stay in long-term',
      'Flexible work arrangements where they make operational sense',
      'Real professional development paths, not just job titles',
      'Open communication between leadership and the people doing the work',
    ],
  },
  {
    id: 'tourism',
    n: '05',
    tab: 'Tourism',
    title: 'Protect Island County’s tourism economy',
    stand: 'Tourism is the lifeblood of Island County. It deserves leadership that understands and protects it.',
    body: [
      'Island County’s identity and economy are deeply connected to its status as a popular and cherished tourist destination. As we address critical local issues like housing, public safety, and government workforce improvements, we have to remain equally committed to preserving and enhancing what makes this place appealing to visitors.',
      'I will work with local governments, businesses, and community organizations to make sure Island County remains a tourist-friendly environment. That means supporting infrastructure, public services, and community initiatives that create a welcoming and enjoyable experience for visitors while respecting the needs of residents. By balancing growth and community priorities with tourism development, we sustain the natural beauty, vibrant culture, and strong economic benefits tourism brings to Island County.',
    ],
    bullets: [
      'Support the infrastructure and services tourism requires',
      'Partner with businesses and community organizations on welcoming initiatives',
      'Balance visitor experience with the needs of full-time residents',
      'Protect the natural beauty and local culture that make Island County a destination',
    ],
  },
];

/* Issues hero — Deception Pass 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/vanpelt-hero-bridge.png"
      alt="Matthew Van Pelt on the Island County waterfront"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover',
        objectPosition: 'center 15%',
        display: 'block',
      }}
    />
    <div className="issues-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.85) 22%, rgba(0, 16, 38, 0.55) 48%, rgba(0, 16, 38, 0.20) 72%, rgba(0, 16, 38, 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,
        }}>
          Issues
        </div>
        <h1 style={{
          margin: '0 0 28px',
          fontFamily: 'var(--font-display)',
          fontWeight: 400,
          fontSize: 'clamp(2.4rem, 5vw, 4rem)',
          lineHeight: 1.04,
          letterSpacing: '-0.005em',
          color: '#fff',
          maxWidth: '16ch',
          textTransform: 'uppercase',
          textShadow: '0 2px 28px rgba(0,0,0,0.45)',
        }}>
          What I&rsquo;ll do for Island County.
        </h1>
        <p style={{
          margin: 0,
          fontFamily: 'var(--font-sans)',
          fontStyle: 'normal',
          fontSize: 'clamp(1.05rem, 1.4vw, 1.2rem)',
          lineHeight: 1.55,
          color: 'rgba(255,255,255,0.94)',
          maxWidth: '58ch',
          textShadow: '0 1px 18px rgba(0,0,0,0.5)',
        }}>
          Five priorities, drawn from 23 years in the Navy and 22 years building a life in Island County. Healthcare. Housing costs. Public safety. Employee retention. Tourism. 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: 400, 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: 400,
              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: '20ch' }}>
              {cur.title}
            </h2>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 22, fontStyle: 'normal',
              lineHeight: 1.4, color: 'var(--color-ink)', fontWeight: 500,
              margin: '0 0 28px', maxWidth: '38ch',
              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={window.openDonate}>
                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: 400, color: 'var(--color-ink)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.01em' }}>{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: 400, color: 'var(--color-ink)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.01em' }}>{next.title}</div>
                </button>
              </>
            );
          })()}
        </div>
      </div>
    </section>
    </>
  );
};

Object.assign(window, { IssuesScreen });
