"use client"; import { useState, useEffect } from "react"; import { useTheme } from "@/hooks/useTheme"; import { Sparkles, Sun, Moon, X, ArrowRight } from "lucide-react"; const navLinks = [ { label: "Features", href: "#features" }, { label: "How It Works", href: "#how-it-works" }, { label: "About", href: "#stats" }, { label: "Contact", href: "#footer" }, ]; export function Navbar() { const { theme, toggleTheme, mounted } = useTheme(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [activeLink, setActiveLink] = useState(""); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); const handleLinkClick = ( e: React.MouseEvent, href: string, ) => { e.preventDefault(); const targetId = href.replace("#", ""); const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: "smooth" }); setActiveLink(href); setIsMobileMenuOpen(false); } }; if (!mounted) { return ( ); } return ( <> {/* Mobile Menu */}
{/* Backdrop */}
setIsMobileMenuOpen(false)} /> {/* Menu Panel */}
); }