{/* screen */}

{/* side button suggestion */}

); } // ── Section wrapper with optional reveal-on-scroll ─────────────────────────── function Section({ children, dark, padY = 'var(--space-8)', style, id }) { return (

{children}

); } // ── useMedia — subscribe to a media query, return boolean ──────────────────── function useMedia(query) { const [matches, setMatches] = React.useState(() => typeof window !== 'undefined' ? window.matchMedia(query).matches : false ); React.useEffect(() => { const mql = window.matchMedia(query); const onChange = () => setMatches(mql.matches); if (mql.addEventListener) mql.addEventListener('change', onChange); else mql.addListener(onChange); setMatches(mql.matches); return () => { if (mql.removeEventListener) mql.removeEventListener('change', onChange); else mql.removeListener(onChange); }; }, [query]); return matches; } // Breakpoint shortcuts const useIsMobile = () => useMedia('(max-width: 720px)'); const useIsTablet = () => useMedia('(max-width: 980px)'); function Reveal({ children, delay = 0, as: As = 'div', style }) { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } }); }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, [delay]); return {children}; } // ── BAUX wordmark (inline SVG so it inherits color) ────────────────────────── function Wordmark({ size = 22, color }) { // Stacked: BA on top of UX, with the gold period anchored to the bottom-right. const lineH = size * 0.92; return ( BA UX . ); } // ── HeroMap — stylized abstract street map for hero background ─────────────── // Renders as decoration only. The wrapping .hero-map-bg div applies the // radial mask. Uses currentColor for strokes so light/dark variants are // driven by a single inline color prop. function HeroMap({ dark = true }) { const stroke = dark ? 'rgba(255,255,255,1)' : 'rgba(10,22,40,1)'; const water = dark ? 'rgba(200,169,110,0.06)' : 'rgba(10,22,40,0.04)'; const block = dark ? 'rgba(255,255,255,0.025)' : 'rgba(10,22,40,0.025)'; return (

); } // ──────────────────────────────────────────────────────────────────────────── // Inline email signup form — used in both the hero and the bottom CTA. // ──────────────────────────────────────────────────────────────────────────── function InlineEmailForm({ dark = true, onSubmit, autoFocus = false, compact = false }) { const [email, setEmail] = React.useState(''); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(null); const inputRef = React.useRef(null); const isMobile = useIsMobile(); React.useEffect(() => { if (autoFocus && inputRef.current) inputRef.current.focus(); }, [autoFocus]); const handleSubmit = (e) => { e.preventDefault(); const v = email.trim(); if (!v || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) { setError('Please enter a valid email.'); return; } setError(null); setSubmitting(true); setTimeout(() => { setSubmitting(false); setEmail(''); onSubmit && onSubmit(v); }, 600); }; const fg = dark ? baux.bone : baux.navy; const border = dark ? baux.white24 : baux.navy12; const bg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(10,22,40,0.025)'; // On very narrow viewports the pill is fragile — fall back to a stacked // layout: full-width input above, full-width button below. if (isMobile) { return ( ); } return ( ); } // expose to other babel scripts Object.assign(window, { baux, Eyebrow, Sparkle, Button, BaeWaveform, BaeSample, PhoneFrame, Section, Reveal, Wordmark, HeroMap, InlineEmailForm, useMedia, useIsMobile, useIsTablet, });