/* ============================================================
   PROJECTEN PAGE — filter + lightbox
   ============================================================ */

function useLightbox(items) {
  const [idx, setIdx] = React.useState(-1);
  const open = idx >= 0;
  const show = (i) => setIdx(i);
  const close = () => setIdx(-1);
  const next = React.useCallback(() => setIdx((i) => (i + 1) % items.length), [items.length]);
  const prev = React.useCallback(() => setIdx((i) => (i - 1 + items.length) % items.length), [items.length]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowRight") next();
      else if (e.key === "ArrowLeft") prev();
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [open, next, prev]);
  return { idx, open, show, close, next, prev };
}

function Lightbox({ items, lb }) {
  const item = lb.idx >= 0 ? items[lb.idx] : null;
  return (
    <div className={`lightbox ${lb.open ? "is-open" : ""}`} onClick={lb.close}>
      {item && (
        <div className="lightbox__stage" onClick={(e) => e.stopPropagation()}>
          <span className="lb-count">{lb.idx + 1} / {items.length}</span>
          <button className="lb-close" aria-label="Sluiten" onClick={lb.close}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
          <button className="lb-btn lb-prev" aria-label="Vorige" onClick={lb.prev}>
            <span style={{ display: "inline-flex", transform: "scaleX(-1)" }}><Icon name="arrow" size={22} stroke={2} /></span>
          </button>
          <img className="lightbox__img" src={item.img} alt={item.title} />
          <button className="lb-btn lb-next" aria-label="Volgende" onClick={lb.next}><Icon name="arrow" size={22} stroke={2} /></button>
          <div className="lightbox__cap">
            <div>
              <span className="c">{item.catLabel} · {item.place}</span>
              <h3>{item.title}</h3>
            </div>
            <p>{item.desc}</p>
          </div>
        </div>
      )}
    </div>
  );
}

function ProjectenApp() {
  const [cat, setCat] = React.useState("all");
  const counts = React.useMemo(() => {
    const c = { all: PROJECTS.length };
    PROJECTS.forEach((p) => { c[p.cat] = (c[p.cat] || 0) + 1; });
    return c;
  }, []);
  const filtered = React.useMemo(() => cat === "all" ? PROJECTS : PROJECTS.filter((p) => p.cat === cat), [cat]);
  const lb = useLightbox(filtered);

  return (
    <React.Fragment>
      <Navbar active="projecten" />
      <main>
        <section className="page-hero" data-screen-label="Projecten — header">
          <div className="wrap">
            <div className="page-hero__crumb"><a href="index.html">Home</a> &nbsp;/&nbsp; Projecten</div>
            <span className="eyebrow">Ons portfolio</span>
            <h1>Realisaties die voor zich spreken</h1>
            <p>Een selectie van veranda's, terrasoverkappingen en aanbouwen die we ontwierpen en plaatsten. Filter per type en klik op een project om te vergroten.</p>
          </div>
        </section>

        <section className="section section--tight">
          <div className="wrap">
            <div className="filters">
              {CATEGORIES.map((c) => (
                <button key={c.key} className={`filter ${cat === c.key ? "is-active" : ""}`} onClick={() => setCat(c.key)}>
                  {c.label}<span className="count">{counts[c.key] || 0}</span>
                </button>
              ))}
            </div>
            <div className="gallery">
              {filtered.map((p, i) => (
                <article className="gitem" key={p.title} style={{ animationDelay: `${i * 55}ms` }} onClick={() => lb.show(i)}>
                  <img src={p.img} alt={p.title} loading="lazy" />
                  <div className="gitem__zoom"><Icon name="diamond" size={16} /></div>
                  <div className="gitem__overlay">
                    <span className="gitem__cat">{p.catLabel}</span>
                    <h3>{p.title}</h3>
                    <p>{p.desc}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="ctaband">
          <div className="ctaband__media"><img src="assets/projects/veranda-aanbouw-zwart.jpg" alt="" /></div>
          <div className="wrap">
            <div className="ctaband__inner">
              <span className="eyebrow">Uw woning, uw ontwerp</span>
              <h2 style={{ marginTop: 16 }}>Staat uw droomveranda er nog niet bij?</h2>
              <p>Geen project is hetzelfde. Vertel ons wat u voor ogen heeft en we tekenen een ontwerp dat perfect bij uw woning past.</p>
              <div className="hero__cta">
                <a className="btn" href="contact.html">Vraag een offerte aan <span className="arrow"><Icon name="arrow" size={18} /></span></a>
                <a className="btn btn--outline-light" href={BRAND.phoneHref}><Icon name="phone" size={17} /> {BRAND.phone}</a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <Lightbox items={filtered} lb={lb} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ProjectenApp />);