/* ============================================================
   AGENZIA PRINCIPE 2 — Shared components
   ============================================================ */
(function (w) {
  const { useState, useEffect, useRef, useCallback } = React;
  const Icon = w.Icon;
  const C = w.AP2.CONTACT;

  const NAV_ITEMS = [
    { id: "home", label: "Home" },
    { id: "servizi", label: "Servizi" },
    { id: "come-funziona", label: "Come funziona" },
    { id: "chi-siamo", label: "Chi siamo" },
    { id: "faq", label: "FAQ" },
    { id: "contatti", label: "Contatti" },
  ];

  // ---- navigation helpers ----
  const go = (page, param) => w.__go && w.__go(page, param);
  // Clean-URL builder — single source of truth for internal links (SEO-friendly,
  // real hrefs that crawlers can follow; onClick keeps the SPA navigation smooth).
  function pathFor(page, param) {
    if (!page || page === "home") return "/";
    if (page === "servizio" && param) return "/servizio/" + param;
    return "/" + page;
  }
  // intercept normal clicks for SPA nav, but let new-tab / modified clicks behave natively
  const navClick = (page, param) => (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1) return;
    e.preventDefault(); go(page, param);
  };

  // ---- reveal-on-scroll (rect-based; robust across environments) ----
  let revealInit = false;
  function checkReveals() {
    const vh = window.innerHeight || document.documentElement.clientHeight;
    document.querySelectorAll(".reveal").forEach((el) => {
      if (el.classList.contains("in")) return;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.92 && r.bottom > -40) el.classList.add("in");
      else el.classList.add("armed"); // hide only below-fold items, now that JS is confirmed running
    });
  }
  function useReveal() {
    useEffect(() => {
      if (!revealInit) {
        revealInit = true;
        let raf = 0;
        const onScroll = () => { if (raf) cancelAnimationFrame(raf); raf = requestAnimationFrame(checkReveals); };
        window.addEventListener("scroll", onScroll, { passive: true });
        window.addEventListener("resize", onScroll, { passive: true });
      }
      checkReveals();
      const ids = [40, 160, 360, 700].map((d) => setTimeout(checkReveals, d));
      return () => ids.forEach(clearTimeout);
    });
  }

  // ---- Button / Link ----
  function Btn({ to, param, href, variant = "primary", size, block, children, icon, arrow, onClick, className = "" }) {
    const cls = `btn btn--${variant}${size ? " btn--" + size : ""}${block ? " btn--block" : ""} ${className}`;
    const inner = React.createElement(React.Fragment, null,
      icon && React.createElement(Icon, { name: icon, size: 18 }),
      React.createElement("span", null, children),
      arrow && React.createElement(Icon, { name: "arrowRight", size: 17, className: "arr" })
    );
    if (href) return React.createElement("a", { href, className: cls, onClick, target: href.startsWith("http") ? "_blank" : undefined, rel: "noopener" }, inner);
    // internal navigation → real, crawlable href + SPA click handling
    if (to) return React.createElement("a", { href: pathFor(to, param), className: cls, onClick: (e) => { onClick && onClick(e); navClick(to, param)(e); } }, inner);
    return React.createElement("button", { className: cls, onClick }, inner);
  }

  // ---- Header ----
  function Header({ page }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);
    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 12);
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);
    useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

    return React.createElement(React.Fragment, null,
      React.createElement("header", { className: "site-header" + (scrolled ? " scrolled" : "") },
        React.createElement("div", { className: "container-wide" },
          React.createElement("a", { className: "brand", href: "/", onClick: navClick("home"), "aria-label": "Agenzia Principe 2 — home" },
            React.createElement("img", { src: "/assets/logo-dark.png", alt: "Agenzia Principe 2 — pratiche auto Torino" })
          ),
          React.createElement("nav", { className: "nav" },
            NAV_ITEMS.map((n) =>
              React.createElement("a", {
                key: n.id, href: pathFor(n.id),
                className: page === n.id ? "active" : "",
                onClick: navClick(n.id),
              }, n.label)
            )
          ),
          React.createElement("div", { className: "header-cta" },
            React.createElement("a", { className: "header-phone", href: "tel:" + C.phoneHref },
              React.createElement(Icon, { name: "phone", size: 16 }),
              React.createElement("span", null, C.phone)
            ),
            React.createElement(Btn, { to: "contatti", variant: "primary", size: "sm" }, "Richiedi informazioni"),
            React.createElement("button", { className: "burger", "aria-label": "Apri menu", onClick: () => setOpen(true) },
              React.createElement(Icon, { name: "menu", size: 24 })
            )
          )
        )
      ),
      // mobile drawer
      React.createElement("div", { className: "mobile-nav" + (open ? " open" : "") },
        React.createElement("div", { className: "m-top" },
          React.createElement("img", { src: "/assets/logo-light.png", alt: "Agenzia Principe 2" }),
          React.createElement("button", { className: "mclose", "aria-label": "Chiudi menu", onClick: () => setOpen(false) },
            React.createElement(Icon, { name: "close", size: 22 })
          )
        ),
        NAV_ITEMS.map((n) =>
          React.createElement("a", {
            key: n.id, href: pathFor(n.id),
            className: page === n.id ? "active" : "",
            onClick: (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; e.preventDefault(); setOpen(false); go(n.id); },
          }, n.label)
        ),
        React.createElement("div", { style: { marginTop: "auto", paddingTop: 28, display: "flex", flexDirection: "column", gap: 12 } },
          React.createElement(Btn, { href: "tel:" + C.phoneHref, variant: "ghost-ondark", icon: "phone", block: true }, C.phone),
          React.createElement(Btn, { onClick: () => setOpen(false), to: "contatti", variant: "primary", block: true, arrow: true }, "Richiedi informazioni")
        )
      )
    );
  }

  // ---- Sticky mobile CTA ----
  function StickyCTA() {
    return React.createElement("div", { className: "sticky-cta" },
      React.createElement(Btn, { href: "tel:" + C.phoneHref, variant: "ghost", icon: "phone" }, "Chiama"),
      React.createElement(Btn, { href: "https://wa.me/" + C.mobileHref.replace("+", ""), variant: "primary", icon: "whatsapp" }, "WhatsApp")
    );
  }

  // ---- Section head ----
  function SectionHead({ eyebrow, title, text, center, ondark, max }) {
    return React.createElement("div", { className: "section-head reveal" + (center ? " text-center" : ""), style: max ? { maxWidth: max } : null },
      eyebrow && React.createElement("span", { className: "eyebrow" + (ondark ? " eyebrow--ondark" : "") }, eyebrow),
      React.createElement("h2", { className: "h2" }, title),
      text && React.createElement("p", null, text)
    );
  }

  // ---- Service card ----
  function ServiceCard({ svc, delay }) {
    return React.createElement("a", {
      className: "svc-card reveal" + (delay ? " reveal-d" + delay : ""),
      href: pathFor("servizio", svc.slug),
      onClick: navClick("servizio", svc.slug),
      "aria-label": svc.title,
    },
      React.createElement("div", { className: "svc-ico" }, React.createElement(Icon, { name: svc.icon, size: 26 })),
      React.createElement("h3", null, svc.title),
      React.createElement("p", null, svc.short),
      React.createElement("span", { className: "svc-more" }, "Approfondisci", React.createElement(Icon, { name: "arrowRight", size: 15 }))
    );
  }

  // ---- Accordion ----
  function Accordion({ items, single = true }) {
    const [open, setOpen] = useState(single ? 0 : []);
    const isOpen = (i) => (single ? open === i : open.includes(i));
    const toggle = (i) => {
      if (single) setOpen(open === i ? -1 : i);
      else setOpen(open.includes(i) ? open.filter((x) => x !== i) : [...open, i]);
    };
    return React.createElement("div", { className: "acc" },
      items.map((it, i) =>
        React.createElement("div", { className: "acc-item" + (isOpen(i) ? " open" : ""), key: i },
          React.createElement("button", { className: "acc-q", onClick: () => toggle(i), "aria-expanded": isOpen(i) },
            React.createElement("span", null, it.q),
            React.createElement("span", { className: "acc-icon" })
          ),
          React.createElement("div", { className: "acc-a", style: { maxHeight: isOpen(i) ? "320px" : "0" } },
            React.createElement("div", { className: "acc-a-inner" }, it.a)
          )
        )
      )
    );
  }

  // ---- Footer ----
  function Footer() {
    const svcLinks = w.AP2.SERVICES.filter((s) => s.featured).slice(0, 6);
    return React.createElement("footer", { className: "site-footer" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { className: "footer-grid" },
          React.createElement("div", null,
            React.createElement("img", { className: "footer-logo", src: "/assets/logo-light.png", alt: "Agenzia Principe 2" }),
            React.createElement("p", { style: { maxWidth: "30ch", lineHeight: 1.6 } },
              "Agenzia di pratiche automobilistiche a Torino. Passaggi di proprietà, patenti, immatricolazioni, visure e pagamenti, con assistenza chiara e veloce."),
            React.createElement("div", { style: { display: "flex", gap: 10, marginTop: 22 } },
              React.createElement("a", { className: "btn btn--ghost-ondark btn--sm", href: "https://wa.me/" + C.mobileHref.replace("+", ""), target: "_blank", rel: "noopener" },
                React.createElement(Icon, { name: "whatsapp", size: 16 }), React.createElement("span", null, "WhatsApp")),
              React.createElement("a", { className: "btn btn--ghost-ondark btn--sm", href: "tel:" + C.phoneHref },
                React.createElement(Icon, { name: "phone", size: 16 }), React.createElement("span", null, "Chiama"))
            )
          ),
          React.createElement("div", null,
            React.createElement("h4", null, "Servizi"),
            React.createElement("ul", { style: { display: "flex", flexDirection: "column", gap: 11 } },
              svcLinks.map((s) =>
                React.createElement("li", { key: s.slug },
                  React.createElement("a", { href: pathFor("servizio", s.slug), onClick: navClick("servizio", s.slug) }, s.title)
                )
              ),
              React.createElement("li", null, React.createElement("a", { href: pathFor("servizi"), onClick: navClick("servizi"), style: { color: "var(--red-500)" } }, "Tutti i servizi →"))
            )
          ),
          React.createElement("div", null,
            React.createElement("h4", null, "Agenzia"),
            React.createElement("ul", { style: { display: "flex", flexDirection: "column", gap: 11 } },
              [["chi-siamo", "Chi siamo"], ["come-funziona", "Come funziona"], ["faq", "Domande frequenti"], ["contatti", "Contatti"]].map(([id, lb]) =>
                React.createElement("li", { key: id }, React.createElement("a", { href: pathFor(id), onClick: navClick(id) }, lb))
              )
            )
          ),
          React.createElement("div", null,
            React.createElement("h4", null, "Contatti"),
            React.createElement("ul", { style: { display: "flex", flexDirection: "column", gap: 13 } },
              React.createElement("li", { style: { display: "flex", gap: 10 } }, React.createElement(Icon, { name: "pin", size: 18, style: { color: "var(--red-500)", flex: "none", marginTop: 2 } }), React.createElement("span", null, C.address, React.createElement("br"), C.zip, " ", C.city, " (", C.province, ")")),
              React.createElement("li", null, React.createElement("a", { href: "tel:" + C.phoneHref, style: { display: "flex", gap: 10 } }, React.createElement(Icon, { name: "phone", size: 18, style: { color: "var(--red-500)", flex: "none" } }), C.phone)),
              React.createElement("li", null, React.createElement("a", { href: "https://wa.me/" + C.mobileHref.replace("+", ""), target: "_blank", rel: "noopener", style: { display: "flex", gap: 10 } }, React.createElement(Icon, { name: "whatsapp", size: 18, style: { color: "var(--red-500)", flex: "none" } }), C.mobile)),
              React.createElement("li", null, React.createElement("a", { href: "mailto:" + C.email, style: { display: "flex", gap: 10, wordBreak: "break-all" } }, React.createElement(Icon, { name: "mail", size: 18, style: { color: "var(--red-500)", flex: "none" } }), C.email))
            )
          )
        ),
        React.createElement("div", { className: "footer-bottom" },
          React.createElement("span", null, "© ", new Date().getFullYear(), " ", C.legal, " · P.IVA ", C.vat),
          React.createElement("span", { style: { display: "flex", gap: 18 } },
            React.createElement("a", { href: pathFor("privacy"), onClick: navClick("privacy") }, "Privacy"),
            React.createElement("a", { href: "#", onClick: (e) => { e.preventDefault(); window.dispatchEvent(new Event("ap2:cookie-open")); } }, "Cookie"),
            React.createElement("span", { style: { color: "#5b6470" } }, "Pratiche auto a Torino")
          )
        )
      )
    );
  }

  // ---- Final CTA band (reused) ----
  function CTABand({ title, text, primaryLabel = "Contattaci ora", primaryTo = "contatti", secondaryLabel = "Vedi tutti i servizi", secondaryTo = "servizi" }) {
    return React.createElement("section", { className: "section section--ink", style: { position: "relative", overflow: "hidden" } },
      React.createElement("div", { className: "cta-glow" }),
      React.createElement("div", { className: "container", style: { position: "relative", textAlign: "center", maxWidth: 820 } },
        React.createElement("span", { className: "eyebrow eyebrow--ondark reveal" }, "Pratiche auto · Torino"),
        React.createElement("h2", { className: "h2 reveal reveal-d1", style: { marginTop: 18 } }, title),
        React.createElement("p", { className: "reveal reveal-d2", style: { marginTop: 18, fontSize: "1.16rem", color: "#A7B0BC", maxWidth: "60ch", marginInline: "auto" } }, text),
        React.createElement("div", { className: "reveal reveal-d3", style: { display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", marginTop: 34 } },
          React.createElement(Btn, { to: primaryTo, variant: "primary", size: "lg", arrow: true }, primaryLabel),
          React.createElement(Btn, { to: secondaryTo, variant: "ghost-ondark", size: "lg" }, secondaryLabel)
        )
      )
    );
  }

  // ---- Cookie consent banner (GDPR + Google Consent Mode v2) ----
  const CONSENT_KEY = "ap2_cookie_consent";
  function CookieBanner() {
    const [show, setShow] = useState(false);
    useEffect(() => {
      let v = null;
      try { v = localStorage.getItem(CONSENT_KEY); } catch (e) {}
      if (!v) setShow(true);
      const open = () => setShow(true);
      window.addEventListener("ap2:cookie-open", open);
      return () => window.removeEventListener("ap2:cookie-open", open);
    }, []);
    const choose = (granted) => {
      try { localStorage.setItem(CONSENT_KEY, granted ? "granted" : "denied"); } catch (e) {}
      if (typeof window.gtag === "function") {
        window.gtag("consent", "update", {
          analytics_storage: granted ? "granted" : "denied",
          ad_storage: "denied",
          ad_user_data: "denied",
          ad_personalization: "denied",
        });
      }
      setShow(false);
    };
    if (!show) return null;
    return React.createElement("div", { className: "cookie-banner", role: "dialog", "aria-label": "Consenso ai cookie", "aria-live": "polite" },
      React.createElement("div", { className: "cookie-text" },
        React.createElement("strong", null, "Rispettiamo la tua privacy"),
        React.createElement("p", null,
          "Usiamo cookie tecnici necessari e, solo con il tuo consenso, cookie di analisi (Google Analytics) per capire come viene usato il sito. Puoi accettare o rifiutare. ",
          React.createElement("a", { href: "/privacy", onClick: navClick("privacy"), style: { color: "#fff", textDecoration: "underline" } }, "Maggiori informazioni"), ".")),
      React.createElement("div", { className: "cookie-actions" },
        React.createElement("button", { className: "btn btn--ghost btn--sm", onClick: () => choose(false) }, "Rifiuta"),
        React.createElement("button", { className: "btn btn--primary btn--sm", onClick: () => choose(true) }, "Accetta"))
    );
  }

  w.UI = { Header, Footer, Btn, SectionHead, ServiceCard, Accordion, StickyCTA, CTABand, CookieBanner, useReveal, NAV_ITEMS, go, pathFor, navClick };
})(window);