import React, { useState, useEffect } from 'react';
import { Logo } from './Logo';
import { Menu, X, Search, Globe } from 'lucide-react';
import { Button } from './Button';

export const Header: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  const navLinks = [
    { label: 'ANASAYFA', href: '#' },
    { label: 'CADI YAYINLARI', href: '#' },
    { label: 'ÇEVİRİ', href: '#' },
    { label: 'FEMİNİST GÜNDEM', href: '#' },
    { label: 'TARİHÇEMİZ', href: '#' },
  ];

  return (
    <header 
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled 
          ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100 py-3' 
          : 'bg-white border-b border-gray-100 py-5'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          
          {/* Logo Section */}
          <div className="flex items-center space-x-3 cursor-pointer">
            <Logo className="h-10 w-10 text-brand-purple" />
            <div className="hidden md:block">
              <h1 className="text-xl font-bold tracking-tighter leading-none text-brand-purple">KAMPÜS</h1>
              <h1 className="text-xl font-bold tracking-tighter leading-none text-brand-text">CADILARI</h1>
            </div>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a 
                key={link.label}
                href={link.href}
                className="text-sm font-semibold text-brand-text hover:text-brand-purple transition-colors tracking-wide"
              >
                {link.label}
              </a>
            ))}
          </nav>

          {/* Utility Icons */}
          <div className="hidden lg:flex items-center space-x-4">
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors text-brand-text">
              <Search size={20} />
            </button>
            <div className="h-4 w-px bg-gray-300"></div>
            <button className="flex items-center space-x-1 text-sm font-medium text-brand-text hover:text-brand-purple">
              <Globe size={16} />
              <span>TR</span>
            </button>
            <Button variant="secondary" className="!py-2 !px-6 !text-xs">
              BİZE KATIL
            </Button>
          </div>

          {/* Mobile Menu Toggle */}
          <button 
            className="lg:hidden p-2 text-brand-text"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="absolute top-full left-0 right-0 bg-white border-b border-gray-100 shadow-xl lg:hidden p-6 animate-fade-in">
          <nav className="flex flex-col space-y-4">
            {navLinks.map((link) => (
              <a 
                key={link.label}
                href={link.href}
                className="text-lg font-bold text-brand-text hover:text-brand-purple"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {link.label}
              </a>
            ))}
            <div className="h-px bg-gray-100 my-4"></div>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <button className="flex items-center space-x-2 text-sm font-medium">
                  <Globe size={16} />
                  <span>Türkçe</span>
                </button>
              </div>
              <Button variant="primary" className="!py-2 !px-6">BİZE KATIL</Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
};