import React from "react";

function handleScroll(e: React.MouseEvent<HTMLAnchorElement>) {

const href = e.currentTarget.getAttribute('href');

if (href && href.startsWith('#')) {

e.preventDefault();

const id = href.replace('#', '');

const el = document.getElementById(id);

if (el) {

el.scrollIntoView({ behavior: 'smooth', block: 'start' });

}

}

}

const Navbar: React.FC = () => {

return (

<nav className="fixed top-3 md:top-6 left-1/2 transform -translate-x-1/2 z-50 w-[94vw] max-w-6xl">

<div

className="rounded-lg md:rounded-full backdrop-blur-2xl shadow-2xl border border-white/30 px-4 md:px-8 py-2 md:py-3 flex items-center justify-center"

style={{

background: 'linear-gradient(to bottom, hsl(var(--card) / 0.6), hsl(var(--graph-node-1) / 0.35))',

borderColor: 'rgba(255,255,255,0.18)',

boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',

}}

>

<ul className="flex flex-wrap justify-center gap-2 md:gap-4 font-semibold text-sm md:text-base text-[hsl(var(--foreground))]">

<li><a href="#features" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Features</a></li>

<li><a href="#bundle-registry" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Pre-indexed Repositories</a></li>

<li><a href="#bundle-generator" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Generate Bundle</a></li>

<li><a href="#cookbook" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Cookbook</a></li>

<li><a href="#demo" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Demo</a></li>

<li><a href="#installation" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Installation</a></li>

<li><a href="#testimonials" className="px-2 py-1 md:px-4 md:py-2 rounded-full hover:bg-[hsl(var(--primary)/0.15)] hover:text-[hsl(var(--primary))] transition" onClick={handleScroll}>Testimonials</a></li>

</ul>

</div>

</nav>

);

};

export default Navbar;