// shared.jsx — wspólne komponenty: ikony, header, stopka, pola formularzy, helpery const { useState, useEffect, useRef, useCallback } = React; /* ── Ikony (inline SVG, stroke 1.8) ─────────────────────── */ const Ic = { Roof: (p) => ( ), Ground: (p) => ( ), Panel: (p) => ( ), Battery: (p) => ( ), Bolt: (p) => ( ), Leaf: (p) => ( ), Sun: (p) => ( ), Recycle: (p) => ( ), Check: (p) => ( ), Star: (p) => ( ), Phone: (p) => ( ), Mail: (p) => ( ), Clock: (p) => ( ), ArrowR: (p) => ( ), ArrowDown: (p) => ( ), Spinner: (p) => ( ), }; /* ── Helpery ────────────────────────────────────────────── */ const fmtPLN = (n) => new Intl.NumberFormat("pl-PL", { maximumFractionDigits: 0 }).format(Math.round(n)) + " zł"; const fmtNum = (n, d = 1) => new Intl.NumberFormat("pl-PL", { minimumFractionDigits: d, maximumFractionDigits: d }).format(n); const WOJEWODZTWA = [ "dolnośląskie", "kujawsko-pomorskie", "lubelskie", "lubuskie", "łódzkie", "małopolskie", "mazowieckie", "opolskie", "podkarpackie", "podlaskie", "pomorskie", "śląskie", "świętokrzyskie", "warmińsko-mazurskie", "wielkopolskie", "zachodniopomorskie", ]; /* Płynny licznik (count-up) przy zmianie wartości */ function CountUp({ value, format, duration = 450 }) { const [disp, setDisp] = useState(value); const fromRef = useRef(value); const rafRef = useRef(null); useEffect(() => { const from = fromRef.current; if (from === value) return; const t0 = performance.now(); const tick = (t) => { const p = Math.min(1, (t - t0) / duration); const e = 1 - Math.pow(1 - p, 3); setDisp(from + (value - from) * e); if (p < 1) rafRef.current = requestAnimationFrame(tick); else fromRef.current = value; }; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [value, duration]); return {format ? format(disp) : Math.round(disp)}; } /* Miękkie pojawianie się przy scrollu */ function Reveal({ children, as = "div", className = "", ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => entries.forEach((e) => e.isIntersecting && (e.target.classList.add("in"), io.unobserve(e.target))), { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, []); const Tag = as; return {children}; } /* Tooltip "i" */ function InfoTip({ text }) { return ( {text} ); } /* Kreska ozdobna — subtelny przerywnik (tylko na jasnych tłach, żeby był dobrze widoczny) */ function Rule({ w = 260, className = "", style }) { return ( ); } /* Pole formularza z walidacją na żywo */ function Field({ label, type = "text", value, onChange, error, touched, onBlur, placeholder, options, autoComplete, name }) { const invalid = touched && error; const id = `f-${name}`; return (
{options ? ( ) : ( onChange(e.target.value)} onBlur={onBlur} aria-invalid={!!invalid} /> )} {invalid ? error : ""}
); } /* Walidatory */ const validators = { name: (v) => (v.trim().length < 3 ? "Podaj imię i nazwisko" : ""), email: (v) => (/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim()) ? "" : "Podaj poprawny adres e-mail"), phone: (v) => (/^[\d\s+-]{9,15}$/.test(v.trim()) && v.replace(/\D/g, "").length >= 9 ? "" : "Podaj poprawny numer telefonu (9 cyfr)"), woj: (v) => (v ? "" : "Wybierz województwo"), rodo: (v) => (v ? "" : "Zgoda jest wymagana"), }; /* ── Lightbox (powiększenie zdjęcia ze slotu) ───────────── */ function Lightbox({ src, srcWebp, caption, onClose }) { useEffect(() => { const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); return (
e.stopPropagation()}>
{caption {caption ?

{caption}

: null}
); } /* ── Header ─────────────────────────────────────────────── */ const NAV = [ { id: "start", label: "Strona główna" }, { id: "kalkulator", label: "Kalkulator" }, { id: "realizacje", label: "Realizacje" }, { id: "kontakt", label: "Kontakt" }, ]; const NAV_LEFT = NAV.slice(0, 2); const NAV_RIGHT = NAV.slice(2); function Header({ route, go }) { const [open, setOpen] = useState(false); const nav = (id) => { setOpen(false); go(id); }; const link = (n) => ( { e.preventDefault(); nav(n.id); }}>{n.label} ); return (
{ e.preventDefault(); nav("start"); }} aria-label="Twój Kalkulator OZE — strona główna"> Twój Kalkulator OZE
{open ? (
{NAV.map((n) => ( { e.preventDefault(); nav(n.id); }}>{n.label} ))}
) : null}
); } /* ── Stopka ─────────────────────────────────────────────── */ function Footer({ go }) { return ( ); } Object.assign(window, { Ic, fmtPLN, fmtNum, WOJEWODZTWA, CountUp, Reveal, InfoTip, Rule, Field, validators, Lightbox, Header, Footer });