/* ============================================================
   sections.jsx — Nav, Drawer, Hero, About, Services, Modal,
   Materials, Projects, Reviews, FAQ, Footer, CtaBar, WhatsApp,
   CookieNotice. All components attached to window for cross-file
   sharing.
   ============================================================ */

const { useState, useEffect, useRef, useCallback } = React;

/* Resolve an in-page anchor href so that on subpages it jumps back to the
   home page first. Returns the href unchanged on the home page. */
function homeHref(href) {
  if (typeof href !== "string" || !href.startsWith("#")) return href;
  const p = (typeof window !== "undefined" && window.location && window.location.pathname) || "/";
  const isHome =
    p === "/" ||
    p === "" ||
    p.endsWith("/") ||
    p.endsWith("/index.html") ||
    p.endsWith("index.html");
  return isHome ? href : "index.html" + href;
}

/* ---------- icons ---------- */
function IconWA(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M19.05 4.91A10.06 10.06 0 0 0 12 2a10 10 0 0 0-8.59 15.06L2 22l5.05-1.32A10 10 0 0 0 12 22a10 10 0 0 0 7.05-17.09zM12 20.13a8.13 8.13 0 0 1-4.13-1.13l-.3-.18-3 .78.8-2.92-.2-.3A8.13 8.13 0 1 1 20.13 12 8.14 8.14 0 0 1 12 20.13zm4.46-6.1c-.24-.12-1.44-.71-1.66-.79s-.39-.12-.55.12-.63.79-.78.95-.29.18-.53.06a6.66 6.66 0 0 1-2-1.21 7.32 7.32 0 0 1-1.36-1.7c-.14-.24 0-.37.1-.49s.24-.29.36-.43a1.66 1.66 0 0 0 .24-.4.45.45 0 0 0 0-.43c-.06-.12-.55-1.33-.75-1.81s-.4-.41-.55-.42h-.47a.91.91 0 0 0-.65.31 2.74 2.74 0 0 0-.85 2 4.74 4.74 0 0 0 1 2.55 10.92 10.92 0 0 0 4.18 3.7c.58.25 1.04.4 1.4.51a3.36 3.36 0 0 0 1.55.1 2.53 2.53 0 0 0 1.66-1.17 2.07 2.07 0 0 0 .14-1.17c-.06-.1-.22-.16-.46-.28z"/>
    </svg>
  );
}
function IconIG(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
    </svg>
  );
}
function IconPhone(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.86 19.86 0 0 1 2.06 4.18 2 2 0 0 1 4.05 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}
function IconMail(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="2.5" y="4.5" width="19" height="15" rx="2.5"/>
      <path d="M3 6l9 7 9-7"/>
    </svg>
  );
}
function IconPin(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 22s7-7.58 7-12.5A7 7 0 0 0 5 9.5C5 14.42 12 22 12 22z"/>
      <circle cx="12" cy="9.5" r="2.5"/>
    </svg>
  );
}
function IconBurger(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}>
      <path d="M4 7h16M4 12h16M4 17h16"/>
    </svg>
  );
}
function IconClose(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}>
      <path d="M6 6l12 12M18 6L6 18"/>
    </svg>
  );
}
function IconCookie(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M21.5 12.5a9.5 9.5 0 1 1-10-10 4 4 0 0 0 4 4 4 4 0 0 0 4 4 4 4 0 0 0 2 2z"/>
      <circle cx="9" cy="13" r=".8" fill="currentColor"/>
      <circle cx="13.5" cy="16" r=".8" fill="currentColor"/>
      <circle cx="14" cy="9" r=".8" fill="currentColor"/>
    </svg>
  );
}

/* ============================================================
   NAV + DRAWER
   ============================================================ */
function Nav({ onOpenDrawer }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href={homeHref("#top")} className="nav-logo" aria-label="Giel Vastgoedonderhoud">
          <img src={window.R("assets/logo-giel.png")} alt="Giel Vastgoedonderhoud"/>
        </a>
        <ul className="nav-links">
          {window.NAV_LINKS.map((l) => (
            <li key={l.href}><a href={homeHref(l.href)}>{l.label}</a></li>
          ))}
        </ul>
        <div className="nav-right">
          <a className="nav-phone" href={`tel:${window.SITE.phone}`}>
            <span className="dot"></span>
            {window.SITE.phone}
          </a>
          <a className="btn btn-primary nav-cta-desk" href={homeHref("#contact")}>
            Offerte <span className="arrow">→</span>
          </a>
          <a className="icon-btn nav-cta-mobile" href={`tel:${window.SITE.phone}`} aria-label="Bel ons">
            <IconPhone/>
          </a>
          <button className="icon-btn burger" onClick={onOpenDrawer} aria-label="Menu">
            <IconBurger/>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Drawer({ open, onClose }) {
  useEffect(() => {
    if (open) document.body.classList.add("no-scroll");
    else document.body.classList.remove("no-scroll");
    return () => document.body.classList.remove("no-scroll");
  }, [open]);

  return (
    <React.Fragment>
      <div className={"drawer-backdrop" + (open ? " open" : "")} onClick={onClose}></div>
      <aside className={"drawer" + (open ? " open" : "")} aria-hidden={!open}>
        <div className="drawer-top">
          <img src={window.R("assets/logo-giel.png")} alt=""/>
          <button className="icon-btn" onClick={onClose} aria-label="Sluiten">
            <IconClose/>
          </button>
        </div>
        <ul className="drawer-links">
          {window.NAV_LINKS.map((l) => (
            <li key={l.href}><a href={homeHref(l.href)} onClick={onClose}>{l.label}</a></li>
          ))}
        </ul>
        <div className="drawer-contact">
          <a href={`tel:${window.SITE.phone}`}>{window.SITE.phone}</a>
          <a href={`mailto:${window.SITE.email}`}>{window.SITE.email}</a>
          <span>{window.SITE.address}</span>
        </div>
        <div className="drawer-socials">
          <a className="icon-btn" href={window.SITE.whatsapp} aria-label="WhatsApp" target="_blank" rel="noreferrer"><IconWA/></a>
          <a className="icon-btn" href={window.SITE.instagram} aria-label="Instagram" target="_blank" rel="noreferrer"><IconIG/></a>
        </div>
      </aside>
    </React.Fragment>
  );
}

/* ============================================================
   HERO
   ============================================================ */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-photo"></div>
      <div className="hero-grad"></div>
      <div className="hero-content">
        <h1 className="display-l">
          Professioneel schildersbedrijf<br/>
          dat u volledig <em>ontzorgt</em>.
        </h1>
        <p className="hero-sub">Van uw wens naar vakwerk, zoals we het samen hebben bedacht.</p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="#contact">
            Vrijblijvende offerte <span className="arrow">→</span>
          </a>
        </div>
        <div className="hero-trust">
          {window.STATS.map((s) => (
            <div key={s.label}>
              <div className="num">{s.num}</div>
              <div className="lbl">{s.label}</div>
            </div>
          ))}
        </div>
        <span className="hero-tag">Particulier · Zakelijk · Heel Nederland</span>
      </div>
    </section>
  );
}

/* ============================================================
   ABOUT
   ============================================================ */
function About() {
  return (
    <section className="section about" id="over">
      <div className="container">
        <div className="about-grid">
          <img className="about-photo" src={window.R("assets/team/damon.jpeg")} alt="Damon Giliam, oprichter Giel Vastgoedonderhoud"/>
          <div className="about-body">
            <span className="eyebrow eyebrow-yellow">Over ons</span>
            <h2>
              Gepassioneerde schilders<br/>
              met <em>een belofte</em>.
            </h2>
            <p>
              Giel Vastgoedonderhoud is opgericht door Damon Giliam, vakkundig schilder met meer dan 10 jaar ervaring in het vak. Voor u betekent dat: één vast aanspreekpunt, geen doorverwezen onderaannemers, en werk dat klopt tot in de hoek. Wij werken voor particulier en zakelijk in heel Nederland.
            </p>
            <div className="about-pull">
              "Het mooiste aan mijn werk is mensen helpen aan een huis of pand dat bij hen past."
            </div>
            <div className="about-sign">
              <div className="name">Damon</div>
              <div className="lbl">Damon Giliam</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES + MODAL
   ============================================================ */
function Services({ onOpenService }) {
  return (
    <section className="section services" id="diensten">
      <div className="container">
        <div className="services-head">
          <span className="eyebrow">Diensten</span>
          <h2>Schilderdiensten waar wij in gespecialiseerd zijn.</h2>
          <p className="lead">
            We komen gratis bij u langs. Daarna weet u precies wat er moet gebeuren, wat het kost en hoe we het aanpakken.
          </p>
        </div>
        <div className="services-grid">
          {window.SERVICES.map((s) => (
            <article key={s.id} className="service-card">
              <div className="service-img" style={{ backgroundImage: `url(${s.img})` }}></div>
              <div className="service-body">
                <h3>{s.title}</h3>
                <button className="btn btn-ghost service-more-btn" onClick={() => onOpenService(s)}>
                  Meer informatie <span className="arrow">→</span>
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceModal({ service, onClose }) {
  useEffect(() => {
    if (!service) return;
    document.body.classList.add("no-scroll");
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.classList.remove("no-scroll");
      window.removeEventListener("keydown", onKey);
    };
  }, [service, onClose]);

  if (!service) return null;

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal-panel" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={onClose} aria-label="Sluiten"><IconClose/></button>
        <div className="modal-hero" style={{ backgroundImage: `url(${service.img})` }}></div>
        <div className="modal-body">
          <span className="eyebrow">Dienst</span>
          <h2>{service.title}</h2>
          <p className="long">{service.long}</p>
          <ul>
            {service.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
          <a className="btn btn-primary" href="#contact" onClick={() => onClose()}>
            Vraag offerte aan <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   MATERIALS
   ============================================================ */
function Materials() {
  return (
    <section className="materials">
      <div className="container">
        <div className="materials-inner">
          <div className="materials-text">
            <span className="bullet">●</span>
            <span>Wij werken met <em>premium verf</em>, in elke kleur die u wilt.</span>
          </div>
          <div className="materials-list">
            {window.MATERIALS.map((m) => (
              <div key={m.name} className="brand">
                <img src={m.logo} alt={m.name} title={m.name}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PROJECTS
   ============================================================ */
function IconChevronLeft(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <polyline points="15 18 9 12 15 6"/>
    </svg>
  );
}
function IconChevronRight(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <polyline points="9 18 15 12 9 6"/>
    </svg>
  );
}
function IconPause(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <rect x="6" y="5" width="4" height="14" rx="1"/>
      <rect x="14" y="5" width="4" height="14" rx="1"/>
    </svg>
  );
}
function IconPlay(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M7 5l12 7-12 7V5z"/>
    </svg>
  );
}

function Projects() {
  const items = window.PROJECTS;
  const ratios = ["4/5", "1/1", "3/4", "4/3", "1/1", "4/5", "3/4", "4/3"];
  const isDesktop = useMediaQuery("(min-width: 1024px)");
  const doubled = isDesktop ? [...items, ...items] : items;

  const scrollerRef = useRef(null);
  const interactPauseRef = useRef(0); // timestamp until which auto-scroll is paused
  const [hovered, setHovered] = useState(false);
  const [active, setActive] = useState(0);

  // Auto-scroll loop (desktop only). 30 px / sec, wraps at half (doubled set).
  // Pauses on hover and briefly after user clicks prev/next so the smooth scroll
  // can complete without being overridden by the RAF.
  useEffect(() => {
    if (!isDesktop) return;
    const el = scrollerRef.current; if (!el) return;
    let raf = 0;
    let last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000;
      last = now;
      const interactPaused = now < interactPauseRef.current;
      if (!hovered && !interactPaused) {
        el.scrollLeft += 30 * dt;
        const half = el.scrollWidth / 2;
        if (el.scrollLeft >= half) el.scrollLeft -= half;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [isDesktop, hovered]);

  // Mobile dot tracking
  useEffect(() => {
    if (isDesktop) return;
    const el = scrollerRef.current; if (!el) return;
    const onScroll = () => {
      const card = el.querySelector(".proj-item");
      if (!card) return;
      const cardW = card.getBoundingClientRect().width + 16;
      const idx = Math.round(el.scrollLeft / cardW);
      setActive(Math.max(0, Math.min(items.length - 1, idx)));
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, [isDesktop, items.length]);

  const scrollByCards = (dir) => {
    const el = scrollerRef.current; if (!el) return;
    const card = el.querySelector(".proj-item");
    const cardW = card ? card.getBoundingClientRect().width + 16 : 320;
    // pause auto-scroll for ~900ms so the smooth scroll isn't overridden by RAF
    interactPauseRef.current = performance.now() + 900;
    el.scrollBy({ left: cardW * dir, behavior: "smooth" });
  };

  return (
    <section className="section projects" id="projecten">
      <div className="container">
        <div className="projects-head">
          <div className="head-text">
            <span className="eyebrow">Projecten</span>
            <h2>Schilderwerken waar we trots op zijn.</h2>
          </div>
          <div className="projects-controls" role="group" aria-label="Carousel besturing">
            <button type="button" className="ctrl" onClick={() => scrollByCards(-1)} aria-label="Vorige">
              <IconChevronLeft/>
            </button>
            <button type="button" className="ctrl" onClick={() => scrollByCards(1)} aria-label="Volgende">
              <IconChevronRight/>
            </button>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="projects-track-wrap"
             onMouseEnter={() => setHovered(true)}
             onMouseLeave={() => setHovered(false)}
        >
          <div className="projects-scroller" ref={scrollerRef}>
            <div className="projects-track">
              {doubled.map((p, i) => {
                const ratio = ratios[i % ratios.length];
                return (
                  <figure key={i} className="proj-item" style={{ aspectRatio: ratio }}>
                    <img src={p.src} alt={p.title} loading="lazy"/>
                    <div className="grad"></div>
                    <figcaption>
                      <div className="title">{p.title}</div>
                      <div className="meta">{p.meta}</div>
                    </figcaption>
                  </figure>
                );
              })}
            </div>
          </div>
        </div>
        <div className="proj-dots">
          {items.map((_, i) => (
            <span key={i} className={"dot" + (active === i ? " active" : "")}></span>
          ))}
        </div>
      </div>
    </section>
  );
}

function useMediaQuery(query) {
  const [match, setMatch] = useState(() => typeof window !== "undefined" && window.matchMedia(query).matches);
  useEffect(() => {
    const mq = window.matchMedia(query);
    const fn = (e) => setMatch(e.matches);
    mq.addEventListener("change", fn);
    return () => mq.removeEventListener("change", fn);
  }, [query]);
  return match;
}

/* ============================================================
   REVIEWS
   ============================================================ */
function Reviews() {
  return (
    <section className="section reviews" id="reviews">
      <div className="container">
        <div className="reviews-head">
          <span className="eyebrow">Reviews</span>
          <h2>Wat klanten zeggen.</h2>
        </div>
        <div className="reviews-grid">
          {window.REVIEWS.map((r, i) => (
            <article key={i} className="review-card">
              <div className="review-stars">★★★★★</div>
              <p className="review-quote">{r.quote}</p>
              <div className="review-author">
                <div className="name">{r.name}</div>
                <div className="meta">{r.location} · {r.project}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="container container--narrow">
        <div className="faq-head">
          <span className="eyebrow">FAQ</span>
          <h2>Veelgestelde vragen.</h2>
        </div>
        <div className="faq-list">
          {window.FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-item" + (isOpen ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="chev">+</span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? "300px" : "0" }}>
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-cta">
          <h3>Klaar voor een <em>vrijblijvende</em> offerte?</h3>
          <div className="ctas">
            <a className="btn btn-ghost-paper" href={`tel:${window.SITE.phone}`}>
              Bel {window.SITE.phone}
            </a>
            <a className="btn btn-primary" href={homeHref("#contact")}>
              Offerte aanvragen <span className="arrow">→</span>
            </a>
          </div>
        </div>
        <div className="footer-grid">
          <div className="footer-brand">
            <img className="footer-logo" src={window.R("assets/logo-giel-cropped.png")} alt="Giel Vastgoedonderhoud"/>
            <p>Vakkundig schilderwerk en vastgoedonderhoud, voor particulier en zakelijk in heel Nederland.</p>
            <div className="footer-socials">
              <a className="icon-btn" href={window.SITE.whatsapp} aria-label="WhatsApp" target="_blank" rel="noreferrer"><IconWA/></a>
              <a className="icon-btn" href={window.SITE.instagram} aria-label="Instagram" target="_blank" rel="noreferrer"><IconIG/></a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Diensten</h4>
            <ul>
              {window.SERVICES.map((s) => <li key={s.id}><a href={homeHref("#diensten")}>{s.title}</a></li>)}
            </ul>
          </div>
          <div className="footer-col">
            <h4>Bedrijf</h4>
            <ul>
              <li><a href={homeHref("#over")}>Over ons</a></li>
              <li><a href={homeHref("#projecten")}>Projecten</a></li>
              <li><a href={homeHref("#reviews")}>Reviews</a></li>
              <li><a href={homeHref("#faq")}>FAQ</a></li>
              <li><a href={homeHref("#contact")}>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <div className="footer-contact">
              <div className="row">
                <span className="k">Telefoon</span>
                <a href={`tel:${window.SITE.phone}`}>{window.SITE.phone}</a>
              </div>
              <div className="row">
                <span className="k">E-mail</span>
                <a href={`mailto:${window.SITE.email}`}>{window.SITE.email}</a>
              </div>
              <div className="row">
                <span className="k">Adres</span>
                <span>{window.SITE.address}</span>
              </div>
              <div className="footer-meta">
                <div className="row"><span className="k">KvK</span><span>{window.SITE.kvk}</span></div>
                <div className="row"><span className="k">BTW</span><span>{window.SITE.btw}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Giel Vastgoedonderhoud — Alle rechten voorbehouden</span>
          <span className="legal">
            <a href="algemene-voorwaarden.html">Algemene voorwaarden</a>
            <a href="privacy.html">Privacyverklaring</a>
            <a href="Cookiemelding.html">Cookies</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   FLOATING: WhatsApp, CTA bar
   ============================================================ */
function WhatsAppFloat() {
  if (!window.SHOW_WHATSAPP_FLOATING_BUTTON) return null;
  const link = `https://wa.me/${window.SITE.phoneIntl}?text=${encodeURIComponent(window.SITE.whatsappPrefill)}`;
  return (
    <a className="wa-float" href={link} target="_blank" rel="noreferrer" aria-label="WhatsApp">
      <IconWA/>
    </a>
  );
}

function CtaBar() {
  return (
    <div className="cta-bar">
      <a className="btn btn-primary" href={homeHref("#contact")}>
        Offerte <span className="arrow">→</span>
      </a>
    </div>
  );
}

/* ============================================================
   COOKIE NOTICE
   ============================================================ */
const COOKIE_KEY = "giel-cookie-consent-v1";

function CookieNotice() {
  const [show, setShow] = useState(false);
  const [mode, setMode] = useState("bar"); // bar | prefs
  const [prefs, setPrefs] = useState({ necessary: true, statistics: true, marketing: false });

  useEffect(() => {
    const t = setTimeout(() => {
      try {
        const raw = localStorage.getItem(COOKIE_KEY);
        if (!raw) setShow(true);
      } catch (e) { setShow(true); }
    }, 600);
    return () => clearTimeout(t);
  }, []);

  const save = (choice, overrideStats, overrideMkt) => {
    const data = {
      necessary: true,
      statistics: overrideStats !== undefined ? overrideStats : prefs.statistics,
      marketing: overrideMkt !== undefined ? overrideMkt : prefs.marketing,
      choice,
      ts: Date.now(),
      v: 1
    };
    try { localStorage.setItem(COOKIE_KEY, JSON.stringify(data)); } catch (e) {}
    window.dispatchEvent(new CustomEvent("giel:cookie-consent", { detail: data }));
    setShow(false);
  };

  if (!show) return null;

  return (
    <div className="ck-bar-wrap">
      <div className="ck-bar">
        {mode === "bar" && (
          <React.Fragment>
            <div className="top">
              <span className="ico"><IconCookie/></span>
              <div>
                <span className="eyebrow">Cookies</span>
                <p>
                  Wij gebruiken cookies om de site goed te laten werken en anoniem te meten hoe u onze pagina's bezoekt. Zo kunnen wij u beter van dienst zijn. Lees onze <a href="privacy.html" style={{textDecoration: "underline"}}>privacyverklaring</a>.
                </p>
              </div>
            </div>
            <div className="actions">
              <button className="text-link" onClick={() => save("rejected", false, false)}>Weigeren</button>
              <button className="btn btn-ghost" onClick={() => setMode("prefs")}>Voorkeuren</button>
              <button className="btn btn-primary" onClick={() => save("accepted", true, true)}>Accepteren</button>
            </div>
          </React.Fragment>
        )}
        {mode === "prefs" && (
          <React.Fragment>
            <div className="top">
              <span className="ico"><IconCookie/></span>
              <div>
                <span className="eyebrow">Cookie voorkeuren</span>
                <p>Kies welke cookies u toestaat.</p>
              </div>
            </div>
            <div className="ck-toggles">
              <div className="ck-toggle">
                <div>
                  <div className="ttl">Noodzakelijk</div>
                  <div className="desc">Vereist voor de werking van de site.</div>
                </div>
                <button className="switch on locked" aria-label="Locked"></button>
              </div>
              <div className="ck-toggle">
                <div>
                  <div className="ttl">Statistieken</div>
                  <div className="desc">Anoniem bezoek meten.</div>
                </div>
                <button className={"switch" + (prefs.statistics ? " on" : "")} onClick={() => setPrefs(p => ({...p, statistics: !p.statistics}))} aria-label="Statistieken"></button>
              </div>
              <div className="ck-toggle">
                <div>
                  <div className="ttl">Marketing</div>
                  <div className="desc">Voor advertenties op andere kanalen.</div>
                </div>
                <button className={"switch" + (prefs.marketing ? " on" : "")} onClick={() => setPrefs(p => ({...p, marketing: !p.marketing}))} aria-label="Marketing"></button>
              </div>
            </div>
            <div className="actions">
              <button className="text-link" onClick={() => setMode("bar")}>Terug</button>
              <button className="btn btn-ghost" onClick={() => save("necessary-only", false, false)}>Alleen noodzakelijk</button>
              <button className="btn btn-primary" onClick={() => save("custom")}>Voorkeuren opslaan</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* expose to other files */
Object.assign(window, {
  Nav, Drawer, Hero, About, Services, ServiceModal, Materials,
  Projects, Reviews, FAQ, Footer, WhatsAppFloat, CtaBar, CookieNotice,
  useMediaQuery
});