import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Menu, Heart } from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";

export default function Header() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const links = [
    { label: "About", to: "/about" },
    { label: "Programs", to: "/programs" },
    { label: "Impact", to: "/#impact" },
    { label: "Get Involved", to: "/get-involved" },
  ];

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-white/90 dark:bg-slate-950/95 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800 shadow-sm" : "bg-transparent"}`}>
      <div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-4">
        <Link to="/" className="flex items-center gap-2 group">
          <div className="relative">
            <Heart className={`h-7 w-7 transition-colors fill-current \${scrolled ? "text-emerald-600" : "text-white"}`} />
          </div>
          <span className={`text-lg font-bold tracking-tight transition-colors \${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}>Green Horizons Foundation</span>
        </Link>
        <nav className="hidden md:flex items-center gap-8">
          {links.map((l) => (
            <Link key={l.to} to={l.to} className={`text-sm font-medium transition-colors hover:text-emerald-500 \${scrolled ? "text-slate-600 dark:text-slate-300" : "text-white/90"}`}>{l.label}</Link>
          ))}
        </nav>
        <div className="hidden md:flex items-center gap-3">
          <ThemeToggle />
          <Button asChild size="sm" className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full px-6 shadow-lg shadow-emerald-500/20 active:scale-[0.97] transition-all">
            <Link to="/get-involved">Donate Now</Link>
          </Button>
        </div>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild className="md:hidden">
            <Button variant="ghost" size="icon" className={`\${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}><Menu className="h-5 w-5" /></Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-72 bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800">
            <nav className="mt-8 flex flex-col gap-4">
              {links.map((l) => (
                <Link key={l.to} to={l.to} className="text-lg font-medium text-slate-700 dark:text-slate-200 hover:text-emerald-500 transition-colors" onClick={() => setOpen(false)}>{l.label}</Link>
              ))}
              <Button asChild className="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 text-white rounded-full active:scale-[0.97] transition-all">
                <Link to="/get-involved" onClick={() => setOpen(false)}>Donate Now</Link>
              </Button>
              <ThemeToggle />
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}