/* ============================================================
   AGENZIA PRINCIPE 2 — Homepage
   ============================================================ */
(function (w) {
  const { useEffect } = React;
  const Icon = w.Icon;
  const { Btn, SectionHead, ServiceCard, Accordion, CTABand, go } = w.UI;
  const { CONTACT: C, SERVICES, TRUST, PROCESS, WHY, FAQ_HOME } = w.AP2;

  const HOME_SLUGS = [
    "passaggio-di-proprieta", "rinnovo-patente", "immatricolazione",
    "visure-pra", "assicurazione-rc-auto-moto", "radiazioni",
    "bollo-auto", "duplicato-patente", "pratiche-aziende-flotte",
  ];
  const ZONES = ["Centro", "San Paolo", "Pozzo Strada", "Cenisia", "Crocetta", "Santa Rita", "Borgo San Paolo", "Collegno", "Grugliasco", "Rivoli", "Nichelino", "Moncalieri"];

  // ---- decorative ink stamp ----
  function Stamp() {
    return React.createElement("svg", { viewBox: "0 0 120 120", "aria-hidden": true },
      React.createElement("defs", null,
        React.createElement("path", { id: "stampcurve", d: "M60 60 m-44 0 a44 44 0 1 1 88 0 a44 44 0 1 1 -88 0" })
      ),
      React.createElement("circle", { cx: 60, cy: 60, r: 56, fill: "#fff", stroke: "#1E8E5A", strokeWidth: 2, opacity: .96 }),
      React.createElement("circle", { cx: 60, cy: 60, r: 47, fill: "none", stroke: "#1E8E5A", strokeWidth: 1.4, strokeDasharray: "3 3", opacity: .8 }),
      React.createElement("text", { fontFamily: "Archivo, sans-serif", fontWeight: 800, fontSize: 11, letterSpacing: "2.2", fill: "#1E8E5A" },
        React.createElement("textPath", { href: "#stampcurve", startOffset: "1%" }, "· PRATICA COMPLETATA · TORINO ")
      ),
      React.createElement("g", { transform: "translate(60 64)" },
        React.createElement("path", { d: "M-13 0 L-4 9 L14 -11", fill: "none", stroke: "#1E8E5A", strokeWidth: 5, strokeLinecap: "round", strokeLinejoin: "round" }),
        React.createElement("text", { x: 0, y: 22, textAnchor: "middle", fontFamily: "Archivo, sans-serif", fontWeight: 800, fontSize: 9, letterSpacing: "1.5", fill: "#1E8E5A" }, "PRA · OK")
      )
    );
  }

  function Hero() {
    return React.createElement("section", { className: "hero" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { className: "hero-grid" },
          // copy
          React.createElement("div", { className: "hero-copy" },
            React.createElement("span", { className: "eyebrow reveal" }, "Agenzia pratiche auto · Torino"),
            React.createElement("h1", { className: "reveal reveal-d1" },
              "La tua ", React.createElement("span", { className: "accent" }, "agenzia pratiche auto"), " a Torino"),
            React.createElement("p", { className: "hero-sub reveal reveal-d2" },
              "Pratiche auto e moto, patenti e documenti del veicolo gestiti con rapidità, precisione e assistenza completa. Tu porti i documenti, al resto pensiamo noi."),
            React.createElement("div", { className: "hero-actions reveal reveal-d3" },
              React.createElement(Btn, { to: "contatti", variant: "primary", size: "lg", arrow: true }, "Richiedi informazioni"),
              React.createElement(Btn, { to: "servizi", variant: "ghost", size: "lg" }, "Scopri i servizi")
            ),
            React.createElement("div", { className: "hero-mini reveal reveal-d4" },
              React.createElement("div", null,
                React.createElement("div", { className: "num" }, "16+"),
                React.createElement("div", { className: "lbl" }, "Tipi di pratica gestiti")),
              React.createElement("div", { className: "sep" }),
              React.createElement("div", null,
                React.createElement("div", { className: "num" }, "In giornata"),
                React.createElement("div", { className: "lbl" }, "Per le pratiche più comuni")),
              React.createElement("div", { className: "sep" }),
              React.createElement("div", null,
                React.createElement("div", { className: "num" }, "Medico"),
                React.createElement("div", { className: "lbl" }, "In sede per la patente"))
            )
          ),
          // visual
          React.createElement("div", { className: "hero-visual reveal reveal-d2" },
            React.createElement("div", { className: "blob" }),
            React.createElement("div", { className: "dots" }),
            React.createElement("div", { className: "float pin-chip anim-float", style: { zIndex: 4 } },
              React.createElement("span", { className: "pc-ic" }, React.createElement(Icon, { name: "pin", size: 17 })),
              "Via Beaulard 35 · Torino"),
            React.createElement("div", { className: "float stamp" }, React.createElement(Stamp)),
            React.createElement("div", { className: "pratica-card" },
              React.createElement("div", { className: "pratica-head" },
                React.createElement("div", { className: "pi" }, React.createElement(Icon, { name: "exchange", size: 24 })),
                React.createElement("div", null,
                  React.createElement("div", { className: "pt" }, "Passaggio di proprietà"),
                  React.createElement("div", { className: "ps" }, "Pratica n. 2480 · Auto usata")),
                React.createElement("div", { className: "targa" }, "GP 482 PR")
              ),
              React.createElement("div", { className: "stepper" },
                React.createElement("div", { className: "st done" }, React.createElement("div", { className: "dot done" }, React.createElement(Icon, { name: "check", size: 14 })), React.createElement("div", { className: "sl" }, "Documenti verificati")),
                React.createElement("div", { className: "st done" }, React.createElement("div", { className: "dot done" }, React.createElement(Icon, { name: "check", size: 14 })), React.createElement("div", { className: "sl" }, "Firma autenticata")),
                React.createElement("div", { className: "st" }, React.createElement("div", { className: "dot active" }, React.createElement(Icon, { name: "bolt", size: 13 })), React.createElement("div", { className: "sl" }, "Registrazione al PRA")),
                React.createElement("div", { className: "st todo" }, React.createElement("div", { className: "dot todo" }), React.createElement("div", { className: "sl" }, "Consegna documenti"))
              ),
              React.createElement("div", { className: "pratica-foot" },
                React.createElement("span", { className: "status-badge" }, React.createElement("span", { className: "pulse" }), "In lavorazione"),
                React.createElement("span", { style: { fontSize: ".84rem", color: "var(--slate-500)", fontWeight: 600 } }, "Pronta oggi")
              )
            ),
            React.createElement("div", { className: "float mini-card anim-float d" },
              React.createElement("div", { className: "mi" }, React.createElement(Icon, { name: "idCard", size: 20 })),
              React.createElement("div", null,
                React.createElement("div", { className: "mt" }, "Rinnovo patente"),
                React.createElement("div", { className: "md" }, "Medico in sede")),
              React.createElement("div", { className: "mc" }, React.createElement(Icon, { name: "check", size: 13 }))
            )
          )
        )
      )
    );
  }

  function TrustBar() {
    return React.createElement("section", { className: "trustbar" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { className: "row" },
          TRUST.map((t, i) =>
            React.createElement("div", { className: "trust-item", key: i },
              React.createElement("span", { className: "ti" }, React.createElement(Icon, { name: t.icon, size: 18 })),
              t.t)
          )
        )
      )
    );
  }

  function ServicesSection() {
    const list = HOME_SLUGS.map((s) => SERVICES.find((x) => x.slug === s)).filter(Boolean);
    return React.createElement("section", { className: "section" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 44 } },
          React.createElement("div", { className: "section-head reveal", style: { marginBottom: 0, maxWidth: 620 } },
            React.createElement("span", { className: "eyebrow" }, "I nostri servizi"),
            React.createElement("h2", { className: "h2", style: { marginTop: 16 } }, "Tutte le pratiche del tuo veicolo, in un unico posto"),
            React.createElement("p", null, "Dalla voltura al rinnovo della patente: gestiamo ogni adempimento presso PRA, Motorizzazione e Pubblica Amministrazione.")),
          React.createElement(Btn, { to: "servizi", variant: "ghost", className: "reveal" }, "Vedi tutti i servizi")
        ),
        React.createElement("div", { className: "grid cols-3" },
          list.map((s, i) => React.createElement(ServiceCard, { key: s.slug, svc: s, delay: (i % 3) + 1 }))
        )
      )
    );
  }

  function ProcessSection() {
    return React.createElement("section", { className: "section section--alt" },
      React.createElement("div", { className: "container" },
        React.createElement(SectionHead, { center: true, eyebrow: "Come ti aiutiamo", title: "La burocrazia, semplice in quattro passi", text: "Un percorso chiaro che riduce la complessità: sai sempre a che punto è la tua pratica." }),
        React.createElement("div", { className: "process-grid" },
          PROCESS.map((p, i) =>
            React.createElement("div", { className: "process-card reveal reveal-d" + ((i % 4) + 1), key: i },
              React.createElement("div", { className: "pn" }, String(i + 1).padStart(2, "0")),
              React.createElement("h3", null, p.t),
              React.createElement("p", null, p.d),
              React.createElement("div", { className: "pconn" }, React.createElement(Icon, { name: "chevronRight", size: 28 }))
            )
          )
        )
      )
    );
  }

  function WhySection() {
    return React.createElement("section", { className: "section" },
      React.createElement("div", { className: "container" },
        React.createElement(SectionHead, { eyebrow: "Perché Principe 2", title: "Un punto di riferimento per le pratiche auto a Torino", text: "Esperienza, precisione e un referente che ti segue dalla prima domanda alla consegna dei documenti." }),
        React.createElement("div", { className: "why-grid" },
          WHY.map((wc, i) =>
            React.createElement("div", { className: "why-card reveal reveal-d" + ((i % 3) + 1), key: i },
              React.createElement("div", { className: "wi" }, React.createElement(Icon, { name: wc.icon, size: 24 })),
              React.createElement("h3", null, wc.t),
              React.createElement("p", null, wc.d))
          )
        )
      )
    );
  }

  function LocalSeo() {
    const mapSrc = "https://www.google.com/maps?q=" + encodeURIComponent(CONTACT_MAPS()) + "&output=embed";
    function CONTACT_MAPS() { return C.address + ", " + C.zip + " " + C.city; }
    return React.createElement("section", { className: "section section--alt" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { className: "local-split" },
          React.createElement("div", { className: "reveal" },
            React.createElement("span", { className: "eyebrow" }, "Local · Torino e provincia"),
            React.createElement("h2", { className: "h2", style: { marginTop: 16 } }, "Pratiche auto a Torino, con assistenza chiara e veloce"),
            React.createElement("p", { style: { marginTop: 18, fontSize: "1.12rem", color: "var(--slate-600)", lineHeight: 1.62 } },
              "Affianchiamo automobilisti e aziende di Torino e provincia in ogni pratica del veicolo: passaggi di proprietà, immatricolazioni, rinnovo patente, visure PRA, radiazioni e pagamenti. Una sede fisica in Via Beaulard, vicina a te, con consulenza diretta e personalizzata."),
            React.createElement("div", { className: "zone-chips" },
              ZONES.map((z, i) => React.createElement("span", { className: "zone-chip", key: i }, z))),
            React.createElement("div", { style: { marginTop: 30 } },
              React.createElement(Btn, { to: "contatti", variant: "dark", arrow: true }, "Vieni a trovarci"))
          ),
          React.createElement("div", { className: "local-map reveal reveal-d2" },
            React.createElement("iframe", { src: mapSrc, loading: "lazy", title: "Mappa Agenzia Principe 2 Torino", referrerPolicy: "no-referrer-when-downgrade" }),
            React.createElement("div", { className: "map-pin-badge" },
              React.createElement("div", { className: "mpi" }, React.createElement(Icon, { name: "pin", size: 20 })),
              React.createElement("div", null,
                React.createElement("div", { style: { fontFamily: "var(--font-display)", fontWeight: 800, color: "var(--ink-900)", fontSize: ".98rem" } }, "Agenzia Principe 2"),
                React.createElement("div", { style: { fontSize: ".84rem", color: "var(--slate-500)" } }, C.address, " · ", C.city)))
          )
        )
      )
    );
  }

  function FaqSection() {
    return React.createElement("section", { className: "section" },
      React.createElement("div", { className: "container" },
        React.createElement("div", { style: { display: "grid", gridTemplateColumns: "minmax(0,0.9fr) minmax(0,1.3fr)", gap: 56, alignItems: "start" }, className: "faq-layout" },
          React.createElement("div", { className: "reveal", style: { position: "sticky", top: "calc(var(--header-h) + 24px)" } },
            React.createElement("span", { className: "eyebrow" }, "Domande frequenti"),
            React.createElement("h2", { className: "h2", style: { marginTop: 16 } }, "Risposte rapide ai dubbi più comuni"),
            React.createElement("p", { style: { marginTop: 16, color: "var(--slate-600)", fontSize: "1.08rem" } }, "Non trovi quello che cerchi? Scrivici: ti rispondiamo in giornata con tempi e costi chiari."),
            React.createElement("div", { style: { marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" } },
              React.createElement(Btn, { to: "faq", variant: "ghost", size: "sm" }, "Tutte le FAQ"),
              React.createElement(Btn, { to: "contatti", variant: "primary", size: "sm", arrow: true }, "Fai una domanda"))
          ),
          React.createElement("div", { className: "reveal reveal-d1" },
            React.createElement(Accordion, { items: FAQ_HOME.slice(0, 6) }))
        )
      )
    );
  }

  function Home() {
    return React.createElement(React.Fragment, null,
      React.createElement(Hero),
      React.createElement(TrustBar),
      React.createElement(ServicesSection),
      React.createElement(ProcessSection),
      React.createElement(WhySection),
      React.createElement(LocalSeo),
      React.createElement(FaqSection),
      React.createElement(CTABand, {
        title: "Hai una pratica auto da gestire?",
        text: "Contatta Agenzia Principe 2 e ricevi supporto rapido per documenti, passaggi, patenti e pratiche veicolo a Torino.",
      })
    );
  }

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