"use client";

import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react";

const navItems = [
  { name: "Ana Sayfa", href: "#home" },
  { name: "Hakkımda", href: "#about" },
  { name: "Başarılarım", href: "#achievements" },
  { name: "İletişim", href: "#contact" },
];

export function Navigation() {
  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);
  }, []);

  const handleNavClick = (href: string) => {
    setIsMobileMenuOpen(false);
    const element = document.querySelector(href);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <nav
      className="fixed top-0 left-0 right-0 z-30"
    >
      <div className="max-w-[1800px] mx-auto px-8 lg:px-20">
        <div className="flex items-center justify-between h-32 lg:h-36">
          
          {/* Logo Section */}
          <div className="flex items-center gap-5">
            {/* Logo Icon */}
            <div className="w-16 h-16 lg:w-20 lg:h-20 bg-black rounded-2xl border border-gray-800 flex items-center justify-center">
              <span className="text-white font-bold text-xl lg:text-2xl tracking-tight">CC</span>
            </div>
            
            {/* Logo Text */}
            <div className="hidden sm:flex flex-col gap-0.5">
              <div className="text-xl lg:text-2xl font-bold text-white tracking-tight leading-none">
                Cihat Cengiz
              </div>
              <div className="text-[10px] text-gray-500 uppercase tracking-[0.2em] font-medium">
                Personal Website
              </div>
            </div>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-8">
            {navItems.map((item) => (
              <button
                key={item.name}
                onClick={() => handleNavClick(item.href)}
                className="text-sm font-medium text-gray-400 hover:text-white transition-colors tracking-wide"
              >
                {item.name}
              </button>
            ))}
          </div>

          {/* Mobile Menu Button */}
          <div className="flex items-center md:hidden">
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="p-3 rounded-xl bg-black border border-gray-800 hover:bg-gray-900 transition-colors"
            >
              {isMobileMenuOpen ? (
                <X className="w-6 h-6 text-white" />
              ) : (
                <Menu className="w-6 h-6 text-white" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden border-t border-gray-800 bg-black">
          <div className="px-8 py-6 space-y-1">
            {navItems.map((item) => (
              <button
                key={item.name}
                onClick={() => handleNavClick(item.href)}
                className="block w-full text-left px-4 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-gray-900 transition-colors text-sm font-medium tracking-wide"
              >
                {item.name}
              </button>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
}
