/* ============================================================
   AGENZIA PRINCIPE 2 — Pagina Servizi
   ============================================================ */
(function (w) {
  const { useState } = React;
  const Icon = w.Icon;
  const { Btn, ServiceCard, Accordion, CTABand } = w.UI;
  const { SERVICES, CATEGORIES } = w.AP2;

  const SERVIZI_FAQ = [
    { q: "Posso affidarvi più pratiche insieme?", a: "Sì. Possiamo gestire contemporaneamente più pratiche per lo stesso veicolo o per veicoli diversi, anche per aziende e flotte, con un unico referente." },
    { q: "Lavorate sia su auto sia su moto?", a: "Certo: passaggi di proprietà, immatricolazioni, radiazioni, duplicati e visure valgono per auto e moto. Gestiamo anche la targa per i monopattini elettrici." },
    { q: "Devo prendere appuntamento?", a: "Per molte pratiche puoi passare direttamente in agenzia. Per il rinnovo della patente con medico in sede è consigliata la prenotazione, così troviamo il medico disponibile." },
    { q: "Come ricevo il preventivo?", a: "Chiamaci, scrivici su WhatsApp o compila il modulo: ti indichiamo costi e tempi in giornata, in modo chiaro e senza impegno." },
  ];

  function PageHero() {
    return React.createElement("section", { className: "page-hero" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { className: "breadcrumb reveal" },
          React.createElement("a", { href: "/", onClick: w.UI.navClick("home") }, "Home"),
          React.createElement("span", { className: "sep" }, "/"),
          React.createElement("span", null, "Servizi")),
        React.createElement("span", { className: "eyebrow reveal reveal-d1", style: { marginTop: 6 } }, "Pratiche auto · Torino"),
        React.createElement("h1", { className: "reveal reveal-d1" }, "Servizi di pratiche auto a Torino"),
        React.createElement("p", { className: "reveal reveal-d2" }, "Tutto quello che riguarda il tuo veicolo, gestito da un’unica agenzia: pratiche auto e moto, patenti, visure e pagamenti, con assistenza diretta e tempi rapidi."),
        React.createElement("div", { className: "reveal reveal-d3", style: { marginTop: 28, display: "flex", gap: 13, flexWrap: "wrap" } },
          React.createElement(Btn, { to: "contatti", variant: "primary", arrow: true }, "Richiedi informazioni"),
          React.createElement(Btn, { to: "come-funziona", variant: "ghost" }, "Come funziona"))
      )
    );
  }

  function Servizi() {
    const [filter, setFilter] = useState("tutti");
    const cats = filter === "tutti" ? CATEGORIES : CATEGORIES.filter((c) => c.id === filter);

    return React.createElement(React.Fragment, null,
      React.createElement(PageHero),
      React.createElement("section", { className: "section" },
        React.createElement("div", { className: "container" },
          React.createElement("div", { className: "filter-bar reveal" },
            React.createElement("button", { className: "filter-pill" + (filter === "tutti" ? " active" : ""), onClick: () => setFilter("tutti") }, "Tutti i servizi"),
            CATEGORIES.map((c) =>
              React.createElement("button", { key: c.id, className: "filter-pill" + (filter === c.id ? " active" : ""), onClick: () => setFilter(c.id) }, c.label))
          ),
          cats.map((cat) => {
            const list = SERVICES.filter((s) => s.cat === cat.id);
            return React.createElement("div", { key: cat.id },
              React.createElement("div", { className: "svc-cat-head reveal" },
                React.createElement("h2", { className: "h3" }, cat.label),
                React.createElement("span", { className: "cnt" }, list.length, " servizi")),
              React.createElement("p", { className: "reveal", style: { color: "var(--slate-600)", marginTop: -8, marginBottom: 24, maxWidth: "60ch" } }, cat.desc),
              React.createElement("div", { className: "grid cols-3" },
                list.map((s, i) => React.createElement(ServiceCard, { key: s.slug, svc: s, delay: (i % 3) + 1 })))
            );
          })
        )
      ),
      // helper band
      React.createElement("section", { className: "section section--alt section--tight" },
        React.createElement("div", { className: "container" },
          React.createElement("div", { className: "helper-band reveal" },
            React.createElement("div", { className: "hb-glow" }),
            React.createElement("div", { style: { position: "relative", maxWidth: "44ch" } },
              React.createElement("span", { className: "eyebrow eyebrow--ondark" }, "Consulenza gratuita"),
              React.createElement("h2", { className: "h3", style: { color: "#fff", marginTop: 16, fontSize: "1.7rem" } }, "Non sai quale pratica ti serve?"),
              React.createElement("p", { style: { color: "#A7B0BC", marginTop: 12, fontSize: "1.06rem" } }, "Raccontaci la tua situazione: analizziamo documenti e requisiti e ti indichiamo la strada più rapida, senza impegno.")),
            React.createElement("div", { style: { position: "relative", display: "flex", gap: 12, flexWrap: "wrap" } },
              React.createElement(Btn, { to: "contatti", variant: "primary", size: "lg", arrow: true }, "Parla con noi"),
              React.createElement(Btn, { href: "tel:" + w.AP2.CONTACT.phoneHref, variant: "ghost-ondark", size: "lg", icon: "phone" }, w.AP2.CONTACT.phone))
          )
        )
      ),
      // faq
      React.createElement("section", { className: "section" },
        React.createElement("div", { className: "container", style: { maxWidth: 820 } },
          React.createElement("div", { className: "section-head text-center reveal" },
            React.createElement("span", { className: "eyebrow" }, "FAQ servizi"),
            React.createElement("h2", { className: "h2", style: { marginTop: 16 } }, "Domande sui nostri servizi")),
          React.createElement("div", { className: "reveal reveal-d1" }, React.createElement(Accordion, { items: SERVIZI_FAQ }))
        )
      ),
      React.createElement(CTABand, {
        title: "Pronto a sistemare la tua pratica?",
        text: "Contattaci per un preventivo chiaro su tempi e costi, oppure passa in agenzia in Via Beaulard 35 a Torino.",
        secondaryLabel: "Come funziona", secondaryTo: "come-funziona",
      })
    );
  }

  w.Pages = w.Pages || {};
  w.Pages.Servizi = Servizi;
})(window);