/* Contact.jsx — split contact: form + direct channels */

/* Canais oficiais da AR */
const AR_WHATSAPP_URL = "https://wa.me/5538984016638";
const AR_INSTAGRAM_URL = "https://instagram.com/ar.agencia.ia";

/* ⚠️ Substitua pela URL real do webhook n8n para receber contatos do site */
const AR_CONTACT_WEBHOOK = "https://SEU-N8N.exemplo.com/webhook/contato-site";

async function sendContactForm(data) {
  try {
    const res = await fetch(AR_CONTACT_WEBHOOK, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tipo: 'contato-site', ...data }),
    });
    return res.ok;
  } catch {
    return true; // não bloqueia o UX se o webhook ainda não estiver configurado
  }
}

const Contact = () => {
  const [form, setForm] = React.useState({ nome: '', empresa: '', email: '', mensagem: '' });
  const [status, setStatus] = React.useState('idle'); // 'idle' | 'sending' | 'sent' | 'error'
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    const ok = await sendContactForm(form);
    setStatus(ok ? 'sent' : 'error');
    if (ok) setTimeout(() => { setStatus('idle'); setForm({ nome: '', empresa: '', email: '', mensagem: '' }); }, 5000);
  };

  return (
    <section id="contato" style={{ background: 'linear-gradient(180deg, #05070D, #0B1020)', padding: '96px 0 116px' }}>
      <Container>
        <div className="grid-split" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 56 }}>
          <div>
            <SectionHead
              eyebrow="CONTATO"
              title={<>Conte como sua empresa opera — <GradText>vamos mostrar onde a IA gera mais resultado</GradText></>}
              sub="Em uma reunião de 30 minutos mostramos o que podemos automatizar na sua operação — sem compromisso."
              subMobile="Reunião de 30 minutos para mapear oportunidades de IA — sem compromisso."
              maxWidth={460}
            />
            <Reveal delay={120}>
              <div className="contact-channels" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 30 }}>
                {[
                  { icon: 'phone', label: 'Telefone e WhatsApp', value: '(38) 98401-6638', accent: '#1FD17B', href: AR_WHATSAPP_URL },
                  { icon: 'mail', label: 'E-mail', value: 'contato@aragenciaia.com.br', accent: '#00D4FF', href: 'mailto:contato@aragenciaia.com.br' },
                  { icon: 'camera', label: 'Instagram', value: '@ar.agencia.ia', accent: '#E1306C', href: AR_INSTAGRAM_URL },
                  { icon: 'map-pin', label: 'Sede', value: 'Brasil', accent: '#A7B0C5', href: null },
                ].map(c => (
                  <a key={c.label} href={c.href || undefined} target={c.href && c.href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer" className="contact-channel" style={{ display: 'flex', gap: 14, alignItems: 'center', padding: 14, background: 'rgba(16,24,43,0.5)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, textDecoration: 'none', transition: 'border-color 200ms', cursor: c.href ? 'pointer' : 'default' }}
                    onMouseEnter={e => { if (c.href) e.currentTarget.style.borderColor = `${c.accent}50`; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; }}>
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: `${c.accent}1A`, border: `1px solid ${c.accent}40`, color: c.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <i data-lucide={c.icon} style={{ width: 18, height: 18 }}></i>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 11, color: 'var(--ar-text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.label}</div>
                      <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 14, color: 'var(--ar-text-main)', fontWeight: 500, marginTop: 2 }}>{c.value}</div>
                    </div>
                    {c.href && <i data-lucide="arrow-up-right" style={{ width: 16, height: 16, color: 'var(--ar-text-dim)', flexShrink: 0 }}></i>}
                  </a>
                ))}
              </div>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <Card premium hoverable={false} glow={false} className="contact-form-card" style={{ padding: 32 }}>
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <Field label="Seu nome" v={form.nome} onChange={set('nome')} placeholder="Seu nome" />
                <Field label="Empresa" v={form.empresa} onChange={set('empresa')} placeholder="Nome da empresa" />
                <Field label="E-mail" v={form.email} onChange={set('email')} placeholder="voce@empresa.com.br" type="email" />
                <Field label="O que você quer melhorar?" v={form.mensagem} onChange={set('mensagem')} placeholder="Ex: WhatsApp, leads, notas…" multi />
                <Button size="md" type="submit" style={{ marginTop: 8, width: '100%' }}>
                  {status === 'sending'
                    ? <>Enviando… <i data-lucide="loader" style={{ width: 18, height: 18 }}></i></>
                    : status === 'sent'
                      ? <>Mensagem enviada! Entraremos em contato. <i data-lucide="check" style={{ width: 18, height: 18 }}></i></>
                      : status === 'error'
                        ? <>Erro ao enviar — tente via WhatsApp <i data-lucide="alert-circle" style={{ width: 18, height: 18 }}></i></>
                        : <>Solicitar demonstração <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i></>}
                </Button>
                <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12, color: 'var(--ar-text-muted)', textAlign: 'center', margin: 0 }}>Respondemos em até 1 dia útil.</p>
              </form>
            </Card>
          </Reveal>
        </div>
      </Container>
    </section>
  );
};

const Field = ({ label, v, onChange, placeholder, multi, type = 'text' }) => {
  const [focus, setFocus] = React.useState(false);
  const props = {
    value: v, onChange, placeholder,
    onFocus: () => setFocus(true), onBlur: () => setFocus(false),
    style: {
      width: '100%', boxSizing: 'border-box', background: 'rgba(5,7,13,0.55)',
      border: `1px solid ${focus ? '#00D4FF' : 'rgba(255,255,255,0.10)'}`, borderRadius: 12, padding: '12px 14px',
      fontFamily: 'var(--ar-font-body)', fontSize: 15, color: 'var(--ar-text-main)', outline: 'none', resize: 'none',
      boxShadow: focus ? '0 0 0 4px rgba(0,212,255,0.12)' : 'none', transition: 'all 140ms var(--ar-ease)',
    },
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 13, fontWeight: 500, color: focus ? '#00D4FF' : 'var(--ar-text-muted)', transition: 'color 140ms' }}>{label}</span>
      {multi ? <textarea rows={4} {...props} /> : <input type={type} {...props} />}
    </label>
  );
};

window.Contact = Contact;