const { Card, SectionHeading } = window.AntelopeDashDesignSystem_4664c0;

const VOLUNTEER_COPY =
  "There is no Antelope Dash without them. Folks out before sunrise, aid station crews " +
  "providing help where it’s needed most! The start/finish line team getting folks " +
  "checked in and cheering them on when they return to the finish line. The sweepers " +
  "pulling flags out in the heat later that afternoon. Thank you — this race is not " +
  "possible without you.";

function Volunteers() {
  // These three photos are held out of the course gallery on photos.html, so nothing
  // appears twice across the site. See COURSE_SKIP in Lightbox.jsx.
  const photos = window.AD_PHOTOS.VOLUNTEERS;
  const [index, setIndex] = React.useState(null);

  return (
    <section style={{ padding: "72px 24px", background: "var(--slate-100)" }}>
      <div style={{ maxWidth: "72rem", margin: "0 auto", display: "flex", flexDirection: "column", gap: 32 }}>
        <Card hoverable={false} style={{ borderTop: "4px solid var(--copper-600)" }}>
          <SectionHeading align="center" eyebrow="Thank You" title="To Our Volunteers" subtitle={VOLUNTEER_COPY} />
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
          {photos.map((p, i) => (
            <figure key={p.src} style={{ margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              <button onClick={() => setIndex(i)} aria-label={p.alt}
                style={{
                  aspectRatio: "3 / 4", borderRadius: "var(--radius-lg)", overflow: "hidden", cursor: "zoom-in",
                  boxShadow: "var(--shadow-md)", border: "none", padding: 0, background: "var(--slate-200)",
                  transition: "box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard)",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-xl)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.transform = "none"; }}>
                <img src={p.thumb} alt={p.alt} loading="lazy"
                  onError={(e) => { if (e.currentTarget.src !== p.src) e.currentTarget.src = p.src; }}
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </button>
              <figcaption style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--slate-500)", textAlign: "center" }}>
                {p.caption}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <window.Lightbox photos={photos} index={index} onIndex={setIndex} onClose={() => setIndex(null)} />
    </section>
  );
}
window.Volunteers = Volunteers;