// Form section with validation + success state
const FormSection = () => {
  const [data, setData] = React.useState({
    nome: "", whatsapp: "", cidade: "", perfil: "", situacao: "", prazo: "",
  });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const update = (k, v) => {
    setData(d => ({ ...d, [k]: v }));
    if (errors[k]) setErrors(e => { const n = { ...e }; delete n[k]; return n; });
  };

  // whatsapp mask
  const maskPhone = (v) => {
    v = v.replace(/\D/g, "").slice(0, 11);
    if (v.length <= 2) return v;
    if (v.length <= 7) return `(${v.slice(0,2)}) ${v.slice(2)}`;
    return `(${v.slice(0,2)}) ${v.slice(2,7)}-${v.slice(7)}`;
  };

  const SHEET_URL = "https://script.google.com/macros/s/AKfycbxNdMfZpABDDCce-NGK9nli5T6xMHVqylCX-l5HhlW4ycTT7WYZc89yEVc508iqBo1b6g/exec";

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.nome.trim()) errs.nome = true;
    if (!data.whatsapp.replace(/\D/g, "") || data.whatsapp.replace(/\D/g, "").length < 10) errs.whatsapp = true;
    if (!data.cidade.trim()) errs.cidade = true;
    if (!data.perfil) errs.perfil = true;
    if (!data.situacao) errs.situacao = true;
    if (!data.prazo) errs.prazo = true;
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    setSending(true);
    await new Promise((resolve) => {
      const cbName = "_sheetCb" + Date.now();
      let done = false;
      const finish = () => { if (done) return; done = true; delete window[cbName]; resolve(); };
      window[cbName] = finish;
      const s = document.createElement("script");
      s.src = `${SHEET_URL}?${new URLSearchParams({ ...data, callback: cbName })}`;
      s.onload = finish;
      s.onerror = finish;
      document.head.appendChild(s);
      setTimeout(finish, 8000);
    });
    setSending(false);
    setSent(true);
  };

  if (sent) {
    return (
      <div className="form-card">
        <div className="form-success">
          <svg width="72" height="72" viewBox="0 0 72 72" fill="none">
            <circle cx="36" cy="36" r="34" fill="#1a7a4a" opacity="0.12"/>
            <circle cx="36" cy="36" r="26" fill="#1a7a4a"/>
            <path d="M24 36 L32 44 L48 28" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
          <h3>Recebemos seu pedido, {data.nome.split(" ")[0]}!</h3>
          <p>A Aline entrará em contato em até 24 horas pelo WhatsApp informado.</p>
        </div>
      </div>
    );
  }

  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className={`form-row ${errors.nome ? "err" : ""}`}>
        <label htmlFor="f-nome">Nome completo</label>
        <input id="f-nome" type="text" value={data.nome} onChange={e => update("nome", e.target.value)} placeholder="Como devemos chamar você"/>
      </div>
      <div className={`form-row ${errors.whatsapp ? "err" : ""}`}>
        <label htmlFor="f-wpp">WhatsApp</label>
        <input id="f-wpp" type="tel" inputMode="numeric" value={data.whatsapp} onChange={e => update("whatsapp", maskPhone(e.target.value))} placeholder="(51) 99999-9999"/>
      </div>
      <div className={`form-row ${errors.cidade ? "err" : ""}`}>
        <label htmlFor="f-cidade">Cidade / RS</label>
        <input id="f-cidade" type="text" value={data.cidade} onChange={e => update("cidade", e.target.value)} placeholder="Ex.: Porto Alegre"/>
      </div>
      <div className={`form-row ${errors.perfil ? "err" : ""}`}>
        <label htmlFor="f-perfil">Qual é o seu perfil?</label>
        <select id="f-perfil" value={data.perfil} onChange={e => update("perfil", e.target.value)}>
          <option value="">Selecione seu perfil</option>
          <option>Família TEA — tenho filho(a) com diagnóstico de autismo</option>
          <option>Pessoa com Deficiência — física, visual, auditiva ou mental</option>
          <option>Representante legal de pessoa com deficiência</option>
          <option>Taxista com alvará municipal</option>
          <option>Ainda não sei / quero entender</option>
        </select>
      </div>
      <div className={`form-row ${errors.situacao ? "err" : ""}`}>
        <label htmlFor="f-sit">Situação atual</label>
        <select id="f-sit" value={data.situacao} onChange={e => update("situacao", e.target.value)}>
          <option value="">Selecione sua situação</option>
          <option>Tenho a documentação completa</option>
          <option>Tenho parcialmente</option>
          <option>Ainda não tenho</option>
        </select>
      </div>
      <div className={`form-row ${errors.prazo ? "err" : ""}`}>
        <label htmlFor="f-prazo">Pretendo comprar o veículo em:</label>
        <select id="f-prazo" value={data.prazo} onChange={e => update("prazo", e.target.value)}>
          <option value="">Selecione o prazo</option>
          <option>Em até 3 meses</option>
          <option>Entre 3 e 6 meses</option>
          <option>Pesquisando ainda</option>
        </select>
      </div>
      <button type="submit" className="btn btn-navy" style={{ width: "100%", marginTop: 6 }} disabled={sending}>
        {sending ? "Enviando…" : "Quero minha orientação gratuita"}
        {!sending && <Icon name="arrow-right" size={16}/>}
      </button>
      <p style={{ fontSize: 12, color: "#43474f", marginTop: 14, textAlign: "center" }}>
        Resposta em até 24 horas · Sem compromisso · Análise gratuita
      </p>
    </form>
  );
};

window.FormSection = FormSection;