"use client";

import { useState } from "react";

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

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

  return (
    <div className="bg-white text-zinc-900 antialiased font-sans">
      <div className="border-b border-zinc-100 bg-gradient-to-r from-violet-50 via-white to-amber-50">
        <a
          href="#whatsnew"
          className="mx-auto flex max-w-6xl items-center justify-center gap-2 px-5 py-2 text-[12.5px] text-zinc-700 hover:text-zinc-900"
        >
          <span className="inline-flex h-4 items-center rounded-full bg-violet-600 px-2 text-[10px] font-bold uppercase tracking-wider text-white">
            New
          </span>
          Async stand-ups are live — say goodbye to status meetings
          <span aria-hidden>→</span>
        </a>
      </div>

      <header className="border-b border-zinc-100 bg-white/90 backdrop-blur sticky top-0 z-40">
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-8 px-5">
          <a href="#" className="flex items-center gap-2.5" aria-label="Loopwell home">
            <span
              aria-hidden
              className="grid h-7 w-7 place-items-center rounded-lg text-white text-[14px] font-bold"
              style={{
                background:
                  "conic-gradient(from 220deg, #f472b6, #a78bfa, #60a5fa, #34d399, #f472b6)",
              }}
            >
              L
            </span>
            <span className="text-[16px] font-semibold tracking-tight">Loopwell</span>
          </a>

          <nav aria-label="Primary" className="hidden md:flex items-center gap-7 text-[14px]">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-zinc-600 hover:text-zinc-900 transition-colors focus-visible:outline-none focus-visible:text-zinc-900"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-3">
            <a href="#login" className="text-[14px] text-zinc-700 hover:text-zinc-900">
              Log in
            </a>
            <a
              href="#start"
              className="relative inline-flex items-center gap-1.5 rounded-full px-4 py-1.5 text-[13.5px] font-medium text-white shadow-[0_10px_30px_-12px_rgba(124,58,237,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2"
              style={{
                background:
                  "linear-gradient(135deg, #7c3aed 0%, #2563eb 100%)",
              }}
            >
              Get started free
              <span aria-hidden>→</span>
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="loopwell-mobile"
            className="ml-auto md:hidden grid h-9 w-9 place-items-center rounded-lg hover:bg-zinc-100"
            aria-label="Toggle menu"
          >
            <span aria-hidden className="block h-4 w-5 relative">
              <span className={`absolute left-0 top-0 h-[1.5px] w-full bg-zinc-900 ${open ? "translate-y-2 rotate-45" : ""} transition-transform`} />
              <span className={`absolute left-0 top-2 h-[1.5px] w-full bg-zinc-900 ${open ? "opacity-0" : ""} transition-opacity`} />
              <span className={`absolute left-0 top-4 h-[1.5px] w-full bg-zinc-900 ${open ? "-translate-y-2 -rotate-45" : ""} transition-transform`} />
            </span>
          </button>
        </div>

        {open && (
          <div id="loopwell-mobile" className="md:hidden border-t border-zinc-100 bg-white">
            <nav className="px-5 py-3 grid gap-1">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="rounded-lg px-2 py-2.5 text-[14px] text-zinc-700 hover:bg-zinc-50"
                >
                  {item.label}
                </a>
              ))}
              <div className="mt-2 grid grid-cols-2 gap-2">
                <a href="#login" className="rounded-full border border-zinc-200 px-3 py-2 text-center text-[13.5px]">
                  Log in
                </a>
                <a href="#start" className="rounded-full bg-violet-600 px-3 py-2 text-center text-[13.5px] text-white">
                  Start free
                </a>
              </div>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-10">
        <h1 className="max-w-2xl text-[30px] font-semibold tracking-tight">
          Async stand-ups for fast-moving product teams.
        </h1>
      </div>
    </div>
  );
}
Startup Landing Navbar

Async stand-ups for fast-moving product teams.
