import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Plane, Menu, X } from 'lucide-react';
import { Button } from './ui/button';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const navigate = useNavigate();

  const scrollToSection = (sectionId) => {
    if (window.location.pathname !== '/') {
      navigate('/');
      setTimeout(() => {
        const element = document.getElementById(sectionId);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }, 100);
    } else {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
    setIsMenuOpen(false);
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2 group">
            <div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-2 rounded-lg transform group-hover:scale-110 transition-transform duration-300">
              <Plane className="w-6 h-6 text-white" />
            </div>
            <span className="text-xl font-bold bg-gradient-to-r from-cyan-600 to-blue-700 bg-clip-text text-transparent">Epic Travel & Expeditions

            </span>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <button
              onClick={() => scrollToSection('home')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium">

              Home
            </button>
            <button
              onClick={() => scrollToSection('specials')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium">

              Specials
            </button>
            <button
              onClick={() => scrollToSection('destinations')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium">

              Destinations
            </button>
            <button
              onClick={() => scrollToSection('testimonials')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium">

              Testimonials
            </button>
            <button
              onClick={() => scrollToSection('contact')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium">

              Contact
            </button>
          </nav>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2 text-gray-700 hover:text-cyan-600 transition-colors"
            onClick={() => setIsMenuOpen(!isMenuOpen)}>

            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen &&
        <div className="md:hidden py-4 border-t animate-in slide-in-from-top">
            <nav className="flex flex-col space-y-4">
              <button
              onClick={() => scrollToSection('home')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left">

                Home
              </button>
              <button
              onClick={() => scrollToSection('specials')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left">

                Specials
              </button>
              <button
              onClick={() => scrollToSection('destinations')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left">

                Destinations
              </button>
              <button
              onClick={() => scrollToSection('testimonials')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left">

                Testimonials
              </button>
              <button
              onClick={() => scrollToSection('contact')}
              className="text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium text-left">

                Contact
              </button>
            </nav>
          </div>
        }
      </div>
    </header>);

};

export default Header;