/* global React, useLang, useCart, PCButton, PCBadge, Eyebrow, Logo, Reveal */ const { useState: useSh, useEffect: useEh } = React; // ========================================================= // HEM (landing page) sections // ========================================================= // ----- HERO with 3 layout variants ----- function Hero({ layout = "split" }) { const { t } = useLang(); const { add, setOpen } = useCart(); const onShop = () => { setOpen(true); }; if (layout === "fullbleed") return ; if (layout === "editorial") return ; return ; } function HeroSplit({ t, onShop }) { return (
{t.hero.eyebrow}

{t.hero.titleA}{" "} {t.hero.titleB}

{t.hero.tagline}

{t.hero.body}

}>{t.hero.cta1} {t.hero.cta2} →
Portacooler i Tesla-mittkonsolen
); } function HeroEditorial({ t, onShop }) { return (
{t.hero.eyebrow}

{t.hero.titleA}{" "} {t.hero.titleB}

{t.hero.tagline}

{t.hero.body}

}>{t.hero.cta1} {t.hero.cta2} →
); } function HeroFullbleed({ t, onShop }) { return (
{/* Warm protection gradient — top + bottom for legibility */}
{t.hero.eyebrow}

{t.hero.titleA}{" "} {t.hero.titleB}

{t.hero.body}

}>{t.hero.cta1} {t.hero.cta2}
); } function HeroStats({ t }) { const stats = [ { v: "+4 °C", l: t.hero.stat1L }, { v: "USB-C", l: t.hero.stat2L }, { v: "720 g", l: t.hero.stat3L }, ]; return (
{stats.map((s, i) => ( {i > 0 &&
}
{s.v} {s.l}
))}
); } function SpecRow({ t, dark }) { const c = dark ? "var(--linne)" : "var(--skog)"; const sub = dark ? "rgba(246,241,230,0.7)" : "var(--skog-bleek)"; const stats = [ { v: "+4 °C", l: t.hero.stat1L }, { v: "USB-C", l: t.hero.stat2L }, { v: "720 g", l: t.hero.stat3L }, ]; return (
{stats.map(s => (
{s.v} {s.l}
))}
); } function FloatingChip({ t }) { return (
{t.hero.chipTitle}
{t.hero.chipBody}
); } function SpecChip() { return (
18 W · USB-C PD
); } // ----- Trust row ----- function TrustRow() { const { t } = useLang(); const logos = ["Allt om Bil", "SLU", "KTH Materialteknik", "Naturkompaniet", "XXL Sport", "Bilprovningen"]; return (
{t.trust.label} {logos.map(l => ( {l} ))}
); } // ----- How it works ----- function HowItWorks() { const { t } = useLang(); const icons = ["ph-wrench", "ph-usb", "ph-thermometer-cold"]; return (
{t.how.eyebrow}

{t.how.title1} {t.how.title2}

{t.how.steps.map((s, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-3)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }} >
{s.n}

{s.t}

{s.b}

 ))}
); } // ----- Products ----- const PRODUCTS = [ { id: "small", key: "small", name: "Small", price: 990, volume: "0,35", weight: 520, watt: 15 }, { id: "allround", key: "allround", name: "Allround", price: 1290, volume: "0,5", weight: 720, watt: 18, href: "allround.html" }, { id: "pro", key: "pro", name: "Pro", price: 2490, volume: "1,0", weight: 1180, watt: 32 }, ]; function ProductsSection() { const { t } = useLang(); const { add } = useCart(); return (
{t.products.eyebrow}

{t.products.title}

{t.products.all} →
{PRODUCTS.map((p, i) => { const c = t.products.cards[p.key]; return ( add({ id: p.id, name: `Portacooler ${p.name}`, price: p.price, volume: p.volume, image: "assets/illu-product.svg", color: "Blå", })} /> ); })}
); } function ProductCard({ p, c, t, onAdd }) { const [hover, setHover] = useSh(false); const stock = p.id === "pro" ? "low" : "in-stock"; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "#fff", border: "1px solid var(--border-soft)", borderRadius: "var(--r-4)", overflow: "hidden", display: "flex", flexDirection: "column", transition: "transform 220ms var(--ease-out-warm), box-shadow 220ms var(--ease-out-warm)", transform: hover ? "translateY(-6px)" : "translateY(0)", boxShadow: hover ? "var(--shadow-3)" : "var(--shadow-1)", }}>
{c.tag && (
{c.tag}
)} {`Portacooler
{stock === "in-stock" ? c.stock : c.stock} {p.volume} L · {p.weight} g

Portacooler {p.name}

{c.t}

USB-C· {p.watt} W· +4 °C
{p.price.toLocaleString("sv-SE")}kr }>{t.products.lagg}
); } // ----- Use cases ----- function UseCases() { const { t } = useLang(); const cases = [ { icon: "ph-car", illu: "assets/illu-car.svg", key: 0 }, { icon: "ph-picnic-basket", illu: "assets/illu-picnic.svg", key: 1 }, { icon: "ph-flask", illu: "assets/illu-lab.svg", key: 2 }, { icon: "ph-backpack", illu: "assets/illu-backpack.svg", key: 3 }, ]; return (
{t.cases.eyebrow}

{t.cases.title}

{cases.map((c, i) => { const item = t.cases.items[c.key]; return ( ); })}
); } function UseCaseCard({ c, item }) { const [hover, setHover] = useSh(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: hover ? "var(--linne)" : "var(--linne-djup)", borderRadius: "var(--r-4)", padding: 24, display: "flex", flexDirection: "column", gap: 14, textDecoration: "none", border: "1px solid transparent", transition: "all 200ms var(--ease-out-warm)", transform: hover ? "translateY(-4px)" : "translateY(0)", boxShadow: hover ? "var(--shadow-2)" : "none", }}>

{item.t}

{item.b}

 ); } // ----- Testimonials carousel ----- function Testimonials() { const { t } = useLang(); const [idx, setIdx] = useSh(0); useEh(() => { const i = setInterval(() => setIdx(v => (v + 1) % t.testimonials.items.length), 7000); return () => clearInterval(i); }, [t.testimonials.items.length]); return (
{t.testimonials.eyebrow}
"
{t.testimonials.items.map((item, i) => (
{item.q}
{item.n}
{item.m}
))}
{t.testimonials.items.map((_, i) => (
); } // ----- About ----- function About() { const { t } = useLang(); return (
{t.about.eyebrow}

{t.about.title1}{t.about.title2}

{t.about.body1}

{t.about.body2}

{t.about.stats.map(s => (
{s.n}
{s.l}
))}
}>{t.about.cta}
); } // ----- AI (B2B side service) ----- function AISection() { const { t } = useLang(); return (
{t.ai.eyebrow}

{t.ai.title1}{t.ai.title2}

{t.ai.body}

}>{t.ai.cta}
{t.ai.bullets.map((b, i) => (
{b}
))}
LLAMA · MISTRAL · QWEN·ON-PREM
); } // ----- FAQ accordion ----- function FAQ() { const { t } = useLang(); const [open, setOpen] = useSh(0); return (
{t.faq.eyebrow}

{t.faq.title}

Hittar du inte svaret? Mejla oss på hej@portacooler.se.

{t.faq.items.map((it, i) => ( setOpen(open === i ? -1 : i)} first={i === 0} /> ))}
); } function FAQItem({ item, open, onToggle, first }) { return (

{item.a}

); } // ----- Closing CTA ----- function ClosingCTA() { const { t } = useLang(); const { setOpen } = useCart(); return (
Klart att börja

{t.hero.titleA} {t.hero.titleB}

Skickas inom 1–2 dagar från Kristinehamn. 60 dagars öppet köp.

}> {t.hero.cta1} setOpen(true)}> {t.nav.cart}
); } Object.assign(window, { Hero, TrustRow, HowItWorks, ProductsSection, UseCases, Testimonials, About, AISection, FAQ, ClosingCTA, PRODUCTS, });