import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Phone, ArrowRight, Menu, X } from "lucide-react";

interface NavbarProps {
  onOpenOfferModal: () => void;
  onNavigateSection: (id: string) => void;
}

function BrandStamp({ inverse = false }: { inverse?: boolean }) {
  return (
    <div className={`brand-stamp ${inverse ? "brand-stamp-inverse" : ""}`} aria-hidden="true">
      <svg width="24" height="24" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M6 18.5 20 7l14 11.5" />
        <path d="M10.5 17.5V33h19V17.5" />
        <path d="M16 33V23h8v10" />
        <path d="M9 36h22" />
      </svg>
    </div>
  );
}

export { BrandStamp };

export default function Navbar({ onOpenOfferModal, onNavigateSection }: NavbarProps) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

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

  const navLinks = [
    { label: "How It Works", id: "how-it-works" },
    { label: "Situations", id: "situations" },
    { label: "Why Us", id: "advantages" },
    { label: "FAQ", id: "faq" },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-background/95 backdrop-blur-md border-b border-border shadow-xs py-3.5"
          : "bg-background/90 backdrop-blur-sm py-5 border-b border-border/40"
      }`}
    >
      <div className="container flex items-center justify-between">
        <button
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          className="flex items-center gap-3 cursor-pointer group text-left"
          aria-label="Home Buyers Nationwide home"
        >
          <BrandStamp />
          <span className="brand-wordmark">
            <span>Home Buyers</span>
            <span>Nationwide</span>
          </span>
        </button>

        <nav className="hidden md:flex items-center gap-8" aria-label="Primary navigation">
          {navLinks.map((link) => (
            <button
              key={link.id}
              onClick={() => onNavigateSection(link.id)}
              className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors cursor-pointer"
            >
              {link.label}
            </button>
          ))}
        </nav>

        <div className="hidden lg:flex items-center gap-5">
          <a href="tel:2404105636" className="flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors">
            <Phone className="w-3.5 h-3.5 text-primary" />
            <span>(240) 410-5636</span>
          </a>
          <Button onClick={onOpenOfferModal} className="bg-primary hover:bg-primary/90 text-primary-foreground font-medium px-5 py-2.5 rounded-md shadow-xs transition-all active:scale-97">
            <span>Get Cash Offer</span>
            <ArrowRight className="w-4 h-4 ml-1.5" />
          </Button>
        </div>

        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 rounded-md text-foreground hover:bg-secondary transition-colors" aria-label="Toggle menu" aria-expanded={mobileMenuOpen}>
          {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {mobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 right-0 bg-background border-b border-border shadow-lg py-6 px-6 animate-in slide-in-from-top-2 duration-200">
          <div className="flex flex-col gap-4">
            {navLinks.map((link) => (
              <button key={link.id} onClick={() => { setMobileMenuOpen(false); onNavigateSection(link.id); }} className="text-left text-base font-medium py-2 border-b border-border/40 text-foreground hover:text-primary">
                {link.label}
              </button>
            ))}
            <div className="pt-2 flex flex-col gap-3">
              <a href="tel:2404105636" className="flex items-center gap-2 text-sm font-medium text-foreground py-2">
                <Phone className="w-4 h-4 text-primary" />
                <span>Call (240) 410-5636</span>
              </a>
              <Button onClick={() => { setMobileMenuOpen(false); onOpenOfferModal(); }} className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-3 rounded-md font-medium justify-center">
                Get Cash Offer
              </Button>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}
