function Offers({ onChoose }) {
  const offers = [
    {
      id: "start",
      name: "Mouna Start",
      speed: "100",
      unit: "Mbps",
      price: "150.000 GNF /mois",
      priceFull: "à partir de 150.000 GNF /mois",
      features: ["Wi-Fi 6 inclus", "Installation gratuite", "Support 24h/7j", "1 décodeur TV en option"],
      cta: "Choisir Start",
    },
    {
      id: "pro",
      name: "Mouna Pro",
      speed: "500",
      unit: "Mbps",
      price: "350.000 GNF /mois",
      priceFull: "à partir de 350.000 GNF /mois",
      features: ["Wi-Fi 6 Mesh inclus", "IPv4 fixe", "Streaming 4K · gaming", "Support prioritaire"],
      cta: "Choisir Pro",
      featured: true,
      badge: "Le plus choisi",
    },
    {
      id: "ultra",
      name: "Mouna Ultra",
      speed: "1",
      unit: "Gbps",
      price: "650.000 GNF /mois",
      priceFull: "à partir de 650.000 GNF /mois",
      features: ["Wi-Fi 6E + Mesh", "IP fixe + DNS dédié", "Garantie 99.9% uptime", "Technicien dédié"],
      cta: "Choisir Ultra",
    },
  ];

  const perks = [
    { icon: <Icons.Bolt />, title: "Installation rapide", desc: "Mise en service sous 48h sur Conakry." },
    { icon: <Icons.Shield />, title: "Sans engagement long", desc: "Liberté de résilier sans pénalité." },
    { icon: <Icons.Headset />, title: "Support 24/7", desc: "Une équipe humaine, joignable à toute heure." },
    { icon: <Icons.Wifi />, title: "Wi-Fi 6 inclus", desc: "Routeur dernière génération offert." },
  ];

  return (
    <section className="offers" id="offres">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">01 · Internet domicile</div>
            <h2>Une fibre. Trois rythmes. Aucun compromis.</h2>
          </div>
          <p>
            Choisissez la vitesse qui vous correspond — du télétravail confortable au foyer connecté ultra-rapide. Tout est inclus : matériel, installation, support.
          </p>
        </div>

        <div className="offer-grid">
          {offers.map((o, i) => (
            <div key={i} className={"offer-card" + (o.featured ? " featured" : "")}>
              {o.badge && <div className="offer-badge">{o.badge}</div>}
              <div className="offer-name">{o.name}</div>
              <div className="offer-speed">
                {o.speed}<sub> {o.unit}</sub>
              </div>
              <div className="offer-price">{o.priceFull}</div>
              <ul className="offer-list">
                {o.features.map((f, j) => (
                  <li key={j}>
                    <Icons.Check size={16} />
                    {f}
                  </li>
                ))}
              </ul>
              <button
                className={"btn offer-cta " + (o.featured ? "btn-primary on-dark" : "btn-primary")}
                onClick={() => onChoose && onChoose(o)}
              >
                {o.cta} <Icons.Arrow size={14} />
              </button>
            </div>
          ))}
        </div>

        <div className="perks">
          {perks.map((p, i) => (
            <div key={i} className="perk">
              <div className="perk-icon">{p.icon}</div>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Offers = Offers;