import React, { useState } from 'react';
import { Search, Menu, X, MapPin, User } from 'lucide-react';

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

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200">
      {/* Top Bar */}
      <div className="bg-gray-100 py-2">
        <div className="container mx-auto px-4 flex justify-between items-center text-sm">
          <div className="flex items-center space-x-4">
            <button className="flex items-center space-x-1 text-gray-600 hover:text-bulls-blue">
              <MapPin className="w-4 h-4" />
              <span>Dealer search</span>
            </button>
            <button className="flex items-center space-x-1 text-gray-600 hover:text-bulls-blue">
              <User className="w-4 h-4" />
              <span>About us</span>
            </button>
          </div>
          <div className="flex items-center space-x-4">
            <Search className="w-4 h-4 text-gray-600 hover:text-bulls-blue cursor-pointer" />
            <div className="w-6 h-6 bg-gray-300 rounded"></div>
          </div>
        </div>
      </div>

      {/* Main Navigation */}
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <div className="w-16 h-8 bg-bulls-dark transform skew-x-12 flex items-center justify-center">
              <span className="text-white font-bold text-lg transform -skew-x-12">BULLS</span>
            </div>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <div className="relative group">
              <button className="flex items-center space-x-1 text-gray-700 hover:text-bulls-blue font-medium">
                <span>E-BIKES</span>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            </div>
            <div className="relative group">
              <button className="flex items-center space-x-1 text-gray-700 hover:text-bulls-blue font-medium">
                <span>BIKES</span>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            </div>
            <div className="relative group">
              <button className="flex items-center space-x-1 text-gray-700 hover:text-bulls-blue font-medium">
                <span>SERVICE</span>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            </div>
          </nav>

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

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="md:hidden bg-white border-t border-gray-200">
          <nav className="container mx-auto px-4 py-4 space-y-4">
            <a href="#" className="block text-gray-700 hover:text-bulls-blue font-medium">E-BIKES</a>
            <a href="#" className="block text-gray-700 hover:text-bulls-blue font-medium">BIKES</a>
            <a href="#" className="block text-gray-700 hover:text-bulls-blue font-medium">SERVICE</a>
          </nav>
        </div>
      )}
    </header>
  );
};

export default Header;