'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 = [
{ id: 'pipeline', label: 'How It Works' },
{ id: 'how-it-works', label: 'MCP Setup' },
{ id: 'codes', label: 'Supported Codes' },
];
const scrollToSection = (id: string) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
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 */}
<button
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
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">
Navigator
</span>
</button>
{/* Desktop nav */}
<div className="hidden md:flex items-center gap-8">
{navLinks.map((link) => (
<button
key={link.id}
onClick={() => scrollToSection(link.id)}
className="text-slate-600 hover:text-slate-900 transition-colors text-sm font-medium"
>
{link.label}
</button>
))}
<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-cyan-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/30 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) => (
<button
key={link.id}
onClick={() => {
scrollToSection(link.id);
setIsMobileMenuOpen(false);
}}
className="block w-full text-left px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors"
>
{link.label}
</button>
))}
<a
href="https://github.com/DavidCho1999/Canada-AEC-Code-MCP"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-4 py-3 text-cyan-600 hover:text-cyan-700 hover:bg-cyan-50 transition-colors font-medium"
>
<Github className="w-4 h-4" />
GitHub
</a>
</motion.div>
)}
</div>
</motion.nav>
);
}
