// PepLab Co — Reusable UI components const WhatsAppIcon = ({ size = 18, color = "currentColor" }) => ( ); const ArrowRight = ({ size = 16 }) => ( ); const PlMolecule = ({ size = 28, color = "currentColor" }) => ( // Original mark: two linked hexagonal nodes (abstract molecule), thin lines ); const Logo = ({ color = "var(--navy-deep)", size = 22 }) => ( PepLabCo ); // Vial illustration — original geometric SVG (not branded) const Vial = ({ accent = "var(--navy-deep)", label = "GHK-Cu", dose = "50 MG", size = 240 }) => { const w = size; const h = size * 1.4; return ( ); }; // Header const PlHeader = ({ scrolled, onCartOpen }) => { const [mobileOpen, setMobileOpen] = React.useState(false); const linkColor = scrolled ? "var(--graphite)" : "var(--white)"; const navItems = [ { label: "Tienda", href: "/#productos" }, { label: "Usos", href: "/#usos" }, { label: "Cómo comprar", href: "/#como-comprar" }, { label: "Guía", href: "/#articulos" }, { label: "FAQ", href: "/#faq" }, ]; React.useEffect(() => { document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); return (

{/* Desktop nav */} {/* Mobile controls (Cart + WhatsApp icon + hamburger) */}

onCartOpen && onCartOpen()} color={scrolled || mobileOpen ? "var(--graphite)" : "var(--white)"} compact />

{/* Mobile dropdown panel */} {mobileOpen && (

{navItems.map((item) => ( setMobileOpen(false)} style={{ color: "var(--navy-deep)", textDecoration: "none", fontSize: 18, fontWeight: 500, padding: "14px 0", borderBottom: "1px solid var(--gray-line)", }} > {item.label} ))} setMobileOpen(false)} className="btn btn-whatsapp" style={{ marginTop: 20, width: "100%" }} > Conversemos por WhatsApp

)}

); }; // Sticky WhatsApp const StickyWA = () => ( e.currentTarget.style.transform = "scale(1.08)"} onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"} > ); // Cart icon (SVG) with optional badge counter const CartIcon = ({ size = 22, color = "currentColor" }) => ( ); // Cart button — opens the cart drawer. Used inside the header. const CartButton = ({ onClick, color = "var(--graphite)", compact = false }) => { const cart = (typeof useCart === "function") ? useCart() : { items: [] }; const count = (cart.items || []).reduce((a, i) => a + i.quantity, 0); return ( ); }; // CartToast — appears top-right after adding an item, dismisses in 4s // Listens to PEPLAB_CART.lastAdded changes via useCart hook const CartToast = ({ onCartOpen }) => { const cartState = (typeof useCart === "function") ? useCart() : { lastAdded: null }; const [visible, setVisible] = React.useState(false); const [displayed, setDisplayed] = React.useState(null); const lastSeenTs = React.useRef(0); const dismissTimer = React.useRef(null); React.useEffect(() => { const la = cartState.lastAdded; if (!la || !la.ts || la.ts === lastSeenTs.current) return; lastSeenTs.current = la.ts; setDisplayed(la); setVisible(true); if (dismissTimer.current) clearTimeout(dismissTimer.current); dismissTimer.current = setTimeout(() => { setVisible(false); // Give the slide-out animation time before clearing the cached display setTimeout(() => setDisplayed(null), 350); }, 4000); return () => { if (dismissTimer.current) clearTimeout(dismissTimer.current); }; }, [cartState.lastAdded]); const handleViewCart = () => { setVisible(false); if (dismissTimer.current) clearTimeout(dismissTimer.current); if (window.PEPLAB_CART) window.PEPLAB_CART.clearLastAdded(); if (onCartOpen) onCartOpen(); }; const handleDismiss = () => { setVisible(false); if (dismissTimer.current) clearTimeout(dismissTimer.current); }; if (!displayed) return null; const product = (window.PEPLAB_PRODUCTS || []).find((p) => p.slug === displayed.slug); if (!product) return null; const count = (cartState.items || []).reduce((a, i) => a + i.quantity, 0); return (

{/* Product thumbnail */}

{product.image ? (

) : ( )}

{/* Body */}

✓ Agregado al carrito

{product.name}

{/* Dismiss */}

); }; // CartDrawer — slide-in from the right with the full cart UI const CartDrawer = ({ open, onClose }) => { const cartState = (typeof useCart === "function") ? useCart() : { items: [], region: null }; const cart = window.PEPLAB_CART; const items = cartState.items || []; const region = cartState.region; const shipping = window.calcShipping ? window.calcShipping(items, region) : null; const subtotal = items.reduce((a, i) => { const p = (window.PEPLAB_PRODUCTS || []).find((p) => p.slug === i.slug); return a + (p?.priceNum || 0) * i.quantity; }, 0); const total = subtotal + (shipping || 0); const promoApplied = window.hasFreeShippingPromo ? window.hasFreeShippingPromo(items) : false; const upsellEligible = cart && cart.isEligibleForPromoUpsell ? cart.isEligibleForPromoUpsell() : false; const [checkoutLoading, setCheckoutLoading] = React.useState(false); const [checkoutError, setCheckoutError] = React.useState(null); const fmt = window.formatCLP || ((n) => "$" + n); // Lock body scroll while open React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [open]); if (!open) return null; const regions = (window.PEPLAB_SHIPPING && window.PEPLAB_SHIPPING.regions) || []; const handleCheckout = async () => { if (items.length === 0) return; if (!region) { setCheckoutError("Selecciona tu región para calcular el envío."); return; } setCheckoutError(null); setCheckoutLoading(true); try { const res = await fetch("/api/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ items: items.map((i) => ({ slug: i.slug, quantity: i.quantity })), region, }), }); const data = await res.json(); if (!res.ok || !data.init_point) { throw new Error(data.error || "No se pudo crear el pago"); } window.location.href = data.init_point; } catch (err) { console.error("Cart checkout error:", err); setCheckoutError("No pudimos procesar tu pedido. Probá de nuevo o escribínos por WhatsApp."); setCheckoutLoading(false); } }; return (

e.stopPropagation()} style={{ width: "min(520px, 100%)", height: "100vh", background: "var(--white)", overflow: "auto", animation: "slideRight 0.35s cubic-bezier(0.2, 0.8, 0.2, 1)", display: "flex", flexDirection: "column", }} > {/* Header */}

Tu pedido

Carrito {items.length > 0 && · {items.length}}

{/* Body */} {items.length === 0 ? (

Tu carrito está vacío

Explorá la tienda y armá tu pedido. Recordá que sumando agua bacteriostática tenés envío gratis.

) : ( <> {/* Promo banner (when applied OR when eligible) */} {(promoApplied || upsellEligible) && (

{promoApplied ? "Envío gratis ✓" : "Tip"} {promoApplied ? "Tu pedido califica para envío gratis a todo Chile." : ( <>Sumá y el envío te sale gratis a todo Chile. )}

)} {/* Items */}

{items.map((item) => { const product = (window.PEPLAB_PRODUCTS || []).find((p) => p.slug === item.slug); if (!product) return null; return (

{/* image */}

{product.image ? ( {product.name}

{product.name}

) : ( )}

{/* info */}

{product.name}

{product.dose} · {fmt(product.priceNum)}

{/* quantity controls */}

{item.quantity}

{/* line total + delete */}

{fmt(product.priceNum * item.quantity)}

); })}

{/* Region selector + totals */}

Región de envío {/* Breakdown */}

Subtotal {fmt(subtotal)}

Envío {shipping == null ? "Selecciona región" : shipping === 0 ? "GRATIS" : fmt(shipping)}

Total {fmt(total)}

{/* Checkout footer */}

{checkoutError && (

{checkoutError}

)} {/* PayPal as USD shortcut — only when cart has exactly 1 item, qty 1 */} {(() => { if (items.length !== 1 || items[0].quantity !== 1) return null; const paypalUrl = window.PEPLAB_PAYMENTS?.paypal?.[items[0].slug]; if (!paypalUrl) return null; return ( { e.currentTarget.style.background = "#F0B72A"; e.currentTarget.style.borderColor = "#F0B72A"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "#FFC439"; e.currentTarget.style.borderColor = "#FFC439"; }} > o pagar en USD ); })()}

Pago seguro · Importado desde Australia · Solo para mayores de 18 años

)}

); }; // Age gate persistence — once user confirms 18+, remember for 30 days across pages const AGE_KEY = "peplab-age-verified"; const AGE_TTL_MS = 30 * 24 * 60 * 60 * 1000; const ageVerified = () => { try { const v = window.localStorage && localStorage.getItem(AGE_KEY); if (!v) return false; const ts = parseInt(v, 10); if (isNaN(ts)) return false; return Date.now() - ts < AGE_TTL_MS; } catch (e) { return false; } }; const markAgeVerified = () => { try { localStorage.setItem(AGE_KEY, Date.now().toString()); } catch (e) {} }; window.ageVerified = ageVerified; window.markAgeVerified = markAgeVerified; // PayPal mark — official two-color lockup ("Pay" navy + "Pal" cyan) const PayPalMark = ({ size = 28 }) => ( ); // Mercado Pago mark — white version (used over brand cyan background) const MercadoPagoMark = ({ size = 22, color = "#FFFFFF" }) => ( ); // Payment options block — PRIMARY CTA in ProductDrawer for available products // Just "Agregar al carrito" (full-width). PayPal and Mercado Pago live in the CartDrawer now. const PaymentOptions = ({ slug, productName, onAdded }) => { const [added, setAdded] = React.useState(false); // Add to cart — el CartToast global da el feedback ("ver carrito"). // onAdded (opcional) cierra el panel de detalle para que la notificación quede visible. const handleAddToCart = () => { if (window.PEPLAB_CART) { window.PEPLAB_CART.addItem(slug, 1); setAdded(true); setTimeout(() => setAdded(false), 1500); // Cerrar el sidebar tras un instante para revelar la notificación del carrito if (onAdded) setTimeout(() => onAdded(), 450); } }; if (!window.PEPLAB_CART) return null; const cartStyle = { width: "100%", height: 64, display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 12, borderRadius: 6, fontFamily: "var(--sans)", cursor: "pointer", transition: "all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1)", boxShadow: "0 2px 0 rgba(0,0,0,0.04)", background: added ? "var(--success)" : "var(--champagne)", border: "1.5px solid " + (added ? "var(--success)" : "var(--champagne)"), color: added ? "#FFFFFF" : "var(--navy-deep)", fontSize: 14, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", }; const hoverCart = (e) => { if (added) return; e.currentTarget.style.background = "#B8985A"; e.currentTarget.style.borderColor = "#B8985A"; e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 16px 36px rgba(201, 169, 97, 0.45)"; }; const leaveCart = (e) => { if (added) return; e.currentTarget.style.background = "var(--champagne)"; e.currentTarget.style.borderColor = "var(--champagne)"; e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 2px 0 rgba(0,0,0,0.04)"; }; return ( ); }; // Vial image — uses real product photography when available, falls back to SVG Vial const VialImage = ({ product, size = 240 }) => { if (product.image) { return ( {`Vial

{`Vial

); } return ( ); }; Object.assign(window, { WhatsAppIcon, ArrowRight, PlMolecule, Logo, Vial, VialImage, PlHeader, StickyWA, PayPalMark, MercadoPagoMark, PaymentOptions, CartIcon, CartButton, CartDrawer, CartToast });