/* ViZO Studio — Top navigation with Platform mega-menu. Spec: 4 items (Platform ▾, Solutions, Gallery, Pricing) + Sign in / Start free trial. Transparent on hero, paper bg + blur after 80px scroll. */ const { useState: useStateTN, useEffect: useEffectTN, useRef: useRefTN } = React; /* ------- Tweak context (filled by App; safe fallbacks here) ------- */ const NavTweaksCtx = React.createContext({ logoGap: 24, linkGap: 32 }); window.NavTweaksCtx = NavTweaksCtx; function useNavTweaks() { return React.useContext(NavTweaksCtx); } /* ------- Mega-menu content ------- */ const PLATFORM_COLUMNS = [ { heading: 'Inputs', items: [ { title: 'Garment & product upload', desc: 'Drop a flat-lay. We extract the silhouette.', icon: 'shirt' }, { title: 'Accessory upload', desc: 'Bags, shoes, jewellery — composited in scene.', icon: 'package' }, { title: 'SKU batch upload', desc: 'Spreadsheet in, full season out.', icon: 'list' }, { title: 'Flat-lay & ghost mannequin', desc: 'Either silhouette source works.', icon: 'ghost' }] }, { heading: 'Generation', items: [ { title: 'Model generation', desc: 'Real faces. Sized, posed, lit on direction.', icon: 'user' }, { title: 'Environment creation', desc: 'Studio, location, season — your set.', icon: 'tree' }, { title: 'Studio briefing', desc: 'Direct the shoot in plain language.', icon: 'wand' }, { title: 'Digital twin creation', desc: 'Lock a model and reuse them all season.', icon: 'scan' }] }, { heading: 'Output', items: [ { title: 'Resolution: 1K / 2K / 4K', desc: 'Pay only for what you export.', icon: 'resolution' }, { title: 'Bulk processing', desc: 'Overnight queue across thousands of SKUs.', icon: 'layers' }, { title: 'SEO friendly text generation', desc: 'Auto-generated product descriptions, tuned for search engines.', icon: 'type' }, { title: 'Image editing', desc: 'Refine before you download.', icon: 'pencil' }] }]; window.PLATFORM_COLUMNS = PLATFORM_COLUMNS; /* ------- Helpers ------- */ function MegaTrigger({ label, open, onEnter, onLeave, onClick, active }) { const [hover, setHover] = useStateTN(false); return ( ); } function NavDirect({ to, label, active }) { const [hover, setHover] = useStateTN(false); return ( setHover(true)} onMouseLeave={() => setHover(false)}> {label} {active && } ); } /* ------- Mega-menu panels ------- */ function PlatformMenu({ onClose }) { const { isTablet } = useBreakpoint(); return (
{PLATFORM_COLUMNS.map((col) =>
{col.heading}
)} {/* Featured tile */} {e.preventDefault();navigate('/gallery');onClose();}} style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
See the Studio in action →
); } /* ------- Mobile menu ------- */ function MobileMenu({ open, onClose }) { const [openAccordion, setOpenAcc] = useStateTN(null); const { theme } = useTheme(); const logoSrc = theme === 'dark' ? 'assets/vizo-logo-white.png' : 'assets/vizo-logo-black.png'; if (!open) return null; return (
ViZO
); } const mobileLink = { display: 'block', padding: '18px 0', fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 6vw, 32px)', fontWeight: 400, letterSpacing: '-0.02em', color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--bone)' }; function MobileAccordion({ title, open, onToggle, children }) { return (
{open &&
{children}
}
); } /* ------- TopNav main ------- */ function TopNav() { const { route } = useRoute(); const navTweaks = useNavTweaks(); const { theme } = useTheme(); const logoSrc = theme === 'dark' ? 'assets/vizo-logo-white.png' : 'assets/vizo-logo-black.png'; const [scrolled, setScrolled] = useStateTN(false); const [hidden, setHidden] = useStateTN(false); const [openMenu, setOpenMenu] = useStateTN(null); // 'platform' | 'solutions' | null const [mobileOpen, setMobileOpen] = useStateTN(false); const isMobile = useIsMobile(900); const closeTimer = useRefTN(null); const lastYRef = useRefTN(0); useEffectTN(() => { const onScroll = () => { const y = window.scrollY; const dy = y - lastYRef.current; // Always show at the very top. if (y <= 10) { setHidden(false); setScrolled(false); lastYRef.current = y; return; } // 10px scroll-direction threshold prevents flicker on micro-movements. if (Math.abs(dy) > 10) { setHidden(dy > 0); lastYRef.current = y; } setScrolled(true); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffectTN(() => {setOpenMenu(null);setMobileOpen(false);}, [route]); // Hero is on home; on inner pages we want the nav already styled solid. // Treat all routes the same so the home page nav reads like the other page headers from load. const solidNav = true; const openWith = (m) => { if (closeTimer.current) {clearTimeout(closeTimer.current);closeTimer.current = null;} setOpenMenu(m); }; const queueClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpenMenu(null), 120); }; const navHeight = isMobile ? 64 : 72; return ( <> {/* Spacer keeps page content offset by the nav height since the bar is fixed. */}