"use client";

import { useEffect, useRef, useState } from "react";

const NAV = [
  { label: "Features", href: "#features" },
  { label: "Customers", href: "#customers" },
  { label: "Pricing", href: "#pricing" },
  { label: "Blog", href: "#blog" },
];

export function StickyAnimatedNavbar() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    function onScroll() {
      if (!el) return;
      setScrolled(el.scrollTop > 24);
    }
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div
      ref={containerRef}
      className="relative overflow-y-auto bg-zinc-50 text-zinc-900 antialiased font-sans"
      style={{ minHeight: 460, maxHeight: 540 }}
    >
      <header
        className={`sticky top-0 z-40 transition-all duration-300 ${
          scrolled
            ? "bg-white/85 backdrop-blur-md border-b border-zinc-200 shadow-[0_1px_0_rgba(15,23,42,0.04)]"
            : "bg-transparent border-b border-transparent"
        }`}
      >
        <div
          className={`mx-auto flex max-w-6xl items-center gap-6 px-5 transition-all duration-300 ${
            scrolled ? "h-12" : "h-16"
          }`}
        >
          <a href="#" className="flex items-center gap-2" aria-label="Sable home">
            <span
              aria-hidden
              className={`grid place-items-center rounded-md bg-zinc-900 text-white font-bold transition-all ${
                scrolled ? "h-6 w-6 text-[11px]" : "h-7 w-7 text-[13px]"
              }`}
            >
              S
            </span>
            <span
              className={`font-semibold tracking-tight transition-all ${
                scrolled ? "text-[14px]" : "text-[15px]"
              }`}
            >
              Sable
            </span>
            {scrolled && (
              <span className="ml-1 inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700">
                Live
              </span>
            )}
          </a>

          <nav aria-label="Primary" className="hidden md:flex items-center gap-1 text-[13.5px]">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-md px-3 py-1.5 text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100/60"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-2">
            {scrolled && (
              <a
                href="#book"
                className="inline-flex items-center gap-1 rounded-md border border-zinc-200 px-2.5 py-1 text-[12.5px] hover:bg-zinc-50 transition-opacity"
              >
                Book a demo
              </a>
            )}
            <a
              href="#start"
              className={`inline-flex items-center gap-1 rounded-md bg-zinc-900 text-white transition-all ${
                scrolled ? "px-3 py-1 text-[12.5px]" : "px-4 py-1.5 text-[13.5px]"
              }`}
            >
              Start now <span aria-hidden>→</span>
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="sable-mobile"
            className="md:hidden ml-auto grid h-9 w-9 place-items-center rounded-md hover:bg-zinc-100"
            aria-label="Toggle menu"
          >
            <span aria-hidden>{open ? "✕" : "☰"}</span>
          </button>
        </div>

        {open && (
          <nav id="sable-mobile" className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 grid gap-1">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-md px-2 py-2 text-[14px] hover:bg-zinc-50"
              >
                {item.label}
              </a>
            ))}
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-10">
        <p className="text-[11.5px] font-medium uppercase tracking-[0.18em] text-zinc-500">
          ↓ Scroll the preview area to watch the navbar shrink
        </p>
        <h1 className="mt-3 max-w-xl text-[28px] font-semibold tracking-tight">
          The navbar that gets out of the way as you read.
        </h1>
        <div className="mt-8 space-y-4 text-[14px] leading-relaxed text-zinc-700">
          {Array.from({ length: 8 }).map((_, i) => (
            <p key={i}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}
Sticky Animated Navbar

The navbar that gets out of the way as you read.
