function Eligibility() {
  const [address, setAddress] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [result, setResult] = React.useState(null);

  const submit = (e) => {
    e.preventDefault();
    if (!address.trim()) return;
    setResult("checking");
    setTimeout(() => setResult("eligible"), 1100);
  };

  return (
    <section className="elig" id="eligibilite">
      <div className="container">
        <div className="elig-card">
          <div>
            <div className="eyebrow on-dark">04 · Couverture fibre</div>
            <h2>Voyons si la fibre MouNa est dispo chez vous.</h2>
            <p>
              Renseignez votre adresse à Conakry ou en banlieue. Notre équipe vérifie la couverture en moins de 60 secondes et vous rappelle gratuitement pour planifier l'installation.
            </p>
            <div style={{ display: "flex", gap: "24px", flexWrap: "wrap", color: "rgba(250,250,247,0.65)", fontSize: "14px" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
                <Icons.MapPin /> 14 communes couvertes
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
                <Icons.Bolt /> Installation sous 48h
              </span>
            </div>
          </div>

          <form className="elig-form" onSubmit={submit}>
            <div className="elig-form-row">
              <label>Adresse</label>
              <input
                type="text"
                placeholder="Ex. Av. de la République, Kaloum"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
              />
            </div>
            <div className="elig-form-row">
              <label>Téléphone</label>
              <input
                type="tel"
                placeholder="+224 …"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
              />
            </div>
            <button type="submit" className="btn btn-primary on-dark">
              {result === "checking" ? "Vérification…" : "Vérifier mon éligibilité"}
              {result !== "checking" && <Icons.Arrow size={14} />}
            </button>
            {result === "eligible" && (
              <div className="elig-result">
                ✓ Bonne nouvelle — votre zone est éligible à la fibre <b>jusqu'à 1 Gbps</b>. Un conseiller vous rappelle sous 2h.
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

window.Eligibility = Eligibility;