"use client";

import { useState } from "react";

const CATEGORIES = [
  "New",
  "Women",
  "Men",
  "Kids",
  "Home",
  "Sale",
];

export function EcommerceNavbar() {
  const [open, setOpen] = useState(false);
  const [cat, setCat] = useState("New");

  return (
    <div className="bg-white text-zinc-900 antialiased font-sans">
      <div className="bg-zinc-900 text-zinc-50 text-[11.5px]">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-1.5">
          <span className="hidden md:inline">Free shipping over €60 · Returns extended to 60 days</span>
          <span className="md:hidden">Free shipping over €60</span>
          <div className="flex items-center gap-4">
            <a href="#help" className="hover:underline">Help</a>
            <a href="#track" className="hover:underline">Track order</a>
            <span aria-hidden className="hidden md:inline text-zinc-500">·</span>
            <button type="button" className="hidden md:inline hover:underline">EU / EUR €</button>
          </div>
        </div>
      </div>

      <header className="border-b border-zinc-100">
        <div className="mx-auto flex h-16 max-w-7xl items-center gap-4 px-5">
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="ec-mobile"
            className="md:hidden grid h-10 w-10 place-items-center -ml-2"
            aria-label="Menu"
          >
            <span aria-hidden>{open ? "✕" : "☰"}</span>
          </button>

          <a
            href="#"
            className="text-[20px] font-black uppercase tracking-tight"
            style={{ letterSpacing: "-0.02em" }}
          >
            FÜR — STORE
          </a>

          <label className="hidden md:flex flex-1 max-w-lg mx-auto items-center gap-2 rounded-full border border-zinc-200 bg-zinc-50 px-4 py-2 focus-within:bg-white focus-within:border-zinc-300">
            <span aria-hidden>⌕</span>
            <input
              type="search"
              placeholder="Search for products, brands…"
              className="w-full bg-transparent text-[13.5px] outline-none placeholder:text-zinc-500"
            />
          </label>

          <div className="ml-auto flex items-center gap-1 text-zinc-800">
            <button
              type="button"
              aria-label="Wishlist"
              className="relative grid h-10 w-10 place-items-center rounded-full hover:bg-zinc-100"
            >
              <span aria-hidden>♡</span>
            </button>
            <button
              type="button"
              aria-label="Account"
              className="hidden md:grid h-10 w-10 place-items-center rounded-full hover:bg-zinc-100"
            >
              <span aria-hidden>◉</span>
            </button>
            <button
              type="button"
              aria-label="Cart"
              className="relative grid h-10 w-10 place-items-center rounded-full hover:bg-zinc-100"
            >
              <span aria-hidden>⌫</span>
              <span className="absolute right-1.5 top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-rose-600 px-1 text-[10px] font-bold text-white">
                3
              </span>
            </button>
          </div>
        </div>

        <nav
          aria-label="Categories"
          className="hidden md:flex border-t border-zinc-100"
        >
          <div className="mx-auto flex max-w-7xl items-center gap-1 px-5 py-2 text-[13px]">
            {CATEGORIES.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setCat(c)}
                aria-current={cat === c ? "page" : undefined}
                className={`rounded-full px-3 py-1 transition-colors ${
                  cat === c
                    ? "bg-zinc-900 text-white"
                    : c === "Sale"
                      ? "text-rose-600 hover:bg-rose-50"
                      : "text-zinc-700 hover:bg-zinc-100"
                }`}
              >
                {c}
              </button>
            ))}
          </div>
        </nav>

        {open && (
          <div id="ec-mobile" className="md:hidden border-t border-zinc-100 px-5 py-3 grid gap-3">
            <label className="flex items-center gap-2 rounded-full border border-zinc-200 bg-zinc-50 px-3 py-2">
              <span aria-hidden>⌕</span>
              <input type="search" placeholder="Search…" className="w-full bg-transparent text-[13.5px] outline-none" />
            </label>
            <nav aria-label="Mobile categories" className="grid gap-1">
              {CATEGORIES.map((c) => (
                <a
                  key={c}
                  href={`#${c.toLowerCase()}`}
                  className={`flex items-center justify-between rounded-md px-2 py-2 text-[14px] ${
                    c === "Sale" ? "text-rose-600" : ""
                  }`}
                >
                  {c}
                  <span aria-hidden className="text-zinc-400">›</span>
                </a>
              ))}
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-5 py-8">
        <h1 className="text-[28px] font-black tracking-tight uppercase">
          {cat === "Sale" ? "Up to 70% off — final picks" : `Shop ${cat.toLowerCase()}`}
        </h1>
      </div>
    </div>
  );
}
E-commerce Navbar

Shop new
