/* ===== ABONNEMENT — "le streaming de l'informatique" (premium dark) ===== */

const PLANS = [
  {
    key: "Essentiel",
    tag: "Pour démarrer serein",
    price: 15,
    line: "Le SOS informatique, toujours dans la poche.",
    feats: [
      "Assistance à distance illimitée",
      "Réponse le jour même, 7j/7",
      "Diagnostic & conseils gratuits",
      "−20 % sur les déplacements à domicile",
    ],
  },
  {
    key: "Tranquillité",
    tag: "Le plus choisi",
    price: 25,
    line: "Comme Netflix, mais c'est nous qui débarquons quand ça plante.",
    feats: [
      "Tout l'Essentiel, en illimité",
      "1 intervention à domicile / mois incluse",
      "Passe en priorité — on vient avant les autres",
      "Mises à jour & sauvegardes surveillées",
      "1 h de formation offerte par trimestre",
    ],
  },
  {
    key: "Famille",
    tag: "Toute la maison couverte",
    price: 40,
    line: "Jusqu'à 4 appareils, parents et enfants compris.",
    feats: [
      "Tout Tranquillité, jusqu'à 4 appareils",
      "2 interventions à domicile / mois",
      "Initiation incluse pour les proches",
      "Contrôle parental installé & expliqué",
    ],
  },
];

function BillingToggle({ annual, setAnnual }) {
  return (
    <div className="abo-toggle" role="tablist" aria-label="Rythme de facturation">
      <button className={!annual ? "on" : ""} onClick={() => setAnnual(false)}>Mensuel</button>
      <button className={annual ? "on" : ""} onClick={() => setAnnual(true)}>
        Annuel <span style={{ opacity: .7, fontWeight: 700, fontSize: ".82em" }}>· 2 mois offerts</span>
      </button>
    </div>
  );
}

function AboCard({ plan, featured, annual, onCall }) {
  const yearly = plan.price * 10;            // 2 mois offerts
  const effMonthly = (yearly / 12).toFixed(2).replace(".", ",").replace(/,00$/, "");
  return (
    <div className={"abo-card" + (featured ? " feat shine-loop" : "")}>
      {featured && <span className="abo-badge">★ Le + populaire</span>}
      <div>
        <div className="mono" style={{ color: featured ? "var(--accent)" : "#9fb0e6", fontSize: ".74rem", textTransform: "uppercase", letterSpacing: ".14em", marginBottom: 6 }}>{plan.tag}</div>
        <h3 style={{ color: "#fff", fontSize: "1.7rem" }}>{plan.key}</h3>
      </div>
      <div>
        <div className="abo-price">
          <span className="num">{annual ? yearly : plan.price}€</span>
          <span className="per">{annual ? "/an" : "/mois"}</span>
        </div>
        <div className="mono" style={{ fontSize: ".8rem", color: "#aeb9e0", marginTop: 8, minHeight: 18 }}>
          {annual ? `soit ${effMonthly}€/mois · 2 mois offerts` : "sans engagement, résiliable à tout moment"}
        </div>
      </div>
      <p style={{ color: "#cdd6f5", fontSize: "1rem", lineHeight: 1.5 }}>{plan.line}</p>
      <ul className="feats">
        {plan.feats.map((f) => (
          <li key={f}>
            <span style={{ flex: "0 0 auto", marginTop: 3 }}>
              <Icon name="check" size={16} color={featured ? "var(--accent)" : "#7fa0ff"} stroke={2.8} />
            </span>
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <button
        className={"btn btn-lg shine " + (featured ? "btn-primary" : "")}
        onClick={onCall}
        style={featured ? { justifyContent: "center" } : { justifyContent: "center", background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.28)" }}>
        Je m'abonne
      </button>
    </div>
  );
}

function Abonnement({ onCall, featured = "Tranquillité", sparkle = true }) {
  const [annual, setAnnual] = useState(false);
  return (
    <section className="abo section" id="abonnement">
      {/* glows */}
      <div aria-hidden="true" className="glow-orb" style={{ top: "-10%", left: "-6%", width: 520, height: 520, background: "radial-gradient(circle, color-mix(in oklab,var(--accent),transparent 62%), transparent 70%)", zIndex: 0 }}></div>
      <div aria-hidden="true" className="glow-orb" style={{ bottom: "-16%", right: "-8%", width: 560, height: 560, background: "radial-gradient(circle, rgba(124,140,255,.28), transparent 70%)", zIndex: 0 }}></div>
      {sparkle && [["12%", "18%", 22], ["86%", "30%", 16], ["24%", "78%", 14], ["72%", "84%", 20], ["54%", "12%", 12]].map(([l, t, s], i) => (
        <span key={i} aria-hidden="true" style={{ position: "absolute", left: l, top: t, width: s, height: s, zIndex: 0,
          background: "radial-gradient(circle, #fff 0%, transparent 60%)", opacity: .8,
          animation: `twinkle ${2.4 + i * 0.6}s ease-in-out ${i * 0.4}s infinite` }}></span>
      ))}

      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <Reveal style={{ display: "grid", gap: 20, maxWidth: 760, marginBottom: 14, justifyItems: "start" }}>
          <span className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 9 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 12px var(--accent)" }}></span>
            Nouveau · Abonnement
          </span>
          <h2 style={{ fontSize: "clamp(2.3rem,5vw,3.6rem)", color: "#fff" }}>
            Ton informatique,<br /><span className="sparkle-text">en illimité.</span>
          </h2>
          <p style={{ color: "#c3cdef", fontSize: "1.18rem", maxWidth: 620 }}>
            Le principe d'un abonnement streaming, appliqué à tes appareils&nbsp;: tu payes un petit
            forfait chaque mois, et on s'occupe de <strong style={{ color: "#fff" }}>tout</strong> — bugs, lenteurs,
            box, mises à jour — sans devis à chaque fois, sans stress, toute l'année.
          </p>
        </Reveal>

        <Reveal delay={80} style={{ marginBottom: 36 }}>
          <BillingToggle annual={annual} setAnnual={setAnnual} />
        </Reveal>

        <div className="abo-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, alignItems: "stretch" }}>
          {PLANS.map((p, i) => (
            <Reveal key={p.key} delay={(i % 3) * 90} style={{ display: "grid" }}>
              <AboCard plan={p} featured={p.key === featured} annual={annual} onCall={onCall} />
            </Reveal>
          ))}
        </div>

        <Reveal delay={120} style={{ marginTop: 34, display: "flex", flexWrap: "wrap", gap: "14px 26px", alignItems: "center", color: "#aeb9e0" }}>
          {["Sans engagement", "Résiliable en un appel", "1ᵉʳ mois satisfait ou remboursé"].map((r) => (
            <span key={r} style={{ display: "inline-flex", alignItems: "center", gap: 9, fontWeight: 600, fontSize: ".98rem" }}>
              <Icon name="check" size={16} color="var(--accent)" stroke={2.8} /> {r}
            </span>
          ))}
          <span className="mono" style={{ fontSize: ".76rem", opacity: .65, flexBasis: "100%" }}>
            Interventions à domicile incluses dans la zone Caen &amp; alentours · déplacement compris.
          </span>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Abonnement });