'use client';

import Link from 'next/link';
import { useState } from 'react';
import { Menu, X } from 'lucide-react';

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>

      {/* Main Header */}
      <header className="bg-white border-b border-gray-100 z-50 top-0 sticky">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <Link href="/" className="flex items-center">
              <img
                src="/logo.png"
                alt="Euphoria 5"
                className="h-8 w-auto"
              />
            </Link>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              <Link
                href="/about"
                className="text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                About Us
              </Link>
              <Link
                href="/why-euphoria"
                className="text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                Why Euphoria 5
              </Link>
            </nav>

            {/* Auth Buttons */}
            <div className="hidden md:flex items-center space-x-4">
              <Link
                href="/login"
                className="text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                Log In
              </Link>
              <Link
                href="/register"
                className="bg-rise-teal text-white px-6 py-2 rounded-lg hover:bg-foreground transition-colors font-work text-sm font-medium"
              >
                Get started
              </Link>
            </div>

            {/* Mobile Menu Button */}
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="md:hidden p-2"
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-100">
            <div className="container mx-auto px-4 py-4 space-y-4">
              <Link
                href="/about"
                className="block text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                About Us
              </Link>
              
              <Link
                href="/why-euphoria"
                className="block text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                Why Euphoria 5
              </Link>

              <Link
                href="/faq"
                className="block text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                FAQ
              </Link>

              <Link
                href="/reviews.html"
                className="block text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
              >
                Reviews
              </Link>

              <div className="pt-4 space-y-2">
                <Link
                  href="/login"
                  className="block text-gray-700 hover:text-rise-teal font-work text-sm font-medium"
                >
                  Log In
                </Link>
                <Link
                  href="/register"
                  className="block bg-rise-teal text-white px-6 py-2 rounded-lg hover:bg-foreground transition-colors font-work text-sm font-medium text-center"
                >
                  Get started
                </Link>
              </div>
            </div>
          </div>
        )}
      </header>
    </>
  );
}
