import React, { useState } from 'react';
import { Phone, Menu, X } from 'lucide-react';
import { LogoIcon } from './LogoIcon';

export const Navbar: React.FC = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <nav className="sticky top-0 z-50 bg-white border-b border-stone-200/80 shadow-sm transition-all duration-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 sm:h-20">
          {/* Logo */}
          <a href="#" className="flex items-center gap-3 group">
            <LogoIcon className="w-10 h-10 sm:w-12 sm:h-12 shrink-0 group-hover:scale-105 transition-transform" />
            <span className="logo text-lg sm:text-xl font-black tracking-wide text-[#56a0ab] font-montserrat uppercase">
              Simply Sorted Tech
            </span>
          </a>

          {/* Desktop Links */}
          <div className="hidden md:flex items-center space-x-8">
            <a 
              href="#about" 
              className="text-[#333333] hover:text-[#56a0ab] font-inter font-normal text-sm sm:text-base transition-colors"
            >
              About
            </a>
            <a 
              href="#services" 
              className="text-[#333333] hover:text-[#56a0ab] font-inter font-normal text-sm sm:text-base transition-colors"
            >
              Services
            </a>
            <a 
              href="#pricing" 
              className="text-[#333333] hover:text-[#56a0ab] font-inter font-normal text-sm sm:text-base transition-colors"
            >
              Fees
            </a>
            <a 
              href="#reviews" 
              className="text-[#333333] hover:text-[#56a0ab] font-inter font-normal text-sm sm:text-base transition-colors"
            >
              Reviews
            </a>
            <a 
              href="#contact" 
              className="text-[#333333] hover:text-[#56a0ab] font-inter font-normal text-sm sm:text-base transition-colors"
            >
              Contact
            </a>
            <a
              href="tel:+447424244145"
              className="inline-flex items-center gap-2 px-4 py-2 bg-[#56a0ab]/10 text-[#56a0ab] hover:bg-[#56a0ab] hover:text-white rounded-full font-inter font-normal text-sm transition-all duration-200"
            >
              <Phone className="w-4 h-4" />
              <span>07424 244145</span>
            </a>
          </div>

          {/* Mobile Menu Button */}
          <div className="flex md:hidden items-center gap-2">
            <a
              href="tel:+447424244145"
              className="p-2 bg-[#56a0ab] text-white rounded-full hover:bg-[#448490] transition-colors"
              aria-label="Call Simply Sorted Tech"
            >
              <Phone className="w-4 h-4" />
            </a>
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-2 text-[#333333] hover:text-[#56a0ab] focus:outline-none"
              aria-label="Toggle Navigation Menu"
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Drawer */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white border-b border-stone-200 px-4 pt-3 pb-6 space-y-3 shadow-lg">
          <a
            href="#about"
            onClick={() => setMobileMenuOpen(false)}
            className="block px-3 py-2 rounded-md text-base font-inter font-normal text-[#333333] hover:bg-[#f4eee1] hover:text-[#56a0ab]"
          >
            About
          </a>
          <a
            href="#services"
            onClick={() => setMobileMenuOpen(false)}
            className="block px-3 py-2 rounded-md text-base font-inter font-normal text-[#333333] hover:bg-[#f4eee1] hover:text-[#56a0ab]"
          >
            Services
          </a>
          <a
            href="#pricing"
            onClick={() => setMobileMenuOpen(false)}
            className="block px-3 py-2 rounded-md text-base font-inter font-normal text-[#333333] hover:bg-[#f4eee1] hover:text-[#56a0ab]"
          >
            Fees
          </a>
          <a
            href="#reviews"
            onClick={() => setMobileMenuOpen(false)}
            className="block px-3 py-2 rounded-md text-base font-inter font-normal text-[#333333] hover:bg-[#f4eee1] hover:text-[#56a0ab]"
          >
            Reviews
          </a>
          <a
            href="#contact"
            onClick={() => setMobileMenuOpen(false)}
            className="block px-3 py-2 rounded-md text-base font-inter font-normal text-[#333333] hover:bg-[#f4eee1] hover:text-[#56a0ab]"
          >
            Contact
          </a>
          <div className="pt-2">
            <a
              href="tel:+447424244145"
              className="flex items-center justify-center gap-2 w-full py-3 bg-[#56a0ab] text-white rounded-xl font-inter font-normal text-sm"
            >
              <Phone className="w-4 h-4" />
              <span>Call +44 7424-244145</span>
            </a>
          </div>
        </div>
      )}
    </nav>
  );
};
