"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Sparkles } from "lucide-react";

const links = [
  { label: "Product", href: "#" },
  { label: "Solutions", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
];

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

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

  return (
    <>
      <header
        className={`fixed top-0 inset-x-0 z-40 transition-colors ${
          scrolled
            ? "backdrop-blur-md bg-background/70 border-b border-border"
            : "bg-transparent"
        }`}
      >
        <div className="container mx-auto flex items-center justify-between gap-6 px-6 py-4">
          <a href="#" className="flex items-center gap-2 text-foreground font-bold">
            <Sparkles className="w-5 h-5 text-primary" />
            <span>Acme</span>
          </a>
          <nav className="hidden md:flex items-center gap-6">
            {links.map((l) => (
              <a
                key={l.label}
                href={l.href}
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {l.label}
              </a>
            ))}
          </nav>
          <Button size="sm">Get started</Button>
        </div>
      </header>
      {/* Spacer so the demo content below is visible under the fixed nav */}
      <div className="pt-20 min-h-[120vh] bg-gradient-to-b from-muted/40 to-background">
        <div className="container mx-auto px-6 py-20 max-w-3xl text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold text-foreground mb-4">
            Scroll to see the blur
          </h1>
          <p className="text-muted-foreground text-lg">
            The navbar is transparent at the top of the page and fades into a blurred,
            bordered bar as you scroll past 20px. Try it.
          </p>
        </div>
      </div>
    </>
  );
}