// ContactCTA — contact form section.
function ContactCTA() {
  const { Input, Button, Eyebrow, Badge } = window.AmorimECostaDesignSystem_658eb5;
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nome: '', telefone: '', email: '', caso: '' });
  const WHATSAPP_NUMBER = '5567992864934';
  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const lines = [
      `Olá! Meu nome é ${form.nome}.`,
      form.email ? `E-mail: ${form.email}` : null,
      form.caso ? `Resumo do caso: ${form.caso}` : null,
    ].filter(Boolean);
    const msg = encodeURIComponent(lines.join('\n'));
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`, '_blank');
    setSent(true);
  };
  return (
    <section id="contato" style={{ background: 'var(--surface-page)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-10) var(--space-6)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'start',
      }}>
        <div>
          <Eyebrow>Fale com o escritório</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)',
            color: 'var(--text-strong)', letterSpacing: 'var(--tracking-tight)', margin: 'var(--space-4) 0 var(--space-4)', textWrap: 'balance',
          }}>Conte sua situação. O retorno é nosso.</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 var(--space-6)' }}>
            Atendemos presencialmente em Campo Grande e de forma remota em todo o estado de Mato Grosso do Sul.
          </p>
          {[['map-pin', 'Rua Secador, n. 1, Distrito Nova Itamarati, Ponta Porã/MS'], ['phone', '(67) 99286-4934'], ['mail', 'amorimecostaadvocacia@gmail.com'], ['clock', 'Seg. a Sex., 8h às 18h']].map(([ic, tx]) => (
            <div key={ic} style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: 'var(--space-3)' }}>
              <i data-lucide={ic} style={{ width: 18, height: 18, color: 'var(--brown-600)' }}></i>
              <span style={{ fontSize: '15px', color: 'var(--text-body)' }}>{tx}</span>
            </div>
          ))}
        </div>

        <div style={{
          background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)',
          boxShadow: 'var(--shadow-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-7)',
        }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: 'var(--space-7) 0' }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%', background: 'var(--status-success-bg)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto var(--space-4)',
              }}><i data-lucide="check" style={{ width: 28, height: 28, color: 'var(--status-success-fg)' }}></i></div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-lg)', color: 'var(--text-strong)', margin: '0 0 6px' }}>Mensagem recebida</h3>
              <p style={{ fontSize: '14.5px', color: 'var(--text-muted)', margin: 0 }}>Abrimos o WhatsApp em outra aba com sua mensagem. É só confirmar o envio por lá.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <Badge variant="brown" dot>Resposta em até 1 dia útil</Badge>
              <Input label="Nome completo" required placeholder="Seu nome" value={form.nome} onChange={set('nome')} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                <Input label="Telefone / WhatsApp" required placeholder="(67) 99999-0000" value={form.telefone} onChange={set('telefone')} />
                <Input label="E-mail" type="email" placeholder="voce@email.com" value={form.email} onChange={set('email')} />
              </div>
              <Input label="Resumo do seu caso" placeholder="Ex.: indeferimento de aposentadoria rural" helpText="Você pode anexar documentos depois." value={form.caso} onChange={set('caso')} />
              <Button type="submit" variant="primary" size="lg" fullWidth>Enviar por WhatsApp</Button>
              <p style={{ fontSize: '12px', color: 'var(--text-subtle)', textAlign: 'center', margin: 0 }}>
                Ao enviar, abriremos o WhatsApp com sua mensagem pronta para você confirmar o envio.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.ContactCTA = ContactCTA;