// Contact form
const ContactForm = () => {
  const [data, setData] = React.useState({
    name: '', email: '', phone: '', company: '', site: '',
    invests: '', revenue: ''
  });
  const [utm, setUtm] = React.useState({});
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const utmData = {
      utm_source: params.get('utm_source') || '',
      utm_medium: params.get('utm_medium') || '',
      utm_campaign: params.get('utm_campaign') || '',
      utm_content: params.get('utm_content') || '',
      utm_term: params.get('utm_term') || '',
      url: window.location.href
    };
    setUtm(utmData);
  }, []);

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const validate = () => {
    const e = {};
    if (!data.name.trim()) e.name = "Obrigatório";
    if (!data.email.trim()) e.email = "Obrigatório";
    else if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Email inválido";
    if (!data.phone.trim()) e.phone = "Obrigatório";
    if (!data.invests) e.invests = "Selecione uma opção";
    if (!data.revenue) e.revenue = "Selecione uma faixa";
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) {
      try {
        const response = await fetch('/api/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ...data, ...utm })
        });
        const result = await response.json();
        if (response.ok) {
          console.log('✅ Email enviado:', result);
          setSubmitted(true);
        } else {
          console.error('❌ Erro:', result);
          setErrors({ submit: 'Erro ao enviar. Tente novamente.' });
        }
      } catch (err) {
        console.error('❌ Erro na requisição:', err);
        setErrors({ submit: 'Erro de conexão. Tente novamente.' });
      }
    }
  };

  if (submitted) {
    return (
      <div className="form-success fade-in">
        <div className="check"><IconCheck size={28}/></div>
        <h3 className="display" style={{fontSize: 26, margin: '0 0 8px'}}>Recebido!</h3>
        <p className="lede" style={{margin: '0 auto', fontSize: 15}}>
          Recebemos sua mensagem. Em breve nosso time entra em contato para agendar seu diagnóstico.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={submit} noValidate>
      <div className="field-row">
        <div className="field">
          <label>Nome <span className="req">*</span></label>
          <input
            type="text"
            value={data.name}
            onChange={e => set('name', e.target.value)}
            className={errors.name ? 'error' : ''}
            placeholder="Como podemos te chamar"
          />
          {errors.name && <div className="err">{errors.name}</div>}
        </div>
        <div className="field">
          <label>Email <span className="req">*</span></label>
          <input
            type="email"
            value={data.email}
            onChange={e => set('email', e.target.value)}
            className={errors.email ? 'error' : ''}
            placeholder="voce@empresa.com"
          />
          {errors.email && <div className="err">{errors.email}</div>}
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label>WhatsApp <span className="req">*</span></label>
          <input
            type="tel"
            value={data.phone}
            onChange={e => set('phone', e.target.value)}
            className={errors.phone ? 'error' : ''}
            placeholder="(00) 00000-0000"
          />
          {errors.phone && <div className="err">{errors.phone}</div>}
        </div>
        <div className="field">
          <label>Empresa</label>
          <input
            type="text"
            value={data.company}
            onChange={e => set('company', e.target.value)}
            placeholder="Nome da empresa"
          />
        </div>
      </div>
      <div className="field">
        <label>Site ou Instagram</label>
        <input
          type="text"
          value={data.site}
          onChange={e => set('site', e.target.value)}
          placeholder="@suaempresa ou empresa.com.br"
        />
      </div>
      <div className="field">
        <label>Já investe em tráfego pago? <span className="req">*</span></label>
        <div className="radio-group">
          {[
            { v: 'nao', l: 'Ainda não' },
            { v: 'sim', l: 'Sim, há tempo' },
            { v: 'tentei', l: 'Tentei, não deu certo' }
          ].map(o => (
            <div
              key={o.v}
              className={`radio-chip ${data.invests === o.v ? 'active' : ''}`}
              onClick={() => set('invests', o.v)}
            >{o.l}</div>
          ))}
        </div>
        {errors.invests && <div className="err">{errors.invests}</div>}
      </div>
      <div className="field">
        <label>Faturamento mensal atual <span className="req">*</span></label>
        <div className="radio-group">
          {[
            { v: 'a', l: 'Até R$30k' },
            { v: 'b', l: 'R$30k – R$100k' },
            { v: 'c', l: 'R$100k – R$500k' },
            { v: 'd', l: 'Acima de R$500k' }
          ].map(o => (
            <div
              key={o.v}
              className={`radio-chip ${data.revenue === o.v ? 'active' : ''}`}
              onClick={() => set('revenue', o.v)}
            >{o.l}</div>
          ))}
        </div>
        {errors.revenue && <div className="err">{errors.revenue}</div>}
      </div>
      <button type="submit" className="btn btn-primary btn-lg" style={{width: '100%', justifyContent: 'center', marginTop: 8}}>
        Solicitar diagnóstico gratuito <IconArrow/>
      </button>
      <div className="cta-hint" style={{marginTop: 14, textAlign: 'center'}}>
        // resposta em até 24h úteis
      </div>
    </form>
  );
};

const ContactSection = ({ onWhats }) => (
  <section className="section" id="contato" style={{paddingBottom: 24}}>
    <div className="container">
      <div className="form-grid">
        <div>
          <div className="eyebrow" style={{marginBottom: 14}}>// próximo passo</div>
          <h2 className="display">
            Pronto para <em>multiplicar</em> seu faturamento?
          </h2>
          <p className="lede" style={{marginTop: 22}}>
            Preencha o formulário ao lado ou fale diretamente no WhatsApp. Nosso time analisa seu negócio antes de qualquer reunião e já prepara estratégias sob medida para gerar resultados reais.
          </p>

          <div style={{display:'grid', gap: 14, marginTop: 32}}>
            {[
              "Diagnóstico estratégico do seu negócio",
              "Análise das contas de anúncio (se houver)",
              "Projeção de cenário realista de retorno",
              "Sem compromisso · sem proposta enlatada"
            ].map((t, i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap: 12, color:'var(--text-2)', fontSize: 15}}>
                <span style={{
                  width: 22, height: 22, borderRadius: 6,
                  background: 'var(--accent-soft)', color: 'var(--accent)',
                  display:'grid', placeItems:'center', flexShrink: 0
                }}>
                  <IconCheck size={14}/>
                </span>
                {t}
              </div>
            ))}
          </div>

          <div style={{marginTop: 36}}>
            <a className="btn btn-ghost" onClick={onWhats}>
              <IconWhatsApp/> Prefiro WhatsApp <IconArrow size={16}/>
            </a>
          </div>

          <div className="contact-snapshot">
            <div className="contact-snapshot-item">
              <div className="l">// resposta em</div>
              <div className="v">até 24h<span className="accent">.</span></div>
            </div>
            <div className="contact-snapshot-item">
              <div className="l">// base</div>
              <div className="v">Sorocaba<span className="accent">/SP</span></div>
            </div>
            <div className="contact-snapshot-item">
              <div className="l">// desde</div>
              <div className="v">2020<span className="accent">.</span></div>
            </div>
          </div>
        </div>

        <div className="form-card">
          <ContactForm/>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="nav-logo" style={{marginBottom: 18}}>
            <span className="dot"></span> TargetPro
          </div>
          <p style={{color: 'var(--text-3)', maxWidth: '40ch', fontSize: 14, margin:0}}>
            Agência de tráfego pago em Sorocaba/SP. Foco em performance e crescimento previsível para negócios locais.
          </p>
        </div>
        <div>
          <h5>Navegação</h5>
          <a href="#plataformas">Plataformas</a>
          <a href="#clientes">Clientes</a>
          <a href="#metodo">Método</a>
          <a href="#servicos">Serviços</a>
          <a href="#contato">Contato</a>
        </div>
        <div>
          <h5>Contato</h5>
          <a href="#">@targetpro.ag</a>
          <a href="#">contato@targetpro.ag</a>
          <a href="#">WhatsApp</a>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 TargetPro · Todos os direitos reservados</div>
        <div>// feito com método</div>
      </div>
    </div>
  </footer>
);

const FloatingWhats = ({ onClick }) => (
  <a className="fab" onClick={onClick}>
    <span className="ring"></span>
    <IconWhatsApp/>
    <span className="label">Fale conosco no WhatsApp</span>
  </a>
);

const Nav = () => (
  <nav className="nav">
    <div className="container nav-inner">
      <div className="nav-logo">
        <span className="dot"></span> TargetPro
      </div>
      <div className="nav-links">
        <a href="#plataformas">Plataformas</a>
        <a href="#clientes">Clientes</a>
        <a href="#metodo">Método</a>
        <a href="#servicos">Serviços</a>
        <a href="#contato">Contato</a>
      </div>
      <a className="btn btn-primary" href="#contato" style={{padding: '10px 18px', fontSize: 13}}>
        <IconWhatsApp size={16}/> WhatsApp
      </a>
    </div>
  </nav>
);

Object.assign(window, { ContactForm, ContactSection, Footer, FloatingWhats, Nav });