); } function NewsletterForm({ onBack }) { const [email, setEmail] = useStateN(''); const [consent, setConsent] = useStateN(false); const [submitted, setSubmitted] = useStateN(false); const [submitting, setSubmitting] = useStateN(false); const [errorMsg, setErrorMsg] = useStateN(''); const [focused, setFocused] = useStateN(false); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && consent; const onSubmit = async (e) => { e.preventDefault(); if (!valid || submitting) return; setSubmitting(true); setErrorMsg(''); try { const res = await fetch('https://knowaa-info.com/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, name: '' }), }); const data = await res.json().catch(() => ({})); if (data && data.ok) { setSubmitted(true); } else { setErrorMsg((data && data.error) || 'Something went wrong. Try again.'); } } catch { setErrorMsg('Something went wrong. Try again.'); } finally { setSubmitting(false); } }; return (

{/* Section title, matches other section headings */}

Signup to our newsletter

A short weekly dispatch from our studio.

{/* Light-grey form surface, contains the input + meta row so the form reads as a distinct panel. */}

{submitted ? (

Subscribed · Check your inbox to confirm

) : (

{/* Underlined input */} → Your email

setEmail(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} placeholder="you@company.com" required style={{ flex: 1, minWidth: 0, height: '32px', border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit', fontSize: '16px', color: 'var(--ink)', letterSpacing: '-0.005em', padding: 0, }} />

{/* Consent + meta row */}

setConsent(e.target.checked)} style={{ width: '13px', height: '13px', accentColor: 'var(--knowaa-purple, #4A0FB8)', cursor: 'pointer', flexShrink: 0, }} /> Accept Terms

{errorMsg && (

{errorMsg}

)}

); } function MegaPanel({ menu, newsletterOpen, setNewsletterOpen }) { if (!menu) return null; const hasFeature = !!menu.feature; const showNewsletter = newsletterOpen && menu.feature && menu.feature.isInsight; // resources menu only return (

{!hasFeature && menu.lists.length === 2 && (

)} {hasFeature && } {showNewsletter ? ( setNewsletterOpen(false)} /> ) : menu.lists.map((col, ci) => { const anyHeading = menu.lists.some(c => c.heading); return (

{col.heading ? (

{col.heading}

) : anyHeading ? ( ) : null} {col.items.map((it, ii) => { const isNewsletter = it.title === 'Newsletter signup'; return ( { if (isNewsletter) { e.preventDefault(); setNewsletterOpen(true); } }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(10,10,10,0.04)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }} > {it.iconSrc ? (

) : it.icon && OIcons[it.icon] && ( {OIcons[it.icon]} )}

{it.title}

{it.desc}

); })}

); } function MobileMenu({ isOpen, onClose, textColor, logoSrc, solid }) { const [expanded, setExpanded] = useStateN(null); useEffectN(() => { if (isOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; setExpanded(null); } return () => { document.body.style.overflow = ''; }; }, [isOpen]); return ( ); } function Nav({ solid = false, pinned = false }) { const { hidden: scrollHidden, atTop } = useNavScroll(); // When `pinned`, the nav never hides on scroll, it stays locked in place. const isHidden = pinned ? false : scrollHidden; const [open, setOpen] = useStateN(null); // index of open menu const [hover, setHover] = useStateN(null); const [barHover, setBarHover] = useStateN(false); const [newsletterOpen, setNewsletterOpen] = useStateN(false); const [mobileOpen, setMobileOpen] = useStateN(false); const closeTimer = useRefN(null); const openTimer = useRefN(null); const headerRef = useRefN(null); const panelContentRef = useRefN(null); const [panelHeight, setPanelHeight] = useStateN(0); // Measure the panel content height whenever the open menu changes so we can // animate the container between sizes instead of snapping. useEffectN(() => { if (open == null) { setPanelHeight(0); return; } const el = panelContentRef.current; if (!el) return; // Wait a frame so MegaPanel has rendered its new content. const raf = requestAnimationFrame(() => { if (panelContentRef.current) { setPanelHeight(panelContentRef.current.offsetHeight); } }); return () => cancelAnimationFrame(raf); }, [open, newsletterOpen]); // Glassy mode: at top of page AND nothing hovered AND no mega-panel open. // When `solid` prop is set, nav stays in its white/solid state (e.g. Contact page). const glassy = !solid && atTop && !barHover && open == null; const logoSrc = glassy ? 'assets/knowaa-logo-white.svg' : 'assets/knowaa-logo.svg'; const textColor = glassy ? '#FFFFFF' : 'var(--title, var(--ink))'; const scheduleOpen = (i) => { clearTimeout(closeTimer.current); clearTimeout(openTimer.current); // Opening a different nav item dismisses any sticky newsletter form. setNewsletterOpen(false); if (NAV[i].menu == null) { setOpen(null); return; } openTimer.current = setTimeout(() => setOpen(i), 20); }; const scheduleClose = () => { clearTimeout(openTimer.current); clearTimeout(closeTimer.current); // STICKY NEWSLETTER: once the newsletter form is showing, we do NOT auto-close // on mouse-leave. It stays until the user clicks outside the header or hits Esc // or uses the "← Back" button inside the form. if (newsletterOpen) return; closeTimer.current = setTimeout(() => { setOpen(null); setNewsletterOpen(false); }, 180); }; const cancelClose = () => { clearTimeout(closeTimer.current); }; // Outside-click + Escape to dismiss the sticky newsletter panel. useEffectN(() => { if (!newsletterOpen) return; const onDocDown = (e) => { if (headerRef.current && !headerRef.current.contains(e.target)) { setNewsletterOpen(false); setOpen(null); } }; const onKey = (e) => { if (e.key === 'Escape') { setNewsletterOpen(false); setOpen(null); } }; document.addEventListener('mousedown', onDocDown); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDocDown); document.removeEventListener('keydown', onKey); }; }, [newsletterOpen]); return (

setBarHover(true)} onMouseLeave={() => { setBarHover(false); scheduleClose(); }} style={{ position: 'fixed', top: 0, left: 'var(--page-gutter, 0px)', right: 'var(--page-gutter, 0px)', maxWidth: 'calc(1680px - (var(--page-gutter, 0px) * 2))', marginLeft: 'auto', marginRight: 'auto', zIndex: 100, transform: isHidden ? 'translateY(-100%)' : 'translateY(0)', transition: 'transform 0.45s cubic-bezier(.2,.7,.2,1)', }} > {/* Top bar */}

{/* Hamburger, mobile only */}

{/* Mobile menu overlay moved to sibling of header (below) so its position:fixed escapes the header's transform containing block */} {/* Unified mega panel */}

{/* Mobile menu, sibling of

so its fixed positioning is relative to the viewport, not the header's transformed box. */} setMobileOpen(false)} textColor={textColor} logoSrc={logoSrc} solid={solid} /> {/* Skip-link target. Empty focusable anchor placed after the nav so the in-page "Skip to main content" link jumps past nav for keyboard users. */}