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

// Officers with a `photo` get the real portrait; the rest fall back to
// the SVG silhouette + initials. An optional `photoPos` ("<x%> <y%>")
// overrides .portrait-photo's default object-position when a face sits
// off-center in its source — the supplied photos are well-framed so
// none currently need it.
const PRIMARY_OFFICERS = [
  { name: "Patrick Youngern",  title: "President",              email: "", photo: "uploads/Patrick_Youngern.webp" },
  { name: "Brett Stoltey",     title: "Vice President",         email: "", photo: "uploads/Brett_Stoltey.webp" },
  { name: "Elena Magana",      title: "Secretary",              email: "" },
  { name: "Laura Selken",      title: "Treasurer",              email: "", photo: "uploads/Laura_Selken.webp" },
  { name: "Robert Gibson",     title: "Program Manager",        email: "", photo: "uploads/Robert_Gibson.jpg" },
  { name: "Susan Jagoda",      title: "Membership Coordinator", email: "", photo: "uploads/Susan_Jagoda.webp" },
];

const VOLUNTEER_ROLES = [
  { name: "Jovany Medina", title: "North County Field Organizer · SB County", email: "jovany@sbdems.org" },
  { name: "Joe Payne", title: "Santa Maria Valley Historian", email: "" },
];

function OfficerCard({ person, compact = false, hidePortrait = false }) {
  const initials = person.name && person.name[0] !== "[" ? person.name.split(" ").map(s => s[0]).join("").slice(0,2) : "—";
  return (
    <article className={`officer-card ${compact ? "compact" : ""} ${hidePortrait ? "no-portrait" : ""}`}>
      {!hidePortrait && (
        <Portrait initials={initials} photo={person.photo} photoPos={person.photoPos} name={person.name} />
      )}
      <div className="oc-body">
        <h4 className="oc-name">{person.name}</h4>
        <div className="oc-title">{person.title}</div>
        {person.email && (
          <a className="oc-email" href={`mailto:${person.email}`}>
            <Icon.Mail size={13} /> {person.email}
          </a>
        )}
      </div>
    </article>
  );
}

function Reps({ lang }) {
  const t = (en, es) => (lang === "es" ? es : en);
  return (
    <>
      <section className="page-hero" aria-labelledby="reps-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("Leadership", "Liderazgo")}</Eyebrow>
          <SparkleHeading id="reps-title">{t("Meet Your Club Leaders", "Conoce a tus Líderes del Club")}</SparkleHeading>
        </div>
      </section>

      <section className="reps-section">
        <div className="container">
          <div className="reps-head">
            <Eyebrow>{t("Primary Officers", "Oficiales Principales")}</Eyebrow>
            <h2>{t("Elected leadership.", "Liderazgo electo.")}</h2>
            <p className="lede muted">
              {t("Come and Meet us every third Thursday of the month at our Dem Club Meeting. We would love to talk to you!",
                 "Ven a conocernos cada tercer jueves del mes en nuestra reunión del Club Demócrata. ¡Nos encantaría hablar contigo!")}
            </p>
          </div>
          <div className="reps-grid">
            {PRIMARY_OFFICERS.map((p, i) => <OfficerCard key={i} person={p} />)}
          </div>
        </div>
      </section>

      <section className="reps-section reps-volunteer">
        <div className="container">
          <div className="reps-head">
            <Eyebrow>{t("Volunteer Roles", "Roles Voluntarios")}</Eyebrow>
            <h2>{t("And the wider team.", "Y el equipo más amplio.")}</h2>
            <p className="lede muted">
              {t("Affiliated reps and specialty volunteers who carry the work between meetings.",
                 "Representantes afiliados y voluntarios especializados.")}
            </p>
          </div>
          <div className="reps-grid compact no-portraits">
            {VOLUNTEER_ROLES.map((p, i) => <OfficerCard key={i} person={p} compact hidePortrait />)}
          </div>
        </div>
      </section>

      <section className="reps-cta">
        <div className="container">
          <div className="reps-cta-card">
            <div>
              <Eyebrow>{t("Want to help?", "¿Quieres ayudar?")}</Eyebrow>
              <h3 style={{ marginTop: 8 }}>
                {t("There's a seat at the table for you.", "Hay un lugar para ti.")}
              </h3>
              <p className="muted" style={{ marginTop: 6 }}>
                {t("New volunteers are welcomed at every monthly meeting.",
                   "Los nuevos voluntarios son bienvenidos en cada reunión mensual.")}
              </p>
            </div>
            <a className="btn btn-primary" href="mailto:dcsmv@dcsmv.net?subject=Volunteer Interest">
              <Icon.Mail size={14} /> {t("Email the club", "Escríbenos")}
            </a>
          </div>
        </div>
      </section>

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

Object.assign(window, { Reps });