// ── Form, FAQ, Final CTA, Footer ────────────────────────────
// Safe fallback for process.env in pure client-side environment
if (typeof process === 'undefined') {
window.process = { env: {} };
}
// Format BR mobile WhatsApp number progressively: (11) 99999-9999
function maskWhats(v) {
const d = (v || "").replace(/\D/g, "").slice(0, 11);
if (d.length <= 2) return d;
if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}
function digitsOnly(v) { return (v || "").replace(/\D/g, ""); }
function LeadForm({ innerRef }) {
const [data, setData] = React.useState({ nome: "", whats: "", email: "" });
const [countryCode, setCountryCode] = React.useState("+55");
const [touched, setTouched] = React.useState({});
const [focus, setFocus] = React.useState(null);
const [done, setDone] = React.useState(false);
const [modal, setModal] = React.useState(false);
const [tilt, setTilt] = React.useState({ rx: 0, ry: 0, active: false });
const handleTiltMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
setTilt({ rx: -y * 22, ry: x * 22, active: true });
};
const handleTiltLeave = () => {
setTilt({ rx: 0, ry: 0, active: false });
};
const errors = {
nome: data.nome.trim().length < 3 ? "Digite seu nome completo." : null,
whats: (countryCode === "+55" ? digitsOnly(data.whats).length < 10 : digitsOnly(data.whats).length < 7) ? "Informe um WhatsApp válido." : null,
email: !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email) ? "Informe um e-mail válido." : null,
};
const valid = !errors.nome && !errors.whats && !errors.email;
const fields = [
{ k: "nome", ph: "Nome completo", type: "text", autocomplete: "name", inputmode: "text" },
{ k: "whats", ph: "WhatsApp (com DDD)", type: "tel", autocomplete: "tel", inputmode: "tel", mask: maskWhats },
{ k: "email", ph: "E-mail", type: "email", autocomplete: "email", inputmode: "email" },
];
// Submit flow: validate → mark inline form as done → open checkout modal
const submit = async (e) => {
if (e) e.preventDefault();
setTouched({ nome: true, whats: true, email: true });
if (!valid) return;
// Formatar WhatsApp final: remove espaços, hífens e parênteses (e.g. +5511999999999)
const rawWhats = data.whats.replace(/[\s\-\(\)]/g, '');
const formData = {
name: data.nome,
phone: `${countryCode}${rawWhats}`,
email: data.email
};
console.log('[Frontend] Enviando dados do formulário para /api/webhook:', formData);
try {
const response = await fetch('/api/webhook', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
const result = await response.json();
console.log('[Frontend] Resposta da API interna:', result);
if (!response.ok) {
console.error('[Frontend] Falha ao registrar lead na API interna:', result.error || response.statusText);
} else {
console.log('[Frontend] Lead registrado com sucesso!');
}
} catch (error) {
console.error('[Frontend] Erro na requisição para /api/webhook:', error);
}
setDone(true);
setModal(true);
};
// Replace this with the real Stripe / Hotmart / Eduzz / Asaas checkout URL
// when the brand team provides it. Fires in a new tab so the page stays.
const CHECKOUT_URL = "https://pay.minhaprimeiraimportacao.com.br/checkout";
const goToCheckout = () => { window.open(CHECKOUT_URL, "_blank", "noopener,noreferrer"); };
// Lock body scroll while modal is open
React.useEffect(() => {
const prev = document.body.style.overflow;
if (modal) { document.body.style.overflow = "hidden"; }
else { document.body.style.overflow = prev || ""; }
return () => { document.body.style.overflow = prev || ""; };
}, [modal]);
// Esc to close
React.useEffect(() => {
if (!modal) return;
const h = (e) => { if (e.key === "Escape") setModal(false); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [modal]);
return (
O encontro é presencial no dia 21 de Junho. Ao garantir a sua inscrição, você recebe automaticamente duas credenciais de acesso. Leve um sócio, parceiro ou acompanhante com você para a sala na Alameda Tocantins, 956.
Acesso VIP duplo: inclui 1 acompanhante grátis
{modal && setModal(false)} onCheckout={goToCheckout} />}
);
}
// Premium checkout modal — full-screen backdrop with blur, centered card
// with gold edge, hero gold seal, the user's confirmed contact echoed
// back as proof of receipt, and a single dominant CTA to the checkout.
function CheckoutModal({ data, onClose, onCheckout }) {
// Trap focus on first focusable on open
const closeRef = React.useRef(null);
React.useEffect(() => { closeRef.current && closeRef.current.focus(); }, []);
return ReactDOM.createPortal(
Falta um passo, {data.nome ? data.nome.split(" ")[0] : "futuro importador"}.
Pra garantir seu acesso duplo (duas credenciais) no encontro de 21 de Junho em Alphaville, finalize a compra do ingresso agora. A vaga é confirmada na hora.
Evento
Minha Primeira Importação
Data · Local
21 Jun · 14h às 19h
Pagamento seguro
Vaga garantida
,
document.body
);
}
// ── FAQ ──
const FAQS = [
{ q: "Preciso já ter um negócio pra participar?", a: "Não. O evento é pra quem quer fazer a primeira importação, com ou sem empresa montada." },
{ q: "Isso é promessa de ficar rico importando?", a: "Não, e fugimos disso de propósito. Importação é um caminho com método e trabalho. O evento te dá o passo a passo, e o resultado depende de você executar." },
{ q: "As vagas são limitadas mesmo?", a: "Sim. O que limita é o espaço físico da sala em Alphaville. Quando lota, encerra, por isso as vagas acabam." },
{ q: "Vou sair sabendo importar de verdade?", a: "Você sai com o passo a passo completo das 5 etapas: produto, fornecedor, pedido, custo e logística. O caminho fica claro." },
{ q: "E se eu nunca importei nada na vida?", a: "Melhor ainda. O evento foi desenhado pra primeira importação. Começamos do zero." },
];
function FAQ() {
const [open, setOpen] = React.useState(0);
return (
);
}
// ── FINAL CTA ──
function FinalCTA({ onCta }) {
return (
A sala tem um limite. A sua decisão, não.
Você pode passar mais um ano adiando, com medo de errar. Ou aparecer em São Paulo e sair com o caminho na mão. Garanta seu ingresso, pois o tempo perdido não volta.
