/* global React, I18N */ const { useState: useS, useEffect: useE, useRef: useR, useContext: useC, createContext: createCtx } = React; // ========================================================= // PORTACOOLER · shared components (used on Hem + Allround) // ========================================================= const LangCtx = createCtx({ lang: "sv", setLang: () => {}, t: I18N.sv }); function LangProvider({ children }) { const [lang, setLang] = useS(() => localStorage.getItem("pc-lang") || "sv"); useE(() => { localStorage.setItem("pc-lang", lang); document.documentElement.lang = lang; }, [lang]); const t = I18N[lang]; return React.createElement(LangCtx.Provider, { value: { lang, setLang, t } }, children); } const useLang = () => useC(LangCtx); // ---------- Cart (lives in localStorage so it survives nav between pages) ---------- const CartCtx = createCtx(null); function CartProvider({ children }) { const [items, setItems] = useS(() => { try { return JSON.parse(localStorage.getItem("pc-cart") || "[]"); } catch { return []; } }); const [open, setOpen] = useS(false); const [toast, setToast] = useS(null); useE(() => { localStorage.setItem("pc-cart", JSON.stringify(items)); }, [items]); const add = (p) => { setItems(prev => { const i = prev.findIndex(x => x.id === p.id && x.color === p.color); if (i >= 0) { const copy = [...prev]; copy[i] = { ...copy[i], qty: copy[i].qty + (p.qty || 1) }; return copy; } return [...prev, { ...p, qty: p.qty || 1 }]; }); setToast({ name: p.name, ts: Date.now() }); setTimeout(() => setToast(t => (t && t.ts === toast?.ts) ? null : t), 2400); }; const remove = (i) => setItems(prev => prev.filter((_, j) => j !== i)); const setQty = (i, q) => setItems(prev => prev.map((it, j) => j === i ? { ...it, qty: Math.max(1, q) } : it)); const count = items.reduce((s, it) => s + it.qty, 0); return React.createElement(CartCtx.Provider, { value: { items, add, remove, setQty, count, open, setOpen, toast, setToast } }, children); } const useCart = () => useC(CartCtx); // ---------- Reveal-on-scroll wrapper ---------- function Reveal({ children, delay = 0, y = 24, as = "div", style = {}, ...rest }) { const ref = useR(null); const [shown, setShown] = useS(false); useE(() => { const el = ref.current; if (!el) return; // Check if already in viewport on mount (covers first paint + screenshot envs). const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh - 40 && r.bottom > 40) { setShown(true); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.08, rootMargin: "0px 0px -60px 0px" }); io.observe(el); // Safety net — if neither path fires within 800ms, just show it. const tm = setTimeout(() => setShown(true), 800); return () => { io.disconnect(); clearTimeout(tm); }; }, []); return React.createElement(as, { ref, ...rest, style: { ...style, opacity: shown ? 1 : 0, transform: shown ? "translateY(0)" : `translateY(${y}px)`, transition: `opacity 720ms var(--ease-out-warm) ${delay}ms, transform 720ms var(--ease-out-warm) ${delay}ms`, } }, children); } // ---------- Buttons ---------- function PCButton({ children, variant = "primary", onClick, type = "button", icon, full = false, size = "md", href }) { const base = { fontFamily: "var(--font-body)", fontWeight: 600, border: "none", cursor: "pointer", transition: "all 200ms var(--ease-out-warm), transform 120ms var(--ease-out-warm)", display: "inline-flex", alignItems: "center", gap: 8, letterSpacing: "-0.005em", width: full ? "100%" : "auto", justifyContent: "center", fontSize: size === "sm" ? 14 : size === "lg" ? 16 : 15, padding: size === "sm" ? "9px 16px" : size === "lg" ? "16px 28px" : "12px 22px", borderRadius: "var(--r-3)", textDecoration: "none", }; const variants = { primary: { background: "var(--sval-500)", color: "var(--fg-on-brand)", boxShadow: "var(--shadow-1), var(--shadow-inset-light)" }, onDark: { background: "var(--linne)", color: "var(--skog)" }, secondary: { background: "transparent", color: "var(--skog)", border: "1.5px solid var(--skog)" }, secondaryDark: { background: "transparent", color: "var(--linne)", border: "1.5px solid rgba(246,241,230,0.4)" }, tertiary: { background: "transparent", color: "var(--sval-500)", padding: "12px 6px" }, }; const props = { onClick, onMouseDown: e => { e.currentTarget.style.transform = "translateY(1px)"; }, onMouseUp: e => { e.currentTarget.style.transform = "translateY(0)"; }, onMouseLeave:e => { e.currentTarget.style.transform = "translateY(0)"; }, style: { ...base, ...variants[variant] }, }; if (href) return React.createElement("a", { href, ...props }, children, icon); return React.createElement("button", { type, ...props }, children, icon); } // ---------- Badge ---------- function PCBadge({ children, tone = "neutral" }) { const tones = { "in-stock": { bg: "#E2EADC", fg: "#4E6740", dot: "#7A9466" }, "low": { bg: "#F9E5C5", fg: "#B0701F", dot: "#E89A3C" }, "out": { bg: "#F3D7D3", fg: "#7A2F28", dot: "#B0463D" }, "new": { bg: "var(--skog)", fg: "var(--linne)", dot: null }, "sale": { bg: "var(--sol-500)", fg: "var(--skog)", dot: null }, "best": { bg: "var(--sval-900)", fg: "var(--linne)", dot: null }, "b2b": { bg: "var(--sval-100)", fg: "var(--sval-900)", dot: null }, "neutral": { bg: "var(--linne-djup)", fg: "var(--skog)", dot: null }, }; const tn = tones[tone] || tones.neutral; return ( {tn.dot && } {children} ); } // ---------- Eyebrow ---------- function Eyebrow({ children, color = "var(--sval-700)" }) { return (
{children}
); } // ---------- Logo ---------- function Logo({ size = 30, tone = "dark" }) { return ( Portacooler Portacooler ); } // ---------- Top Nav ---------- function TopNav({ current = "home" }) { const { lang, setLang, t } = useLang(); const { count, setOpen } = useCart(); const [scrolled, setScrolled] = useS(false); useE(() => { const onS = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onS); onS(); return () => window.removeEventListener("scroll", onS); }, []); const navItems = [ { id: "products", label: t.nav.products, href: "index.html#products" }, { id: "how", label: t.nav.how, href: "index.html#how" }, { id: "pro", label: t.nav.pro, href: "index.html#pro" }, { id: "ai", label: t.nav.ai, href: "index.html#ai" }, { id: "support", label: t.nav.support, href: "index.html#faq" }, ]; return (
{/* Language switcher */}
{["sv", "en"].map(code => { const active = lang === code; return ( ); })}
); } const iconBtn = { background: "transparent", border: "none", cursor: "pointer", padding: 8, borderRadius: "var(--r-2)", color: "var(--skog)", display: "inline-flex", }; // ---------- Footer ---------- function Footer() { const { t, lang, setLang } = useLang(); return ( ); } // ---------- Cart drawer + toast ---------- function CartDrawer() { const { items, remove, setQty, open, setOpen } = useCart(); const { t } = useLang(); const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0); const shipping = subtotal > 1500 || items.length === 0 ? 0 : 79; // lock body scroll while open useE(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); return (
setOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(27, 42, 34, 0.45)", opacity: open ? 1 : 0, transition: "opacity 220ms var(--ease-out-warm)", }} />
); } const qtyBtn = { background: "transparent", border: "none", width: 28, height: 28, cursor: "pointer", color: "var(--skog)" }; // ---------- Toast (cart add confirmation) ---------- function CartToast() { const { toast } = useCart(); const { t } = useLang(); return (
{toast?.name} — {t.cart.added}
); } Object.assign(window, { LangProvider, useLang, CartProvider, useCart, Reveal, PCButton, PCBadge, Eyebrow, Logo, TopNav, Footer, CartDrawer, CartToast, });