/* global React, VideoBackground, Icon, StarDivider, Eyebrow, MiniCtaMarquee, SparkleHeading, HeroFitText */

function About({ lang }) {
  const t = (en, es) => (lang === "es" ? es : en);
  return (
    <>
      <section className="page-hero" aria-labelledby="about-title">
        <VideoBackground
          kind="flag"
          video={window.__resources.flagMp4}
          poster={window.__resources.flagPoster}
          playbackRate={0.5}
          position="center"
          overlay={false}
        />
        <div className="container page-hero-inner on-dark">
          <Eyebrow>{t("About DCSMV", "Acerca de DCSMV")}</Eyebrow>
          <SparkleHeading id="about-title">{t("Our mission, plainly stated.", "Nuestra misión, claramente.")}</SparkleHeading>
          <HeroFitText
            outerClassName="lede hero-sub-banner"
            innerClassName="hero-sub-banner-inner">
            {t("Voter education, voter registration, and personal participation",
               "Educación del votante, registro electoral y participación personal")}
          </HeroFitText>
        </div>
      </section>

      <section className="about-mission">
        <div className="container">
          <div className="two-col">
            <div className="two-col-side sticky">
              <Eyebrow>{t("Mission", "Misión")}</Eyebrow>
              <h2 className="equality-headline">
                <span className="eq-blue">{t("EQUALITY WITHOUT", "IGUALDAD SIN")}</span>{" "}
                <span className="eq-red">{t("EXCLUSION", "EXCLUSIÓN")}</span>
              </h2>
              <div className="red-rule" />
              <p className="muted">
                {t("Chartered by the Santa Barbara County Democratic Central Committee.",
                   "Reconocido por el Comité Central Demócrata del Condado de Santa Bárbara.")}
              </p>
            </div>
            <div className="two-col-body">
              <blockquote className="pullquote">
                <span className="pq-mark" aria-hidden="true">“</span>
                {t(
                  "The Democratic Club of Santa Maria Valley, under charter from the Santa Barbara County Democratic Central Committee, is committed to preserving and fostering the Democratic Party's principles and its spirit of dedication in support of the rights, liberties, and dreams of all citizens of American society — with equality and without exclusion — through education, voter registration, and personal participation in the political process at every level: local, state, and national.",
                  "El Club Demócrata del Valle de Santa María, bajo el reconocimiento del Comité Central Demócrata del Condado de Santa Bárbara, está comprometido con preservar y fomentar los principios del Partido Demócrata y su espíritu de dedicación en apoyo de los derechos, libertades y sueños de todos los ciudadanos de la sociedad americana — con igualdad y sin exclusión — a través de la educación, el registro electoral y la participación personal en el proceso político en todos los niveles: local, estatal y nacional."
                )}
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      <section className="about-values">
        <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 on-dark">
          <div className="two-col">
            <div className="two-col-side sticky">
              <Eyebrow>{t("Our Values", "Nuestros Valores")}</Eyebrow>
              <h2>
                {t("Decency in ", "Decencia en la ")}<em>{t("Democracy.", "Democracia.")}</em>
              </h2>
              <div className="red-rule" />
            </div>
            <div className="two-col-body">
              <p className="lede">
                {t(
                  "We stand for human rights and social justice. We believe in equal opportunity without the exclusion of any citizen or resident.",
                  "Defendemos los derechos humanos y la justicia social. Creemos en la igualdad de oportunidades sin la exclusión de ningún ciudadano o residente."
                )}
              </p>
              <p>
                {t(
                  "We are committed to the rule of law and the public election of officeholders by democratic process. We believe that the voting franchise gives us the power to effectuate change and ensure that human rights and social justice will not be subverted by an unjust government, as the founding fathers of the Republic envisioned.",
                  "Estamos comprometidos con el estado de derecho y la elección pública de funcionarios por proceso democrático. Creemos que el derecho al voto nos da el poder de efectuar cambios."
                )}
              </p>
              <p>
                {t(
                  "We encourage action and the fair sharing of responsibility for the improvement of our community and society as an integrated whole.",
                  "Fomentamos la acción y el reparto justo de la responsabilidad para la mejora de nuestra comunidad y sociedad como un todo integrado."
                )}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="about-history">
        <div className="container">
          <div className="history-banner">
            <h2 className="history-tagline">
              <span className="tl-line">{t("Serving the", "Sirviendo al")}</span>
              <span className="tl-line tagline-place">{t("Santa Maria Valley", "Valle de Santa María")}</span>
              <span className="tl-line">{t("since ", "desde ")}<em>1968</em>.</span>
            </h2>
            <StarDivider count={3} />
          </div>
          <div className="history-card">
            <div className="hc-side">
              <Eyebrow>{t("Our History", "Nuestra Historia")}</Eyebrow>
              <div className="hc-year">1968</div>
              <p className="muted">{t("Founded · Santa Maria, California", "Fundado · Santa María, California")}</p>
            </div>
            <div className="hc-body">
              <p>
                {t(
                  "Five decades of voter outreach, candidate forums, and door‑to‑door organizing across Santa Maria, Orcutt, and Guadalupe.",
                  "Cinco décadas de divulgación electoral, foros de candidatos y organización casa por casa en Santa María, Orcutt y Guadalupe."
                )}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="what-we-do">
        <div className="container">
          <div className="section-head text-center">
            <Eyebrow>{t("What We Do", "Lo Que Hacemos")}</Eyebrow>
            <h2>{t("Five things, done well.", "Cinco cosas, bien hechas.")}</h2>
          </div>

          <ol className="wwd-grid">
            {[
              ["Voter Education", "Educación del Votante", "Forums, fact sheets, and ballot guides — all sourced and dated."],
              ["Voter Registration", "Registro Electoral", "Ongoing tabling and same‑day signups, in English and Spanish."],
              ["Candidate Endorsement", "Apoyo a Candidatos", "A transparent endorsement process with member input each cycle."],
              ["Community Outreach", "Alcance Comunitario", "Coalitions with labor, schools, faith groups, and civic clubs."],
              ["Monthly Programs", "Programas Mensuales", "Speakers, briefings, and Q&A — every third Thursday."],
            ].map(([en, es, body], i) => (
              <li key={i} className="wwd-item">
                <span className="wwd-num">0{i + 1}</span>
                <h4>{t(en, es)}</h4>
                <p>{body}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

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

Object.assign(window, { About });