// Shared icons + components for Garage DéDé // Lucide-style stroke icons inlined as React components. const Icon = ({ children, size = 20, stroke = 2, className = "", style = {} }) => ( {children} ); const I = { Wrench: (p) => , Gauge: (p) => , Snow: (p) => , Tire: (p) => , Search: (p) => , ShieldCheck: (p) => , Car: (p) => , Calendar: (p) => , Phone: (p) => , WhatsApp: (p) => , ArrowRight: (p) => , ArrowLeft: (p) => , Check: (p) => , Star: (p) => , Pin: (p) => , Clock: (p) => , Mail: (p) => , Plus: (p) => , Lift: (p) => , Flag: (p) => , Sparkle: (p) => , Battery: (p) => , Bolt: (p) => , Cog: (p) => , Menu: (p) => , X: (p) => , Filter: (p) => , Drag: (p) => , Apk: (p) => , Diag: (p) => , Exhaust: (p) => , }; // Header / Navbar — met mobile hamburger // Helper voor SPA-links — echte die ook crawlable zijn voor Google // maar bij click niet de hele pagina herladen function NavLink({ to, onNav, children, style, className, onClick }) { const href = window.screenToHref ? window.screenToHref(to) : "/"; const handle = (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; // open in new tab toestaan e.preventDefault(); if (onClick) onClick(); if (onNav) onNav(to); }; return ( {children} ); } function Navbar({ active, onNav, brand, user, onLogout }) { const [menuOpen, setMenuOpen] = React.useState(false); // Account-knop is context-bewust: admin → werkplaats, klant → portaal, anders → login const accountItem = user?.role === 'admin' ? { id: "admin", label: "Werkplaats" } : user ? { id: "portaal", label: "Mijn account" } : { id: "admin", label: "Werkplaats" }; const items = [ { id: "home", label: "Home" }, { id: "diensten", label: "Diensten" }, { id: "tarieven", label: "Tarieven" }, { id: "over", label: "Over ons" }, accountItem, ]; const serviceItems = [ { id: "service-apk", label: "APK keuring" }, { id: "service-onderhoud", label: "Onderhoudsbeurt" }, { id: "service-reparatie", label: "Reparatie" }, { id: "service-diagnose", label: "Diagnose" }, { id: "service-airco", label: "Airco service" }, { id: "service-banden", label: "Banden & wielen" }, { id: "service-schadeherstel", label: "Schadeherstel" }, { id: "service-ruitschade", label: "Ruitschade" }, ]; const go = (id) => { setMenuOpen(false); onNav(id); }; return (
{brand}
023 - 545 1809
{/* Mobile drawer */} {menuOpen && (
Pagina's
{items.map(it => ( ))}
Diensten
{serviceItems.map(it => ( ))}
023 - 545 1809
)}
); } function Logo({ size = 36, mark = "monogram" }) { // Custom monogram: two D's mirrored, with a hex/wrench accent return ( {/* Two mirrored D's forming "DD" monogram */} {/* Diacritic — the é accent */} ); } function LogoLockup({ size = 36, brand, sub }) { return (
{brand} {sub && {sub}}
); } // Footer function Footer({ brand, onNav }) { const Col = ({ title, children }) => (
{title}
{children}
); const Lk = ({ children, to }) => { const href = window.screenToHref ? window.screenToHref(to) : "#"; return ( { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; e.preventDefault(); if (to && onNav) onNav(to); }} style={{ color: "var(--text-muted)", textDecoration: "none", fontSize: 14, padding: "2px 0", cursor: "pointer" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--text)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-muted)"}> {children} ); }; return ( ); } // Kenteken plate (visual) function Plate({ value = "X-123-YZ", size = "md" }) { const px = size === "lg" ? 28 : size === "sm" ? 14 : 18; return {value}; } // Section heading function SectionHead({ eyebrow, title, lede, align = "left" }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{lede &&

{lede}

}
); } // expose Object.assign(window, { I, Icon, Navbar, Footer, Plate, SectionHead, Logo, LogoLockup });