function FormPage({ onBack, onContinue, initial }) {
  const { useState } = React;
  const [data, setData] = useState(initial || { nome: "", email: "", telefone: "" });
  const [ddi, setDdi] = useState("+55"); // Estado para armazenar o código do país (Padrão: Brasil)
  const [errors, setErrors] = useState({});
  const [saving, setSaving] = useState(false);

  // Máscara dinâmica com base no país selecionado
  const formatPhone = (v, currentDdi) => {
    let d = v.replace(/\D/g, "");

    if (currentDdi === "+1") {
      // Padrão EUA: 10 dígitos (XXX) XXX-XXXX
      d = d.slice(0, 10);
      if (d.length === 0) return "";
      if (d.length <= 3) return `(${d}`;
      if (d.length <= 6) return `(${d.slice(0,3)}) ${d.slice(3)}`;
      return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;
    } else {
      // Padrão Brasil: 10 ou 11 dígitos (XX) XXXXX-XXXX
      d = d.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)}`;
    }
  };

  const update = (k, v) => {
    setData({ ...data, [k]: v });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  // Quando o usuário troca de país no seletor, reformatamos o número que já está digitado
  const handleDdiChange = (e) => {
    const newDdi = e.target.value;
    setDdi(newDdi);
    update('telefone', formatPhone(data.telefone, newDdi));
  };

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.nome.trim() || data.nome.trim().length < 2) errs.nome = "Informe seu nome";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = "Email inválido";
    
    // Validação ajustada para o número de dígitos esperado por país
    const digits = data.telefone.replace(/\D/g, "");
    if (ddi === "+1" && digits.length < 10) errs.telefone = "Telefone inválido";
    if (ddi === "+55" && digits.length < 10) errs.telefone = "Telefone inválido";
    
    setErrors(errs);
    
    if (Object.keys(errs).length === 0) {
      setSaving(true);
      
      // Junta o DDI selecionado com o telefone digitado para enviar ao PHP
      const payload = {
        ...data,
        telefone: `${ddi} ${data.telefone}` 
      };
      
      try {
        await fetch('/salvar_lead.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
      } catch (error) {
        console.error("Falha ao salvar no banco interno:", error);
      }

      setSaving(false);
      onContinue(payload);
    }
  };

  return (
    <div className="flow-page" data-screen-label="02 Form">
      <nav className="flow-nav">
        <div className="container">
          <button className="flow-back" onClick={onBack}>← Voltar</button>
          <div className="steps">
            <span className="step done"><b>1</b>Cadastro</span>
            <span className="step-divider"></span>
            <span className="step on"><b>2</b>Seus dados</span>
            <span className="step-divider"></span>
            <span className="step"><b>3</b>Revisão</span>
          </div>
        </div>
      </nav>

      <div className="flow-body">
        <aside className="flow-summary">
          <div className="eyebrow">passo 02 de 03</div>
          <h1>Quase lá. <em>2 minutos.</em></h1>
          <p>
            Preencha seus dados pra eu te mandar o checklist direto no email assim que
            o pagamento aprovar.
          </p>

          <div className="summary-card">
            <div className="summary-row head">
              <span>Resumo do pedido</span>
            </div>
            <div className="summary-row">
              <span>Documentação Básica · Vol. 01</span>
              <span>$5,90</span>
            </div>
            <div className="summary-row total">
              <span>Total</span>
              <span>$5,90</span>
            </div>
          </div>
        </aside>

        <form className="form-card" onSubmit={submit} noValidate>
          <h2>Seus dados</h2>
          <p className="sub">Pra mandar o checklist no seu email e te dar suporte por WhatsApp.</p>

          <div className={`field ${errors.nome ? 'error' : ''}`}>
            <label htmlFor="nome">Nome completo</label>
            <input
              id="nome"
              type="text"
              autoComplete="name"
              placeholder="Como te chamo?"
              value={data.nome}
              onChange={(e) => update('nome', e.target.value)}
              disabled={saving}
            />
            {errors.nome && <span className="err-msg">{errors.nome}</span>}
          </div>

          <div className={`field ${errors.email ? 'error' : ''}`}>
            <label htmlFor="email">Email</label>
            <input
              id="email"
              type="email"
              autoComplete="email"
              placeholder="voce@email.com"
              value={data.email}
              onChange={(e) => update('email', e.target.value)}
              disabled={saving}
            />
            {errors.email && <span className="err-msg">{errors.email}</span>}
          </div>

          <div className={`field ${errors.telefone ? 'error' : ''}`}>
            <label htmlFor="telefone">Telefone (WhatsApp)</label>
            <div style={{ display: 'flex', gap: '8px' }}>
              {/* SELETOR DE PAÍS AQUI */}
              <select
                value={ddi}
                onChange={handleDdiChange}
                disabled={saving}
                style={{
                  padding: '0 8px',
                  borderRadius: 'var(--radius-sm, 6px)',
                  border: '1px solid var(--border-color, #ccc)',
                  background: '#fff',
                  fontSize: '16px',
                  cursor: 'pointer'
                }}
              >
                <option value="+55">🇧🇷 +55</option>
                <option value="+1">🇺🇸 +1</option>
              </select>

              <input
                id="telefone"
                type="tel"
                autoComplete="tel"
                placeholder={ddi === "+1" ? "(___) ___-____" : "(__) _____-____"}
                value={data.telefone}
                onChange={(e) => update('telefone', formatPhone(e.target.value, ddi))}
                disabled={saving}
                style={{ flex: 1 }}
              />
            </div>
            {errors.telefone && <span className="err-msg">{errors.telefone}</span>}
          </div>

          <button type="submit" className="btn btn-tan btn-arrow form-cta" disabled={saving}>
            {saving ? "Processando..." : "Continuar para revisão"}
          </button>

          <p className="form-fine">
            Seus dados ficam só com a gente. Não vendemos lista, não fazemos spam.
          </p>
        </form>
      </div>
    </div>
  );
}

window.FormPage = FormPage;