import { Menu, X } from "lucide-react";
import { Link } from "react-router-dom";
import { Button } from "./ui/button";
import { useState } from "react";
import logoSvg from "../assets/b2in-logo-positive.svg";

const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const closeMobileMenu = () => {
    setIsMobileMenuOpen(false);
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link to="/" className="flex items-center">
            <img src={logoSvg} alt="B2IN Logo" className="h-8 w-auto" />
          </Link>
          
          <nav className="hidden md:flex items-center space-x-8">
            <Link to="/" className="text-sm font-medium hover:text-secondary transition-colors">Home</Link>
            <Link to="/services" className="text-sm font-medium hover:text-secondary transition-colors">Partner</Link>
            <Link to="/ecosystem" className="text-sm font-medium hover:text-secondary transition-colors">Ecosystem</Link>
            <Link to="/magazin" className="text-sm font-medium hover:text-secondary transition-colors">Magazin</Link>
            <Link to="/about" className="text-sm font-medium hover:text-secondary transition-colors">About</Link>
            <Link to="/contact" className="text-sm font-medium hover:text-secondary transition-colors">Contact</Link>
          </nav>
          
          <div className="flex items-center space-x-4">
            <Button className="hidden md:block bg-secondary hover:bg-primary font-medium px-6 py-2 rounded-lg transition-all duration-200 shadow-md hover:shadow-accent-glow">
              Portal Login
            </Button>
            <button 
              onClick={toggleMobileMenu}
              className="md:hidden w-5 h-5 text-muted-foreground hover:text-foreground transition-colors"
            >
              {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="md:hidden border-t border-border bg-background/95 backdrop-blur-sm">
            <nav className="px-4 py-6 space-y-4">
              <Link 
                to="/" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                Home
              </Link>
              <Link 
                to="/services" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                Partner
              </Link>
              <Link 
                to="/ecosystem" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                Ecosystem
              </Link>
              <Link 
                to="/magazin" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                Magazin
              </Link>
              <Link 
                to="/about" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                About
              </Link>
              <Link 
                to="/contact" 
                className="block text-sm font-medium hover:text-secondary transition-colors"
                onClick={closeMobileMenu}
              >
                Contact
              </Link>
              <div className="pt-4 border-t border-border">
                <Button className="w-full bg-secondary hover:bg-primary font-medium px-6 py-2 rounded-lg transition-all duration-200">
                  Portal Login
                </Button>
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;