/* global React, Placeholder */

const projects = [
  { id: 1, kind: "deck", title: "Hillside cedar deck", sub: "Murphys · 2024", cat: "decks", desc: "560 sq ft of cedar wrapping a 1970s ranch — new footings, hidden fasteners, and a built-in bench overlooking the oaks.", tall: true },
  { id: 2, kind: "roof", title: "Comp re-roof", sub: "Arnold · 2024", cat: "roofing", desc: "Full tear-off and 30-year architectural shingle install on a 2,400 sq ft cabin. Three-day turnaround." },
  { id: 3, kind: "concrete", title: "Driveway pour", sub: "Vallecito · 2023", cat: "concrete", desc: "Curving 80-foot drive with broom finish and a granite-edge apron at the road." },
  { id: 4, kind: "house", title: "Front porch rebuild", sub: "Murphys · 2023", cat: "decks", desc: "Period-accurate front porch on a Main Street Victorian, milled to match the original turned posts." },
  { id: 5, kind: "project", title: "Garage workshop", sub: "Angels Camp · 2023", cat: "decks", desc: "Detached 24×30 workshop with loft storage, run as a design-build with the homeowner.", tall: true },
  { id: 6, kind: "concrete", title: "Stamped patio", sub: "Forest Meadows · 2024", cat: "concrete", desc: "650 sq ft stamped concrete patio with integrated fire pit footing." },
  { id: 7, kind: "deck", title: "Pergola & outdoor kitchen", sub: "Murphys · 2022", cat: "decks", desc: "Cedar pergola with a stone-clad outdoor kitchen counter and gas line run to the grill." },
  { id: 8, kind: "roof", title: "Metal roof on cabin", sub: "Dorrington · 2022", cat: "roofing", desc: "Standing-seam metal roof rated for 8 feet of snow load — designed for the high-country winters." },
];

const filters = [
  { id: "all", label: "All projects" },
  { id: "decks", label: "Decks & outdoor" },
  { id: "roofing", label: "Roofing" },
  { id: "concrete", label: "Concrete" },
];

const Gallery = () => {
  const [filter, setFilter] = React.useState("all");
  const [lightbox, setLightbox] = React.useState(null);

  const visible = filter === "all" ? projects : projects.filter(p => p.cat === filter);

  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLightbox(null);
      if (e.key === "ArrowRight") setLightbox(i => (i + 1) % visible.length);
      if (e.key === "ArrowLeft") setLightbox(i => (i - 1 + visible.length) % visible.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox, visible.length]);

  return (
    <section className="section gallery" id="gallery" data-screen-label="04 Gallery">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Recent work</div>
            <h2>Things we've built lately.</h2>
          </div>
          <p className="lede">
            A small selection from the last couple of years. Most of these were referrals
            from past clients — which is the highest compliment we know how to receive.
          </p>
        </div>

        <div className="gallery-filters">
          {filters.map(f => (
            <button
              key={f.id}
              className={`filter-btn ${filter === f.id ? "active" : ""}`}
              onClick={() => setFilter(f.id)}
            >{f.label}</button>
          ))}
        </div>

        <div className="gallery-grid">
          {visible.map((p, i) => (
            <div
              key={p.id}
              className={`item ${p.tall ? "tall" : ""}`}
              style={{ aspectRatio: p.tall ? "3/5" : "4/3", position: "relative" }}
              onClick={() => setLightbox(i)}
            >
              <Placeholder kind={p.kind} />
              <div className="meta">
                <div className="ttl">{p.title}</div>
                <div className="sub">{p.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {lightbox !== null && visible[lightbox] && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <div className="lightbox-inner" onClick={e => e.stopPropagation()}>
            <button className="close" onClick={() => setLightbox(null)} aria-label="Close">✕</button>
            <button className="nav-arrow prev" onClick={() => setLightbox((lightbox - 1 + visible.length) % visible.length)}>‹</button>
            <button className="nav-arrow next" onClick={() => setLightbox((lightbox + 1) % visible.length)}>›</button>
            <div className="frame" style={{position: "relative"}}>
              <Placeholder kind={visible[lightbox].kind} />
            </div>
            <div className="info">
              <div>
                <div className="sub">{visible[lightbox].sub}</div>
                <h3>{visible[lightbox].title}</h3>
              </div>
              <p className="desc">{visible[lightbox].desc}</p>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

window.Gallery = Gallery;