const formStyles = {
  section: {
    background: 'var(--form-grad)',
    color: 'white', position: 'relative', overflow: 'hidden',
  },
  grid: {
    display: 'grid', gridTemplateColumns: '1fr', gap: 40, alignItems: 'start',
  },
  title: { fontSize: 'clamp(28px, 5.5vw, 46px)', color: 'white', marginBottom: 14 },
  lead: { fontSize: 'clamp(15px, 2.4vw, 17px)', color: 'rgba(255,255,255,.75)', lineHeight: 1.6, marginBottom: 28 },
  infoList: { display: 'flex', flexDirection: 'column', gap: 18 },
  infoItem: { display: 'flex', alignItems: 'center', gap: 16 },
  infoIcon: {
    width: 48, height: 48, borderRadius: 12,
    background: 'rgba(255,255,255,.08)',
    border: '1px solid rgba(255,255,255,.1)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  },
  infoLabel: { fontSize: 13, color: 'rgba(255,255,255,.6)', fontWeight: 600 },
  infoValue: { fontSize: 17, color: 'white', fontWeight: 700 },

  card: {
    background: 'white', borderRadius: 22, padding: 'clamp(22px, 5vw, 32px)',
    color: 'var(--text)',
    boxShadow: '0 30px 80px rgba(0,0,0,.25)',
  },
  formTitle: { fontSize: 22, fontFamily: 'Archivo', fontWeight: 800, color: 'var(--navy-800)', marginBottom: 4 },
  formSub: { fontSize: 14, color: 'var(--silver-700)', marginBottom: 24 },
  field: { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 },
  label: { fontSize: 13, fontWeight: 600, color: 'var(--navy-800)' },
  input: {
    padding: '13px 14px', fontSize: 15,
    border: '1.5px solid var(--silver-100)', borderRadius: 10,
    fontFamily: 'inherit', color: 'var(--text)',
    background: 'var(--bg)',
    outline: 'none', transition: 'all .2s ease',
  },
  textarea: {
    padding: '13px 14px', fontSize: 15,
    border: '1.5px solid var(--silver-100)', borderRadius: 10,
    fontFamily: 'inherit', color: 'var(--text)',
    background: 'var(--bg)',
    outline: 'none', resize: 'vertical', minHeight: 90,
  },
  submit: {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    width: '100%',
    background: 'var(--whatsapp)', color: 'white',
    padding: '16px 20px', borderRadius: 12,
    fontWeight: 700, fontSize: 16,
    boxShadow: '0 10px 24px rgba(37,211,102,.4)',
    transition: 'all .2s ease',
    marginTop: 8,
  },
  success: {
    background: 'rgba(31,169,113,.08)',
    border: '1.5px dashed #1FA971',
    borderRadius: 12, padding: 20, textAlign: 'center',
    color: 'var(--navy-800)',
  },
  disclaimer: { fontSize: 12, color: 'var(--silver-500)', marginTop: 12, textAlign: 'center' },
};

function ContactForm() {
  const [form, setForm] = React.useState({ name: '', phone: '', problem: '', service: 'Não sei dizer' });
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    const msg = `Olá! Vim pelo site.%0A%0A*Nome:* ${encodeURIComponent(form.name)}%0A*Telefone:* ${encodeURIComponent(form.phone)}%0A*Serviço:* ${encodeURIComponent(form.service)}%0A*Problema:* ${encodeURIComponent(form.problem)}`;
    window.open(waLink(msg), '_blank');
    setSent(true);
  };

  return (
    <section style={formStyles.section} id="contato">
      <div className="container">
        <div className="form-grid" style={formStyles.grid}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'rgba(255,255,255,.08)', padding: '8px 14px', borderRadius: 999,
              fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.9)',
              border: '1px solid rgba(255,255,255,.12)', marginBottom: 20,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 50, background: 'var(--success)', boxShadow: '0 0 0 4px rgba(31,169,113,.25)' }}></span>
              Fale com a gente
            </div>
            <h2 style={formStyles.title}>Vamos resolver<br/>seu problema hoje</h2>
            <p style={formStyles.lead}>
              Preencha o formulário ou chame direto no WhatsApp. Respondemos rápido, normalmente em poucos minutos, com um orçamento sem compromisso.
            </p>

            <div style={formStyles.infoList}>
              <a href={waLink()} target="_blank" rel="noopener" style={{ ...formStyles.infoItem, color: 'white' }}>
                <div style={formStyles.infoIcon}>
                  <IconWhatsApp size={22} color="#25D366"/>
                </div>
                <div>
                  <div style={formStyles.infoLabel}>WhatsApp (preferencial)</div>
                  <div style={formStyles.infoValue}>{WHATSAPP_DISPLAY}</div>
                </div>
              </a>
              <div style={formStyles.infoItem}>
                <div style={formStyles.infoIcon}>
                  <IconMapPin size={22} color="white"/>
                </div>
                <div>
                  <div style={formStyles.infoLabel}>Atendimento em</div>
                  <div style={formStyles.infoValue}>Maricá — RJ e região</div>
                </div>
              </div>
              <div style={formStyles.infoItem}>
                <div style={formStyles.infoIcon}>
                  <IconClock size={22} color="white"/>
                </div>
                <div>
                  <div style={formStyles.infoLabel}>Horário</div>
                  <div style={formStyles.infoValue}>Seg a Sáb • 8h às 20h</div>
                </div>
              </div>
            </div>
          </div>

          <div style={formStyles.card}>
            {sent ? (
              <div>
                <div style={{ textAlign: 'center', marginBottom: 20 }}>
                  <div style={{ width: 64, height: 64, borderRadius: 50, background: 'rgba(31,169,113,.15)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IconCheck size={32} color="#1FA971"/>
                  </div>
                </div>
                <div style={{ ...formStyles.formTitle, textAlign: 'center' }}>Abrindo o WhatsApp...</div>
                <div style={{ ...formStyles.formSub, textAlign: 'center', marginBottom: 20 }}>
                  Estamos te encaminhando para finalizar o contato direto com a gente.
                </div>
                <div style={formStyles.success}>
                  Se o WhatsApp não abriu, <a href={waLink()} target="_blank" rel="noopener" style={{ color: 'var(--navy-700)', fontWeight: 700 }}>clique aqui</a>.
                </div>
                <button onClick={() => setSent(false)} style={{ ...formStyles.submit, background: 'var(--bg)', color: 'var(--navy-800)', marginTop: 16, boxShadow: 'none' }}>
                  Enviar outra mensagem
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div style={formStyles.formTitle}>Solicite seu orçamento grátis</div>
                <div style={formStyles.formSub}>Vai abrir uma conversa no WhatsApp com seus dados já preenchidos.</div>

                <div style={formStyles.field}>
                  <label style={formStyles.label}>Seu nome</label>
                  <input required style={formStyles.input} className="inp" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Ex: Maria Silva"/>
                </div>
                <div style={formStyles.field}>
                  <label style={formStyles.label}>Telefone (WhatsApp)</label>
                  <input required style={formStyles.input} className="inp" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="(21) 00000-0000"/>
                </div>
                <div style={formStyles.field}>
                  <label style={formStyles.label}>Qual serviço você precisa?</label>
                  <select style={formStyles.input} className="inp" value={form.service} onChange={e => setForm({ ...form, service: e.target.value })}>
                    <option>Não sei dizer — preciso de ajuda</option>
                    <option>Computador lento / travando</option>
                    <option>Vírus / pop-ups estranhos</option>
                    <option>Formatação / Windows</option>
                    <option>Upgrade (SSD, memória)</option>
                    <option>Backup / recuperar arquivos</option>
                    <option>Instalar programa ou impressora</option>
                    <option>Rede / Wi-Fi / internet instável</option>
                    <option>PC não liga / tela azul</option>
                    <option>Suporte remoto</option>
                    <option>Atendimento para empresa</option>
                  </select>
                </div>
                <div style={formStyles.field}>
                  <label style={formStyles.label}>Conte o que está acontecendo <span style={{ color: 'var(--silver-500)', fontWeight: 400 }}>(opcional)</span></label>
                  <textarea style={formStyles.textarea} className="inp" value={form.problem} onChange={e => setForm({ ...form, problem: e.target.value })} placeholder="Ex: Meu notebook tá muito lento e demora pra abrir as coisas..."></textarea>
                </div>

                <button type="submit" className="submit-btn" style={formStyles.submit}>
                  <IconWhatsApp size={20} color="white"/>
                  Enviar e falar no WhatsApp
                </button>
                <div style={formStyles.disclaimer}>
                  Seus dados só são usados para entrarmos em contato. Sem spam.
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
      <style>{`
        .inp:focus { border-color: var(--navy-500); background: white; box-shadow: 0 0 0 4px rgba(30,58,111,.1); }
        .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,.5); }
        @media (min-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr !important; gap: 56px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { ContactForm });