// Gallery — filterable grid + lightbox
const { Button, SectionHeading, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;

const GALLERY = [
  { src: "hero-lift-bluesky.jpg", cat: "Trimming", alt: "Arborist in a lift against a blue sky" },
  { src: "arborist-sunlight.jpg", cat: "Trimming", alt: "Arborist trimming in sunlight" },
  { src: "arborist-chainsaw.jpg", cat: "Trimming", alt: "Arborist using a chainsaw in a tree" },
  { src: "trim-powerlines.jpg", cat: "Trimming", alt: "Trimming near power lines" },
  { src: "eucalyptus-powerlines.jpg", cat: "Trimming", alt: "Eucalyptus near power lines" },
  { src: "truck-trim-road.jpg", cat: "Trimming", alt: "Bucket truck trimming along a road" },
  { src: "truck-trim-house.jpg", cat: "Trimming", alt: "Truck trimming in front of a house" },
  { src: "crew-stump.jpg", cat: "Removal", alt: "Crew near a large stump" },
  { src: "trim-solar.jpg", cat: "Removal", alt: "Removal near solar panels" },
  { src: "trackloader.jpg", cat: "Removal", alt: "Track loader clearing brush and logs" },
  { src: "bare-tree-removal.png", cat: "Removal", alt: "Removing a tall bare tree" },
  { src: "stump-grinder-yard.jpg", cat: "Stumps", alt: "Stump grinder in a yard" },
  { src: "stump-grinder-barn.jpg", cat: "Stumps", alt: "Stump grinder by a red barn" },
  { src: "skidsteer-vermeer.jpg", cat: "Stumps", alt: "Operator on a Vermeer grinder" },
  { src: "team-chipper.jpg", cat: "Our Crew", alt: "Team with their wood chipper" },
  { src: "thumbsup-chipper.jpg", cat: "Our Crew", alt: "Crew member thumbs up by a chipper" },
  { src: "team-group.jpg", cat: "Our Crew", alt: "Full crew by the truck" },
  { src: "handshake-chipper.jpg", cat: "Our Crew", alt: "Handshake beside a wood chipper" },
  { src: "van-logo.jpg", cat: "Our Crew", alt: "Juan by the company van" },
  { src: "banner-crew.jpg", cat: "Our Crew", alt: "Crew posing with a banner" },
];
const CATS = ["All", "Trimming", "Removal", "Stumps", "Our Crew"];

function GalleryPage() {
  const [cat, setCat] = React.useState("All");
  const [lb, setLb] = React.useState(null);
  const items = cat === "All" ? GALLERY : GALLERY.filter((g) => g.cat === cat);
  return (
    <div>
      <section style={{ background: "var(--surface-sunken)", paddingBlock: 56 }}>
        <div className="container">
          <SectionHeading align="center" eyebrow="Gallery" title="Recent jobs across the Central Coast" intro="Real crews, real equipment, real results—from routine trims to full removals and stump grinding." />
          <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
            {CATS.map((c) => (
              <button key={c} onClick={() => setCat(c)} style={{ cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 700, padding: "8px 18px", borderRadius: "var(--radius-pill)", border: "1.5px solid " + (cat === c ? "var(--green-700)" : "var(--border-strong)"), background: cat === c ? "var(--green-700)" : "transparent", color: cat === c ? "#fff" : "var(--text-body)", transition: "all var(--dur-fast)" }}>{c}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingBlock: 48 }}>
        <div className="container">
          <div style={{ columnCount: 3, columnGap: 14 }} id="gal-masonry">
            {items.map((g) => (
              <div key={g.src} style={{ breakInside: "avoid", marginBottom: 14, cursor: "pointer", position: "relative", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }} onClick={() => setLb(g)}>
                <img src={`assets/photos/${g.src}`} alt={g.alt} style={{ width: "100%", display: "block" }} />
                <div style={{ position: "absolute", left: 10, top: 10, fontSize: 11, fontWeight: 700, color: "#fff", background: "rgba(16,40,26,0.7)", borderRadius: "var(--radius-pill)", padding: "3px 10px" }}>{g.cat}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {lb ? (
        <div onClick={() => setLb(null)} style={{ position: "fixed", inset: 0, background: "rgba(16,22,15,0.9)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
          <button onClick={() => setLb(null)} style={{ position: "absolute", top: 20, right: 24, background: "transparent", border: "none", color: "#fff", cursor: "pointer" }}><Icon data-lucide="x" style={{ width: 32, height: 32 }} /></button>
          <figure style={{ margin: 0, maxWidth: 960, maxHeight: "88vh" }} onClick={(e) => e.stopPropagation()}>
            <img src={`assets/photos/${lb.src}`} alt={lb.alt} style={{ maxWidth: "100%", maxHeight: "80vh", objectFit: "contain", borderRadius: "var(--radius-md)" }} />
            <figcaption style={{ color: "rgba(255,255,255,0.85)", fontSize: 14, marginTop: 12, textAlign: "center" }}>{lb.alt}</figcaption>
          </figure>
        </div>
      ) : null}
    </div>
  );
}

Object.assign(window, { GalleryPage });