/* ============ Shared UI: icons, Logo, Placeholder, Nav, Footer ============ */ const { useState, useEffect, useRef, useMemo } = React; const D = window.KL_DATA; /* ---------- lead tracking helpers ---------- */ function useBooked() { const [info, setInfo] = useState(() => { try { return JSON.parse(localStorage.getItem("kl_booked") || "null"); } catch { return null; } }); useEffect(() => { const sync = () => { try { setInfo(JSON.parse(localStorage.getItem("kl_booked") || "null")); } catch { setInfo(null); } }; window.addEventListener("kl_booked_change", sync); window.addEventListener("storage", sync); return () => { window.removeEventListener("kl_booked_change", sync); window.removeEventListener("storage", sync); }; }, []); return info; } function setBooked(data) { if (data) { // append to leads log (all bookings tracked) let leads = []; try { leads = JSON.parse(localStorage.getItem("kl_leads") || "[]"); } catch {} leads.push(data); localStorage.setItem("kl_leads", JSON.stringify(leads)); localStorage.setItem("kl_booked", JSON.stringify(data)); } else { localStorage.removeItem("kl_booked"); } window.dispatchEvent(new Event("kl_booked_change")); } /* ---------- tiny inline icons (stroke, currentColor) ---------- */ const Ic = { phone: (p) => , check: (p) => , arrow: (p) => , home: (p) => , star: (p) => , plus: (p) => , minus: (p) => , chevron: (p) => , mail: (p) => , pin: (p) => , shield: (p) => , clock: (p) => , spark: (p) => , euro: (p) => , wallet: (p) => , cal: (p) => , window: (p) => , fb: (p) => , ig: (p) => , google: (p) => , }; function Logo({ light, sub = true }) { if (light) { /* footer: dark bg — icon tile + white text */ return (

Lasinen {sub && Ikkunanpesu · Oulu}

); } /* nav / default: full horizontal logo image */ return (

); } function Placeholder({ label, h = 320, brand, style, className = "" }) { return (

{label}

); } /* count-up number that animates from 0 → value when scrolled into view */ function CountUp({ value, decimals = 0, prefix = "", suffix = "", duration = 1400 }) { const ref = useRef(null); const [disp, setDisp] = useState(0); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setDisp(value); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const t0 = performance.now(); let timer; const step = () => { const p = Math.min(1, (performance.now() - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setDisp(value * eased); if (p < 1) timer = setTimeout(step, 32); else setDisp(value); }; step(); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [value, duration]); const fmt = (n) => n.toLocaleString("fi-FI", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); return {prefix}{fmt(disp)}{suffix}; } /* ---------------- NAV ---------------- */ function Nav({ route, go }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); // lock body scroll + close on Esc while the mobile menu is open useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; }, [open]); const links = [ ["etusivu", "Etusivu"], ["ikkunanpesu", "Ikkunanpesu"], ["hintalaskuri", "Hintalaskuri"], ["meista", "Meistä"], ["yhteystiedot", "Yhteystiedot"], ]; const nav = (id) => { setOpen(false); go(id); }; return (

{e.preventDefault();nav("etusivu");}}>

{/* mobile menu */}

{e.preventDefault();nav("yhteystiedot");}}>Yhteystiedot

); } /* ---------------- FOOTER ---------------- */ function Footer({ go }) { return ( ); } Object.assign(window, { Ic, Logo, Placeholder, CountUp, Nav, Footer });