/* ============================================================ Nav + cinematic Hero (light, immersive, floating depth) ============================================================ */ function LangSwitch() { const { lang, setLang } = useT(); const item = (code) => ( ); return ( {item("da")}·{item("en")} ); } function Nav() { const { L, lang } = useT(); const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const intgHref = lang === "en" ? "/en/integrations" : "/integrations"; const links = [[L.nav.product, "#product"], [L.nav.integrations, intgHref], [L.nav.safety, "#product"], [L.nav.pricing, "#pricing"]]; const close = () => setOpen(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 60); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); return (
{L.nav.login} {L.nav.bookDemo}
{open && (
{links.map(([t, h]) => ( {t} ))}
{L.nav.login}
)}
); } /* ---- floating product fragments ---- */ function Frag({ children, w }) { return (
{children}
); } function TicketFrag({ initials, subject, pill, tag }) { return (
{initials} {subject}
{tag}
 ); } function ChipFrag({ label, pill, tag }) { return (
{label} {tag}
); } function GaugeFrag({ value, color, trustLabel }) { return (
{trustLabel}
); } function makeFragments(L) { const f = L.hero.frag; return [ { x: "8%", y: "19%", d: 64, el: }, { x: "73%", y: "15%", d: 52, el: }, { x: "83%", y: "63%", d: 70, el: }, { x: "11%", y: "66%", d: 58, el: }, { x: "62%", y: "80%", d: 46, el: }, { x: "19%", y: "40%", d: 40, el: }, { x: "87%", y: "37%", d: 60, el: (
Order #21994DE SHIPPED
{f.amount}44.94 EUR
 ) }, { x: "3%", y: "45%", d: 50, el: }, { x: "68%", y: "45%", d: 44, el: (
{f.reOrderStatus} {f.blocked}
{f.heldBy}
 ) }, { x: "29%", y: "81%", d: 66, el: }, { x: "40%", y: "11%", d: 38, el: }, ]; } function FloatingField() { const { L } = useT(); const ref = useRef(null); const fragments = makeFragments(L); useEffect(() => { const field = ref.current; if (!field) return; let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0; const onMove = (e) => { tx = (e.clientX / window.innerWidth - 0.5); ty = (e.clientY / window.innerHeight - 0.5); if (!raf) raf = requestAnimationFrame(tick); }; const tick = () => { cx += (tx - cx) * 0.08; cy += (ty - cy) * 0.08; field.style.setProperty("--px", cx.toFixed(4)); field.style.setProperty("--py", cy.toFixed(4)); raf = (Math.abs(tx - cx) > 0.001 || Math.abs(ty - cy) > 0.001) ? requestAnimationFrame(tick) : 0; }; window.addEventListener("pointermove", onMove, { passive: true }); return () => { window.removeEventListener("pointermove", onMove); if (raf) cancelAnimationFrame(raf); }; }, []); return (
{fragments.map((fr, i) => (
{fr.el}
))}
); } function CyclingWord({ words }) { const [i, setI] = useState(0); useEffect(() => { setI(0); const t = setInterval(() => setI(v => (v + 1) % words.length), 2200); return () => clearInterval(t); }, [words]); // All words share one grid cell, so the pill reserves the width of the LONGEST word // and never resizes as the active word changes — the line stays centered. return ( {words.map((w, idx) => ( {w} ))} ); } function Wordmark({ text }) { const parts = String(text).trim().split(" "); const last = parts.pop(); return ( {parts.join(" ")} {last} ); } function Hero() { const { L } = useT(); return (
{/* ambient wash */}
{/* center vignette so the wordmark reads above the fragments (stronger + blurred on mobile) */}
{L.hero.badge}

{L.hero.taglinePre}
{/* scroll cue */} {L.hero.scroll}
); } Object.assign(window, { LangSwitch, Nav, Hero });