/* BeautyBloom — Catálogo interactivo */ // ============ HERO ============ function Hero({ onScrollTo, productCount }) { const heroRef = useRef(null); const [parallax, setParallax] = useState(0); useEffect(() => { const onScroll = () => { const y = window.scrollY || 0; setParallax(Math.min(120, y * 0.25)); }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
2026 Product Catalog · Korean Skincare

La piel
calmada,
empieza con
Centella.

{productCount} productos formulados con Centella Asiática de Madagascar. Calma irritaciones, repara la barrera, hidrata profundamente y mejora el tono — paso a paso, como en Corea.

100%Centella de Madagascar
5pasos para piel perfecta
15%off por mes de las mamás
onScrollTo("catalogo")} role="button">
Consiente a mamá · hasta 15 may

15% OFF en todos los productos

Comprar ahora →
); } // ---- Animated floating product silhouettes ---- function FloatingBottles() { const products = window.BB_DATA.products; const picks = useMemo(() => [ products.find(p => p.sku === "BB-S-001"), products.find(p => p.sku === "BB-A-003"), products.find(p => p.sku === "BB-C-004"), products.find(p => p.sku === "BB-SP-001"), ].filter(Boolean), [products]); return (
{picks.map((p, i) => (
{p.sku} {p.name}
))} ); } // ============ ROUTINE STRIP ============ function RoutineStrip({ onPickStep }) { const [active, setActive] = useState(null); return (
La rutina coreana en 5 pasos

Una rutina básica puede transformar tu piel.

Toca cualquier paso para filtrar el catálogo por esa categoría.

{window.BB_DATA.routine.map((r, i) => ( ))}
); } // ============ INGREDIENT HIGHLIGHT ============ function IngredientPanel() { return (
Ingrediente estrella

Centella Asiática
de Madagascar.

Reconocida por sus propiedades calmantes y reparadoras. Ideal para piel sensible, acneica o dañada. Es la base de cada fórmula BeautyBloom.

  • Calma irritaciones y enrojecimiento
  • Repara la barrera cutánea
  • Hidrata profundamente
  • Mejora la textura y aporta brillo
  • Suaviza líneas de expresión
Hojas de Centella Asiática de Madagascar
Centella asiatica Madagascar · Cosecha botánica
); } // ============ CATALOG ============ function Catalog({ query, setQuery, onOpenProduct, jumpToCategory, setJumpToCategory }) { const [cat, setCat] = useState("all"); const [concerns, setConcerns] = useState([]); const [ingredient, setIngredient] = useState(null); const [priceRange, setPriceRange] = useState(null); const [sort, setSort] = useState("featured"); const [showFilters, setShowFilters] = useState(true); // External jump (from routine strip) useEffect(() => { if (jumpToCategory) { setCat(jumpToCategory); setJumpToCategory(null); } }, [jumpToCategory]); const toggleConcern = (id) => { setConcerns(cs => cs.includes(id) ? cs.filter(c => c !== id) : [...cs, id]); }; const priceRanges = useMemo(() => ([ { id: "lte-400", label: "≤$400", match: (p) => p <= 400 }, { id: "400-500", label: "$400–$500", match: (p) => p > 400 && p <= 500 }, { id: "500-600", label: "$500–$600", match: (p) => p > 500 && p <= 600 }, { id: "gt-600", label: ">$600", match: (p) => p > 600 }, ]), []); const products = window.BB_DATA.products; const filtered = useMemo(() => { const q = query.trim().toLowerCase(); let list = products.filter(p => { if (cat !== "all" && p.category !== cat) return false; if (concerns.length && !concerns.every(c => (p.concerns || []).includes(c))) return false; if (ingredient && !(p.ingredients || []).includes(ingredient)) return false; if (priceRange) { const selectedRange = priceRanges.find(range => range.id === priceRange); if (selectedRange && !selectedRange.match(p.price)) return false; } if (q) { const haystack = [p.name, p.tagline, p.desc, p.sku, ...(p.ingredients || []), ...(p.concerns || [])] .join(" ").toLowerCase(); if (!haystack.includes(q)) return false; } return true; }); if (sort === "price-asc") list = [...list].sort((a, b) => a.price - b.price); if (sort === "price-desc") list = [...list].sort((a, b) => b.price - a.price); if (sort === "new") list = [...list].sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0)); if (sort === "featured") list = [...list].sort((a, b) => (b.bestseller ? 2 : 0) + (b.featured ? 1 : 0) - ((a.bestseller ? 2 : 0) + (a.featured ? 1 : 0))); return list; }, [cat, concerns, ingredient, priceRange, priceRanges, query, sort, products]); const counts = useMemo(() => { const m = { all: products.length }; products.forEach(p => { m[p.category] = (m[p.category] || 0) + 1; }); return m; }, [products]); const clearAll = () => { setQuery(""); setCat("all"); setConcerns([]); setIngredient(null); setPriceRange(null); }; const activeFilterCount = (cat !== "all" ? 1 : 0) + concerns.length + (ingredient ? 1 : 0) + (priceRange ? 1 : 0) + (query ? 1 : 0); return ( ); } // ============ QUICK VIEW MODAL ============ function QuickView({ product, onClose }) { const [tab, setTab] = useState("desc"); const [activeImg, setActiveImg] = useState(0); useEffect(() => { if (!product) return; setActiveImg(product.coverIndex ?? 0); document.body.style.overflow = "hidden"; const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); }; }, [product]); if (!product) return null; // Build image list: prefer images[] array, fall back to hero filename const imgList = (() => { if (product.images && product.images.length > 0) return product.images; if (product.hero) return [`products/${product.hero}.jpg`]; return []; })(); const related = (() => { const bySku = (product.relatedSkus || []) .map(sku => window.BB_DATA.products.find(p => p.sku === sku)) .filter(Boolean) .filter(p => p.sku !== product.sku); if (bySku.length > 0) return bySku.slice(0, 3); return window.BB_DATA.products .filter(p => p.category === product.category && p.sku !== product.sku) .slice(0, 3); })(); return (
e.stopPropagation()} role="dialog" aria-modal="true">
{/* Main image */} {imgList.length > 0 ? (
{product.name} { e.currentTarget.style.display = "none"; }} />
) : ( )} {/* Thumbnails — only shown when multiple images */} {imgList.length > 1 && (
{imgList.map((src, i) => ( ))}
)}
{product.step ? `Paso 0${product.step}` : "Especial"} · {product.tagline}

{product.name}

{product.sku} · {product.size}
{formatMXN(product.price)} 15% OFF · {formatMXN(Math.round(product.price * 0.85))} con cupón MAMÁ
{[ ["desc", "Descripción"], ["ing", "Activos"], ["uso", "Cómo usar"], ].map(([id, label]) => ( ))}
{tab === "desc" &&

{product.desc}

} {tab === "ing" && (
{(product.ingredients || []).map(ing => {ing})}

Para piel: {(product.concerns || []).map(c => window.BB_DATA.concerns.find(cc => cc.id === c)?.label ).filter(Boolean).join(" · ")}

)} {tab === "uso" && (
  1. Aplica sobre piel limpia y seca (paso {product.step || "—"}).
  2. Toma 2–3 gotas/dispensaciones y reparte por el rostro.
  3. Da palmaditas suaves hasta absorber.
  4. Continúa con el siguiente paso de tu rutina.
  5. De día, finaliza siempre con protector solar.
)}

Envíos a todo México desde Aguascalientes · contacto@beautybloom.com.mx

{related.length > 0 && (
Combina con
{related.map(r => ( ))}
)}
); } Object.assign(window, { Hero, RoutineStrip, IngredientPanel, Catalog, QuickView });