// components.jsx — shared UI: Nav, Footer, hooks, primitives const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- hooks ---------- function useT() { const [lang, setLang] = useState(() => localStorage.getItem("invia.lang") || "fr"); useEffect(() => {localStorage.setItem("invia.lang", lang);}, [lang]); const t = window.I18N[lang]; return { t, lang, setLang }; } function useScrollSpy() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return scrolled; } // ---------- in-view fade ---------- function InView({ children, as: As = "div", delay = 0, className = "", ...rest }) { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; // Fallback: in case IntersectionObserver is throttled (sandboxed iframes, etc.), // force visible after a short delay so content never stays invisible. const fallback = setTimeout(() => setVis(true), 700); const io = new IntersectionObserver( (entries) => entries.forEach((e) => {if (e.isIntersecting) {setVis(true);clearTimeout(fallback);io.disconnect();}}), { threshold: 0.12, rootMargin: "0px 0px -8% 0px" } ); io.observe(el); return () => {clearTimeout(fallback);io.disconnect();}; }, []); return ( {children} ); } // ---------- logo / mark ---------- // Uses real brand SVG: bleu (light bg) and blanc (dark bg) variants. function BrandMark({ size = 28, variant = "bleu" }) { const src = variant === "blanc" ? "assets/logo-blanc.svg" : "assets/logo-bleu.svg"; return ( Invia Gestion Financière

); } // ---------- nav ---------- function Nav({ current, go, lang, setLang }) { const t = window.I18N[lang]; const scrolled = useScrollSpy(); const [mobileOpen, setMobileOpen] = useState(false); const links = [ { id: "home", label: t.nav.home }, { id: "copropriete", label: t.nav.copropriete }, { id: "professionnel", label: t.nav.professionnel }, { id: "ressources", label: t.nav.ressources }, { id: "cas", label: t.nav.cas }, { id: "faq", label: t.nav.faq }, { id: "apropos", label: t.nav.apropos }, { id: "contact", label: t.nav.contact }]; return ( <>

{links.map((l) => {setMobileOpen(false);go(l.id);}}>{l.label})}

{setMobileOpen(false);go("contact");}}> {t.nav.cta} →

); } // ---------- footer ---------- function Footer({ go, lang }) { const t = window.I18N[lang]; const f = t.footer; return ( ); } // ---------- sticky mobile cta ---------- function StickyCTA({ go, lang }) { const t = window.I18N[lang]; const labels = [t.nav.cta, t.nav.ctaAlt]; const [idx, setIdx] = useState(0); useEffect(() => { const id = setInterval(() => setIdx((i) => (i + 1) % labels.length), 5000); return () => clearInterval(id); }, [labels.length]); return ( go("contact")}> {labels[idx]} → ); } // ---------- ticker ---------- function Ticker({ items }) { const list = [...items, ...items]; return (

{list.map((it, i) =>

◆ {it}

)}

{list.map((it, i) =>

◆ {it}

)}

); } // ---------- decorative chart (sparse, premium) ---------- function GrowthChart({ height = 280 }) { // two compounding curves: standard 2.5%, invia 4.8% const W = 600,H = height,padL = 40,padR = 20,padT = 20,padB = 28; const innerW = W - padL - padR,innerH = H - padT - padB; const years = 10; const startVal = 100; const ptsFor = (rate) => { const arr = []; for (let y = 0; y <= years; y++) { const v = startVal * Math.pow(1 + rate, y); arr.push(v); } return arr; }; const standard = ptsFor(0.025); const invia = ptsFor(0.048); const max = invia[invia.length - 1] * 1.05; const min = startVal * 0.95; const xFor = (i) => padL + i / years * innerW; const yFor = (v) => padT + innerH - (v - min) / (max - min) * innerH; const pathFor = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"} ${xFor(i).toFixed(1)} ${yFor(v).toFixed(1)}`).join(" "); const areaFor = (arr) => `${pathFor(arr)} L ${xFor(years)} ${padT + innerH} L ${padL} ${padT + innerH} Z`; return ( ); } // ---------- placeholder block ---------- function Placeholder({ label = "PLACEHOLDER", h = 320, dark = false, children }) { return (

{children || {label}}

); } Object.assign(window, { useT, useScrollSpy, InView, BrandMark, Nav, Footer, StickyCTA, Ticker, GrowthChart, Placeholder });