"use client";

import { useState } from "react";

const NAV = [
  { label: "Features", href: "#features" },
  { label: "Method", href: "#method" },
  { label: "Reviews", href: "#reviews" },
  { label: "Pricing", href: "#pricing" },
];

export function FloatingPillNavbar() {
  const [open, setOpen] = useState(false);

  return (
    <div
      className="relative text-white antialiased font-sans overflow-hidden"
      style={{
        background:
          "linear-gradient(140deg, #052e16 0%, #064e3b 40%, #0f766e 100%)",
      }}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute -top-24 left-1/3 h-64 w-64 rounded-full"
        style={{ background: "#10b981", filter: "blur(90px)", opacity: 0.45 }}
      />

      <div className="relative flex justify-center px-5 pt-5">
        <header
          className="flex items-center gap-2 rounded-full border border-white/15 p-1 pl-3 pr-1 max-w-3xl w-full"
          style={{
            background: "rgba(6,46,29,0.55)",
            backdropFilter: "blur(20px) saturate(170%)",
            WebkitBackdropFilter: "blur(20px) saturate(170%)",
            boxShadow:
              "inset 0 1px 0 rgba(255,255,255,0.18), 0 18px 40px -10px rgba(0,0,0,0.45)",
          }}
        >
          <a
            href="#"
            className="flex items-center gap-2 pl-1 pr-3 text-[14.5px] font-semibold"
            aria-label="Cedar home"
          >
            <span aria-hidden className="text-[18px]">☘</span>
            Cedar
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-0.5 text-[13px] mx-auto"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-full px-3 py-1.5 text-white/80 hover:text-white hover:bg-white/10 focus-visible:outline-none focus-visible:bg-white/10 transition-colors"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <a
            href="#cta"
            className="ml-auto hidden md:inline-flex items-center gap-1.5 rounded-full bg-white px-4 py-1.5 text-[13px] font-semibold text-[#052e16] hover:bg-white/90"
          >
            Start trial
            <span aria-hidden>→</span>
          </a>

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

      {open && (
        <div className="md:hidden relative flex justify-center px-5 mt-2">
          <nav
            id="cedar-mobile"
            className="w-full max-w-3xl rounded-2xl border border-white/15 p-2 grid gap-0.5 text-[14px]"
            style={{
              background: "rgba(6,46,29,0.7)",
              backdropFilter: "blur(20px)",
            }}
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-full px-3 py-2 text-white/85 hover:bg-white/10"
              >
                {item.label}
              </a>
            ))}
            <a
              href="#cta"
              className="mt-2 rounded-full bg-white px-3 py-2 text-center text-[13px] font-semibold text-[#052e16]"
            >
              Start trial →
            </a>
          </nav>
        </div>
      )}

      <div data-nav-context className="relative mx-auto max-w-3xl px-5 py-12 text-center">
        <p className="text-[12px] uppercase tracking-[0.22em] text-white/65">
          Mindful productivity
        </p>
        <h1 className="mt-3 text-[30px] font-semibold tracking-tight">
          A quieter way to plan your week.
        </h1>
      </div>
    </div>
  );
}
Floating Pill Navbar

A quieter way to plan your week.
