"use client";

import React, { useState } from 'react';
import { Menu, X } from 'lucide-react';
import logo from '@/assets/images/icon.png';
import WaitlistModal from './WaitlistModal';
import Link from 'next/link';
import Image from 'next/image';

const Navbar: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);

  return (
    <>
      <nav className="fixed w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            {/* Logo */}
            <Link
              href="/"
              className="flex items-center gap-2 cursor-pointer"
            >
              <Image
                src={logo}
                alt="Nemia Logo"
                width={32}
                height={32}
                className="rounded-lg object-contain"
              />
              <span className="font-display font-bold text-xl tracking-tight text-white">
                Nemia
              </span>
            </Link>

            {/* Desktop Nav */}
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</Link>
              <Link href="/#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</Link>
              <Link href="/#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</Link>
              <Link
                href="/login"
                className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow"
              >
                Log In
              </Link>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden flex items-center">
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="text-gray-300 hover:text-white transition-colors"
              >
                {isOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {isOpen && (
          <div className="md:hidden bg-surface-dark border-b border-gray-800">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link href="/#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</Link>
              <Link href="/#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</Link>
              <Link href="/#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</Link>
              <Link
                href="/login"
                className="block w-full text-center mt-4 bg-primary text-gray-900 px-5 py-3 rounded-xl font-bold hover:brightness-110 transition-all"
              >
                Log In
              </Link>
            </div>
          </div>
        )}
      </nav>

      <WaitlistModal
        isOpen={isWaitlistOpen}
        onClose={() => setIsWaitlistOpen(false)}
      />
    </>
  );
};

export default Navbar;