// ===================================================================== // V5 Contact — section shows title + tagline + button. // Clicking the button opens the contact form as a modal popup. // Submits to our own backend (Firebase Function `crearLead`, exposed at // /api/crear-lead via firebase.json rewrites), which forwards the lead // to monday.com via Resend. // The backend URL is read from window.__INTELIK_API__ (set in ). // Empty string = same-origin (relative URL), which is the production setup. // ===================================================================== const API_BASE = (typeof window !== "undefined" && window.__INTELIK_API__ != null) ? window.__INTELIK_API__ : ""; const LEAD_ENDPOINT = API_BASE.replace(/\/$/, "") + "/api/crear-lead"; window.V5Contact = function V5Contact() { const { t } = window.useV4(); const c = (t.contact || {}); const { useState, useEffect, useRef, useCallback } = React; const [open, setOpen] = useState(false); const [form, setForm] = useState({ nombreCompleto: "", email: "", telefono: "", empresa: "", mensaje: "", // Honeypot — bots fill it, humans don't see it. website: "", }); const [errors, setErrors] = useState({}); const [submitting, setSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const [apiError, setApiError] = useState(""); const dialogRef = useRef(null); const firstFieldRef = useRef(null); const openerRef = useRef(null); const closeModal = useCallback(() => { setOpen(false); // Return focus to the opener setTimeout(() => openerRef.current?.focus(), 0); }, []); // Open: lock scroll + focus first field + listen to Esc useEffect(() => { if (!open) return; const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; const t = setTimeout(() => firstFieldRef.current?.focus(), 60); const onKey = (e) => { if (e.key === "Escape") closeModal(); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prevOverflow; window.removeEventListener("keydown", onKey); clearTimeout(t); }; }, [open, closeModal]); // Reset form when closing (only if it wasn't a successful submit — let the // user see the success state if they reopen during the same session, fresh). useEffect(() => { if (open) { setApiError(""); setErrors({}); } }, [open]); const set = (k) => (e) => { setForm((f) => ({ ...f, [k]: e.target.value })); if (errors[k]) setErrors((er) => ({ ...er, [k]: "" })); }; // Parse a full-name string into first / last. The first token is the first // name; everything after is the last name (handles compound surnames like // "García López" or "de la Vega"). const splitName = (full) => { const parts = full.trim().split(/\s+/); return { nombre: parts[0] || "", apellido: parts.slice(1).join(" "), }; }; const validate = () => { const e = {}; const { nombre, apellido } = splitName(form.nombreCompleto); if (!form.nombreCompleto.trim()) { e.nombreCompleto = c.err_required || "Campo obligatorio"; } else if (!nombre || nombre.length < 2 || !apellido || apellido.length < 2) { e.nombreCompleto = c.err_fullname || "Escribe tu nombre y apellido"; } if (!form.email.trim()) e.email = c.err_required || "Campo obligatorio"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = c.err_email || "Correo no válido"; if (!form.telefono.trim()) e.telefono = c.err_required || "Campo obligatorio"; if (!form.empresa.trim()) e.empresa = c.err_required || "Campo obligatorio"; if (!form.mensaje.trim()) e.mensaje = c.err_required || "Campo obligatorio"; setErrors(e); return Object.keys(e).length === 0; }; const onSubmit = async (ev) => { ev.preventDefault(); setApiError(""); if (!validate()) return; // Silent bot block — pretend success but don't send. if (form.website) { setSubmitted(true); return; } setSubmitting(true); try { const payload = { nombreCompleto: form.nombreCompleto.trim(), correo: form.email.trim(), telefono: form.telefono.trim(), empresa: form.empresa.trim(), descripcion: (form.mensaje || "").trim(), // Honeypot mirrored — backend also ignores when present. website: form.website, // Optional context for the lead record. idioma: (window.location.pathname || "").includes("/en") ? "EN" : "ES", origen_url: window.location.href, }; const res = await fetch(LEAD_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); let data = {}; try { data = await res.json(); } catch (_) { /* ignore */ } if (!res.ok || !data.success) { throw new Error(data.error || ("HTTP " + res.status)); } setSubmitted(true); } catch (err) { setApiError(err.message || String(err)); } finally { setSubmitting(false); } }; // ---------- Reusable bits ---------- const labelEl = (label, required) => ( {label}{required && *} ); const inputCls = (key) => "v5-contact__input" + (errors[key] ? " is-invalid" : ""); const onBackdrop = (ev) => { if (ev.target === ev.currentTarget) closeModal(); }; return ( {/* ---------- Trigger section ---------- */}

{c.title || "Contáctanos"}

{c.sub || "Déjanos tus detalles y un experto se comunicará contigo"}

{/* ---------- Modal ---------- */} {open && (
e.stopPropagation()}> {submitted ? (

{c.ok_title || "¡Mensaje enviado!"}

{c.ok_sub || "Tu información ya está en nuestro equipo. Te contactaremos pronto."}

) : (

{c.modal_title || c.title || "Contáctanos"}

{c.sub || "Déjanos tus detalles y un experto se comunicará contigo"}

{labelEl(c.f_fullname || "Nombre completo y Apellido", true)} {errors.nombreCompleto && {errors.nombreCompleto}}
{labelEl(c.f_email || "Correo electrónico", true)} {errors.email && {errors.email}}
{labelEl(c.f_phone || "Teléfono", true)} {errors.telefono && {errors.telefono}}
{labelEl(c.f_company || "Empresa", true)} {errors.empresa && {errors.empresa}}
{labelEl(c.f_msg || "¿En qué te podemos ayudar?", true)}