'use client';
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Menu, X, Github } from 'lucide-react';
import clsx from 'clsx';
const navLinks = [
{ href: '#how-it-works', label: 'How It Works' },
{ href: '#demo', label: 'Demo' },
{ href: '#codes', label: 'Supported Codes' },
];
export default function Navbar() {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 20);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<motion.nav
initial={{ y: -100 }}
animate={{ y: 0 }}
className={clsx(
'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
isScrolled
? 'bg-white/80 backdrop-blur-lg shadow-sm'
: 'bg-transparent'
)}
>
<div className="max-w-6xl mx-auto px-6">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<a href="#" className="flex items-center gap-1.5">
<span className="text-lg font-bold text-slate-900">
BuildingCode
</span>
<span className="text-lg font-bold bg-gradient-to-r from-cyan-500 to-blue-600 bg-clip-text text-transparent">
MCP
</span>
</a>
{/* Desktop nav */}
<div className="hidden md:flex items-center gap-8">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="text-slate-600 hover:text-slate-900 transition-colors text-sm font-medium"
>
{link.label}
</a>
))}
<a
href="https://github.com/DavidCho1999/Canada-AEC-Code-MCP"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 bg-gradient-to-r from-slate-800 to-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:scale-105 hover:shadow-lg transition-all duration-300"
>
<Github className="w-4 h-4" />
GitHub
</a>
</div>
{/* Mobile menu button */}
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="md:hidden p-2 text-slate-600"
>
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
</div>
{/* Mobile menu */}
{isMobileMenuOpen && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="md:hidden bg-white border-t border-slate-100 py-4"
>
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors"
>
{link.label}
</a>
))}
<a
href="https://github.com/DavidCho1999/Canada-AEC-Code-MCP"
target="_blank"
rel="noopener noreferrer"
className="block px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors"
>
GitHub
</a>
</motion.div>
)}
</div>
</motion.nav>
);
}
