function Contact() {
  const [form, setForm] = React.useState({
    name: "", role: "sindico", units: "", city: "", phone: "", email: "", current: "", message: ""
  });
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});

  // ─── Brazilian phone formatter (auto-mask: (XX) XXXXX-XXXX ou (XX) XXXX-XXXX) ───
  const formatPhone = (raw) => {
    const d = (raw || "").replace(/\D/g, "").slice(0, 11);
    if (d.length === 0) return "";
    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)}`;
  };

  // ─── Validators ────────────────────────────────────────────────────────
  const validateEmail = (v) => {
    if (!v) return "Informe o e-mail.";
    // RFC 5322 simplificado, mas suficiente: usuário@domínio.tld + ao menos 2 letras no TLD
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
    if (!re.test(v)) return "E-mail inválido. Ex.: nome@dominio.com";
    return "";
  };

  const validatePhone = (v) => {
    if (!v) return "Informe o WhatsApp.";
    const d = v.replace(/\D/g, "");
    // Brasil: DDD válido (11–99) + 9 dígitos (celular) ou 8 dígitos (fixo)
    if (d.length < 10 || d.length > 11) return "WhatsApp deve ter 10 ou 11 dígitos com DDD.";
    const ddd = parseInt(d.slice(0, 2), 10);
    if (ddd < 11 || ddd > 99) return "DDD inválido.";
    if (d.length === 11 && d[2] !== "9") return "Celular deve começar com 9 após o DDD.";
    return "";
  };

  const validateName = (v) => {
    if (!v || v.trim().length < 2) return "Informe o nome completo.";
    return "";
  };

  const validators = {
    name: validateName,
    email: validateEmail,
    phone: validatePhone,
  };

  // ─── Handlers ──────────────────────────────────────────────────────────
  const handle = (k) => (e) => {
    let val = e.target.value;
    if (k === "phone") val = formatPhone(val);
    setForm({ ...form, [k]: val });
    // limpa erro do campo enquanto digita (re-valida só ao sair)
    if (errors[k] && validators[k]) {
      const next = validators[k](val);
      if (!next) setErrors({ ...errors, [k]: "" });
    }
  };

  const handleBlur = (k) => () => {
    setTouched({ ...touched, [k]: true });
    if (validators[k]) {
      const err = validators[k](form[k]);
      setErrors({ ...errors, [k]: err });
    }
  };

  // Intercepta o submit para validar tudo antes de deixar o form ir
  const handleSubmit = (e) => {
    const nameErr = validateName(form.name);
    const emailErr = validateEmail(form.email);
    const phoneErr = validatePhone(form.phone);
    if (nameErr || emailErr || phoneErr) {
      e.preventDefault();
      setErrors({ name: nameErr, email: emailErr, phone: phoneErr });
      setTouched({ name: true, email: true, phone: true });
      // Foca no primeiro campo com erro
      const firstError = nameErr ? "name" : emailErr ? "email" : "phone";
      const el = document.querySelector(`[data-field="${firstError}"]`);
      if (el) el.focus();
    }
  };

  const roleLabel = {
    sindico: "Síndico(a) do condomínio",
    conselho: "Conselheiro(a) fiscal",
    condomino: "Condômino interessado",
    incorporadora: "Incorporadora / construtora",
    outro: "Outro"
  }[form.role] || form.role;

  // Endpoint próprio na Hostinger (PHP). Substitui o FormSubmit, que tinha
  // dependência externa e podia cair (erro 522). Agora o e-mail sai pela
  // própria infra da Hostinger via PHP mail().
  const FORM_ACTION = "/enviar.php";

  return (
    <main data-screen-label="Contato">
      <section style={{ background: "var(--navy-900)", color: "var(--cream-50)", padding: "100px 0 110px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(at 90% 10%, rgba(212, 162, 76, 0.2), transparent 50%)" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 880 }}>
            <div className="h-eyebrow on-dark">Vamos conversar?</div>
            <h1 className="h-display" style={{ fontSize: "clamp(48px, 5.5vw, 78px)", marginTop: 26, color: "var(--cream-50)" }}>
              Fale com a Condominize. <em>Sem compromisso.</em>
            </h1>
            <p style={{ fontSize: 19, color: "rgba(251,249,243,0.75)", marginTop: 28, maxWidth: 640, lineHeight: 1.55 }}>
              Conversa inicial sem compromisso. A gente conhece o seu condomínio, entende o que está
              acontecendo hoje e mostra como pode melhorar — com clareza e sem pressão.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-form">
              <form
                action={FORM_ACTION}
                method="POST"
                acceptCharset="UTF-8"
                onSubmit={handleSubmit}
                noValidate>
                {/* honeypot anti-spam — bots preenchem, humanos ignoram */}
                <input type="text" name="_honey" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />

                <div className="field">
                  <label>Nome completo</label>
                  <input
                    data-field="name"
                    name="nome"
                    required
                    value={form.name}
                    onChange={handle("name")}
                    onBlur={handleBlur("name")}
                    aria-invalid={!!errors.name}
                    className={errors.name ? "field-error" : ""}
                    placeholder="Maria Silva" />
                  {errors.name && <span className="field-msg">{errors.name}</span>}
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>Eu sou</label>
                    <select name="papel" value={form.role} onChange={handle("role")}>
                      <option value="sindico">Síndico(a) do condomínio</option>
                      <option value="conselho">Conselheiro(a) fiscal</option>
                      <option value="condomino">Condômino interessado</option>
                      <option value="incorporadora">Incorporadora / construtora</option>
                      <option value="outro">Outro</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Unidades no condomínio</label>
                    <input
                      name="unidades"
                      type="number"
                      min="2"
                      placeholder="Ex.: 48"
                      value={form.units}
                      onChange={handle("units")} />
                  </div>
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>Cidade</label>
                    <select name="cidade" value={form.city} onChange={handle("city")}>
                      <option value="">Selecione</option>
                      <option>Saquarema</option>
                      <option>Cabo Frio</option>
                      <option>Maricá</option>
                      <option>Búzios</option>
                      <option>Arraial do Cabo</option>
                      <option>Araruama</option>
                      <option>São Pedro da Aldeia</option>
                      <option>Iguaba Grande</option>
                      <option>Outra cidade da Região dos Lagos</option>
                      <option>Outra cidade do RJ</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Hoje o condomínio tem administradora?</label>
                    <select name="adm" value={form.current} onChange={handle("current")}>
                      <option value="">Selecione</option>
                      <option>Sim, temos administradora atualmente</option>
                      <option>Não, só temos síndico voluntário</option>
                      <option>Estamos buscando trocar de administradora</option>
                      <option>É um condomínio novo (entrega recente)</option>
                    </select>
                  </div>
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>WhatsApp</label>
                    <input
                      data-field="phone"
                      name="whats"
                      required
                      type="tel"
                      inputMode="numeric"
                      autoComplete="tel"
                      maxLength={16}
                      placeholder="(22) 99999-9999"
                      value={form.phone}
                      onChange={handle("phone")}
                      onBlur={handleBlur("phone")}
                      aria-invalid={!!errors.phone}
                      className={errors.phone ? "field-error" : ""} />
                    {errors.phone && <span className="field-msg">{errors.phone}</span>}
                  </div>
                  <div className="field">
                    <label>E-mail</label>
                    <input
                      data-field="email"
                      name="email"
                      required
                      type="email"
                      autoComplete="email"
                      placeholder="seu@email.com"
                      value={form.email}
                      onChange={handle("email")}
                      onBlur={handleBlur("email")}
                      aria-invalid={!!errors.email}
                      className={errors.email ? "field-error" : ""} />
                    {errors.email && <span className="field-msg">{errors.email}</span>}
                  </div>
                </div>

                <div className="field">
                  <label>Conte um pouco do que está procurando</label>
                  <textarea
                    name="mensagem"
                    placeholder="Ex.: estamos pensando em trocar de administradora, queremos profissionalizar a gestão, temos uma situação que precisa de orientação jurídica…"
                    value={form.message}
                    onChange={handle("message")} />
                </div>

                <button
                  type="submit"
                  className="btn btn-dark"
                  style={{ width: "100%", justifyContent: "center", padding: "18px 24px", fontSize: 15 }}>
                  Quero conversar com a Condominize
                  <Icon name="arrow" size={16} />
                </button>

                <p style={{ fontSize: 12, color: "var(--text-soft)", marginTop: 16, textAlign: "center" }}>
                  Seus dados são tratados em conformidade com a LGPD e usados apenas para retorno comercial.
                </p>
              </form>
            </div>

            <div className="contact-side">
              <a className="whats-cta" href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
                <div className="ico"><Icon name="whatsapp" size={32} color="#fff" /></div>
                <div>
                  <b>Conversar agora no WhatsApp</b>
                  <small>Resposta em horário comercial · seg–sex 9h às 18h</small>
                </div>
              </a>

              <div className="contact-block">
                <div className="lbl">E-mail</div>
                <a className="v" href="mailto:contato@condominize.com.br">contato@condominize.com.br</a>
              </div>

              <div className="contact-block">
                <div className="lbl">Telefone · WhatsApp</div>
                <a className="v" href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank" rel="noopener">(22) 99207-2619</a>
              </div>

              <div className="contact-block">
                <div className="lbl">Onde estamos</div>
                <div className="v" style={{ fontSize: 22 }}>Saquarema — RJ</div>
                <div style={{ fontSize: 14, color: "var(--text-soft)", marginTop: 8 }}>
                  Atuação em toda a Região dos Lagos
                </div>
              </div>

              <div className="contact-block" style={{ background: "var(--cream-100)" }}>
                <div className="lbl">Redes sociais</div>
                <a href="https://instagram.com/condominize" target="_blank"
                  style={{
                    display: "flex", alignItems: "center", gap: 12,
                    fontSize: 17, fontWeight: 600, color: "var(--navy-900)",
                    marginTop: 8
                  }}>
                  <Icon name="instagram" size={22} />
                  @condominize
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="resp-grid">
            <RespCard icon="clock" t="Resposta em 4h úteis" d="Toda mensagem recebida em horário comercial responde em até 4 horas. Sempre por uma pessoa do nosso time — nunca um robô." />
            <RespCard icon="users" t="Conversa sem compromisso" d="Uma reunião inicial com nosso síndico profissional. Conhecemos o condomínio, ouvimos as queixas, mostramos o que muda. Você decide o resto." />
            <RespCard icon="shield" t="LGPD garantida" d="Tratamos seus dados conforme a Lei 13.709/18. Política clara, sem venda de lista, sem terceirização não autorizada." />
          </div>
        </div>
      </section>
    </main>
  );
}

function RespCard({ icon, t, d }) {
  return (
    <div style={{
      background: "var(--surface)", border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)", padding: 36
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: 14,
        background: "var(--accent-soft)", color: "var(--accent-deep)",
        display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22,
        border: "1px solid var(--border-gold)"
      }}>
        <Icon name={icon} size={24} />
      </div>
      <h4 style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, letterSpacing: "-0.015em", marginBottom: 10 }}>{t}</h4>
      <p style={{ fontSize: 14.5, color: "var(--text-soft)", lineHeight: 1.6 }}>{d}</p>
    </div>
  );
}

Object.assign(window, { Contact, RespCard });