/* ============================================================ AGENZIA PRINCIPE 2 — Contatti ============================================================ */ (function (w) { const { useState } = React; const Icon = w.Icon; const { Btn, SectionHead } = w.UI; const { CONTACT: C, SERVICES } = w.AP2; function ContactForm() { const [f, setF] = useState({ nome: "", telefono: "", email: "", servizio: "", messaggio: "", privacy: false, botcheck: "" }); const [err, setErr] = useState({}); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [sendError, setSendError] = useState(null); const set = (k, v) => { setF((p) => ({ ...p, [k]: v })); if (err[k]) setErr((p) => ({ ...p, [k]: null })); }; const validate = () => { const e = {}; if (!f.nome.trim()) e.nome = "Inserisci nome e cognome"; if (!f.telefono.trim() || f.telefono.replace(/\D/g, "").length < 6) e.telefono = "Inserisci un telefono valido"; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = "Inserisci un’email valida"; if (!f.servizio) e.servizio = "Seleziona un servizio"; if (!f.privacy) e.privacy = "Devi accettare l’informativa"; setErr(e); return Object.keys(e).length === 0; }; const submit = async (ev) => { ev.preventDefault(); if (sending) return; if (!validate()) return; setSending(true); setSendError(null); try { // FormData => "simple" CORS request (no preflight); works cross-origin const fd = new FormData(); fd.append("access_key", C.web3formsKey); fd.append("subject", "Nuova richiesta dal sito — " + (f.servizio || "Contatto")); fd.append("from_name", "Sito Agenzia Principe 2"); fd.append("Nome e cognome", f.nome); fd.append("Telefono", f.telefono); fd.append("Email", f.email); fd.append("Servizio richiesto", f.servizio); fd.append("Messaggio", f.messaggio || "—"); fd.append("botcheck", f.botcheck); const res = await fetch("https://api.web3forms.com/submit", { method: "POST", body: fd }); const data = await res.json().catch(() => ({})); if (res.ok && data.success) setSent(true); else setSendError("Non siamo riusciti a inviare la richiesta. Riprova, oppure chiamaci o scrivici su WhatsApp."); } catch (e) { setSendError("Problema di connessione. Riprova, oppure chiamaci o scrivici su WhatsApp."); } finally { setSending(false); } }; if (sent) { return React.createElement("div", { className: "form-card" }, React.createElement("div", { className: "form-success" }, React.createElement("div", { className: "fs-ic" }, React.createElement(Icon, { name: "checkCircle", size: 38 })), React.createElement("h3", { className: "h3" }, "Richiesta inviata!"), React.createElement("p", { style: { color: "var(--slate-600)", marginTop: 12, maxWidth: "40ch", marginInline: "auto" } }, "Grazie ", f.nome.split(" ")[0] || "", ". Abbiamo ricevuto la tua richiesta e ti ricontatteremo in giornata con tutte le informazioni."), React.createElement("div", { style: { marginTop: 24, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" } }, React.createElement(Btn, { href: "tel:" + C.phoneHref, variant: "ghost", icon: "phone" }, "Chiama ora"), React.createElement(Btn, { onClick: () => { setSent(false); setSendError(null); setF({ nome: "", telefono: "", email: "", servizio: "", messaggio: "", privacy: false, botcheck: "" }); }, variant: "dark" }, "Invia un’altra richiesta"))) ); } const Field = (props) => React.createElement("div", { className: "field" + (err[props.k] ? " err" : "") + (props.full ? " full" : "") }, React.createElement("label", null, props.label, props.req && React.createElement("span", { className: "req" }, " *")), props.children, err[props.k] && React.createElement("span", { className: "errmsg" }, err[props.k])); return React.createElement("form", { className: "form-card", onSubmit: submit, noValidate: true }, React.createElement("h3", { className: "h3", style: { marginBottom: 6 } }, "Richiedi informazioni"), React.createElement("p", { style: { color: "var(--slate-600)", marginBottom: 24 } }, "Compila il modulo: ti rispondiamo in giornata con tempi e costi."), // honeypot (anti-spam) — hidden from users React.createElement("input", { type: "text", name: "botcheck", value: f.botcheck, onChange: (e) => set("botcheck", e.target.value), tabIndex: -1, autoComplete: "off", "aria-hidden": true, style: { position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 } }), React.createElement("div", { className: "form-grid" }, React.createElement(Field, { k: "nome", label: "Nome e cognome", req: true, full: true }, React.createElement("input", { type: "text", value: f.nome, onChange: (e) => set("nome", e.target.value), placeholder: "Mario Rossi", autoComplete: "name" })), React.createElement(Field, { k: "telefono", label: "Telefono", req: true }, React.createElement("input", { type: "tel", value: f.telefono, onChange: (e) => set("telefono", e.target.value), placeholder: "327 000 0000", autoComplete: "tel" })), React.createElement(Field, { k: "email", label: "Email", req: true }, React.createElement("input", { type: "email", value: f.email, onChange: (e) => set("email", e.target.value), placeholder: "mario@email.it", autoComplete: "email" })), React.createElement(Field, { k: "servizio", label: "Servizio richiesto", req: true, full: true }, React.createElement("select", { value: f.servizio, onChange: (e) => set("servizio", e.target.value) }, React.createElement("option", { value: "" }, "Seleziona un servizio…"), SERVICES.map((s) => React.createElement("option", { key: s.slug, value: s.title }, s.title)), React.createElement("option", { value: "Non so / altro" }, "Non so quale pratica mi serve"))), React.createElement(Field, { k: "messaggio", label: "Messaggio", full: true }, React.createElement("textarea", { value: f.messaggio, onChange: (e) => set("messaggio", e.target.value), placeholder: "Raccontaci di cosa hai bisogno (targa, tipo di veicolo, scadenze…)" })) ), React.createElement("div", { className: "checkbox-row" + (err.privacy ? " " : ""), style: { marginTop: 18 } }, React.createElement("input", { type: "checkbox", id: "privacy", checked: f.privacy, onChange: (e) => set("privacy", e.target.checked) }), React.createElement("label", { htmlFor: "privacy" }, "Ho letto l’", React.createElement("a", { href: "/privacy", target: "_blank", rel: "noopener", style: { color: "var(--red-700)", fontWeight: 600 } }, "informativa privacy"), " e acconsento al trattamento dei dati per essere ricontattato. ", err.privacy && React.createElement("span", { style: { color: "var(--error)", fontWeight: 600 } }, "— obbligatorio"))), React.createElement(Btn, { variant: "primary", size: "lg", block: true, arrow: !sending, className: "form-submit" }, sending ? "Invio in corso…" : "Invia richiesta"), sendError && React.createElement("p", { style: { color: "var(--error)", fontWeight: 600, fontSize: ".9rem", marginTop: 12, textAlign: "center" } }, sendError) ); } function Contatti() { const mapSrc = "https://www.google.com/maps?q=" + encodeURIComponent(C.address + ", " + C.zip + " " + C.city) + "&output=embed"; const dest = encodeURIComponent(C.address + ", " + C.zip + " " + C.city); const dirTransit = "https://www.google.com/maps/dir/?api=1&destination=" + dest + "&travelmode=transit"; const dirDrive = "https://www.google.com/maps/dir/?api=1&destination=" + dest + "&travelmode=driving"; 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, "Contatti")), React.createElement("span", { className: "eyebrow reveal reveal-d1", style: { marginTop: 6 } }, "Contatti · Torino"), React.createElement("h1", { className: "reveal reveal-d1" }, "Parla con Agenzia Principe 2"), React.createElement("p", { className: "reveal reveal-d2" }, "Siamo in Via Beaulard 35 a Torino. Chiamaci, scrivici su WhatsApp o compila il modulo: ti rispondiamo in giornata.") ) ), React.createElement("section", { className: "section" }, React.createElement("div", { className: "container" }, React.createElement("div", { className: "contact-grid" }, // info column React.createElement("div", { className: "reveal" }, React.createElement("div", { className: "contact-photo" }, React.createElement("img", { src: "/assets/sede-torino.jpg?v=1", alt: "L’ingresso di Agenzia Principe 2 in Via Beaulard 35 a Torino", loading: "lazy" }), React.createElement("span", { className: "contact-photo-tag" }, React.createElement(Icon, { name: "pin", size: 15 }), "Via Beaulard 35 · Torino")), React.createElement("div", { className: "contact-info-card", style: { marginTop: 20 } }, React.createElement("h3", { className: "h3", style: { marginBottom: 8 } }, "Dati agenzia"), React.createElement("p", { style: { color: "#A7B0BC", marginBottom: 10 } }, "Sportello Telematico dell’Automobilista a Torino."), React.createElement("div", { className: "cinfo-row" }, React.createElement("span", { className: "ci" }, React.createElement(Icon, { name: "pin", size: 21 })), React.createElement("div", null, React.createElement("div", { className: "cl" }, "Indirizzo"), React.createElement("div", { className: "cv" }, C.address, ", ", C.zip, " ", C.city, " (", C.province, ")"))), React.createElement("div", { className: "cinfo-row" }, React.createElement("span", { className: "ci" }, React.createElement(Icon, { name: "phone", size: 21 })), React.createElement("div", null, React.createElement("div", { className: "cl" }, "Telefono"), React.createElement("div", { className: "cv" }, React.createElement("a", { href: "tel:" + C.phoneHref }, C.phone)))), React.createElement("div", { className: "cinfo-row" }, React.createElement("span", { className: "ci" }, React.createElement(Icon, { name: "whatsapp", size: 21 })), React.createElement("div", null, React.createElement("div", { className: "cl" }, "WhatsApp / Cellulare"), React.createElement("div", { className: "cv" }, React.createElement("a", { href: "https://wa.me/" + C.mobileHref.replace("+", ""), target: "_blank", rel: "noopener" }, C.mobile)))), React.createElement("div", { className: "cinfo-row" }, React.createElement("span", { className: "ci" }, React.createElement(Icon, { name: "mail", size: 21 })), React.createElement("div", null, React.createElement("div", { className: "cl" }, "Email"), React.createElement("div", { className: "cv", style: { wordBreak: "break-all", fontSize: ".98rem" } }, React.createElement("a", { href: "mailto:" + C.email }, C.email)))), React.createElement("div", { className: "cinfo-row", style: { alignItems: "flex-start" } }, React.createElement("span", { className: "ci" }, React.createElement(Icon, { name: "clock", size: 21 })), React.createElement("div", null, React.createElement("div", { className: "cl" }, "Orari"), React.createElement("div", { style: { marginTop: 4 } }, C.hours.map((h, i) => React.createElement("div", { key: i, style: { display: "flex", justifyContent: "space-between", gap: 16, padding: "3px 0", color: "#D4DAE2", fontSize: ".96rem" } }, React.createElement("span", null, h.d), React.createElement("span", { style: { color: "#fff", fontWeight: 600 } }, h.h)))))), React.createElement("div", { style: { display: "flex", gap: 10, marginTop: 22 } }, React.createElement(Btn, { href: "tel:" + C.phoneHref, variant: "primary", icon: "phone", block: true }, "Chiama"), React.createElement(Btn, { href: "https://wa.me/" + C.mobileHref.replace("+", ""), variant: "ghost-ondark", icon: "whatsapp", block: true }, "WhatsApp"))), React.createElement("div", { className: "pickup-card reveal reveal-d1", style: { marginTop: 20 } }, React.createElement("span", { className: "pickup-ic" }, React.createElement(Icon, { name: "package", size: 24 })), React.createElement("div", null, React.createElement("div", { className: "pickup-t" }, "Punto di ritiro Amazon"), React.createElement("div", { className: "pickup-d" }, "Ritira i tuoi pacchi Amazon direttamente da noi, in Via Beaulard 35."))), React.createElement("div", { className: "contact-map reveal reveal-d1", style: { marginTop: 20 } }, React.createElement("iframe", { src: mapSrc, loading: "lazy", title: "Mappa Agenzia Principe 2 — Via Beaulard 35 Torino", referrerPolicy: "no-referrer-when-downgrade" }))), // form column React.createElement("div", { className: "reveal reveal-d1" }, React.createElement(ContactForm)) ) ) ), // come raggiungerci React.createElement("section", { className: "section section--alt" }, React.createElement("div", { className: "container" }, React.createElement(SectionHead, { eyebrow: "Dove siamo", title: "Come raggiungerci", text: "Siamo in Via Beaulard 35, nel quartiere San Paolo a Torino: comodi con la metro, in bus e in auto." }), React.createElement("div", { className: "reach-grid" }, React.createElement("div", { className: "reach-card reveal" }, React.createElement("span", { className: "reach-ic" }, React.createElement(Icon, { name: "train", size: 24 })), React.createElement("h3", null, "In metropolitana"), React.createElement("p", null, "Linea ", React.createElement("strong", null, "M1"), ", fermata ", React.createElement("strong", null, "Racconigi"), ": a circa 7 minuti a piedi.")), React.createElement("div", { className: "reach-card reveal reveal-d1" }, React.createElement("span", { className: "reach-ic" }, React.createElement(Icon, { name: "bus", size: 24 })), React.createElement("h3", null, "In bus"), React.createElement("p", null, "Fermate Bardonecchia e Peschiera nelle vicinanze, servite dalle linee 2, 22, 33, 36, 42, 68 e 71.")), React.createElement("div", { className: "reach-card reveal reveal-d2" }, React.createElement("span", { className: "reach-ic" }, React.createElement(Icon, { name: "car", size: 24 })), React.createElement("h3", null, "In auto"), React.createElement("p", null, "Quartiere San Paolo, vicino a Corso Peschiera e Corso Trapani. Parcheggio su strada nelle vie limitrofe."))), React.createElement("div", { style: { display: "flex", gap: 12, flexWrap: "wrap", marginTop: 30, justifyContent: "center" } }, React.createElement(Btn, { href: dirTransit, variant: "dark", icon: "train" }, "Indicazioni con i mezzi"), React.createElement(Btn, { href: dirDrive, variant: "ghost", icon: "car" }, "Indicazioni in auto")) ) ) ); } w.Pages = w.Pages || {}; w.Pages.Contatti = Contatti; })(window);