"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Menu, X, Github } from "lucide-react";

export function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  const navLinks = [
    { href: "/#how-it-works", label: "How it Works" },
    { href: "/#features", label: "Features" },
  ];

  return (
    <header className="fixed top-0 left-0 right-0 z-50">
      <nav className="glass border-b border-white/5">
        <div className="max-w-6xl 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 group">
              <Image
                src="/logo-icon.png"
                alt="CodeBoard"
                width={32}
                height={32}
                className="rounded-lg group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow"
              />
              <span className="text-lg font-semibold text-white">
                CodeBoard
              </span>
            </Link>

            <div className="hidden md:flex items-center gap-8">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-sm text-zinc-400 hover:text-white transition-colors"
                >
                  {link.label}
                </Link>
              ))}
              
              <a
                href="https://gitea.repi.fun/repi/codeboard"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
              >
                <Github className="w-4 h-4" />
                Source
              </a>
            </div>

            <button
              onClick={() => setIsOpen(!isOpen)}
              className="md:hidden p-2 text-zinc-400 hover:text-white"
              aria-label="Toggle menu"
            >
              {isOpen ? (
                <X className="w-6 h-6" />
              ) : (
                <Menu className="w-6 h-6" />
              )}
            </button>
          </div>
        </div>

        {isOpen && (
          <div className="md:hidden border-t border-white/5 bg-black/50 backdrop-blur-xl">
            <div className="px-4 py-4 space-y-3">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setIsOpen(false)}
                  className="block text-sm text-zinc-400 hover:text-white transition-colors py-2"
                >
                  {link.label}
                </Link>
              ))}
              
              <a
                href="https://gitea.repi.fun/repi/codeboard"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
              >
                <Github className="w-4 h-4" />
                Source
              </a>
            </div>
          </div>
        )}
      </nav>
    </header>
  );
}