"use client";

import { useState } from "react";

const TABS = [
  { label: "Today", icon: "✦", href: "#today" },
  { label: "Library", icon: "▤", href: "#library" },
  { label: "Listen", icon: "♪", href: "#listen", primary: true },
  { label: "Saved", icon: "♡", href: "#saved" },
  { label: "You", icon: "◉", href: "#you" },
];

export function MobileFirstNavbar() {
  const [active, setActive] = useState("Listen");

  return (
    <div
      className="relative bg-gradient-to-b from-[#0f1729] via-[#0f1729] to-[#1a1133] text-white antialiased font-sans"
      style={{ minHeight: 460 }}
    >
      <header className="flex items-center justify-between px-5 pt-5">
        <button
          type="button"
          className="grid h-9 w-9 place-items-center rounded-full bg-white/10 backdrop-blur"
          aria-label="Account"
        >
          <span aria-hidden>◉</span>
        </button>
        <div className="text-center">
          <p className="text-[10px] uppercase tracking-[0.22em] text-white/55">
            Wednesday
          </p>
          <h2 className="text-[15px] font-semibold tracking-tight">
            Today's mix
          </h2>
        </div>
        <button
          type="button"
          className="grid h-9 w-9 place-items-center rounded-full bg-white/10 backdrop-blur"
          aria-label="Search"
        >
          <span aria-hidden>⌕</span>
        </button>
      </header>

      <div data-nav-context className="mx-auto mt-6 max-w-sm px-5">
        <div
          className="aspect-[4/3] rounded-2xl border border-white/10 p-5"
          style={{
            background:
              "radial-gradient(circle at 20% 20%, #ec4899 0%, #7c3aed 40%, #0f1729 100%)",
          }}
        >
          <p className="text-[11px] uppercase tracking-[0.2em] text-white/70">
            Now playing
          </p>
          <h3 className="mt-2 text-[22px] font-semibold leading-tight">
            Late Night<br />Architecture
          </h3>
          <div className="mt-auto pt-12 flex items-center gap-3 text-[12px] text-white/70">
            <span aria-hidden>♪</span> 14 tracks · 1h 12m
          </div>
        </div>
      </div>

      <nav
        aria-label="Primary"
        className="fixed inset-x-0 bottom-3 z-50 mx-auto max-w-sm px-3"
        style={{ position: "absolute" }}
      >
        <div
          className="flex items-center justify-around rounded-full border border-white/15 px-2 py-2"
          style={{
            background: "rgba(15,23,41,0.78)",
            backdropFilter: "blur(20px) saturate(160%)",
            WebkitBackdropFilter: "blur(20px) saturate(160%)",
            boxShadow:
              "inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 40px -10px rgba(0,0,0,0.6)",
          }}
        >
          {TABS.map((tab) =>
            tab.primary ? (
              <button
                key={tab.label}
                type="button"
                onClick={() => setActive(tab.label)}
                aria-current={active === tab.label ? "page" : undefined}
                aria-label={tab.label}
                className="grid h-12 w-12 place-items-center rounded-full text-[#0f1729] -mt-6"
                style={{
                  background:
                    "linear-gradient(135deg, #f0abfc 0%, #818cf8 100%)",
                  boxShadow: "0 10px 24px -6px rgba(168,85,247,0.6)",
                }}
              >
                <span aria-hidden className="text-[18px]">{tab.icon}</span>
              </button>
            ) : (
              <button
                key={tab.label}
                type="button"
                onClick={() => setActive(tab.label)}
                aria-current={active === tab.label ? "page" : undefined}
                className={`flex flex-col items-center gap-0.5 rounded-full px-3 py-1 ${
                  active === tab.label ? "text-white" : "text-white/55"
                }`}
              >
                <span aria-hidden className="text-[15px]">{tab.icon}</span>
                <span className="text-[10px] tracking-wide">{tab.label}</span>
              </button>
            )
          )}
        </div>
      </nav>
    </div>
  );
}
Mobile-First Bottom Nav

Late NightArchitecture

Late Night
Architecture
