/* =========================================================== Repetir Boutique — main shop page Hero, categories, featured, product grid (country-aware availability + category filter), XP rewards, bundles, trust, newsletter. Country drives which products are buyable. window.RepBoutique =========================================================== */ (function () { const { useState, useEffect, useRef } = React; const { useStore } = window.RepetirStore; /* ---- Hero rotating disc ---- */ const HERO_CAST = [ { emoji: "🖊️", name: "Stylo", comp: "Stylo", pose: "cheer" }, { emoji: "🪄", name: "Styla", comp: "Styla", pose: "hello" }, { emoji: "🏆", name: "Stylé", comp: "Style", pose: "cheer", tier: "or" }, ]; const HERO_ITEMS = [ { emoji: "🧢", name: "Casquette" }, { emoji: "🧥", name: "Sweat à capuche" }, { emoji: "👕", name: "Tee-shirt" }, { emoji: "📌", name: "Pin's" }, { emoji: "🧸", name: "Peluche Stylo" }, { emoji: "🧱", name: "Briques" }, { emoji: "☕", name: "Mug" }, { emoji: "📓", name: "Carnet" }, ]; function Hero({ onShop, onRewards }) { const [mode, setMode] = useState("cast"); const [idx, setIdx] = useState(0); const list = mode === "cast" ? HERO_CAST : HERO_ITEMS; useEffect(() => { setIdx(0); }, [mode]); useEffect(() => { const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) return; const t = setInterval(() => setIdx(i => (i + 1) % list.length), 3000); return () => clearInterval(t); }, [mode, list.length]); const cur = list[idx]; return ( React.createElement("section", { className: "hero" }, React.createElement("span", { className: "blob b1" }), React.createElement("span", { className: "blob b2" }), React.createElement("div", { className: "wrap hero-grid" }, React.createElement("div", { className: "hero-copy" }, React.createElement("span", { className: "hero-eyebrow" }, "✨ Nouvelle boutique officielle"), React.createElement("h1", null, "La boutique de ", React.createElement("span", { className: "hl" }, "Stylo"), ".", React.createElement("br"), "Porte ta série. 🔥"), React.createElement("p", { className: "sub" }, "Casquettes, peluches, figurines 3D, déguisements et papeterie à l'effigie de ta mascotte préférée. Apprendre, c'est encore mieux avec du style."), React.createElement("div", { className: "hero-cta" }, React.createElement("button", { className: "btn", onClick: onShop }, "Découvrir la boutique 🚀"), React.createElement("button", { className: "btn btn--success", onClick: onRewards }, "Payer en XP ⭐") ), React.createElement("p", { className: "hero-note" }, "🚚 Livraison offerte dès 49 € · ↩️ Retours sous 30 jours") ), React.createElement("div", { className: "hero-stage" }, React.createElement("div", { className: "hero-discwrap" }, React.createElement("div", { className: "hero-disc" }, React.createElement("div", { className: "dot-pattern", style: { borderRadius: "50%" } }), React.createElement("span", { className: "hero-mascot-name" }, cur.name), (cur.comp && window[cur.comp]) ? React.createElement("div", { className: "hero-mascot", key: mode + idx }, React.createElement(window[cur.comp], { pose: cur.pose || "hello", size: 200, tier: cur.tier })) : React.createElement("div", { className: "hero-item-emoji", key: mode + idx }, cur.emoji), React.createElement("div", { className: "hero-dots" }, list.map((_, i) => React.createElement("i", { key: i, className: i === idx ? "on" : "" }))) ), React.createElement("span", { className: "float-chip c1" }, React.createElement("span", { className: "e" }, "🧢"), " Casquette"), React.createElement("span", { className: "float-chip c2" }, React.createElement("span", { className: "e" }, "🧸"), " Peluche"), React.createElement("span", { className: "float-chip c3" }, React.createElement("span", { className: "e" }, "📌"), " Pin's"), React.createElement("span", { className: "float-chip c4" }, React.createElement("span", { className: "e" }, "👕"), " Tee-shirt") ), React.createElement("div", { className: "hero-switch" }, React.createElement("button", { className: "hsw" + (mode === "cast" ? " active" : ""), onClick: () => setMode("cast") }, "🖊️ Mascottes"), React.createElement("button", { className: "hsw" + (mode === "items" ? " active" : ""), onClick: () => setMode("items") }, "🎁 Goodies") ) ) ) ) ); } /* ---- Product card ---- */ function ProductCard({ p, available }) { const { D, money, addToCart } = useStore(); const tint = D.TINT[p.cat] || "#f3eee4"; const badge = p.badge ? React.createElement("span", { className: "pcard__badge " + D.BADGES[p.badge][0] }, D.BADGES[p.badge][1]) : null; return ( React.createElement("article", { className: "pcard" + (available ? "" : " out") }, React.createElement("div", { className: "pcard__media", style: { "--tint": tint } }, React.createElement("div", { className: "dot-pattern" }), badge, (p.comp && window[p.comp]) ? React.createElement("div", { className: "pcard__mascot" }, React.createElement(window[p.comp], { pose: p.pose || "hello", size: 140, tier: p.tier })) : React.createElement("span", { className: "pcard__emoji" }, p.emoji), React.createElement("span", { className: "pcard__hint" }, "// visuel produit") ), React.createElement("div", { className: "pcard__body" }, React.createElement("span", { className: "pcard__cat" }, p.cat), React.createElement("h3", { className: "pcard__name" }, p.name), React.createElement("p", { className: "pcard__tag" }, p.tag), React.createElement("div", { className: "pcard__foot" }, React.createElement("div", { className: "price" }, money(p.price), p.xp ? React.createElement("span", { className: "xp" }, "ou " + p.xp.toLocaleString("fr-FR") + " ⭐") : null), available ? React.createElement("button", { className: "btn btn--sm", onClick: () => addToCart(p.name, p.price) }, "Ajouter") : React.createElement("span", { className: "oos" }, "Indisponible") ) ) ) ); } function Boutique({ filter, setFilter, shopRef, rewardsRef }) { const { D, country, money, activeSpace, addToCart, showToast } = useStore(); const CATNAMES = ["Tout", ...D.CATS.map(c => c.name)]; const visible = filter === "Tout" ? D.PRODUCTS : D.PRODUCTS.filter(p => p.cat === filter); return ( React.createElement(React.Fragment, null, React.createElement(Hero, { onShop: () => shopRef.current && shopRef.current.scrollIntoView({ behavior: "smooth" }), onRewards: () => rewardsRef.current && rewardsRef.current.scrollIntoView({ behavior: "smooth" }), }), /* Categories */ React.createElement("section", { className: "blk wrap" }, React.createElement("div", { className: "sec-head" }, React.createElement("div", null, React.createElement("h2", null, "Explore par catégorie"), React.createElement("p", null, "Trouve vite ce qui te fait briller."))), React.createElement("div", { className: "cats" }, D.CATS.map(c => React.createElement("button", { key: c.name, className: "cat", style: { "--tint": c.tint, "--tint-dark": c.dark }, onClick: () => { setFilter(c.name); shopRef.current && shopRef.current.scrollIntoView({ behavior: "smooth" }); }, }, React.createElement("span", { className: "ce" }, c.emoji), React.createElement("span", { className: "cn" }, c.name), React.createElement("span", { className: "ck" }, c.count) ))) ), /* Featured */ React.createElement("section", { className: "blk wrap" }, React.createElement("div", { className: "feat" }, React.createElement("div", { className: "feat-copy" }, React.createElement("span", { className: "tag" }, "🎉 Nouveauté · Édition collector"), React.createElement("h3", null, "La peluche Styla"), React.createElement("p", null, "Toute douce, toujours prête à réviser à tes côtés. 24 cm de câlins, broderie main et pinceau ultra-moelleux."), React.createElement("div", { className: "price-row" }, React.createElement("span", { className: "big-price" }, money(34.90)), React.createElement("span", { className: "strike" }, money(42)), React.createElement("button", { className: "btn btn--accent", onClick: () => addToCart("Peluche Styla 24 cm", 34.90) }, "Ajouter au panier 🪄") ) ), React.createElement("div", { className: "feat-stage" }, React.createElement("div", { className: "feat-disc" }, window.Styla ? React.createElement(window.Styla, { pose: "hello", size: 180 }) : "🧸")) ) ), /* Products */ React.createElement("section", { className: "blk wrap", ref: shopRef }, React.createElement("div", { className: "sec-head" }, React.createElement("div", null, React.createElement("h2", null, "Tous les goodies"), React.createElement("p", null, "Disponibilité et prix pour ", React.createElement("strong", null, country.flag + " " + country.name), ". 💜"))), React.createElement("div", { className: "filters" }, CATNAMES.map(n => React.createElement("button", { key: n, className: "chip" + (filter === n ? " active" : ""), onClick: () => setFilter(n), }, n))), React.createElement("div", { className: "grid" }, visible.map(p => React.createElement(ProductCard, { key: p.name, p, available: p.co.includes(country.code) }))) ), /* Rewards */ React.createElement("section", { className: "blk wrap", ref: rewardsRef }, React.createElement("div", { className: "rewards" }, React.createElement("div", { className: "rhead" }, React.createElement("span", { style: { fontSize: "34px" } }, "⭐"), React.createElement("h2", null, "Échange tes points")), React.createElement("p", { className: "rsub" }, "Tu as gagné ", React.createElement("strong", null, activeSpace.xp.toLocaleString("fr-FR") + " points"), " sur l'espace ", React.createElement("strong", null, activeSpace.name), " en révisant. Dépense-les en récompenses exclusives — sans sortir la carte bleue."), React.createElement("div", { className: "rgrid" }, D.REWARDS.map(r => React.createElement("div", { className: "rcard", key: r.name }, React.createElement("span", { className: "re" }, r.emoji), React.createElement("span", { className: "rn" }, r.name), React.createElement("span", { className: "rp" }, r.price.toLocaleString("fr-FR") + " ⭐"), React.createElement("button", { className: "btn btn--success btn--sm", style: { marginTop: "6px" }, onClick: () => showToast("⭐ " + r.name + " — échange enregistré !") }, "Échanger") ))) ) ), /* Bundles */ React.createElement("section", { className: "blk wrap" }, React.createElement("div", { className: "sec-head" }, React.createElement("div", null, React.createElement("h2", null, "Packs cadeau"), React.createElement("p", null, "Le combo malin pour se faire plaisir (ou offrir)."))), React.createElement("div", { className: "bundles" }, D.BUNDLES.map(b => React.createElement("div", { className: "bcard" + (b.hot ? " hot" : ""), key: b.name }, React.createElement("span", { className: "save" }, b.save), React.createElement("span", { className: "bemoji" }, b.emoji), React.createElement("h3", null, b.name), React.createElement("p", { className: "bdesc" }, b.desc), React.createElement("ul", null, b.items.map(it => React.createElement("li", { key: it }, React.createElement("span", { className: "tick" }, "✓"), " " + it))), React.createElement("div", { className: "bprice" }, React.createElement("span", { className: "now" }, money(b.now)), React.createElement("span", { className: "was" }, money(b.was))), React.createElement("button", { className: "btn" + (b.hot ? " btn--accent" : ""), onClick: () => addToCart(b.name, b.now) }, "Ajouter le pack 🎁") ))) ), /* Trust */ React.createElement("section", { className: "blk wrap" }, React.createElement("div", { className: "trust" }, [["🚚", "Livraison offerte", "Selon le pays choisi"], ["✏️", "Fabriqué avec amour", "Par une équipe indé"], ["⭐", "Payable en XP", "Tes efforts récompensés"], ["↩️", "Retours 30 jours", "Satisfait ou remboursé"]] .map(t => React.createElement("div", { className: "t", key: t[1] }, React.createElement("span", { className: "te" }, t[0]), React.createElement("div", null, React.createElement("div", { className: "tt" }, t[1]), React.createElement("div", { className: "td" }, t[2])))) ) ), /* Newsletter */ React.createElement("section", { className: "blk wrap" }, React.createElement("div", { className: "news" }, React.createElement("div", { className: "dot-pattern" }), React.createElement("div", { style: { position: "relative" } }, React.createElement("h2", null, "Le prochain drop arrive 👀"), React.createElement("p", null, "Sois le premier prévenu des nouvelles collections Stylo et reçois ", React.createElement("strong", null, "-10 %"), " sur ta première commande."), React.createElement("form", { onSubmit: (e) => { e.preventDefault(); e.target.reset(); showToast("💌 Inscription confirmée !"); } }, React.createElement("input", { type: "email", placeholder: "ton@email.com", required: true }), React.createElement("button", { className: "btn", type: "submit" }, "Je m'inscris 🚀") ) ) ) ) ) ); } window.RepBoutique = Boutique; })();