/* global React, ReactDOM, COPY, Hero, Products, Brand, ContentStrip, Logo */
const { useState, useEffect } = React;
const INSTAGRAM_URL = "https://instagram.com/drommecookies";
/* ── NAV ─────────────────────────────────────────────────────── */
/* Logo is fixed-positioned and morphs from hero centerpiece (large, centered)
to nav corner (small, top-left) based on scroll. */
function Nav({ t }) {
const [vw, setVw] = useState(() =>
typeof window !== "undefined" ? window.innerWidth : 1200
);
const [progress, setProgress] = useState(0);
useEffect(() => {
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const threshold = Math.min(window.innerHeight * 0.5, 480);
const p = Math.min(1, Math.max(0, window.scrollY / threshold));
setProgress(p);
ticking = false;
});
};
const onResize = () => setVw(window.innerWidth);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onResize, { passive: true });
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onResize);
};
}, []);
// Smooth easeInOutCubic — softer feel than linear
const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const p = ease(progress);
// Size interpolation
const startSize = Math.min(248, Math.max(132, vw * 0.18));
const endSize = 56;
const logoSize = startSize + (endSize - startSize) * p;
// Center-point interpolation — keeps the visual trajectory clean as size shrinks
const isNarrow = vw < 768;
const startTop = isNarrow ? 96 : 120;
const endTop = (64 - endSize) / 2;
const startCenterY = startTop + startSize / 2;
const endCenterY = endTop + endSize / 2;
const centerY = startCenterY + (endCenterY - startCenterY) * p;
const top = centerY - logoSize / 2;
const startCenterX = vw / 2;
const endCenterX = (isNarrow ? 18 : 28) + endSize / 2;
const centerX = startCenterX + (endCenterX - startCenterX) * p;
const left = centerX - logoSize / 2;
return (
<>
0.15 ? "blur(14px)" : "none",
WebkitBackdropFilter: p > 0.15 ? "blur(14px)" : "none",
borderBottom: p > 0.85 ? "1px solid var(--rule)" : "1px solid transparent",
transition: "border-color 0.3s ease",
}}>
{/* Morphing logo: hero centerpiece → nav corner */}
);
}
/* ── FOOTER ──────────────────────────────────────────────────── */
function Footer({ t }) {
const links = [
{ label: t.footer.order, href: INSTAGRAM_URL, external: true },
{ label: t.footer.instagram, href: INSTAGRAM_URL, external: true },
{ label: t.footer.contact, href: "mailto:hei@drommecookies.no", external: false },
{ label: t.footer.tiktok, href: "#", external: false },
];
return (
);
}
/* ── APP ─────────────────────────────────────────────────────── */
function App() {
const lang = "no";
const t = COPY[lang];
useEffect(() => { document.documentElement.lang = lang; }, [lang]);
return (
<>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();