// CTA + Briefing form const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React; // Espera o window._sb nascer (mesmo padrão defensivo de services/works). // Resolve null se o SDK do CDN não vier — daí o submit avisa em vez de quebrar. function waitForSbContact(tries = 20) { return new Promise((resolve) => { let n = 0; (function check() { if (window._sb) return resolve(window._sb); if (n++ >= tries) return resolve(null); setTimeout(check, 100); })(); }); } // Outline STUND that fills on scroll function CTAOutline() { const [fill, setFill] = useStateC(0); const ref = useRefC(null); useEffectC(() => { const onScroll = () => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const vh = window.innerHeight; // Map: when section bottom enters → 0; when section top reaches mid-viewport → 1 const start = vh; const end = vh * 0.2; const p = Math.max(0, Math.min(1, (start - r.top) / (start - end))); setFill(p); }; window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const text = 'VAMOS CONSTRUIR ALGO INESQUECÍVEL'; return (
{text} {text}
); } function MaskedPhone({ value, onChange }) { const handle = (e) => { let v = e.target.value.replace(/\D/g, '').slice(0, 11); if (v.length > 6) v = `(${v.slice(0, 2)}) ${v.slice(2, 7)}-${v.slice(7)}`; else if (v.length > 2) v = `(${v.slice(0, 2)}) ${v.slice(2)}`; else if (v.length > 0) v = `(${v}`; onChange(v); }; return ; } function Input({ value, onChange, placeholder, type = 'text', inputMode, autoComplete }) { return ( e.target.style.borderBottomColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderBottomColor = 'var(--line)'} /> ); } function Field({ label, num, children }) { return ( ); } const SERVICE_OPTS = [ 'Direção Criativa', 'Produção de Vídeo', 'Edição', 'Redes Sociais', 'Fotografia', 'Identidade Visual', 'Branding', 'Catálogo / E-commerce', 'Comercial / Anúncio', 'Cobertura de Evento', 'Conteúdo Institucional', 'Reels / TikTok', 'Foto de Produto', 'Flyer / VideoFlyer', 'StoryMaker', 'Documentário', 'Music Video', 'Ainda não sei', ]; const BUDGETS = ['até 5k', '5–15k', '15–30k', '30k+', 'a definir']; function BriefForm() { const [data, setData] = useStateC({ nome: '', email: '', tel: '', empresa: '', servs: [], budget: '', objetivo: '', dor: '', prazo: '', msg: '', }); const [sent, setSent] = useStateC(false); const [sending, setSending] = useStateC(false); const [error, setError] = useStateC(''); const set = (k, v) => setData((d) => ({ ...d, [k]: v })); const toggleServ = (s) => set('servs', data.servs.includes(s) ? data.servs.filter(x => x !== s) : [...data.servs, s]); const submit = async (e) => { e.preventDefault(); if (sending || sent) return; setError(''); // Validação mínima: nome + ao menos um contato (email ou telefone). const nome = data.nome.trim(); const email = data.email.trim(); const tel = data.tel.trim(); if (!nome || (!email && !tel)) { setError('Preencha seu nome e ao menos um contato (email ou telefone).'); return; } // Consolida campos sem coluna própria (objetivo/dor/prazo) em observacoes. const observacoes = [ data.objetivo.trim() && `Objetivo: ${data.objetivo.trim()}`, data.dor.trim() && `Dor: ${data.dor.trim()}`, data.prazo.trim() && `Prazo: ${data.prazo.trim()}`, ].filter(Boolean).join('\n') || null; // Monta o payload mapeando o estado do form -> colunas da tabela `leads`. // status e fonte ficam de fora (o banco preenche: 'novo' / 'landing'). const payload = { nome, email: email || null, whatsapp: tel || null, empresa: data.empresa.trim() || null, servicos_interesse: data.servs.length ? data.servs.join(', ') : null, orcamento_estimado: data.budget || null, mensagem: data.msg.trim() || null, observacoes, }; setSending(true); try { const sb = await waitForSbContact(); if (!sb) throw new Error('Supabase indisponível'); const { error: insertError } = await sb.from('leads').insert(payload); if (insertError) throw insertError; setSent(true); } catch (err) { console.error('Falha ao enviar briefing:', err); setError('Não conseguimos enviar agora. Tente de novo ou fale no WhatsApp.'); } finally { setSending(false); } }; return (
set('nome', e.target.value)} placeholder="Como te chamamos?" autoComplete="name" /> set('email', e.target.value)} placeholder="voce@dominio.com" /> set('tel', v)} /> set('empresa', e.target.value)} placeholder="Loja, marca, restaurante, banda, evento, profissional autônomo…" />
{SERVICE_OPTS.map((s) => { const on = data.servs.includes(s); return ( ); })}
{BUDGETS.map((b) => { const on = data.budget === b; return ( ); })}