const formStyles = {
  wrap: {
    position: 'relative',
    padding: '120px 0',
    background: 'var(--bg-surface-1)',
    borderTop: '1px solid var(--border-subtle)',
    borderBottom: '1px solid var(--border-subtle)',
    overflow: 'hidden',
  },
  bgGrid: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage:
      'linear-gradient(rgba(232,223,201,0.025) 1px, transparent 1px),' +
      'linear-gradient(90deg, rgba(232,223,201,0.025) 1px, transparent 1px)',
    backgroundSize: '64px 64px',
    maskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)',
    WebkitMaskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)',
  },
  bgGlow: {
    position: 'absolute', top: '30%', left: '50%',
    transform: 'translateX(-50%)',
    width: 900, height: 600,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.07), transparent 65%)',
    pointerEvents: 'none',
  },
  inner: {
    position: 'relative', zIndex: 1,
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
  },
  layout: {
    display: 'grid',
    gridTemplateColumns: '1fr 1.15fr',
    gap: 64,
    alignItems: 'start',
  },
  // Left column
  leftCol: { paddingTop: 8 },
  headline: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(32px, 4vw, 48px)',
    fontWeight: 700,
    letterSpacing: '-0.03em',
    lineHeight: 1.05,
    color: 'var(--fg-1)',
    margin: '14px 0 18px',
  },
  desc: {
    fontSize: 17, lineHeight: 1.65, color: 'var(--fg-2)',
    margin: 0, maxWidth: 460,
  },
  bulletList: {
    listStyle: 'none', padding: 0, margin: '36px 0 0',
    display: 'flex', flexDirection: 'column', gap: 18,
  },
  bullet: {
    display: 'flex', alignItems: 'flex-start', gap: 14,
  },
  bulletDot: {
    width: 28, height: 28, borderRadius: 8,
    background: 'rgba(201,169,110,0.1)',
    border: '1px solid rgba(201,169,110,0.25)',
    color: 'var(--brand-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0, marginTop: 1,
  },
  bulletText: {
    fontSize: 14, color: 'var(--fg-1)', lineHeight: 1.55,
  },
  bulletSub: { color: 'var(--fg-3)', fontSize: 13, marginTop: 2 },

  responseRow: {
    marginTop: 40, padding: 18,
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-lg)',
    background: 'var(--bg-surface-2)',
    display: 'flex', alignItems: 'center', gap: 14,
  },
  respIcon: {
    width: 40, height: 40, borderRadius: 10,
    background: 'rgba(201,169,110,0.1)',
    border: '1px solid rgba(201,169,110,0.25)',
    color: 'var(--brand-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  },
  respText: { display: 'flex', flexDirection: 'column', gap: 2 },
  respTitle: { fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' },
  respSub: { fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' },

  // Right column - the form card
  card: {
    position: 'relative',
    background: 'var(--bg-surface-2)',
    border: '1px solid var(--border-default)',
    borderRadius: 'var(--radius-2xl)',
    padding: 'clamp(32px, 4vw, 44px)',
    boxShadow: '0 0 64px rgba(201,169,110,0.05)',
    overflow: 'hidden',
  },
  cardHairline: {
    position: 'absolute', top: 0, left: 0, right: 0, height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.5), transparent)',
  },
  formHeader: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginBottom: 28, paddingBottom: 18,
    borderBottom: '1px solid var(--border-subtle)',
  },
  formTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 21, fontWeight: 700,
    letterSpacing: '-0.02em',
    color: 'var(--fg-1)',
  },
  formTag: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
    color: 'var(--brand-gold)', letterSpacing: '0.14em',
    padding: '4px 10px',
    background: 'rgba(201,169,110,0.08)',
    border: '1px solid rgba(201,169,110,0.25)',
    borderRadius: 99,
  },
  row: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
    marginBottom: 14,
  },
  rowOne: { marginBottom: 14 },
  field: { display: 'flex', flexDirection: 'column', gap: 7 },
  label: {
    fontSize: 12, fontWeight: 600,
    color: 'var(--fg-2)',
    fontFamily: 'var(--font-body)',
    display: 'flex', alignItems: 'center', gap: 6,
  },
  labelMono: {
    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
    color: 'var(--fg-3)', letterSpacing: '0.12em',
  },
  required: { color: 'var(--brand-gold)', fontSize: 11 },
  inputWrap: { position: 'relative' },
  input: {
    width: '100%',
    background: 'var(--bg-surface-1)',
    border: '1px solid var(--border-default)',
    borderRadius: 'var(--radius-md)',
    padding: '12px 14px',
    fontSize: 14,
    color: 'var(--fg-1)',
    fontFamily: 'var(--font-body)',
    outline: 'none',
    transition: 'all 150ms var(--ease-smooth)',
  },
  inputFocus: {
    borderColor: 'rgba(201,169,110,0.55)',
    background: 'rgba(201,169,110,0.04)',
    boxShadow: '0 0 0 3px rgba(201,169,110,0.12)',
  },
  inputError: {
    borderColor: 'rgba(255, 120, 120, 0.55)',
    boxShadow: '0 0 0 3px rgba(255, 120, 120, 0.1)',
  },
  textarea: {
    minHeight: 110, resize: 'vertical', lineHeight: 1.55,
    fontFamily: 'var(--font-body)',
  },
  select: {
    appearance: 'none',
    backgroundImage: 'none',
    paddingRight: 36,
  },
  selectChevron: {
    position: 'absolute', right: 12, top: '50%',
    transform: 'translateY(-50%)',
    color: 'var(--fg-3)', pointerEvents: 'none',
  },
  errorText: {
    fontSize: 11, color: '#E89B9B', marginTop: 2,
    fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
    display: 'flex', alignItems: 'center', gap: 4,
  },
  submitRow: {
    marginTop: 22,
    display: 'flex', alignItems: 'center', gap: 16,
    flexWrap: 'wrap',
  },
  submit: {
    flex: '1 1 auto',
    minWidth: 200,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    padding: '14px 24px',
    fontFamily: 'var(--font-body)',
    fontSize: 15, fontWeight: 600,
    background: 'var(--brand-gold)',
    color: 'var(--brand-black)',
    border: 'none',
    borderRadius: 'var(--radius-md)',
    cursor: 'pointer',
    transition: 'all 180ms var(--ease-smooth)',
    boxShadow: '0 0 24px rgba(201,169,110,0.20)',
  },
  submitHover: {
    background: 'var(--brand-gold-bright)',
    transform: 'translateY(-1px)',
    boxShadow: '0 0 36px rgba(201,169,110,0.40)',
  },
  submitDisabled: { opacity: 0.55, cursor: 'not-allowed' },
  legalRow: {
    display: 'flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
    letterSpacing: '0.06em',
  },
  spin: { animation: 'bb-spin 0.8s linear infinite' },

  // Success state
  success: {
    position: 'relative',
    padding: '48px 32px',
    textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
  },
  successIcon: {
    width: 64, height: 64, borderRadius: '50%',
    background: 'rgba(201,169,110,0.12)',
    border: '1px solid rgba(201,169,110,0.45)',
    color: 'var(--brand-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 0 48px rgba(201,169,110,0.25)',
    marginBottom: 8,
  },
  successTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 24, fontWeight: 700,
    letterSpacing: '-0.025em', color: 'var(--fg-1)',
  },
  successSub: {
    fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6,
    maxWidth: 380, margin: 0,
  },
  successMeta: {
    marginTop: 8, display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
  },
  successChip: {
    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
    color: 'var(--brand-gold)', letterSpacing: '0.08em',
    padding: '6px 12px',
    border: '1px solid rgba(201,169,110,0.3)',
    background: 'rgba(201,169,110,0.06)',
    borderRadius: 99,
  },
};

const segments = [
  'E-commerce / Varejo',
  'SaaS / Tecnologia',
  'Saúde / Healthtech',
  'Educação',
  'Indústria / Logística',
  'Serviços Financeiros',
  'Imobiliário',
  'Agronegócio',
  'Outro',
];

const challenges = [
  'Reduzir custo operacional',
  'Automatizar atendimento ao cliente',
  'Acelerar vendas / qualificação de leads',
  'Integrar sistemas e dados',
  'Construir agentes / sistemas customizados',
  'Ainda estou avaliando',
];

// ─────────────────────────────────────────────────────────────
// CONFIGURAÇÃO DO SUPABASE
// Preencha com os dados do seu projeto (Settings → API no painel).
// A tabela precisa ter as colunas: nome, empresa, email, whatsapp,
// segmento, desafio, mensagem (todas text), e id/created_at automáticos.
// Use SEMPRE a chave "anon public" — nunca a service_role no front-end.
const SUPABASE_URL  = 'https://smamiehzlfiumxhxkypf.supabase.co';
const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNtYW1pZWh6bGZpdW14aHhreXBmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMzMDc2MDcsImV4cCI6MjA4ODg4MzYwN30.BxkrGotEIABwvAyBMWq2uEGZlCudgHJ4Oq6PytHqiLM';
const SUPABASE_TABLE = 'leads';

const isSupabaseConfigured = () =>
  /^https:\/\/[a-z0-9-]+\.supabase\.co$/i.test(SUPABASE_URL) &&
  SUPABASE_ANON && !SUPABASE_ANON.startsWith('COLE_AQUI');

async function sendToSupabase(values) {
  const res = await fetch(`${SUPABASE_URL}/rest/v1/${SUPABASE_TABLE}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'apikey': SUPABASE_ANON,
      'Authorization': `Bearer ${SUPABASE_ANON}`,
      'Prefer': 'return=minimal',
    },
    body: JSON.stringify({
      nome: values.nome,
      empresa: values.empresa,
      email: values.email,
      whatsapp: values.whatsapp,
      segmento: values.segmento,
      desafio: values.desafio,
      mensagem: values.mensagem || null,
    }),
  });
  if (!res.ok) {
    const detail = await res.text().catch(() => '');
    throw new Error(`Supabase ${res.status}: ${detail}`);
  }
}


function validate(values) {
  const errors = {};
  if (!values.nome || values.nome.trim().length < 2) errors.nome = 'Informe seu nome.';
  if (!values.empresa || values.empresa.trim().length < 2) errors.empresa = 'Informe sua empresa.';
  if (!values.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(values.email)) errors.email = 'E-mail inválido.';
  if (!values.whatsapp || values.whatsapp.replace(/\D/g, '').length < 10) errors.whatsapp = 'WhatsApp inválido.';
  if (!values.segmento) errors.segmento = 'Selecione um segmento.';
  if (!values.desafio) errors.desafio = 'Selecione um desafio.';
  return errors;
}

function formatPhone(v) {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}

function Input({ id, label, hint, error, focused, onFocus, onBlur, ...rest }) {
  return (
    <div style={formStyles.field}>
      <label htmlFor={id} style={formStyles.label}>
        {label}
        <span style={formStyles.required}>*</span>
      </label>
      <div style={formStyles.inputWrap}>
        <input
          id={id}
          style={{
            ...formStyles.input,
            ...(focused ? formStyles.inputFocus : {}),
            ...(error ? formStyles.inputError : {}),
          }}
          onFocus={onFocus} onBlur={onBlur}
          {...rest}
        />
      </div>
      {error
        ? <div style={formStyles.errorText}>
            <IconAlertTriangle size={11} stroke={2} /> {error}
          </div>
        : hint && <div style={{ ...formStyles.errorText, color: 'var(--fg-3)' }}>{hint}</div>}
    </div>
  );
}

function LeadForm() {
  const [values, setValues] = React.useState({
    nome: '', empresa: '', email: '', whatsapp: '',
    segmento: '', desafio: '', mensagem: '',
  });
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});
  const [focused, setFocused] = React.useState(null);
  const [status, setStatus] = React.useState('idle'); // idle | submitting | success | error
  const [btnHover, setBtnHover] = React.useState(false);

  const onChange = (k) => (e) => {
    let v = e.target.value;
    if (k === 'whatsapp') v = formatPhone(v);
    setValues((s) => ({ ...s, [k]: v }));
    if (touched[k]) {
      const next = validate({ ...values, [k]: v });
      setErrors(next);
    }
  };
  const onBlur = (k) => () => {
    setTouched((s) => ({ ...s, [k]: true }));
    setFocused(null);
    setErrors(validate(values));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const allTouched = Object.keys(values).reduce((a, k) => (a[k] = true, a), {});
    setTouched(allTouched);
    const errs = validate(values);
    setErrors(errs);
    if (Object.keys(errs).length) {
      // focus the first error field
      const first = Object.keys(errs)[0];
      document.getElementById(first)?.focus();
      return;
    }
    setStatus('submitting');
    try {
      if (isSupabaseConfigured()) {
        await sendToSupabase(values);
      } else {
        // Supabase ainda não configurado — simula o envio para demonstração.
        console.warn('[Black Bear AI] Supabase não configurado: defina SUPABASE_URL e SUPABASE_ANON em LeadForm.jsx.');
        await new Promise((r) => setTimeout(r, 1200));
      }
      setStatus('success');
    } catch (err) {
      console.error('[Black Bear AI] Falha ao enviar lead:', err);
      setStatus('error');
    }
  };

  const reset = () => {
    setValues({ nome: '', empresa: '', email: '', whatsapp: '',
      segmento: '', desafio: '', mensagem: '' });
    setErrors({}); setTouched({}); setStatus('idle');
  };

  const fError = (k) => touched[k] ? errors[k] : null;

  return (
    <section style={formStyles.wrap} id="contato">
      <div style={formStyles.bgGrid}></div>
      <div style={formStyles.bgGlow}></div>

      <div style={formStyles.inner}>
        <div data-grid="lead" style={formStyles.layout}>
          {/* Left */}
          <div style={formStyles.leftCol}>
            <div className="bb-eyebrow">Diagnóstico gratuito</div>
            <h2 style={formStyles.headline}>
              30 minutos para entender<br />
              <span className="bb-gold">se a IA serve para sua empresa.</span>
            </h2>
            <p style={formStyles.desc}>
              Você nos conta seu maior gargalo operacional. Voltamos com um
              diagnóstico técnico, estimativa de ROI e — se fizer sentido —
              uma proposta de implementação.
            </p>

            <ul style={formStyles.bulletList}>
              <li style={formStyles.bullet}>
                <span style={formStyles.bulletDot}><IconCheck size={14} stroke={2.5} /></span>
                <div>
                  <div style={formStyles.bulletText}>Conversa direta com quem constrói as automações</div>
                  <div style={formStyles.bulletSub}>Sem SDR, sem deck de pré-venda.</div>
                </div>
              </li>
              <li style={formStyles.bullet}>
                <span style={formStyles.bulletDot}><IconCheck size={14} stroke={2.5} /></span>
                <div>
                  <div style={formStyles.bulletText}>Confidencialidade garantida</div>
                  <div style={formStyles.bulletSub}>O que você compartilhar fica entre nós.</div>
                </div>
              </li>
              <li style={formStyles.bullet}>
                <span style={formStyles.bulletDot}><IconCheck size={14} stroke={2.5} /></span>
                <div>
                  <div style={formStyles.bulletText}>Diagnóstico técnico por escrito</div>
                  <div style={formStyles.bulletSub}>Mesmo que você não feche conosco.</div>
                </div>
              </li>
              <li style={formStyles.bullet}>
                <span style={formStyles.bulletDot}><IconCheck size={14} stroke={2.5} /></span>
                <div>
                  <div style={formStyles.bulletText}>Sem compromisso, sem custo</div>
                  <div style={formStyles.bulletSub}>Se não fizer sentido, você sai com clareza.</div>
                </div>
              </li>
            </ul>

            <div style={formStyles.responseRow}>
              <div style={formStyles.respIcon}>
                <IconMessageCircle size={18} />
              </div>
              <div style={formStyles.respText}>
                <div style={formStyles.respTitle}>Retorno rápido e direto</div>
                <div style={formStyles.respSub}>// ATENDIMENTO DIRETO · SEG–SEX</div>
              </div>
            </div>
          </div>

          {/* Right - form card */}
          <div style={formStyles.card}>
            <div style={formStyles.cardHairline}></div>

            {status === 'success' ? (
              <div style={formStyles.success}>
                <div style={formStyles.successIcon}>
                  <IconCheckCircle size={32} stroke={1.8} />
                </div>
                <div style={formStyles.successTitle}>Solicitação recebida.</div>
                <p style={formStyles.successSub}>
                  A Black Bear AI vai entrar em contato em breve no e-mail{' '}
                  <strong style={{ color: 'var(--fg-1)' }}>{values.email}</strong> e
                  pelo WhatsApp <strong style={{ color: 'var(--fg-1)' }}>{values.whatsapp}</strong>.
                </p>
                <div style={formStyles.successMeta}>
                  <div style={formStyles.successChip}>// PROTOCOLO #BB-{Math.floor(Math.random() * 90000 + 10000)}</div>
                  <div style={formStyles.successChip}>// RETORNO EM BREVE</div>
                </div>
                <button
                  type="button"
                  className="btn btn-ghost"
                  style={{ marginTop: 16 }}
                  onClick={reset}
                >
                  Enviar outra solicitação
                </button>
              </div>
            ) : (
              <form onSubmit={onSubmit} noValidate>
                <div style={formStyles.formHeader}>
                  <div style={formStyles.formTitle}>Solicitar Contato</div>
                  <div style={formStyles.formTag}>
                    <IconLock size={10} stroke={2} />
                    LGPD · CRIPTOGRAFADO
                  </div>
                </div>

                <div style={formStyles.row}>
                  <Input
                    id="nome" name="nome" label="Nome completo"
                    placeholder="Como podemos te chamar?"
                    autoComplete="name"
                    value={values.nome} onChange={onChange('nome')}
                    focused={focused === 'nome'}
                    onFocus={() => setFocused('nome')}
                    onBlur={onBlur('nome')}
                    error={fError('nome')}
                  />
                  <Input
                    id="empresa" name="empresa" label="Empresa"
                    placeholder="Nome da empresa"
                    autoComplete="organization"
                    value={values.empresa} onChange={onChange('empresa')}
                    focused={focused === 'empresa'}
                    onFocus={() => setFocused('empresa')}
                    onBlur={onBlur('empresa')}
                    error={fError('empresa')}
                  />
                </div>

                <div style={formStyles.row}>
                  <Input
                    id="email" name="email" label="E-mail corporativo"
                    type="email" placeholder="voce@empresa.com.br"
                    autoComplete="email"
                    value={values.email} onChange={onChange('email')}
                    focused={focused === 'email'}
                    onFocus={() => setFocused('email')}
                    onBlur={onBlur('email')}
                    error={fError('email')}
                  />
                  <Input
                    id="whatsapp" name="whatsapp" label="WhatsApp"
                    placeholder="(11) 99999-9999"
                    autoComplete="tel"
                    inputMode="tel"
                    value={values.whatsapp} onChange={onChange('whatsapp')}
                    focused={focused === 'whatsapp'}
                    onFocus={() => setFocused('whatsapp')}
                    onBlur={onBlur('whatsapp')}
                    error={fError('whatsapp')}
                  />
                </div>

                <div style={formStyles.row}>
                  <div style={formStyles.field}>
                    <label htmlFor="segmento" style={formStyles.label}>
                      Segmento da empresa <span style={formStyles.required}>*</span>
                    </label>
                    <div style={formStyles.inputWrap}>
                      <select
                        id="segmento"
                        style={{
                          ...formStyles.input, ...formStyles.select,
                          ...(focused === 'segmento' ? formStyles.inputFocus : {}),
                          ...(fError('segmento') ? formStyles.inputError : {}),
                          color: values.segmento ? 'var(--fg-1)' : 'var(--fg-3)',
                        }}
                        value={values.segmento} onChange={onChange('segmento')}
                        onFocus={() => setFocused('segmento')}
                        onBlur={onBlur('segmento')}
                      >
                        <option value="" disabled>Selecione…</option>
                        {segments.map((s) => <option key={s} value={s}>{s}</option>)}
                      </select>
                      <span style={formStyles.selectChevron}><IconChevronDown size={16} /></span>
                    </div>
                    {fError('segmento') && (
                      <div style={formStyles.errorText}>
                        <IconAlertTriangle size={11} stroke={2} /> {fError('segmento')}
                      </div>
                    )}
                  </div>

                  <div style={formStyles.field}>
                    <label htmlFor="desafio" style={formStyles.label}>
                      Desafio atual <span style={formStyles.required}>*</span>
                    </label>
                    <div style={formStyles.inputWrap}>
                      <select
                        id="desafio"
                        style={{
                          ...formStyles.input, ...formStyles.select,
                          ...(focused === 'desafio' ? formStyles.inputFocus : {}),
                          ...(fError('desafio') ? formStyles.inputError : {}),
                          color: values.desafio ? 'var(--fg-1)' : 'var(--fg-3)',
                        }}
                        value={values.desafio} onChange={onChange('desafio')}
                        onFocus={() => setFocused('desafio')}
                        onBlur={onBlur('desafio')}
                      >
                        <option value="" disabled>Selecione…</option>
                        {challenges.map((c) => <option key={c} value={c}>{c}</option>)}
                      </select>
                      <span style={formStyles.selectChevron}><IconChevronDown size={16} /></span>
                    </div>
                    {fError('desafio') && (
                      <div style={formStyles.errorText}>
                        <IconAlertTriangle size={11} stroke={2} /> {fError('desafio')}
                      </div>
                    )}
                  </div>
                </div>

                <div style={formStyles.rowOne}>
                  <div style={formStyles.field}>
                    <label htmlFor="mensagem" style={formStyles.label}>
                      Mensagem <span style={{ ...formStyles.required, color: 'var(--fg-3)' }}>(opcional)</span>
                    </label>
                    <textarea
                      id="mensagem"
                      placeholder="Conta um pouco do contexto, volume de operação, ferramentas atuais — o que ajudar a chegar preparado."
                      style={{
                        ...formStyles.input, ...formStyles.textarea,
                        ...(focused === 'mensagem' ? formStyles.inputFocus : {}),
                      }}
                      value={values.mensagem} onChange={onChange('mensagem')}
                      onFocus={() => setFocused('mensagem')}
                      onBlur={() => setFocused(null)}
                    />
                  </div>
                </div>

                <div style={formStyles.submitRow}>
                  <button
                    type="submit"
                    disabled={status === 'submitting'}
                    onMouseEnter={() => setBtnHover(true)}
                    onMouseLeave={() => setBtnHover(false)}
                    style={{
                      ...formStyles.submit,
                      ...(btnHover && status !== 'submitting' ? formStyles.submitHover : {}),
                      ...(status === 'submitting' ? formStyles.submitDisabled : {}),
                    }}
                  >
                    {status === 'submitting' ? (
                      <>
                        <span style={formStyles.spin}><IconLoader size={16} stroke={2} /></span>
                        Enviando…
                      </>
                    ) : (
                      <>
                        Solicitar Contato
                        <IconArrowRight size={16} stroke={2} />
                      </>
                    )}
                  </button>
                  <div style={formStyles.legalRow}>
                    <IconShield size={12} />
                    LGPD · DADOS SEGUROS
                  </div>
                </div>

                {status === 'error' && (
                  <div style={{
                    marginTop: 16, padding: '12px 14px',
                    borderRadius: 'var(--radius-md)',
                    border: '1px solid rgba(255,120,120,0.4)',
                    background: 'rgba(255,120,120,0.06)',
                    display: 'flex', alignItems: 'center', gap: 10,
                    fontSize: 13, color: '#E89B9B',
                  }}>
                    <IconAlertTriangle size={15} stroke={2} />
                    Não foi possível enviar agora. Tente novamente ou fale direto pelo WhatsApp (11) 94180-7489.
                  </div>
                )}
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LeadForm });