"use client";

import { useState } from "react";

const NAV = [
  { label: "Stories", href: "#stories" },
  { label: "Essays", href: "#essays" },
  { label: "Interviews", href: "#interviews" },
  { label: "Notebook", href: "#notebook" },
  { label: "Archive", href: "#archive" },
];

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

  return (
    <div className="bg-[#f7f3ea] text-[#1a1a1a] antialiased">
      <header className="border-b border-[#1a1a1a]/10">
        <div className="mx-auto max-w-6xl px-6">
          <div className="flex items-center justify-between py-2 text-[10.5px] uppercase tracking-[0.2em] text-[#1a1a1a]/60 font-mono">
            <span>Saturday, May 23 — 2026</span>
            <span>No. 184 / Vol. XII</span>
          </div>

          <div className="flex items-end justify-between border-t border-[#1a1a1a]/10 pt-3 pb-4">
            <span aria-hidden className="hidden md:block text-[11px] font-mono uppercase tracking-[0.18em] w-24">
              Since '14
            </span>
            <a
              href="#"
              className="text-center focus-visible:outline-none"
              style={{
                fontFamily: "var(--font-instrument-serif), serif",
                fontStyle: "italic",
                fontSize: "clamp(34px, 5vw, 56px)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
              }}
              aria-label="The Quarterly home"
            >
              The Quarterly
            </a>
            <a
              href="#subscribe"
              className="hidden md:inline-flex items-center gap-1.5 rounded-full border border-[#1a1a1a] px-4 py-2 text-[11px] font-mono uppercase tracking-[0.16em] hover:bg-[#1a1a1a] hover:text-[#f7f3ea] transition-colors"
            >
              Subscribe · 4€/mo
            </a>
            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="quarterly-mobile"
              className="md:hidden font-mono text-[11px] uppercase tracking-[0.18em] border-b border-[#1a1a1a] pb-0.5"
            >
              {open ? "Close" : "Menu"}
            </button>
          </div>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center justify-center gap-8 border-t border-[#1a1a1a]/10 py-3 text-[12px] font-mono uppercase tracking-[0.2em]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-[#1a1a1a]/70 hover:text-[#1a1a1a] focus-visible:outline-none focus-visible:text-[#1a1a1a]"
              >
                {item.label}
              </a>
            ))}
          </nav>

          {open && (
            <nav
              id="quarterly-mobile"
              className="md:hidden border-t border-[#1a1a1a]/10 py-4 grid gap-3"
            >
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="font-serif italic text-[24px] leading-tight"
                  style={{ fontFamily: "var(--font-instrument-serif), serif" }}
                >
                  {item.label}
                </a>
              ))}
              <a
                href="#subscribe"
                className="mt-3 inline-flex w-fit items-center gap-1.5 rounded-full border border-[#1a1a1a] px-4 py-2 text-[11px] font-mono uppercase tracking-[0.16em]"
              >
                Subscribe · 4€/mo
              </a>
            </nav>
          )}
        </div>
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-6 py-10">
        <p className="text-[10.5px] uppercase tracking-[0.2em] font-mono text-[#1a1a1a]/60">
          Essay · 14 min read
        </p>
        <h2
          className="mt-3 max-w-2xl"
          style={{
            fontFamily: "var(--font-instrument-serif), serif",
            fontSize: 30,
            lineHeight: 1.1,
          }}
        >
          On the quiet violence of dashboards, and what we lose to legibility.
        </h2>
      </div>
    </div>
  );
}
Editorial Magazine Navbar

On the quiet violence of dashboards, and what we lose to legibility.
