"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Youtube } from "lucide-react"
import { BCRGLogo } from "@/components/bcrg-logo"

export function Navigation() {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b-2 border-neon-cyan shadow-[0_0_20px_rgba(0,255,255,0.3)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link href="/" className="flex items-center gap-2">
            <BCRGLogo size={32} className="text-[var(--neon-cyan)]" />
            <span className="text-lg font-semibold neon-glow-cyan text-[var(--neon-cyan-bright)]">
              BondingCurve.tech
            </span>
          </Link>

          <div className="hidden md:flex items-center gap-8">
            <Link
              href="#about"
              className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange"
            >
              About
            </Link>
            <Link
              href="#research"
              className="text-sm text-[var(--neon-cyan)] hover:text-[var(--neon-cyan-bright)] transition-colors hover:neon-glow-cyan"
            >
              Research
            </Link>
            <Link
              href="#library"
              className="text-sm text-[var(--neon-purple)] hover:text-[var(--neon-magenta)] transition-colors hover:neon-glow-purple"
            >
              Library
            </Link>
            <Link
              href="https://www.youtube.com/channel/UCIFlfbLKmn5mq6vcMHsqK0A"
              target="_blank"
              className="text-sm text-[var(--neon-orange)] hover:text-[var(--neon-orange-bright)] transition-colors hover:neon-glow-orange flex items-center gap-1"
            >
              <Youtube className="h-4 w-4" />
              Videos
            </Link>
            
            <Button
              asChild
              size="sm"
              className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_15px_rgba(0,255,255,0.5)]"
            >
              <Link href="https://github.com/bonding-curves" target="_blank">
                GitHub
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </nav>
  )
}