function HomeWelcome() {
  return (
    <section style={{ background: GVD.paper, borderTop: `1px solid ${GVD.rule}`, padding: '56px 0 0' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px', textAlign: 'center' }}>
        <p style={{ fontFamily: GVD.font.serif, fontSize: 22, lineHeight: 1.5, color: GVD.ink, margin: '0 auto', maxWidth: 720 }}>
          We are a community organization that stimulates and promotes democratic values, by offering educational and action opportunities. Please join us!
        </p>
      </div>
    </section>
  );
}

function HomeActionTriad() {
  const items = [
    { kicker: 'Get Involved', title: 'Become a Member', body: 'Join the largest Democratic club in Pima County south of Tucson. Annual dues fund voter outreach, candidate forums, and our community events.', cta: 'Join GV Dems', href: 'join.html' },
    { kicker: 'Get Out the Vote', title: '2026 Election', body: 'Check your voter registration, find your polling location, and stay informed about candidates and issues on the ballot.', cta: 'Voting Information', href: 'vote.html' },
    { kicker: 'Lend a Hand', title: 'Volunteer With Us', body: 'Phone bank from home, canvass with neighbors, register voters at the farmers market, or help with a local campaign.', cta: 'Volunteer Sign-Up', href: 'volunteer.html' },
  ];
  return (
    <section style={{ background: GVD.bg, borderTop: `1px solid ${GVD.rule}`, padding: '64px 0 72px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56 }}>
        {items.map((it, i) => (
          <div key={i}>
            <Eyebrow style={{ marginBottom: 14 }}>{it.kicker}</Eyebrow>
            <h3 style={{ fontFamily: GVD.font.serif, fontSize: 28, fontWeight: 600, color: GVD.ink, margin: '0 0 14px', letterSpacing: -0.2 }}>{it.title}</h3>
            <AccentRule style={{ marginBottom: 14 }} />
            <p style={{ fontFamily: GVD.font.sans, fontSize: 15, lineHeight: 1.65, color: GVD.ink2, margin: '0 0 20px' }}>{it.body}</p>
            <PrimaryLink href={it.href}>{it.cta}</PrimaryLink>
          </div>
        ))}
      </div>
    </section>
  );
}

function HomeIssues() {
  const issues = [
    ['Fair & Open Elections', 'Expanding ballot access, opposing voter suppression, and protecting the right of every Arizonan to vote.'],
    ['Women’s Reproductive Rights', 'Defending the right to choose and protecting access to reproductive healthcare across Arizona.'],
    ['Public Education', 'Funding our schools, supporting teachers, and ensuring quality education for Arizona’s students.'],
    ['Water & Climate', 'Managing water resources, conservation efforts, and planning for a hotter, drier future in Southern Arizona.'],
    ['Workers’ Rights', 'Supporting fair compensation, unionization rights, and dignity for working families.'],
    ['Equity & Inclusion', 'Respect and equity across racial, religious, ethnic, gender, and sexual orientation lines.'],
    ['Healthcare', 'Lowering costs, protecting Medicare, and expanding access for working families.'],
    ['Gun Safety', 'Common-sense gun control measures to protect our communities.'],
  ];
  return (
    <section style={{ background: GVD.paper, borderTop: `1px solid ${GVD.rule}`, padding: '72px 0 80px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <SectionTitle eyebrow="What We Stand For" align="center" size={40}>Our Issues</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '36px 48px' }}>
          {issues.map(([t, b]) => (
            <div key={t} style={{ borderTop: `1px solid ${GVD.rule}`, paddingTop: 18 }}>
              <h3 style={{ fontFamily: GVD.font.serif, fontSize: 20, fontWeight: 600, color: GVD.ink, margin: '0 0 8px' }}>{t}</h3>
              <p style={{ fontFamily: GVD.font.sans, fontSize: 14, lineHeight: 1.6, color: GVD.ink2, margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePrograms() {
  return (
    <SplitSection
      eyebrow="Programs"
      title="Recent & Upcoming"
      lede="Monthly programs are held on the 2nd and 4th Saturdays at 3 p.m. All events are open to members and community guests."
      link="View Recorded Presentations"
      linkHref="resources.html"
    >
      <EventCard month="Apr" day="25" when="Sat · 3:00 pm" title="Luis Heredia" where="Green Valley" body="Community program featuring Luis Heredia." />
      <EventCard month="Apr" day="11" when="Sat · 3:00 pm" title="Save Our Schools" where="Green Valley" body="Program on protecting public education in Arizona." />
      <EventCard month="Jan" day="24" when="Sat · 3:00 pm" title="LD19 Candidates" where="Green Valley" body="Meet and hear from the Legislative District 19 candidates." />
    </SplitSection>
  );
}

function HomeStatePolitics() {
  return (
    <section style={{ background: GVD.bg, borderTop: `1px solid ${GVD.rule}`, padding: '72px 0 80px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <SectionTitle eyebrow="Take Action" align="center" size={40}>State Politics Matter</SectionTitle>
        <p style={{ fontFamily: GVD.font.sans, fontSize: 15, lineHeight: 1.65, color: GVD.ink2, margin: '-24px auto 48px', maxWidth: 640, textAlign: 'center' }}>
          Keep informed and voice your opinions on state legislative issues.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
          <Callout variant="info" kicker="Civic Engagement" title="Civic Engagement Beyond Voting">
            Subscribe to CEBV to keep up with state legislative issues. Their website and weekly emails provide critical information on proposed legislation and how to voice your opinions using Request to Speak.
          </Callout>
          <Callout variant="info" kicker="Your Voice" title="Request to Speak (RTS)">
            An easy and effective way to voice your opinions on pending state legislation. Learn more and get started on the Resources page.
          </Callout>
          <Callout variant="info" kicker="Stay Connected" title="Check Your Registration">
            Make sure you are registered to vote. Visit the Pima County Recorder's Office website to check your status and register if needed.
          </Callout>
        </div>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <CTABanner
      eyebrow="Democracy Needs You"
      title="Join the Green Valley Democrats"
      body="Membership dues are $30 per person and fund voter outreach, candidate forums, and community events. Now accepting dues for 2026."
      primary="Become a Member →"
      secondary="Donate via ActBlue"
      dark
    />
  );
}

function V6Home() {
  return (
    <div style={{ background: GVD.paper, color: GVD.ink, fontFamily: GVD.font.sans }}>
      <GVDHeader active="GV Dems" />
      <GVDPageHero title="Green Valley Democrats" tagline="Serving Southern Arizona for over 50 years." imageSrc="images/hero.jpg" imageAlt="Santa Catalina Mountains and Sonoran desert landscape" overlayText photoHeight={460} />
      <HomeWelcome />
      <HomeActionTriad />
      <HomeIssues />
      <HomePrograms />
      <HomeStatePolitics />
      <HomeCTA />
      <GVDFooter />
    </div>
  );
}

window.V6Home = V6Home;