/* ============================================================
   Veranda Bouwer — Projecten page
   ============================================================ */
function Projects({ go }) {
  const [active, setActive] = useState(null); // index in project list
  useReveal();

  const filtered = PROJECTS;

  useEffect(() => {
    if (active === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setActive(null);
      if (e.key === "ArrowRight") setActive((i) => (i + 1) % filtered.length);
      if (e.key === "ArrowLeft") setActive((i) => (i - 1 + filtered.length) % filtered.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [active, filtered.length]);

  const cur = active !== null ? filtered[active] : null;

  return (
    <main>
      <section className="page-hero">
        <div className="wrap">
          <div className="crumbs reveal in">
            <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Home</a>
            <span className="sep">/</span><span>Projecten</span>
          </div>
          <h1 className="reveal in">Ons werk in beeld</h1>
          <p className="reveal in">
            Een selectie van veranda's en overkappingen die wij ontwierpen en plaatsten in Helmond en
            omstreken. Klik op een project om het van dichtbij te bekijken.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="proj-grid">
            {filtered.map((p, i) => (
              <div key={p.id} className="proj-card reveal" onClick={() => setActive(i)}>
                <div className="proj-img"><Slot id={"proj-" + p.id} src={p.img} placeholder={p.title} /></div>
                <div className="proj-plus"><Icon name="plus" size={20} /></div>
                <div className="proj-body">
                  <span className="proj-tag">{p.tag}</span>
                  <h3>{p.title}</h3>
                  <p className="proj-desc">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand go={go} />

      {/* LIGHTBOX */}
      {cur && (
        <div className="lb-overlay" onClick={() => setActive(null)}>
          <button className="lb-close" aria-label="Sluiten" onClick={() => setActive(null)}><Icon name="x" size={22} /></button>
          <button className="lb-nav lb-prev" aria-label="Vorige" onClick={(e) => { e.stopPropagation(); setActive((i) => (i - 1 + filtered.length) % filtered.length); }}><Icon name="chevL" size={24} /></button>
          <button className="lb-nav lb-next" aria-label="Volgende" onClick={(e) => { e.stopPropagation(); setActive((i) => (i + 1) % filtered.length); }}><Icon name="chevR" size={24} /></button>
          <div className="lb-card" onClick={(e) => e.stopPropagation()}>
            <div className="lb-img"><Slot id={"proj-" + cur.id} src={cur.img} placeholder={cur.title} /></div>
            <div className="lb-body">
              <span className="proj-tag">{cur.tag}</span>
              <h3>{cur.title}</h3>
              <p>{cur.desc}</p>
              <div style={{ marginTop: 18, display: "flex", gap: 12, alignItems: "center", color: "rgba(255,255,255,.55)", fontSize: 13.5 }}>
                <span>{active + 1} / {filtered.length}</span>
                <span style={{ opacity: .4 }}>·</span>
                <a href="#" style={{ color: "var(--red)", filter: "brightness(1.5)", fontWeight: 600 }}
                   onClick={(e) => { e.preventDefault(); setActive(null); go("contact"); }}>Vergelijkbaar project aanvragen →</a>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}

Object.assign(window, { Projects });