/* global React */ const { useState, useEffect, useRef } = React; const COOKIE_IMG = (window.__resources && window.__resources.cookieHero) || "assets/cookie-hero.jpg"; const LOGO_BROWN = (window.__resources && window.__resources.logoBrown) || "assets/logo-brown.png"; const LOGO_LIGHT = (window.__resources && window.__resources.logoLight) || "assets/logo-light.png"; const COOKIE_VISUALS = [ { position: "center 35%", scale: 1.08 }, { position: "center 58%", scale: 1.18 }, ]; function useReveal(threshold) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { el.classList.add("in"); io.disconnect(); } }, { threshold: threshold || 0.07, rootMargin: "0px 0px -2% 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ref; } /* ── HERO ─────────────────────────────────────────────────────── */ /* The morphing Nav logo lives over this section's top center. Hero leaves room for it via a flex spacer, then centers the headline below. */ const INSTAGRAM_URL = "https://instagram.com/drommecookies"; function Hero({ t }) { return (
{/* Editorial corner marks framing the logo */}
Lier · 59°N
Est. 2026 · N° 001
{/* Spacer reserving vertical real estate for the fixed morphing logo */}
{/* Center stage: eyebrow + headline */}
{/* Eyebrow framed by side rules */}
Bakt på bestilling · Lier

{t.hero.h1}
{t.hero.h2}

{/* Bottom frame: subtext + CTAs */}
{ e.currentTarget.style.background = "var(--chocolate-2)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--chocolate)"; }} > {t.hero.cta1} { e.currentTarget.style.opacity = "1"; }} onMouseLeave={e => { e.currentTarget.style.opacity = "0.7"; }}> {t.hero.cta2}
); } /* ── PRODUCTS ─────────────────────────────────────────────────── */ function Products({ t }) { const [active, setActive] = useState(0); const ref = useReveal(); const items = t.products.items; const item = items[active]; const visual = COOKIE_VISUALS[active] || COOKIE_VISUALS[0]; return ( ); } /* ── BRAND STATEMENT ──────────────────────────────────────────── */ function Brand({ t }) { const ref = useReveal(0.04); return (
{/* Mono label + rule */}
Drømme Cookies · Lier

{t.brand.title}

{t.brand.body}

); } /* ── CONTENT STRIP ────────────────────────────────────────────── */ function ContentStrip({ t }) { const ref = useReveal(0.04); const tiles = [ { ratio: "9 / 16", label: "Reel · 01" }, { ratio: "4 / 5", label: "Foto · 02" }, { ratio: "1 / 1", label: "Foto · 03" }, { ratio: "4 / 5", label: "Reel · 04" }, { ratio: "9 / 16", label: "Foto · 05" }, ]; return (

{t.content.title}

{tiles.map((tile, i) => { const tones = ["rgba(232,220,198,0.14)", "rgba(221,208,184,0.11)", "rgba(245,238,226,0.13)"]; return (
{tile.label.startsWith("Reel") ? "▶ " : "○ "}{tile.label}
); })}
); } /* ── LOGO ─────────────────────────────────────────────────────── */ function Logo({ size, variant }) { const s = size || 200; const src = variant === "light" ? LOGO_LIGHT : LOGO_BROWN; return ( Drømme Cookies ); } Object.assign(window, { useReveal, Hero, Products, Brand, ContentStrip, Logo });