/* Contact.jsx — split contact: form + direct channels */
const Contact = () => {
  const [form, setForm] = React.useState({ nome: '', empresa: '', email: '', mensagem: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); };

  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={<>Vamos conversar sobre <GradText>seu primeiro agente</GradText></>}
              sub="Conte como sua empresa atende hoje. Em uma reunião de 30 minutos mostramos o que daria para automatizar primeiro — sem compromisso."
              maxWidth={460}
            />
            <Reveal delay={120}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 30 }}>
                {[
                  { icon: 'phone', label: 'WhatsApp', value: 'Falar com a Agência AR', accent: '#1FD17B' },
                  { icon: 'mail', label: 'E-mail', value: 'contato@agenciaar.com.br', accent: '#00D4FF' },
                  { icon: 'map-pin', label: 'Sede', value: 'Brasil', accent: '#A7B0C5' },
                ].map(c => (
                  <div key={c.label} 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 }}>
                    <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>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <Card premium hoverable={false} glow={false} 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 automatizar?" v={form.mensagem} onChange={set('mensagem')} placeholder="Ex: atendimento no WhatsApp e follow-up de leads." multi />
                <Button size="lg" type="submit" style={{ marginTop: 8, width: '100%' }}>
                  {sent ? <>Mensagem enviada <i data-lucide="check" 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;