// PELSKIN — shared components, products, bottle silhouettes const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; // ---------- Payments (Paystack, Ghana) ---------- // Test-Modus: pk_test-Key ist öffentlich (client-seitig by design). // Für den Livegang: durch pk_live ersetzen. Der Secret Key gehört NIE hierher. const PAYSTACK_PUBLIC_KEY = "pk_test_ea5c74cf579c740d783929e887c223e8dc9b792f"; // Preise werden in USD angezeigt, abgerechnet wird in GHS (Paystack-Ghana-Konto). // Kurs vor Livegang mit Esther abstimmen und hier pflegen: const USD_TO_GHS = 15; const toGHS = (usd) => Math.round(usd * USD_TO_GHS); // ---------- Products ---------- const PRODUCTS = [ { slug: "silk-wash", name: "Silk Wash", tagline: "Gentle Cleanser", accent: "Brighten + Balance", subhead: "Cleanses gently while maintaining balance.", priceUSD: 20, size: "100 ml / 3.4 fl oz", keyIngredients: ["Niacinamide", "Sodium PCA"], claims: ["Sulfate free", "Barrier safe", "Daily use"], description: "A gentle pH balanced cleanser that respects the skin barrier. Removes impurities without stripping. Suitable for all skin types, especially sensitive and reactive.", howToUse: "Massage onto damp skin morning and evening. Rinse with lukewarm water.", bottleType: "pump", bottleTone: "warm", }, { slug: "clarity-serum", name: "Clarity Serum", tagline: "Brighten + Clarify", accent: "Tone Evening Treatment", subhead: "Targets dullness for clearer, radiant skin.", priceUSD: 28, size: "30 ml / 1.0 fl oz", keyIngredients: ["Niacinamide", "Tone-evening actives"], claims: ["Tone evening", "Lightweight", "Daily or evening"], description: "Not brighter. Clearer. There's a difference. A lightweight serum for a clearer, more even looking complexion over time.", howToUse: "Apply 3 to 4 drops to clean skin before moisturizer. Start once daily in the evening, build up to twice daily.", bottleType: "dropper", bottleTone: "frosted", }, { slug: "barrier-repair-cream", name: "Barrier Repair Cream", tagline: "Nourish + Protect", accent: "Barrier Support Moisturizer", subhead: "Nourishes deeply and supports the skin barrier.", priceUSD: 30, size: "50 ml / 1.69 fl oz", keyIngredients: ["Ceramides", "Peptides", "Panthenol"], claims: ["Hydrates", "Calms", "Strengthens barrier"], description: "A rich yet weightless moisturizer that calms, restores and supports the skin barrier for a smooth balanced glow.", howToUse: "Apply morning and evening as the final step.", bottleType: "airless", bottleTone: "warm", }, ]; const BUNDLE = { slug: "the-system", name: "The System", tagline: "The Complete Ritual", accent: "Cleanse. Correct. Restore.", subhead: "Cleanse. Correct. Restore.", type: "bundle", includes: ["silk-wash", "clarity-serum", "barrier-repair-cream"], priceUSDIndividual: 78, priceUSDBundle: 70, discountPercent: 10, savingsCopy: "Save 10% when you buy the full system.", description: "The 3 step ritual designed to work together. Silk Wash to cleanse, Clarity Serum to correct, Barrier Repair Cream to restore. One ritual. Skin that reflects care.", howToUse: "Morning: Silk Wash, then Barrier Repair Cream. Evening: Silk Wash, then Clarity Serum, then Barrier Repair Cream.", badge: "Best value", }; const ALL_PRODUCTS = [...PRODUCTS, BUNDLE]; const productBySlug = (slug) => ALL_PRODUCTS.find((p) => p.slug === slug); // ---------- Product images (cropped from real product shots, with SVG fallback) ---------- const PRODUCT_IMG = { "silk-wash": "images/silk-wash-cutout.png", "clarity-serum": "images/clarity-serum-cutout.png", "barrier-repair-cream": "images/barrier-repair-cream-cutout.png", }; function Bottle({ type = "pump", tone = "warm", label = "PELSKIN", sub = "", slug }) { // Resolve slug from sub if not provided if (!slug) { if (sub.includes("Cleanser") || type === "pump") slug = "silk-wash"; else if (sub.includes("Clarity") || type === "dropper") slug = "clarity-serum"; else if (type === "airless") slug = "barrier-repair-cream"; } const src = PRODUCT_IMG[slug]; if (src) { return ( {slug} ); } const fill = tone === "frosted" ? "#F2EBE0" : tone === "deep" ? "#C4A485" : "#D4B894"; const stroke = "#A8896A"; const text = "#5C4033"; if (type === "pump") { return ( {/* nozzle */} {/* collar */} {/* body */} {label} {sub.split(" ")[0]} {sub.split(" ").slice(1).join(" ")} 100 ml / 3.4 fl oz ); } if (type === "dropper") { return ( {/* dropper bulb */} {/* cap */} {/* body — frosted */} {label} {sub.split(" ")[0]} {sub.split(" ").slice(1).join(" ")} 30 ml / 1.0 fl oz ); } // airless return ( {label} Barrier Repair Cream 50 ml / 1.69 fl oz ); } function BottleTrio() { return ( The Pelskin System ); } // ---------- Icons (minimal line icons) ---------- const Icon = { Cart: (p) => ( ), Menu: (p) => ( ), Close: (p) => ( ), ArrowRight: (p) => ( ), ArrowLeft: (p) => ( ), Plus: (p) => ( ), Check: (p) => ( ), Instagram: (p) => ( ), }; // ---------- App context ---------- const AppCtx = createContext(null); const useApp = () => useContext(AppCtx); // ---------- Header ---------- function Header({ onOpenMenu, onOpenCart, onOpenWaitlist }) { const { route, navigate, mode, cart } = useApp(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); const cartCount = cart.reduce((s, i) => s + i.qty, 0); const navItems = [ { label: "Shop", route: "shop", liveOnly: true }, { label: "The System", route: "system" }, { label: "Journal", route: "journal" }, { label: "Quiz", route: "quiz" }, { label: "About", route: "about" }, ]; return (
{mode === "waitlist" ? ( ) : ( )}
); } // ---------- Mobile Menu ---------- function MobileMenu({ open, onClose }) { const { navigate, mode } = useApp(); const items = [ { label: "Home", route: "home" }, ...(mode === "live" ? [{ label: "Shop", route: "shop" }] : []), { label: "The System", route: "system" }, { label: "Journal", route: "journal" }, { label: "Quiz", route: "quiz" }, { label: "About", route: "about" }, { label: "FAQ", route: "faq" }, { label: "Waitlist", route: "waitlist" }, ]; return ( <>
Menu
{items.map(i => ( ))}
); } // ---------- Footer ---------- function Footer() { const { navigate } = useApp(); return ( ); } function FooterSubscribe() { const { toast } = useApp(); const [email, setEmail] = useState(""); const [done, setDone] = useState(false); const submit = (e) => { e.preventDefault(); if (!email.includes("@")) return; setDone(true); setEmail(""); toast("You're on the list. Welcome."); setTimeout(() => setDone(false), 4000); }; return (
setEmail(e.target.value)} />
); } // ---------- Cart Sheet ---------- function CartSheet({ open, onClose }) { const { cart, updateQty, removeItem, navigate, toast } = useApp(); const [email, setEmail] = useState(""); const subtotal = cart.reduce((s, i) => { const p = productBySlug(i.slug); if (!p) return s; const price = p.type === "bundle" ? p.priceUSDBundle : p.priceUSD; return s + price * i.qty; }, 0); const totalGHS = toGHS(subtotal); const checkout = () => { if (!email.includes("@")) { toast("Please enter your email to continue."); return; } if (typeof PaystackPop === "undefined") { toast("Payment is still loading — please try again."); return; } const orderSummary = cart .map((i) => `${i.qty}x ${productBySlug(i.slug)?.name || i.slug}`) .join(", "); const handler = PaystackPop.setup({ key: PAYSTACK_PUBLIC_KEY, email, amount: totalGHS * 100, // Pesewas currency: "GHS", metadata: { custom_fields: [ { display_name: "Order", variable_name: "order", value: orderSummary }, { display_name: "Subtotal USD", variable_name: "subtotal_usd", value: `$${subtotal}` }, ], }, callback: (resp) => { onClose(); navigate("checkout-success"); toast("Payment received · Ref " + resp.reference); }, onClose: () => toast("Checkout closed — your bag is saved."), }); handler.openIframe(); }; return ( <>
); } // ---------- Toast ---------- function Toast({ message }) { return
{message || " "}
; } // ---------- Mode toggle (prototype only) ---------- function ModeToggle() { const { mode, setMode } = useApp(); return (
Launch
); } // ---------- Reusable bits ---------- function StepLabel({ n }) { return (
Step
{n}
); } function Accordion({ items }) { const [open, setOpen] = useState(null); return (
{items.map((it, i) => (
{it.a}
))}
); } Object.assign(window, { PRODUCTS, BUNDLE, ALL_PRODUCTS, productBySlug, Bottle, BottleTrio, Icon, AppCtx, useApp, Header, MobileMenu, Footer, CartSheet, Toast, ModeToggle, StepLabel, Accordion, });