// MangoStack — shared components (Nav, Footer, Wordmark, Pills, etc.) // v4 — new IA: Home / Operating / Software / Approach / Contact const { useState, useEffect, useRef } = React; const Wordmark = ({ height = 36 }) => ( MangoStack ); const Pill = ({ kind = "neutral", children }) => ( {children} ); // Status dot for nav menu items const StatusDot = ({ kind }) => ( ); const Nav = ({ active = "home" }) => { const [softOpen, setSoftOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); // Body scroll lock + Escape close while drawer is open useEffect(() => { if (!mobileOpen) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; }, [mobileOpen]); return ( <>
Start a conversation
{/* Mobile drawer */}
setMobileOpen(false)} aria-hidden="true" >
); }; const Footer = () => ( ); // ============================================================ // Form submission helper. // Uses Web3Forms — submissions forward to hello@mangostack.co.uk. // ============================================================ const MS_FORM_ENDPOINT = "https://api.web3forms.com/submit"; const MS_FORM_ACCESS_KEY = "4626c02e-d57a-476e-a0e1-8630dd9050aa"; const submitForm = async (formEl, { subject = "MangoStack enquiry" } = {}) => { const data = new FormData(formEl); if (MS_FORM_ENDPOINT && MS_FORM_ACCESS_KEY) { data.append("access_key", MS_FORM_ACCESS_KEY); data.append("subject", subject); data.append("from_name", "MangoStack website"); if (!data.has("botcheck")) data.append("botcheck", ""); try { const res = await fetch(MS_FORM_ENDPOINT, { method: "POST", body: data, headers: { Accept: "application/json" }, }); const json = await res.json().catch(() => ({})); return res.ok && json.success !== false; } catch (e) { return mailtoFallback(data, subject); } } return mailtoFallback(data, subject); }; const mailtoFallback = (data, subject) => { const lines = []; for (const [k, v] of data.entries()) { if (v && String(v).trim()) lines.push(`${k}: ${v}`); } const body = encodeURIComponent(lines.join("\n\n")); const subj = encodeURIComponent(subject); window.location.href = `mailto:hello@mangostack.co.uk?subject=${subj}&body=${body}`; return true; }; const FinalCTA = ({ heading = "Tell us what you're working on.", line = "We reply within one business day.", cta = "Start a conversation →", href = "contact.html" }) => (

{heading}

{line}

{cta}
); const useReveal = (threshold = 0.18) => { const ref = useRef(null); const [revealed, setRevealed] = useState(false); useEffect(() => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setRevealed(true); return; } const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setRevealed(true); obs.disconnect(); } }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, revealed]; }; const Breadcrumb = ({ items }) => (
{items.map((it, i) => ( {i > 0 && /} {it.href ? {it.label} : {it.label}} ))}
); // ============================================================ // Forward Engineering visual — recurring brand motif. // Renders the two-motion flywheel: deploy forward → engineer forward → loop. // Used on the home hero and the Approach page. // ============================================================ const ForwardEngine = ({ variant = "hero" }) => { // variant: 'hero' (animated, large) or 'static' (small, decorative) return ( ); }; Object.assign(window, { Wordmark, Pill, StatusDot, Nav, Footer, FinalCTA, useReveal, Breadcrumb, submitForm, ForwardEngine });