/* ============================================================
   AGENZIA PRINCIPE 2 — Come funziona
   ============================================================ */
(function (w) {
  const Icon = w.Icon;
  const { Btn, SectionHead, CTABand } = w.UI;
  const { PROCESS, CONTACT: C } = w.AP2;

  const CHANNELS = [
    { icon: "phone", t: "Telefono", d: "Chiamaci per una risposta immediata", v: C.phone, href: "tel:" + C.phoneHref },
    { icon: "whatsapp", t: "WhatsApp", d: "Inviaci foto dei documenti", v: C.mobile, href: "https://wa.me/" + C.mobileHref.replace("+", "") },
    { icon: "pin", t: "In agenzia", d: "Passa a trovarci di persona", v: "Via Beaulard 35, Torino", href: null },
  ];

  function ComeFunziona() {
    return React.createElement(React.Fragment, null,
      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, "Come funziona")),
          React.createElement("span", { className: "eyebrow reveal reveal-d1", style: { marginTop: 6 } }, "Il metodo"),
          React.createElement("h1", { className: "reveal reveal-d1" }, "Come funziona, passo dopo passo"),
          React.createElement("p", { className: "reveal reveal-d2" }, "Abbiamo reso semplice ciò che di solito è complicato. Ecco come gestiamo la tua pratica, dalla prima richiesta alla consegna dei documenti.")
        )
      ),

      // timeline steps
      React.createElement("section", { className: "section" },
        React.createElement("div", { className: "container", style: { maxWidth: 880 } },
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 0 } },
            PROCESS.map((p, i) =>
              React.createElement("div", { className: "reveal reveal-d" + ((i % 3) + 1), key: i, style: { display: "flex", gap: 26, paddingBottom: i === PROCESS.length - 1 ? 0 : 40, position: "relative" } },
                React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", flex: "none" } },
                  React.createElement("div", { style: { width: 56, height: 56, borderRadius: 16, background: i === 0 ? "var(--red-600)" : "var(--ink-900)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.3rem", flex: "none" } }, String(i + 1).padStart(2, "0")),
                  i < PROCESS.length - 1 && React.createElement("div", { style: { width: 2, flex: 1, background: "var(--line-300)", marginTop: 8, minHeight: 30 } })),
                React.createElement("div", { style: { paddingTop: 8 } },
                  React.createElement("h3", { className: "h3", style: { marginBottom: 10 } }, p.t),
                  React.createElement("p", { style: { color: "var(--slate-600)", fontSize: "1.08rem", lineHeight: 1.64, maxWidth: "56ch" } }, p.d)))
            )
          )
        )
      ),

      // channels
      React.createElement("section", { className: "section section--alt" },
        React.createElement("div", { className: "container" },
          React.createElement(SectionHead, { center: true, eyebrow: "Come raggiungerci", title: "Tre modi per iniziare", text: "Scegli il canale che preferisci: ti rispondiamo in giornata." }),
          React.createElement("div", { className: "grid cols-3" },
            CHANNELS.map((ch, i) => {
              const inner = React.createElement(React.Fragment, null,
                React.createElement("div", { style: { width: 52, height: 52, borderRadius: 14, background: "var(--red-50)", color: "var(--red-600)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 } }, React.createElement(Icon, { name: ch.icon, size: 25 })),
                React.createElement("h3", { className: "h4", style: { marginBottom: 6 } }, ch.t),
                React.createElement("p", { style: { color: "var(--slate-600)", fontSize: ".96rem", marginBottom: 14 } }, ch.d),
                React.createElement("div", { style: { fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--ink-900)" } }, ch.v));
              return React.createElement("div", { className: "card reveal reveal-d" + ((i % 3) + 1), key: i, style: { padding: 28 } },
                ch.href ? React.createElement("a", { href: ch.href, target: ch.href.startsWith("http") ? "_blank" : undefined, rel: "noopener" }, inner) : inner);
            })
          )
        )
      ),

      // delega note
      React.createElement("section", { className: "section" },
        React.createElement("div", { className: "container" },
          React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }, className: "about-split" },
            React.createElement("div", { className: "reveal" },
              React.createElement("span", { className: "eyebrow" }, "Delega"),
              React.createElement("h2", { className: "h2", style: { marginTop: 16 } }, "Puoi delegarci tutto l’iter"),
              React.createElement("p", { style: { marginTop: 18, fontSize: "1.1rem", color: "var(--slate-600)", lineHeight: 1.66 } }, "Con una semplice delega ci occupiamo noi di ogni passaggio presso PRA, Motorizzazione e Pubblica Amministrazione. Tu consegni i documenti una volta sola: pensiamo noi a controlli, presentazione e ritiro."),
              React.createElement("div", { style: { marginTop: 24 } }, React.createElement(Btn, { to: "contatti", variant: "primary", arrow: true }, "Inizia ora"))),
            React.createElement("div", { className: "reveal reveal-d2", style: { background: "var(--bg-alt)", border: "1px solid var(--line-200)", borderRadius: "var(--r-xl)", padding: 32 } },
              ["Porti o invii i documenti una sola volta", "Verifichiamo requisiti e completezza", "Gestiamo la pratica presso gli enti", "Ti consegniamo i documenti pronti all’uso"].map((t, i) =>
                React.createElement("div", { key: i, style: { display: "flex", gap: 14, alignItems: "flex-start", padding: "14px 0", borderBottom: i < 3 ? "1px solid var(--line-200)" : "none" } },
                  React.createElement("span", { style: { width: 28, height: 28, borderRadius: "50%", background: "var(--success-bg)", color: "var(--success)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" } }, React.createElement(Icon, { name: "check", size: 15 })),
                  React.createElement("span", { style: { fontSize: "1.04rem", color: "var(--ink-900)", fontWeight: 500, paddingTop: 2 } }, t))))
          )
        )
      ),

      React.createElement(CTABand, {
        title: "Iniziamo dalla tua pratica",
        text: "Raccontaci di cosa hai bisogno: ti diciamo subito documenti, tempi e costi, in modo chiaro.",
        secondaryLabel: "Vedi i servizi", secondaryTo: "servizi",
      })
    );
  }

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