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

interface NavbarProps {
  onOpenBooking: () => void;
  onOpenSplitModal: () => void;
  onOpenAiConcierge: () => void;
  onOpen3DView: () => void;
  audioPlaying: boolean;
  toggleAudio: () => void;
}

export const Navbar: React.FC<NavbarProps> = ({
  onOpenBooking,
  onOpen3DView
}) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header className={`sticky top-0 z-40 w-full transition-all duration-300 ${
      scrolled 
        ? 'bg-[#1e2a38]/95 backdrop-blur-md border-b border-[#517e8a]/20 shadow-2xl py-2.5' 
        : 'bg-[#2b3b4e]/90 backdrop-blur-sm border-b border-[#517e8a]/15 py-3'
    }`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Main Header Container with Top-Left Logo */}
        <div className="flex items-center justify-between relative">

          {/* Top-Left Logo */}
          <a 
            href="#" 
            className="flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" 
            aria-label="Entourage Luxury Yacht Home"
          >
            <EntourageLogo size="xs" variant="orange" layout="horizontal" showText={true} />
          </a>

          {/* Centered Subnavigation: "3D view | Specs | Gallery | Booking Enquiry" */}
          <nav className="hidden md:flex items-center justify-center gap-4 lg:gap-6 text-xs sm:text-sm font-light text-slate-200 tracking-wider">
            <button
              id="nav-3d-view"
              onClick={onOpen3DView}
              className="hover:text-[#e17f52] transition-colors py-1 cursor-pointer font-light"
            >
              3D view
            </button>
            <span className="text-[#517e8a]/70 select-none">|</span>

            <a 
              id="nav-specs"
              href="#specifications" 
              className="hover:text-[#e17f52] transition-colors py-1 font-light"
            >
              Specs
            </a>
            <span className="text-[#517e8a]/70 select-none">|</span>
            
            <a 
              id="nav-gallery"
              href="#gallery" 
              className="hover:text-[#e17f52] transition-colors py-1 font-light"
            >
              Gallery
            </a>
            <span className="text-[#517e8a]/70 select-none">|</span>

            <button
              id="nav-booking-enquiry"
              onClick={onOpenBooking}
              className="hover:text-[#e17f52] transition-colors py-1 cursor-pointer underline underline-offset-4 decoration-[#e17f52]/60 hover:decoration-[#e17f52] font-normal text-white flex items-center gap-1"
            >
              <span>Booking Enquiry</span>
            </button>
          </nav>

          {/* Right Action / Mobile Controls */}
          <div className="flex items-center gap-2">
            <button
              id="nav-cta-enquire"
              onClick={onOpenBooking}
              className="hidden sm:inline-flex px-4 py-1.5 rounded-full bg-[#e17f52] hover:bg-[#ea8e64] text-white font-semibold text-xs tracking-wider uppercase shadow-md shadow-[#e17f52]/20 items-center cursor-pointer transition-all hover:scale-105 active:scale-95"
            >
              Enquire
            </button>

            {/* Mobile menu toggle */}
            <div className="flex md:hidden items-center gap-2">
              <button
                onClick={onOpenBooking}
                className="px-3 py-1.5 rounded-full bg-[#e17f52] text-white font-semibold text-[11px] shadow-md shadow-[#e17f52]/20 inline-flex items-center cursor-pointer"
              >
                Enquire
              </button>
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="p-1.5 rounded-lg bg-[#1e2a38] text-slate-300 border border-[#517e8a]/30 cursor-pointer"
                aria-label="Toggle menu"
              >
                {mobileMenuOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
              </button>
            </div>
          </div>

        </div>

        {/* Mobile Dropdown Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden mt-3 pt-3 border-t border-[#517e8a]/20 flex flex-col space-y-3 text-xs uppercase tracking-wider text-slate-300 pb-2">
            <button
              onClick={() => {
                setMobileMenuOpen(false);
                onOpen3DView();
              }}
              className="py-1 text-left text-[#e17f52] font-semibold"
            >
              ★ 3D Space Virtual Tour
            </button>
            <a 
              href="#specifications" 
              onClick={() => setMobileMenuOpen(false)} 
              className="py-1 text-slate-200"
            >
              Vessel Specifications (22m)
            </a>
            <a 
              href="#gallery" 
              onClick={() => setMobileMenuOpen(false)} 
              className="py-1 text-slate-200"
            >
              Yacht Photo Gallery
            </a>
            <button
              onClick={() => {
                setMobileMenuOpen(false);
                onOpenBooking();
              }}
              className="py-1 text-left text-[#e17f52] font-semibold flex items-center gap-1.5 cursor-pointer"
            >
              <span>Booking Enquiry</span>
            </button>
          </div>
        )}

      </div>
    </header>
  );
};