import { useState, useEffect } from "react";
import { Menu, X, ChevronDown, Phone, Mail, MapPin } from "lucide-react";
import { Button } from "@/components/ui/button";
import tkashLogo from "@assets/T-kash_Soko_logo_v2.png";

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  const scrollToSection = (id: string) => {
    setIsMobileMenuOpen(false);
    
    // Small delay to allow menu to close before calculating scroll position
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        const headerOffset = 80;
        const elementPosition = element.getBoundingClientRect().top;
        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
        
        window.scrollTo({
          top: offsetPosition,
          behavior: "smooth"
        });
      }
    }, 50);
  };

  return (
    <>
      <div className="bg-accent text-white text-sm py-2 hidden md:block">
        <div className="max-w-7xl mx-auto px-4 flex justify-between items-center">
          <div className="flex items-center gap-6">
            <a href="tel:100" className="flex items-center gap-2 hover:text-secondary transition-colors" data-testid="link-phone-100">
              <Phone className="w-3.5 h-3.5" />
              <span>Dial 100 (Merchant Support)</span>
            </a>
            <a href="tel:0202221000" className="flex items-center gap-2 hover:text-secondary transition-colors" data-testid="link-phone-other">
              <Phone className="w-3.5 h-3.5" />
              <span>020 2221000 (Other networks)</span>
            </a>
            <a href="mailto:CustomerCare@telkom.co.ke" className="flex items-center gap-2 hover:text-secondary transition-colors" data-testid="link-email">
              <Mail className="w-3.5 h-3.5" />
              <span>CustomerCare@telkom.co.ke</span>
            </a>
          </div>
          <div className="flex items-center gap-1">
            <MapPin className="w-3.5 h-3.5" />
            <span>Telkom Plaza, Ralph Bunche Road, Nairobi</span>
          </div>
        </div>
      </div>

      <header
        className={`sticky top-0 z-50 transition-all duration-300 bg-primary ${
          isScrolled ? "shadow-lg" : ""
        }`}
      >
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between h-20">
            <button 
              onClick={() => scrollToSection("hero")} 
              className="flex items-center"
              data-testid="link-logo"
            >
              <img src={tkashLogo} alt="T-kash Soko" className="h-11 w-auto rounded-lg" />
            </button>

            <nav className="hidden lg:flex items-center gap-1">
              <button
                onClick={() => scrollToSection("merchants")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-merchants"
              >
                Product Vendors
              </button>
              <button
                onClick={() => scrollToSection("services")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-services"
              >
                Service Vendors
              </button>
              <button
                onClick={() => scrollToSection("personal")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-personal"
              >
                Personal
              </button>
              <button
                onClick={() => scrollToSection("features")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-features"
              >
                Features
              </button>
              <button
                onClick={() => scrollToSection("pricing")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-pricing"
              >
                Pricing
              </button>
              <button
                onClick={() => scrollToSection("support")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-support"
              >
                Support
              </button>
              <button
                onClick={() => scrollToSection("affiliate")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-affiliate"
              >
                Affiliate
              </button>
              <button
                onClick={() => scrollToSection("faq")}
                className="px-4 py-2 text-white hover:text-secondary font-medium transition-colors rounded-lg hover:bg-white/10"
                data-testid="nav-faq"
              >
                FAQ
              </button>
            </nav>

            <div className="flex items-center gap-3">
              <Button
                asChild
                className="hidden sm:flex bg-secondary hover:bg-secondary/90 text-secondary-foreground font-semibold px-6"
                data-testid="button-book-service-header"
              >
                <a href="https://bookservices.blipply.com" target="_blank" rel="noopener noreferrer">
                  Book a service
                </a>
              </Button>
              
              <button
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg"
                data-testid="button-mobile-menu"
              >
                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>

        {isMobileMenuOpen && (
          <div className="lg:hidden bg-primary/95 border-t border-white/10 shadow-lg">
            <nav className="max-w-7xl mx-auto px-4 py-4 flex flex-col gap-1">
              <button
                onClick={() => scrollToSection("merchants")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-merchants"
              >
                Product Vendors
              </button>
              <button
                onClick={() => scrollToSection("services")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-services"
              >
                Service Vendors
              </button>
              <button
                onClick={() => scrollToSection("personal")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-personal"
              >
                Personal
              </button>
              <button
                onClick={() => scrollToSection("features")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-features"
              >
                Features
              </button>
              <button
                onClick={() => scrollToSection("pricing")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-pricing"
              >
                Pricing
              </button>
              <button
                onClick={() => scrollToSection("support")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-support"
              >
                Support
              </button>
              <button
                onClick={() => scrollToSection("affiliate")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-affiliate"
              >
                Affiliate
              </button>
              <button
                onClick={() => scrollToSection("faq")}
                className="px-4 py-3 text-white hover:text-secondary font-medium text-left rounded-lg hover:bg-white/10"
                data-testid="mobile-nav-faq"
              >
                FAQ
              </button>
              <Button
                asChild
                className="mt-2 bg-secondary hover:bg-secondary/90 text-secondary-foreground font-semibold"
                data-testid="mobile-button-book-service"
              >
                <a href="https://bookservices.blipply.com" target="_blank" rel="noopener noreferrer">
                  Book a service
                </a>
              </Button>
            </nav>
          </div>
        )}
      </header>
    </>
  );
}
