// GallerySection — social-proof photo wall: real guests, real fish.
const { SectionHeading } = window.BluePhoenixDesignSystem_f91d3d;

const SHOTS = [
  { src: window.BP_ASSETS.x10, alt: "Group with mahi and sailfish", cap: "Mixed bag day" },
  { src: window.BP_ASSETS.g1, alt: "Group with striped marlin at the Arch", cap: "Striped marlin at El Arco" },
  { src: window.BP_ASSETS.g3, alt: "Guest with a bull dorado", cap: "Bull dorado" },
  { src: window.BP_ASSETS.g4, alt: "Two guests with a wahoo", cap: "Fresh wahoo" },
  { src: window.BP_ASSETS.g5b, alt: "Guest with a striped marlin in front of the Cabo arch", cap: "First billfish" },
  { src: window.BP_ASSETS.x1, alt: "Two guests with a dorado", cap: "Double-header dorado" },
];

const MORE = [
  { src: window.BP_ASSETS.x2, alt: "Guest with a golden dorado", cap: "Gold in the sun" },
  { src: window.BP_ASSETS.x3, alt: "Three guests with a striped marlin", cap: "Striped marlin crew" },
  { src: window.BP_ASSETS.x4, alt: "Two guests with a dorado", cap: "Thumbs up mahi" },
  { src: window.BP_ASSETS.x6, alt: "Couple with a dorado at the arch", cap: "Mahi by the arch" },
  { src: window.BP_ASSETS.x7, alt: "Group with a striped marlin", cap: "Full crew, full box" },
  { src: window.BP_ASSETS.x8, alt: "Guests with a yellowfin tuna", cap: "Yellowfin on deck" },
  { src: window.BP_ASSETS.x9, alt: "Two guests with a marlin", cap: "Boat-side release" },
  { src: window.BP_ASSETS.x11b, alt: "Two guests with a striped marlin", cap: "Striped marlin, boat-side" },
  { src: window.BP_ASSETS.x12b, alt: "Couple with a dorado on deck", cap: "Dorado double" },
  { src: window.BP_ASSETS.n1, alt: "Five guests with a striped marlin", cap: "Five-man marlin" },
  { src: window.BP_ASSETS.n2, alt: "Guest gaffing a roosterfish", cap: "Roosterfish boat-side", pos: "0% 22%" },
  { src: window.BP_ASSETS.n3, alt: "Family with a marlin and wahoo at the arch", cap: "Family day at El Arco" },
  { src: window.BP_ASSETS.n4, alt: "Big marlin arriving at the dock", cap: "Hauling in a giant" },
];

function GallerySection() {
  const [shown, setShown] = React.useState(0);
  const [zoom, setZoom] = React.useState(null);
  const shots = SHOTS.concat(MORE.slice(0, shown));
  return (
    <section id="gallery" className="bp-sec" style={{ padding: "88px 48px", maxWidth: 1200, margin: "0 auto" }}>
      <SectionHeading overline="Proof, Not Promises" title="Catches" lead="The fish, the fishers, and the Cabo arch behind them." align="center" />
      <div className="bp-gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 48 }}>
        {shots.map(s => (
          <figure key={s.cap} onClick={() => setZoom(s)} style={{ margin: 0, position: "relative", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-md)", border: "1px solid var(--border-subtle)", aspectRatio: "4/3", cursor: "zoom-in" }}>
            <img src={s.src} alt={s.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: s.pos || "50% 50%", display: "block" }} />
            <figcaption style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "24px 14px 10px", background: "linear-gradient(transparent, rgba(4,10,18,.72))", color: "var(--bp-foam)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase" }}>{s.cap}</figcaption>
          </figure>
        ))}
      </div>
      {shown < MORE.length && (
        <div style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
          <button type="button" onClick={() => setShown(MORE.length - shown - 6 <= 1 ? MORE.length : shown + 6)} style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--text-strong)", background: "transparent", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-sm)", padding: "12px 28px", cursor: "pointer" }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--surface-inset)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "transparent"; }}>
            View More Photos ({MORE.length - shown})
          </button>
        </div>
      )}
      {zoom && (
        <div onClick={() => setZoom(null)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(4,10,18,.9)", display: "flex", alignItems: "center", justifyContent: "center", padding: 28, cursor: "zoom-out" }}>
          <figure style={{ margin: 0, maxWidth: "92vw", maxHeight: "88vh", position: "relative" }}>
            <img src={zoom.src} alt={zoom.alt} style={{ maxWidth: "92vw", maxHeight: "82vh", display: "block", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)" }} />
            <figcaption style={{ marginTop: 12, textAlign: "center", color: "var(--bp-foam)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13, letterSpacing: ".1em", textTransform: "uppercase" }}>{zoom.cap}</figcaption>
            <button type="button" onClick={() => setZoom(null)} aria-label="Close photo" style={{ position: "absolute", top: -14, right: -14, width: 36, height: 36, borderRadius: 99, border: "1px solid var(--border-on-deep)", background: "#0a1826", color: "#fff", fontSize: 18, cursor: "pointer", lineHeight: 1 }}>×</button>
          </figure>
        </div>
      )}
    </section>
  );
}
window.GallerySection = GallerySection;