const Navbar = () => { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const navLinks = [ { name: 'HOME', href: 'index.php' }, { name: 'THE EXPERIENCE', href: 'experience.php' }, { name: 'AMENITIES', href: 'amenities.php' }, { name: 'GALLERY', href: 'gallery.php' }, { name: 'BOOK NOW', href: 'book-now.php' } ]; // Simulating active path, in a real single-page app this would use a router hook. // For now we will just make "HOME" active by default or base it on pathname. const currentPath = window.location.pathname.split('/').pop() || 'index.php'; return ( ); }; const root = ReactDOM.createRoot(document.getElementById('nav-root')); root.render();