// Fly Media — Cotizador
// Brief guiado: seleccionas opciones, cuentas el proyecto y se envía
// a alexperalta@flymedia.com.mx vía /api/cotizacion (Vercel Function).
const { useState } = React;
const { motion } = window.framerMotion;
const EASE = [0.16, 1, 0.3, 1];
const REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const fadeRise = (delay = 0) => REDUCED ? {} : ({
initial: { opacity: 0, y: 24, filter: 'blur(8px)' },
animate: { opacity: 1, y: 0, filter: 'blur(0px)' },
transition: { duration: 0.7, ease: EASE, delay }
});
// ---------- Iconos ----------
const Svg = ({ children, size = 20, stroke = 1.75, ...rest }) => (
);
const ArrowRight = (p) => ;
const ArrowLeft = (p) => ;
const Check = (p) => ;
const WhatsAppIcon = ({ size = 20 }) => (
);
// ---------- WhatsApp (config.js) ----------
const FLY = window.FLY_CONFIG || {};
const waLink = (msg) =>
`https://wa.me/${FLY.whatsapp || ""}?text=${encodeURIComponent(msg || FLY.whatsappMsg || "Hola Fly Media, quiero información sobre un video.")}`;
// ---------- Opciones ----------
const SERVICIOS = [
"Corporativo",
"Producción con IA",
"Inmobiliario",
"Redes Sociales",
"Evento",
"Aún no estoy seguro"
];
const PLAZOS = ["Este mes", "En 1–3 meses", "Más adelante", "Sin fecha definida"];
const PRESUPUESTOS = [
"Hasta $50 mil MXN",
"$50–150 mil MXN",
"$150–400 mil MXN",
"Más de $400 mil MXN",
"Necesito orientación"
];
// ---------- Componentes ----------
function ChipGroup({ options, value, onChange, name }) {
return (
{options.map((opt) => {
const selected = value === opt;
return (
);
})}
);
}
function Step({ num, title, hint, error, children, delay = 0 }) {
return (
{children}
{error && {error}
}
);
}
// ---------- Cotizador ----------
const EMPTY = {
servicio: "", plazo: "", presupuesto: "",
empresa: "", giro: "", detalle: "",
nombre: "", email: "", telefono: "",
website: "" // honeypot
};
function Cotizador() {
const [form, setForm] = useState(EMPTY);
const [errors, setErrors] = useState({});
const [status, setStatus] = useState("idle"); // idle | sending | ok | error
const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v }));
const setInput = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const validate = () => {
const e = {};
if (!form.servicio) e.servicio = "Elige una opción (o \"Aún no estoy seguro\").";
if (!form.nombre.trim()) e.nombre = "Necesitamos tu nombre.";
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = "Escribe un correo válido para responderte.";
return e;
};
const submit = async (ev) => {
ev.preventDefault();
const e = validate();
setErrors(e);
if (Object.keys(e).length) {
const first = document.querySelector(".cot-error");
if (first) first.scrollIntoView({ behavior: "smooth", block: "center" });
return;
}
setStatus("sending");
try {
const res = await fetch("/api/cotizacion", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(form)
});
const data = await res.json().catch(() => ({}));
if (!res.ok || !data.ok) throw new Error(data.error || "send failed");
setStatus("ok");
window.scrollTo({ top: 0, behavior: "smooth" });
} catch (err) {
setStatus("error");
}
};
if (status === "ok") {
return (
Brief recibido.
Gracias, {form.nombre.split(" ")[0]}. Ya tenemos tu proyecto sobre la mesa.
Te respondemos con una propuesta en menos de 24 horas hábiles.
);
}
return (
);
}
// ---------- Página ----------
function App() {
return (
<>
Cotizador
Cuéntanos
tu proyecto.
Dos minutos. Seleccionas, nos cuentas y te armamos una propuesta
con alcance real. Si prefieres algo más directo,{" "}
escríbenos por WhatsApp.
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
