/* ===========================================================
   Repetir Boutique — checkout (4 steps)
   Panier → Livraison → Paiement (carte / XP par espace) →
   Confirmation. Shipping cost + free-shipping threshold come
   from the active country (region). XP payment debits the
   chosen space. window.RepCheckout
   =========================================================== */
(function () {
  const { useState, useRef } = React;
  const { useStore } = window.RepetirStore;

  const PROMOS = window.RepetirData.PROMOS;
  const XP_PER_EUR = window.RepetirData.XP_PER_EUR;

  function confetti() {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const colors = ["#6366f1", "#ff9f43", "#58cc02", "#4b7bec", "#ee5a6f", "#ffa502"];
    for (let i = 0; i < 80; i++) {
      const c = document.createElement("div");
      c.className = "confetti";
      c.style.left = Math.random() * 100 + "vw";
      c.style.background = colors[i % colors.length];
      c.style.animationDuration = (2 + Math.random() * 1.6) + "s";
      c.style.animationDelay = (Math.random() * 0.5) + "s";
      c.style.transform = "rotate(" + (Math.random() * 360) + "deg)";
      document.body.appendChild(c);
      setTimeout(() => c.remove(), 4200);
    }
  }

  function Stepper({ step }) {
    const labels = ["Panier", "Livraison", "Paiement", "Confirmé"];
    return React.createElement("div", { className: "wrap" },
      React.createElement("div", { className: "stepper" },
        labels.map((l, i) => {
          const n = i + 1;
          const cls = "step" + (n === step ? " active" : n < step ? " done" : "");
          return React.createElement(React.Fragment, { key: l },
            i > 0 && React.createElement("div", { className: "step-bar" + (i < step ? " done" : "") }),
            React.createElement("div", { className: cls },
              React.createElement("span", { className: "dot" }, n < step ? "✓" : n),
              React.createElement("span", { className: "lbl" }, l))
          );
        })
      )
    );
  }

  function Checkout() {
    const store = useStore();
    const { D, cart, money, country, addresses, addAddress, spaces, spaceId, activeSpace, selectSpace, debitSpace, incItem, decItem, removeItem, clearCart, addOrder } = store;

    const [step, setStep] = useState(1);
    const [selAddr, setSelAddr] = useState(0);
    const [shipMethod, setShipMethod] = useState("standard");
    const [payMethod, setPayMethod] = useState("card");
    const [promo, setPromo] = useState(null);
    const [promoMsg, setPromoMsg] = useState(null);
    const [promoInput, setPromoInput] = useState("");
    const [addrOpen, setAddrOpen] = useState(false);
    const [card, setCard] = useState({ num: "", name: "", exp: "", cvc: "" });
    const [cardErr, setCardErr] = useState({});
    const [confirmed, setConfirmed] = useState(null);
    const [af, setAf] = useState({ first: "", last: "", street: "", zip: "", city: "", country: "France" });
    const [afErr, setAfErr] = useState({});

    /* ---- calc ---- */
    const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
    const discount = (() => {
      if (!promo) return 0;
      if (promo.type === "pct") return Math.round(subtotal * promo.val * 100) / 100;
      if (promo.type === "eur") return Math.min(promo.val, subtotal);
      return 0;
    })();
    const shipping = (() => {
      if (!cart.length) return 0;
      if (promo && promo.type === "ship") return 0;
      if (shipMethod === "express") return country.shipExp;
      return subtotal >= country.freeFrom ? 0 : country.shipStd;
    })();
    const total = Math.max(0, subtotal - discount + shipping);
    const xpCost = Math.round(total * XP_PER_EUR);
    const goStep = (n) => { setStep(n); window.scrollTo({ top: 0, behavior: "smooth" }); };

    /* ---- promo ---- */
    function applyPromo() {
      const code = promoInput.trim().toUpperCase();
      if (!code) { setPromoMsg({ ok: false, t: "Entre un code promo." }); return; }
      const p = PROMOS[code];
      if (!p) { setPromo(null); setPromoMsg({ ok: false, t: "Code promo invalide 😕" }); return; }
      setPromo(Object.assign({ code }, p)); setPromoMsg(null); setPromoInput("");
    }

    /* ---- address form ---- */
    function saveAddr() {
      const err = {};
      if (!af.first.trim()) err.first = 1;
      if (!af.last.trim()) err.last = 1;
      if (!af.street.trim()) err.street = 1;
      if (!/^\d{4,6}$/.test(af.zip.trim())) err.zip = 1;
      if (!af.city.trim()) err.city = 1;
      setAfErr(err);
      if (Object.keys(err).length) return;
      const idx = addAddress({ ...af, label: "Nouvelle" });
      setSelAddr(idx); setAddrOpen(false);
      setAf({ first: "", last: "", street: "", zip: "", city: "", country: "France" });
    }

    /* ---- card ---- */
    function onCardNum(v) { const d = v.replace(/\D/g, "").slice(0, 16); setCard(c => ({ ...c, num: d.replace(/(.{4})/g, "$1 ").trim() })); }
    function onCardExp(v) { let d = v.replace(/\D/g, "").slice(0, 4); if (d.length >= 3) d = d.slice(0, 2) + "/" + d.slice(2); setCard(c => ({ ...c, exp: d })); }
    function validateCard() {
      const err = {};
      if (card.num.replace(/\s/g, "").length !== 16) err.num = 1;
      if (!card.name.trim()) err.name = 1;
      if (!/^\d{2}\/\d{2}$/.test(card.exp)) err.exp = 1;
      if (!/^\d{3,4}$/.test(card.cvc)) err.cvc = 1;
      setCardErr(err);
      return Object.keys(err).length === 0;
    }

    /* ---- pay ---- */
    function pay() {
      let payInfo;
      if (payMethod === "xp") {
        if (!activeSpace || activeSpace.xp < xpCost) return;
        debitSpace(activeSpace.id, xpCost);
        payInfo = { kind: "xp", space: activeSpace.name, xp: xpCost };
      } else {
        if (!validateCard()) return;
        payInfo = { kind: "card" };
      }
      const a = addresses[selAddr];
      const order = {
        id: "RP-2026-" + String(Math.floor(1000 + Math.random() * 9000)),
        date: new Date().toISOString(),
        items: cart.map(i => ({ name: i.name, price: i.price, qty: i.qty })),
        subtotal, discount, promo: promo ? promo.code : null,
        shipping, total, country: country.code,
        method: shipMethod === "express" ? "Express" : "Standard",
        payment: payInfo, address: a, status: "En préparation",
      };
      addOrder(order);
      setConfirmed(order);
      clearCart(); setPromo(null);
      goStep(4);
      confetti();
    }

    const emo = D.emojiFor;
    const freeFrom = country.freeFrom;

    /* ================= RENDER ================= */
    return (
      React.createElement(React.Fragment, null,
        React.createElement(Stepper, { step }),
        React.createElement("div", { className: "wrap wrap--narrow checkout" + (step === 1 || step === 4 ? " solo" : "") },
          React.createElement("div", { className: "main" },

            /* STEP 1 — PANIER */
            step === 1 && React.createElement("div", { className: "pane", key: "p1" },
              React.createElement("div", { className: "panel" },
                React.createElement("h2", null, "Ton panier"),
                React.createElement("p", { className: "psub" }, "Vérifie tes articles avant de continuer."),
                cart.length === 0
                  ? React.createElement("div", { className: "empty" }, React.createElement("div", { className: "big" }, "🛒"), React.createElement("p", null, "Ton panier est vide."), React.createElement("a", { className: "btn", href: "#/", style: { marginTop: "14px" } }, "Aller à la boutique"))
                  : React.createElement(React.Fragment, null,
                    React.createElement("div", { className: "clines" }, cart.map((i, idx) => React.createElement("div", { className: "cline", key: i.name },
                      React.createElement("div", { className: "em" }, emo(i.name)),
                      React.createElement("div", null,
                        React.createElement("div", { className: "nm" }, i.name),
                        React.createElement("div", { className: "up" }, money(i.price) + " l'unité"),
                        React.createElement("div", { className: "qty" },
                          React.createElement("button", { onClick: () => decItem(idx) }, "−"),
                          React.createElement("span", null, i.qty),
                          React.createElement("button", { onClick: () => incItem(idx) }, "+"))
                      ),
                      React.createElement("div", null, React.createElement("div", { className: "ln" }, money(i.price * i.qty)), React.createElement("button", { className: "rm", onClick: () => removeItem(idx) }, "Retirer"))
                    ))),
                    React.createElement("div", { className: "cart-totals" },
                      React.createElement(ShipBar, { subtotal, freeFrom, freeShip: (promo && promo.type === "ship") || subtotal >= freeFrom, money }),
                      React.createElement("div", { className: "promo" },
                        promo
                          ? React.createElement("div", { className: "promo-applied" }, React.createElement("span", null, "✓ Code ", React.createElement("b", null, promo.code), " appliqué — " + promo.label), React.createElement("button", { onClick: () => { setPromo(null); setPromoMsg(null); } }, "Retirer"))
                          : React.createElement("div", { className: "promo-input" },
                            React.createElement("input", { placeholder: "Code promo", value: promoInput, onChange: e => setPromoInput(e.target.value), onKeyDown: e => { if (e.key === "Enter") { e.preventDefault(); applyPromo(); } } }),
                            React.createElement("button", { className: "btn btn--ghost btn--sm", onClick: applyPromo }, "Appliquer")),
                        promoMsg && React.createElement("div", { className: "promo-msg", style: { color: "var(--game-red)" } }, promoMsg.t),
                        React.createElement("div", { className: "promo-hint" }, "Essaie ", React.createElement("code", null, "STYLO10"), ", ", React.createElement("code", null, "BIENVENUE"), " ou ", React.createElement("code", null, "LIVRAISON"))
                      ),
                      React.createElement("div", { className: "t-row" }, React.createElement("span", null, "Sous-total"), React.createElement("span", null, money(subtotal))),
                      discount > 0 && React.createElement("div", { className: "t-row" }, React.createElement("span", { className: "disc" }, "Réduction (" + promo.code + ")"), React.createElement("span", { className: "disc" }, "−" + money(discount))),
                      React.createElement("div", { className: "t-row" }, React.createElement("span", null, "Livraison"), React.createElement("span", null, subtotal === 0 ? "—" : (shipping === 0 ? React.createElement("span", { className: "free" }, "Offerte") : money(shipping)))),
                      React.createElement("div", { className: "t-row total" }, React.createElement("span", null, "Total"), React.createElement("span", null, money(total)))
                    )
                  ),
                React.createElement("div", { className: "step-nav" },
                  React.createElement("a", { className: "btn btn--ghost", href: "#/" }, "← Boutique"),
                  React.createElement("button", { className: "btn", disabled: cart.length === 0, onClick: () => cart.length && goStep(2) }, "Vers la livraison →"))
              )
            ),

            /* STEP 2 — LIVRAISON */
            step === 2 && React.createElement("div", { className: "pane", key: "p2" },
              React.createElement("div", { className: "panel" },
                React.createElement("h2", null, "Adresse de livraison"),
                React.createElement("p", { className: "psub" }, "Où envoyons-nous tes goodies ?"),
                React.createElement("div", { className: "addr-list" }, addresses.map((a, i) => React.createElement("div", { className: "addr" + (i === selAddr ? " sel" : ""), key: i, onClick: () => setSelAddr(i) },
                  React.createElement("span", { className: "radio" }),
                  React.createElement("div", null,
                    React.createElement("div", { className: "who" }, a.first + " " + a.last),
                    React.createElement("div", { className: "det" }, a.street, React.createElement("br"), a.zip + " " + a.city + ", " + a.country),
                    a.label && React.createElement("span", { className: "tag" }, a.label))
                ))),
                !addrOpen
                  ? React.createElement("button", { className: "add-addr", onClick: () => setAddrOpen(true) }, "+ Ajouter une nouvelle adresse")
                  : React.createElement("div", { style: { marginTop: "18px" } },
                    React.createElement("div", { className: "form-grid" },
                      Field("Prénom", af.first, v => setAf({ ...af, first: v }), afErr.first, "Requis"),
                      Field("Nom", af.last, v => setAf({ ...af, last: v }), afErr.last, "Requis"),
                      Field("Adresse", af.street, v => setAf({ ...af, street: v }), afErr.street, "Requis", "full", "12 rue des Crayons"),
                      Field("Code postal", af.zip, v => setAf({ ...af, zip: v }), afErr.zip, "Code postal invalide", "", "75011"),
                      Field("Ville", af.city, v => setAf({ ...af, city: v }), afErr.city, "Requis", "", "Paris"),
                      React.createElement("div", { className: "field full" },
                        React.createElement("label", null, "Pays"),
                        React.createElement("select", { value: af.country, onChange: e => setAf({ ...af, country: e.target.value }) },
                          ["France", "Belgique", "Suisse", "Luxembourg", "Canada"].map(c => React.createElement("option", { key: c }, c))))
                    ),
                    React.createElement("div", { style: { display: "flex", gap: "10px", marginTop: "16px" } },
                      React.createElement("button", { className: "btn btn--success", onClick: saveAddr }, "Enregistrer l'adresse"),
                      React.createElement("button", { className: "btn btn--ghost", onClick: () => setAddrOpen(false) }, "Annuler"))
                  ),

                React.createElement("h2", { style: { marginTop: "30px" } }, "Mode de livraison"),
                React.createElement("div", { className: "methods" },
                  React.createElement("div", { className: "method" + (shipMethod === "standard" ? " sel" : ""), onClick: () => setShipMethod("standard") },
                    React.createElement("span", { className: "radio" }),
                    React.createElement("div", null, React.createElement("div", { className: "mt" }, "🚚 Standard"), React.createElement("div", { className: "md" }, "3 à 5 jours · offerte dès " + money(freeFrom))),
                    React.createElement("span", { className: "mp" }, subtotal >= freeFrom ? React.createElement("span", { className: "free" }, "Offerte") : money(country.shipStd))),
                  React.createElement("div", { className: "method" + (shipMethod === "express" ? " sel" : ""), onClick: () => setShipMethod("express") },
                    React.createElement("span", { className: "radio" }),
                    React.createElement("div", null, React.createElement("div", { className: "mt" }, "⚡ Express"), React.createElement("div", { className: "md" }, "24 à 48 h")),
                    React.createElement("span", { className: "mp" }, money(country.shipExp)))
                ),
                React.createElement("div", { className: "step-nav" },
                  React.createElement("button", { className: "btn btn--ghost", onClick: () => goStep(1) }, "← Panier"),
                  React.createElement("button", { className: "btn", onClick: () => goStep(3) }, "Vers le paiement →"))
              )
            ),

            /* STEP 3 — PAIEMENT */
            step === 3 && React.createElement("div", { className: "pane", key: "p3" },
              React.createElement("div", { className: "panel" },
                React.createElement("h2", null, "Paiement"),
                React.createElement("p", { className: "psub" }, "Choisis ton moyen de paiement."),
                React.createElement("div", { className: "methods" },
                  React.createElement("div", { className: "method" + (payMethod === "card" ? " sel" : ""), onClick: () => setPayMethod("card") },
                    React.createElement("span", { className: "radio" }),
                    React.createElement("div", null, React.createElement("div", { className: "mt" }, "💳 Carte bancaire"), React.createElement("div", { className: "md" }, "Paiement 100 % sécurisé"))),
                  React.createElement("div", { className: "method" + (payMethod === "xp" ? " sel" : ""), onClick: () => setPayMethod("xp") },
                    React.createElement("span", { className: "radio" }),
                    React.createElement("div", null, React.createElement("div", { className: "mt" }, "⭐ Payer en XP"), React.createElement("div", { className: "md" }, "Avec les points d'un espace")),
                    React.createElement("span", { className: "mp" }, "⭐ " + activeSpace.xp.toLocaleString("fr-FR")))
                ),

                payMethod === "card"
                  ? React.createElement("div", null,
                    React.createElement("div", { className: "ccard" },
                      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
                        React.createElement("div", { className: "cardchip" }),
                        React.createElement("div", { style: { fontWeight: 900, fontStyle: "italic", letterSpacing: "1px" } }, "VISA")),
                      React.createElement("div", { className: "num" }, card.num || "•••• •••• •••• ••••"),
                      React.createElement("div", { className: "row" },
                        React.createElement("div", null, React.createElement("div", { className: "cap" }, "Titulaire"), React.createElement("div", null, card.name.toUpperCase() || "VOTRE NOM")),
                        React.createElement("div", null, React.createElement("div", { className: "cap" }, "Expire"), React.createElement("div", null, card.exp || "MM/AA")))
                    ),
                    React.createElement("div", { className: "form-grid" },
                      React.createElement("div", { className: "field full" + (cardErr.num ? " err" : "") }, React.createElement("label", null, "Numéro de carte"), React.createElement("input", { inputMode: "numeric", placeholder: "4242 4242 4242 4242", value: card.num, onChange: e => onCardNum(e.target.value) }), React.createElement("span", { className: "msg" }, "Numéro invalide (16 chiffres)")),
                      React.createElement("div", { className: "field full" + (cardErr.name ? " err" : "") }, React.createElement("label", null, "Titulaire de la carte"), React.createElement("input", { placeholder: "Camille Dupont", value: card.name, onChange: e => setCard(c => ({ ...c, name: e.target.value })) }), React.createElement("span", { className: "msg" }, "Requis")),
                      React.createElement("div", { className: "field" + (cardErr.exp ? " err" : "") }, React.createElement("label", null, "Date d'expiration"), React.createElement("input", { placeholder: "MM/AA", value: card.exp, onChange: e => onCardExp(e.target.value) }), React.createElement("span", { className: "msg" }, "Format MM/AA")),
                      React.createElement("div", { className: "field" + (cardErr.cvc ? " err" : "") }, React.createElement("label", null, "CVC"), React.createElement("input", { inputMode: "numeric", placeholder: "123", value: card.cvc, onChange: e => setCard(c => ({ ...c, cvc: e.target.value.replace(/\D/g, "").slice(0, 4) })) }), React.createElement("span", { className: "msg" }, "3 chiffres"))
                    ),
                    React.createElement("div", { className: "pay-secure" }, "🔒 Tes données sont chiffrées. Ceci est une démo — aucune carte n'est débitée.")
                  )
                  : React.createElement(XpPay, { spaces, spaceId, activeSpace, selectSpace, xpCost }),

                React.createElement("div", { className: "step-nav" },
                  React.createElement("button", { className: "btn btn--ghost", onClick: () => goStep(2) }, "← Livraison"),
                  React.createElement("button", { className: "btn btn--success", disabled: payMethod === "xp" && activeSpace.xp < xpCost, onClick: pay },
                    payMethod === "xp" ? "Payer ⭐ " + xpCost.toLocaleString("fr-FR") + " XP" : "Payer " + money(total)))
              )
            ),

            /* STEP 4 — CONFIRMATION */
            step === 4 && confirmed && React.createElement("div", { className: "pane", key: "p4" },
              React.createElement("div", { className: "panel" },
                React.createElement("div", { className: "confirm" },
                  React.createElement("div", { className: "check" }, "✓"),
                  React.createElement("h2", null, "Merci, c'est validé ! 🎉"),
                  React.createElement("p", null, "Stylo prépare déjà ton colis. Tu recevras un e-mail de confirmation et le suivi dans un instant."),
                  React.createElement("div", { className: "onum" }, confirmed.id),
                  React.createElement("div", { className: "conf-recap" },
                    React.createElement("div", { className: "crow" }, React.createElement("span", null, "Articles"), React.createElement("b", null, confirmed.items.reduce((n, i) => n + i.qty, 0))),
                    confirmed.discount > 0 && React.createElement("div", { className: "crow" }, React.createElement("span", null, "Réduction" + (confirmed.promo ? " (" + confirmed.promo + ")" : "")), React.createElement("b", null, "−" + money(confirmed.discount))),
                    React.createElement("div", { className: "crow" }, React.createElement("span", null, "Livraison " + confirmed.method), React.createElement("b", null, confirmed.shipping === 0 ? "Offerte" : money(confirmed.shipping))),
                    confirmed.payment.kind === "xp"
                      ? React.createElement("div", { className: "crow" }, React.createElement("span", null, "Payé en XP (" + confirmed.payment.space + ")"), React.createElement("b", null, "⭐ " + confirmed.payment.xp.toLocaleString("fr-FR") + " XP"))
                      : React.createElement("div", { className: "crow" }, React.createElement("span", null, "Total payé"), React.createElement("b", null, money(confirmed.total))),
                    React.createElement("div", { className: "crow" }, React.createElement("span", null, "Adresse"), React.createElement("b", null, confirmed.address.first + " " + confirmed.address.last + ", " + confirmed.address.city))
                  ),
                  React.createElement("div", { className: "cta", style: { marginTop: "26px" } },
                    React.createElement("a", { className: "btn", href: "#/commandes" }, "📦 Voir mes commandes"),
                    React.createElement("a", { className: "btn btn--ghost", href: "#/" }, "Retour à la boutique"))
                )
              )
            )
          ),

          /* SUMMARY (steps 2 & 3) */
          (step === 2 || step === 3) && React.createElement("aside", { className: "summary" },
            React.createElement("h3", null, "Récapitulatif"),
            React.createElement("div", { className: "mini-items" }, cart.map(i => React.createElement("div", { className: "mi", key: i.name }, emo(i.name), React.createElement("b", null, i.qty)))),
            React.createElement("div", { className: "srow" }, React.createElement("span", null, "Sous-total"), React.createElement("span", null, money(subtotal))),
            discount > 0 && React.createElement("div", { className: "srow" }, React.createElement("span", { className: "free" }, "Réduction (" + promo.code + ")"), React.createElement("span", { className: "free" }, "−" + money(discount))),
            React.createElement("div", { className: "srow" }, React.createElement("span", null, "Livraison"), React.createElement("span", null, subtotal === 0 ? "—" : (shipping === 0 ? React.createElement("span", { className: "free" }, "Offerte") : money(shipping)))),
            React.createElement("div", { className: "srow tot" }, React.createElement("span", null, "Total"), React.createElement("span", null, money(total))),
            React.createElement("div", { className: "ship-hint" },
              subtotal > 0 && (freeFrom - subtotal) > 0 ? "Plus que " + money(freeFrom - subtotal) + " pour la livraison offerte ! 🚚" : (subtotal > 0 ? "🎉 Livraison standard offerte !" : ""))
          )
        )
      )
    );
  }

  function Field(label, value, onChange, err, msg, full, ph) {
    return React.createElement("div", { className: "field " + (full || "") + (err ? " err" : ""), key: label },
      React.createElement("label", null, label),
      React.createElement("input", { value, placeholder: ph || "", onChange: e => onChange(e.target.value) }),
      React.createElement("span", { className: "msg" }, msg));
  }

  function ShipBar({ subtotal, freeFrom, freeShip, money }) {
    const pct = Math.min(100, Math.round(subtotal / freeFrom * 100));
    let content;
    if (subtotal === 0) content = React.createElement(React.Fragment, null, React.createElement("div", { className: "msg" }, "Ajoute des articles pour suivre la livraison offerte 🚚"), React.createElement("div", { className: "bar" }, React.createElement("div", { className: "fill", style: { width: "0%" } })));
    else if (freeShip) content = React.createElement(React.Fragment, null, React.createElement("div", { className: "msg", style: { color: "var(--success)" } }, "🎉 Bravo, livraison offerte !"), React.createElement("div", { className: "bar" }, React.createElement("div", { className: "fill", style: { width: "100%" } })));
    else content = React.createElement(React.Fragment, null, React.createElement("div", { className: "msg" }, "Plus que ", React.createElement("b", null, money(freeFrom - subtotal)), " avant la livraison offerte 🚚"), React.createElement("div", { className: "bar" }, React.createElement("div", { className: "fill", style: { width: pct + "%" } })));
    return React.createElement("div", { className: "ship-bar" }, content);
  }

  function XpPay({ spaces, spaceId, activeSpace, selectSpace, xpCost }) {
    const fmt = n => n.toLocaleString("fr-FR");
    const enough = activeSpace && activeSpace.xp >= xpCost;
    return React.createElement("div", { className: "xp-box" },
      React.createElement("div", { className: "xp-space-label" }, "Espace à débiter"),
      React.createElement("div", { className: "xp-spaces" }, spaces.map(s => React.createElement("div", {
        key: s.id, className: "xp-srow" + (s.id === spaceId ? " sel" : "") + (s.xp < xpCost ? " short" : ""), onClick: () => selectSpace(s.id),
      },
        React.createElement("span", { className: "sav", style: { background: s.color } }, s.initials),
        React.createElement("span", { className: "sn" }, s.name),
        React.createElement("span", { className: "sb" }, "⭐ " + fmt(s.xp) + " XP")))),
      React.createElement("div", { className: "xp-summary" },
        React.createElement("div", { className: "r" }, React.createElement("span", null, "Coût en points"), React.createElement("b", null, "⭐ " + fmt(xpCost) + " XP")),
        React.createElement("div", { className: "r" }, React.createElement("span", null, "Solde de " + (activeSpace ? activeSpace.name : "—")), React.createElement("b", null, "⭐ " + (activeSpace ? fmt(activeSpace.xp) : 0) + " XP")),
        enough
          ? React.createElement(React.Fragment, null,
            React.createElement("div", { className: "r" }, React.createElement("span", null, "Restant après achat"), React.createElement("b", null, "⭐ " + fmt(activeSpace.xp - xpCost) + " XP")),
            React.createElement("div", { className: "xp-ok-msg" }, "✓ Solde suffisant — paiement 100 % en XP"))
          : React.createElement("div", { className: "xp-short-msg" }, "Solde insuffisant sur cet espace (manque ⭐ " + (activeSpace ? fmt(xpCost - activeSpace.xp) : xpCost) + " XP). Choisis un autre espace ou paie par carte.")
      )
    );
  }

  window.RepCheckout = Checkout;
})();