/* global React, VideoBackground, Icon, StarDivider, Eyebrow, MiniCtaMarquee, SparkleHeading, HeroFitText */
const { useState: useStateHome } = React;

function Home({ lang, setRoute }) {
  const t = (en, es) => (lang === "es" ? es : en);

  return (
    <>
      {/* ============== HERO ============== */}
      <section className="hero" aria-labelledby="hero-title">
        <VideoBackground
          kind="flag"
          video={window.__resources.flagMp4}
          poster={window.__resources.flagPoster}
          playbackRate={0.5}
          position="center"
          overlay={false}
        />
        <div className="container hero-inner on-dark">
          <HeroFitText
            outerClassName="hero-eyebrow-wrap"
            innerClassName="hero-eyebrow"
            minFontPx={7}>
            <span className="hero-est">EST. 1968</span>
            <span className="hero-eyebrow-sep" aria-hidden="true"> · </span>
            SANTA MARIA · ORCUTT · GUADALUPE
          </HeroFitText>
          <SparkleHeading id="hero-title" className="hero-title">
            Democratic Club of<br/>
            Santa Maria Valley
          </SparkleHeading>
          <HeroFitText
            outerClassName="hero-sub hero-sub-banner"
            innerClassName="hero-sub-banner-inner">
            {t(
              "Proudly serving Santa Maria, Orcutt, and Guadalupe since 1968",
              "Sirviendo con orgullo a Santa María, Orcutt y Guadalupe desde 1968"
            )}
          </HeroFitText>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => setRoute("action")}>
              {t("Take Action", "Participa")} <Icon.Arrow className="arrow" />
            </button>
            <a className="btn btn-navy btn-lg" href="https://secure.actblue.com/contribute/page/dcsmvjoin" target="_blank" rel="noopener noreferrer">
              {t("Become a Member", "Hazte Miembro")}
            </a>
          </div>
          <div className="hero-meta" aria-hidden="true">
            <div className="hm-line"></div>
            <span>SCROLL</span>
          </div>
        </div>
      </section>

      {/* ============== CROWD BANNER ============== */}
      <section className="crowd-banner" aria-hidden="true">
        <div className="crowd-banner-img" style={{ backgroundImage: `url(${window.__resources.heroCrowd})` }}></div>
        <div className="crowd-banner-overlay"></div>
      </section>

      {/* ============== WHAT IS THE CLUB ============== */}
      <section className="what-is" aria-labelledby="what-title">
        <div className="container">
          <div className="two-col">
            <div className="two-col-side">
              <Eyebrow>{t("Who We Are", "Quiénes Somos")}</Eyebrow>
              <h2 id="what-title">
                {t("What is the ", "¿Qué es el ")}
                <em>{t("Democratic Club?", "Club Demócrata?")}</em>
              </h2>
              <div className="red-rule" />
            </div>
            <div className="two-col-body">
              <p className="lede">
                {t(
                  "Democrats have a strong voice in the Santa Maria Valley. The Democratic Club of Santa Maria Valley (DCSMV) is chartered by the Santa Barbara County Democratic Central Committee.",
                  "Los Demócratas tienen una voz fuerte en el Valle de Santa María. DCSMV está reconocido por el Comité Central Demócrata del Condado de Santa Bárbara."
                )}
              </p>
              <p>
                {t(
                  "We inform the voting public on the issues that promote Santa Maria Valley as a family‑friendly community, and our members are motivated to advance a progressive platform.",
                  "Informamos al público votante sobre los temas que promueven al Valle de Santa María como una comunidad familiar, y nuestros miembros están motivados para impulsar una plataforma progresista."
                )}
              </p>
              <p>
                {t(
                  "Democrats stand for equal rights, unions, public education, the environment, voting rights, freedom of speech, and the Constitution and Bill of Rights. Providing reliable information before going to the polls is one of our core goals.",
                  "Los Demócratas defendemos la igualdad de derechos, los sindicatos, la educación pública, el medio ambiente, el derecho al voto, la libertad de expresión y la Constitución y la Carta de Derechos."
                )}
              </p>
              <button className="link-arrow" onClick={() => setRoute("about")}>
                {t("Read our full mission", "Lee nuestra misión completa")} <Icon.Arrow size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============== OUR VALUES ============== */}
      <section className="values" aria-labelledby="values-title">
        <VideoBackground
          kind="water"
          video={window.__resources.waterMp4}
          poster={window.__resources.waterPoster}
          overlay={false}
        />
        <div className="values-deep-overlay" aria-hidden="true"></div>
        <div className="container values-inner on-dark">
          <Eyebrow>{t("Our Values", "Nuestros Valores")}</Eyebrow>
          <h2 id="values-title" className="values-title">
            {t("Decency in", "Decencia en la")} <em>{t("Democracy", "Democracia")}</em>
          </h2>
          <p className="kicker" style={{ marginBottom: 32 }}>
            {t("We are all one community.", "Todos somos una comunidad.")}
          </p>
          <div className="values-body">
            <p>
              {t(
                "We stand for human rights and social justice. We believe in equal opportunity without exclusion. We are committed to the rule of law and the public election of officeholders by democratic process.",
                "Defendemos los derechos humanos y la justicia social. Creemos en la igualdad de oportunidades sin exclusión. Estamos comprometidos con el estado de derecho y la elección pública de funcionarios por proceso democrático."
              )}
            </p>
            <p>
              {t(
                "The voting franchise gives us the power to ensure that human rights and social justice are not subverted by an unjust government, as the founders envisioned. We encourage action and the fair sharing of responsibility for the improvement of our community as an integrated whole.",
                "El derecho al voto nos da el poder de asegurar que los derechos humanos y la justicia social no sean subvertidos por un gobierno injusto, como los fundadores lo previeron."
              )}
            </p>
          </div>
          <div style={{ marginTop: 40 }}>
            <StarDivider count={3} />
          </div>
        </div>
      </section>

      {/* ============== ACTION CARDS ============== */}
      <section className="action-cards-section" aria-labelledby="action-title">
        <div className="container">
          <div className="section-head">
            <Eyebrow>{t("Get Involved", "Participa")}</Eyebrow>
            <h2 id="action-title">
              {t("Find your way in.", "Encuentra tu camino.")}
            </h2>
            <p className="lede">
              {t("Four straightforward ways to make your vote — and your time — count this election cycle.",
                 "Cuatro maneras claras de hacer que tu voto y tu tiempo cuenten este ciclo electoral.")}
            </p>
          </div>

          <div className="action-grid">
            <a className="action-card" href="https://registertovote.ca.gov/" target="_blank" rel="noopener noreferrer">
              <div className="ac-num">01</div>
              <h3>{t("Register to Vote", "Regístrate para Votar")}</h3>
              <p>{t("Quick online registration through the California Secretary of State.",
                    "Registro rápido en línea con el Secretario de Estado de California.")}</p>
              <div className="ac-cta">{t("Register", "Registrarse")} <Icon.External /></div>
            </a>

            <a className="action-card" href="http://www.sbcassessor.com/ElectionDataLookup/Default.aspx" target="_blank" rel="noopener noreferrer">
              <div className="ac-num">02</div>
              <h3>{t("Find Your Districts", "Tus Distritos")}</h3>
              <p>{t("See your supervisor, council, school board, and federal districts in one lookup.",
                    "Encuentra tus distritos en una búsqueda.")}</p>
              <div className="ac-cta">{t("Look up", "Buscar")} <Icon.External /></div>
            </a>

            <button className="action-card as-btn" onClick={() => setRoute("action")}>
              <div className="ac-num">03</div>
              <h3>{t("Volunteer", "Voluntariado")}</h3>
              <p>{t("Phone bank, canvass, or help host a community meeting near you.",
                    "Llama, recorre vecindarios, o ayuda a organizar una reunión.")}</p>
              <div className="ac-cta">{t("Take Action", "Participar")} <Icon.Arrow /></div>
            </button>

            <div className="action-card meeting-card">
              <div className="ac-num">04</div>
              <h3>{t("Upcoming Meeting", "Próxima Reunión")}</h3>
              <p>
                <strong>{t("Thu, Nov 19 · 6:30 PM", "Jue, 19 de Nov · 6:30 PM")}</strong><br/>
                UDW Hall, Santa Maria
              </p>
              <div className="ac-cta">{t("All welcome", "Todos bienvenidos")} <Icon.Check /></div>
            </div>
          </div>
        </div>
      </section>

      {/* ============== MEETING CALLOUT ============== */}
      <section className="meeting-band" aria-labelledby="meeting-title">
        <div className="container">
          <div className="meeting-grid">
            <div className="meeting-mark" aria-hidden="true">
              <div className="mm-day">19</div>
              <div className="mm-month">{t("EVERY THIRD THURSDAY", "TERCER JUEVES DEL MES")}</div>
            </div>
            <div>
              <Eyebrow>{t("Monthly Meetings", "Reuniones Mensuales")}</Eyebrow>
              <h2 id="meeting-title" style={{ marginBottom: 14 }}>
                {t("Show up. Speak up.", "Preséntate. Habla.")}
              </h2>
              <ul className="meeting-list">
                <li><Icon.Clock /> <span>{t("Doors 6:00 PM · Program 6:30 PM", "Puertas 6:00 PM · Programa 6:30 PM")}</span></li>
                <li><Icon.Pin /> <span>UDW Hall · 402 S. Miller St, Santa Maria, CA 93454</span></li>
                <li><Icon.Star /> <span>{t("Guests welcome — registered Democrats only for business at 7:00 PM", "Invitados bienvenidos — solo Demócratas registrados para asuntos a las 7:00 PM")}</span></li>
              </ul>
              <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn btn-navy" onClick={() => setRoute("contact")}>
                  {t("Get directions", "Cómo llegar")} <Icon.Arrow className="arrow" />
                </button>
                <button className="btn btn-outline" onClick={() => setRoute("about")}>
                  {t("What we discuss", "Qué discutimos")}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============== NO KINGS DAY MARQUEE ============== */}
      <section className="nokings-marquee" aria-labelledby="nokings-title">
        <div className="container">
          <div className="section-head text-center">
            <Eyebrow>{t("No Kings Day", "Día Sin Reyes")}</Eyebrow>
            <h2 id="nokings-title">
              {t("Our Community in Action", "Nuestra Comunidad en Acción")}
            </h2>
          </div>
        </div>
        <div className="marquee-wrap" aria-hidden="true">
          <div className="marquee-row r1">
            {Array.from({ length: 2 }).map((_, k) => (
              <React.Fragment key={k}>
                <img src={window.__resources.noKings01} alt="" />
                <img src={window.__resources.noKings02} alt="" />
                <img src={window.__resources.noKings03} alt="" />
                <img src={window.__resources.noKings04} alt="" />
                <img src={window.__resources.noKings05} alt="" />
                <img src={window.__resources.noKings06} alt="" />
              </React.Fragment>
            ))}
          </div>
          <div className="marquee-row r2">
            {Array.from({ length: 2 }).map((_, k) => (
              <React.Fragment key={k}>
                <img src={window.__resources.noKings07} alt="" />
                <img src={window.__resources.noKings08} alt="" />
                <img src={window.__resources.noKings09} alt="" />
                <img src={window.__resources.noKings10} alt="" />
                <img src={window.__resources.noKings11} alt="" />
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* ============== JOIN / DONATE STRIP ============== */}
      <section className="join-strip" aria-labelledby="join-title">
        <div className="join-bg" aria-hidden="true"></div>
        <div className="container join-inner on-dark">
          <div>
            <Eyebrow>{t("Stand With Us", "Únete a Nosotros")}</Eyebrow>
            <h2 id="join-title" style={{ marginBottom: 12 }}>
              {t("Membership matters. So does", "La membresía importa. Como también")} <em>{t("every dollar.", "cada dólar.")}</em>
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.84)" }}>
              {t("Two ways to back the work — both run securely through ActBlue.",
                 "Dos formas de apoyar el trabajo — ambas seguras a través de ActBlue.")}
            </p>
          </div>
          <div className="join-actions">
            <a className="btn btn-primary btn-lg" href="https://secure.actblue.com/contribute/page/dcsmvjoin" target="_blank" rel="noopener noreferrer">
              {t("Join or Pay Dues", "Únete o Paga Cuotas")}
            </a>
            <a className="btn btn-ghost btn-lg" href="https://secure.actblue.com/donate/dcsmvdonate" target="_blank" rel="noopener noreferrer">
              {t("Donate", "Donar")}
            </a>
          </div>
        </div>
      </section>

      <MiniCtaMarquee lang={lang} />
    </>
  );
}

Object.assign(window, { Home });