function QuoteForm() {
  const [f, setF] = React.useState({ name: '', phone: '', city: 'Uberlândia', service: 'Escavação para piscina', message: '' });
  const services = [
    'Escavação para piscina',
    'Viga baldrame / fundações',
    'Valeta para irrigação',
    'Escavação para radier',
    'Terraplanagem para contra piso',
    'Perfuração de buracos',
    'Outro / preciso de orientação',
  ];

  const submit = (e) => {
    e.preventDefault();
    if (!f.name || !f.phone) return alert('Informe ao menos nome e WhatsApp.');
    const text = encodeURIComponent(
      `Olá, sou ${f.name}.\nServiço: ${f.service}\nCidade: ${f.city}\nTelefone: ${f.phone}` +
        (f.message ? `\n\n${f.message}` : '')
    );
    window.open(`${window.WHATSAPP_URL}?text=${text}`, '_blank');
  };

  return (
    <section id="contact" className="py-20 bg-gradient-hero">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-14 max-w-6xl mx-auto">
          {/* Left — contact */}
          <div className="text-white">
            <div className="text-xs font-semibold tracking-[0.12em] uppercase text-accent mb-3">
              Contato
            </div>
            <h2 className="text-3xl md:text-4xl font-bold leading-tight mb-4">
              Mande os detalhes da sua obra — respondemos rápido.
            </h2>
            <p className="text-white/80 text-base leading-relaxed mb-8">
              Segunda a sábado, das 7h às 18h. Atendimento por WhatsApp e visita técnica em Uberlândia.
            </p>

            <div className="space-y-5">
              {[
                { i: 'phone', t: 'Telefone / WhatsApp', s: window.WHATSAPP_DISPLAY },
                { i: 'map-pin', t: 'Endereço', s: 'Rua do Comerciário, 384 — Uberlândia, MG' },
                { i: 'clock', t: 'Horário', s: 'Segunda a sábado · 7h às 18h' },
              ].map((c) => (
                <div key={c.t} className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-11 h-11 rounded-full bg-accent text-white flex items-center justify-center">
                    <Icon name={c.i} size={20} />
                  </div>
                  <div>
                    <div className="font-semibold">{c.t}</div>
                    <div className="text-white/75 text-sm mt-0.5">{c.s}</div>
                  </div>
                </div>
              ))}
            </div>

            <button
              onClick={() => window.open(window.WHATSAPP_URL, '_blank')}
              className="mt-8 inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent/90 text-white font-bold rounded-lg px-6 py-3.5 shadow-glow transition-smooth"
            >
              <Icon name="message-circle" size={20} />
              Chamar direto no WhatsApp
            </button>
          </div>

          {/* Right — form card */}
          <form
            onSubmit={submit}
            className="bg-white rounded-lg p-6 md:p-8 shadow-elegant"
          >
            <div className="text-primary font-bold text-lg mb-1">Solicitar orçamento</div>
            <div className="text-muted-foreground text-sm mb-6">
              Sem compromisso · respondemos em minutos.
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Field label="Nome" required>
                <input
                  className="input"
                  placeholder="João Silva"
                  value={f.name}
                  onChange={(e) => setF({ ...f, name: e.target.value })}
                />
              </Field>
              <Field label="WhatsApp" required>
                <input
                  className="input"
                  placeholder="(34) 99999-9999"
                  inputMode="tel"
                  value={f.phone}
                  onChange={(e) => setF({ ...f, phone: e.target.value })}
                />
              </Field>
              <Field label="Cidade">
                <input
                  className="input"
                  value={f.city}
                  onChange={(e) => setF({ ...f, city: e.target.value })}
                />
              </Field>
              <Field label="Tipo de serviço">
                <select
                  className="input"
                  value={f.service}
                  onChange={(e) => setF({ ...f, service: e.target.value })}
                >
                  {services.map((s) => (
                    <option key={s}>{s}</option>
                  ))}
                </select>
              </Field>
              <Field label="Mensagem (opcional)" full>
                <textarea
                  rows={3}
                  className="input resize-none"
                  placeholder="Conte um pouco sobre a obra — tamanho do local, prazo, acesso…"
                  value={f.message}
                  onChange={(e) => setF({ ...f, message: e.target.value })}
                />
              </Field>
            </div>

            <button
              type="submit"
              className="mt-6 w-full inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent/90 text-white font-bold rounded-lg py-4 shadow-glow transition-smooth"
            >
              <Icon name="message-circle" size={20} />
              Enviar orçamento pelo WhatsApp
            </button>
            <p className="text-center text-muted-foreground text-xs mt-3">
              Ao enviar, abre uma conversa pronta no WhatsApp com os dados preenchidos.
            </p>
          </form>
        </div>
      </div>

      <style>{`
        .input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid hsl(210 20% 88%); background: #fff; font-family: inherit; font-size: 14px; color: hsl(210 60% 15%); outline: none; transition: all .2s; }
        .input:focus { border-color: hsl(210 100% 45%); box-shadow: 0 0 0 3px hsl(210 100% 45% / .15); }
      `}</style>
    </section>
  );
}

function Field({ label, required, full, children }) {
  return (
    <label className={`block ${full ? 'sm:col-span-2' : ''}`}>
      <span className="block text-xs font-semibold text-primary mb-1.5">
        {label}{required && <span className="text-accent ml-1">*</span>}
      </span>
      {children}
    </label>
  );
}

window.QuoteForm = QuoteForm;