'use client'; import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { usePathname } from 'next/navigation'; const NAV_LINKS = [ { label: 'Home', href: '/' }, { label: 'Robots', href: '/robots/' }, { label: 'Brands', href: '/brands/' }, { label: 'Industries', href: '/industries/' }, { label: 'About', href: '/about/' }, { label: 'Contact', href: '/contact/' }, { label: 'Book Demo', href: '/book-demo/' }, ]; export function Navbar() { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const pathname = usePathname() || '/'; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 16); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.style.overflow = mobileOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [mobileOpen]); const isActive = (href: string) => { if (href === '/') return pathname === '/' || pathname === ''; return pathname.startsWith(href.replace(/\/$/, '')); }; return ( <>
{NAV_LINKS.map((l) => ( setMobileOpen(false)} style={{ fontSize: '1.5rem', fontWeight: 500, color: isActive(l.href) ? '#DEE0F0' : '#FBFBFD', textDecoration: 'none', letterSpacing: '-0.01em', padding: '0.75rem 0', borderBottom: '1px solid rgba(39, 63, 148,0.12)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > {l.label} ))} setMobileOpen(false)} className="btn btn-primary" style={{ marginTop: '1rem', justifyContent: 'center' }} > Configure your robot setMobileOpen(false)} className="btn btn-ghost" style={{ justifyContent: 'center' }} > Book a demo
); }