/* Shared components: Nav, Footer, Logo, Modal, QuoteForm */ const { useState, useEffect, useRef } = React; // ────────────────────────────────────────────────────────────────────────── // Logo function MobicoLogo({ onDark = false, size = 28 }) { // Custom inline SVG — derived from logo evidence (cobalt navy field, white // horse+arch mark) — flagged as placeholder per design brief. const wordColor = onDark ? "#ffffff" : "#0f1115"; return (
{/* Stylised horse + arch mark in white */} MOBICO.
); } // ────────────────────────────────────────────────────────────────────────── // Nav function Nav({ route, navigate, onQuote, onLang, lang }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 4); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const items = [ { id: "products", label: "Products" }, { id: "sectors", label: "Sectors" }, { id: "projects", label: "Projects" }, { id: "showroom", label: "Showroom" }, { id: "about", label: "About" }, { id: "contact", label: "Contact" }, ]; return (
{e.preventDefault(); navigate({page:"home"});}} style={{display:"flex", alignItems:"center"}}>
{open && (
{items.map(it=>( {e.preventDefault(); navigate({page:it.id}); setOpen(false);}} style={{padding:"14px 0", borderBottom:"1px solid var(--line-2)", fontSize:18}}> {it.label} ))}
)}
); } // ────────────────────────────────────────────────────────────────────────── // Footer function Footer({ navigate, onQuote }) { const { CONTACT, CATEGORIES, SECTORS } = window.MOBICO_DATA; return ( ); } // ────────────────────────────────────────────────────────────────────────── // Modal shell function Modal({ open, onClose, title, children, wide }) { useEffect(()=>{ if(!open) return; const k = (e) => e.key==="Escape" && onClose(); window.addEventListener("keydown", k); document.body.style.overflow = "hidden"; return ()=>{ window.removeEventListener("keydown", k); document.body.style.overflow=""; }; }, [open, onClose]); if(!open) return null; return (
e.stopPropagation()} style={{ background:"var(--paper)", maxWidth: wide ? 880 : 560, width:"100%", border:"1px solid var(--line)", boxShadow:"0 30px 80px rgba(0,0,0,0.2)", animation:"fade 0.2s ease", }}>
FORM

{title}

{children}
); } // ────────────────────────────────────────────────────────────────────────── // Quote form function QuoteForm({ presetCategory, onSubmitted, mode="quote" }) { const { CATEGORIES, SECTORS } = window.MOBICO_DATA; const [form, setForm] = useState({ name:"", company:"", role:"", email:"", phone:"", category: presetCategory || "", sector:"", project:"", message:"", visit:"", time:"", }); const [sent, setSent] = useState(false); const upd = (k) => (e) => setForm({...form, [k]: e.target.value}); const submit = (e) => { e.preventDefault(); setSent(true); if(onSubmitted) onSubmitted(form); }; if(sent){ return (
RECEIVED

Thank you, {form.name||"there"}.

Your enquiry has been routed to the MOBICO trade team. We respond within one business day.

); } return (
{mode === "quote" && (
)} {mode === "showroom" && (
)}