"use client";

import { useState } from "react";

const NAV = [
  { label: "Chat", href: "#chat" },
  { label: "Agents", href: "#agents", badge: "New" },
  { label: "Studio", href: "#studio" },
  { label: "API", href: "#api" },
];

const MODELS = [
  { name: "Helix 4.1 Opus", desc: "Most capable", flag: "Pro" },
  { name: "Helix 4.1 Sonnet", desc: "Balanced", flag: null },
  { name: "Helix 4.1 Haiku", desc: "Fastest", flag: null },
];

export function AiProductNavbar() {
  const [open, setOpen] = useState(false);
  const [modelOpen, setModelOpen] = useState(false);
  const [model, setModel] = useState(MODELS[0]);

  return (
    <div
      className="text-[#1a0d3d] antialiased font-sans"
      style={{
        background:
          "linear-gradient(180deg, #faf7ff 0%, #fdf4ff 60%, #fff7ed 100%)",
      }}
    >
      <header className="sticky top-0 z-40 border-b border-white/40 bg-white/55 backdrop-blur-xl">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-5">
          <a href="#" className="flex items-center gap-2 text-[15px] font-semibold tracking-tight" aria-label="Helix home">
            <span
              aria-hidden
              className="grid h-7 w-7 place-items-center rounded-full text-white"
              style={{
                background:
                  "conic-gradient(from 180deg at 50% 50%, #a78bfa, #f0abfc, #fdba74, #a78bfa)",
              }}
            >
              <span className="text-[13px]">✦</span>
            </span>
            Helix
          </a>

          <div className="relative">
            <button
              type="button"
              onClick={() => setModelOpen((v) => !v)}
              aria-expanded={modelOpen}
              aria-haspopup="listbox"
              className="hidden md:inline-flex items-center gap-2 rounded-full border border-violet-200/70 bg-white/60 px-3 py-1.5 text-[12.5px] font-medium hover:bg-white"
            >
              <span aria-hidden className="text-violet-600">✦</span>
              {model.name}
              <span aria-hidden className="text-[10px]">▾</span>
            </button>
            {modelOpen && (
              <ul
                role="listbox"
                className="absolute left-0 top-full mt-2 w-56 rounded-xl border border-violet-100 bg-white p-1 shadow-xl z-50"
              >
                {MODELS.map((m) => (
                  <li role="option" aria-selected={m.name === model.name} key={m.name}>
                    <button
                      type="button"
                      onClick={() => {
                        setModel(m);
                        setModelOpen(false);
                      }}
                      className="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left hover:bg-violet-50"
                    >
                      <span>
                        <span className="block text-[13px] font-medium">
                          {m.name}
                        </span>
                        <span className="block text-[11px] text-zinc-500">
                          {m.desc}
                        </span>
                      </span>
                      {m.flag && (
                        <span className="rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-800">
                          {m.flag}
                        </span>
                      )}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>

          <nav aria-label="Primary" className="ml-2 hidden md:flex items-center gap-1 text-[13px]">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[#3a276b] hover:bg-violet-100/60 transition-colors"
              >
                {item.label}
                {item.badge && (
                  <span className="rounded-full bg-violet-600 px-1.5 py-0.5 text-[9.5px] font-bold uppercase tracking-wider text-white">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-2">
            <a href="#signin" className="text-[13px] text-[#3a276b] hover:text-[#1a0d3d] px-2">
              Log in
            </a>
            <a
              href="#start"
              className="inline-flex items-center gap-1.5 rounded-full bg-[#1a0d3d] px-4 py-1.5 text-[13px] font-medium text-white hover:bg-[#2a1a5a]"
            >
              ✦ Start free
            </a>
          </div>

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

        {open && (
          <nav id="helix-mobile" className="md:hidden border-t border-violet-100/60 px-5 py-3 grid gap-1 bg-white/70 backdrop-blur-xl">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="flex items-center justify-between rounded-lg px-2 py-2 text-[14px] hover:bg-violet-100/60"
              >
                {item.label}
                {item.badge && (
                  <span className="rounded-full bg-violet-600 px-1.5 py-0.5 text-[10px] font-bold text-white">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
            <a href="#start" className="mt-2 inline-flex justify-center rounded-full bg-[#1a0d3d] px-4 py-2.5 text-[14px] text-white">
              ✦ Start free
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-10">
        <h1 className="max-w-2xl text-[28px] font-semibold tracking-tight">
          The fastest way to put intelligent agents into production.
        </h1>
      </div>
    </div>
  );
}
AI Product Navbar

The fastest way to put intelligent agents into production.
