"use client";

import { useState } from "react";

const NAV = [
  { label: "~/home", href: "#home" },
  { label: "~/about", href: "#about" },
  { label: "~/links", href: "#links" },
  { label: "~/guestbook", href: "#guestbook" },
];

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

  return (
    <div
      className="bg-[#fff4d6] text-black antialiased"
      style={{ fontFamily: "var(--font-geist-mono), ui-monospace, monospace" }}
    >
      <header className="border-y-4 border-black">
        <div
          className="bg-black text-[#ffec5c] px-3 py-1 text-[11px] uppercase tracking-widest flex items-center justify-between"
        >
          <span className="inline-flex items-center gap-2">
            <span aria-hidden className="inline-block h-2 w-2 bg-[#ffec5c] animate-pulse" />
            ONLINE SINCE 2003
          </span>
          <span aria-hidden className="hidden md:inline">
            ★彡 BEST VIEWED IN NETSCAPE NAVIGATOR 4.7 ★彡
          </span>
          <span>VISITORS: 0049182</span>
        </div>

        <div className="border-t-4 border-black bg-[#fff4d6]">
          <div className="mx-auto max-w-5xl px-4 py-3 flex flex-wrap items-center gap-3">
            <a
              href="#"
              className="text-[24px] font-black tracking-tight"
              style={{
                background:
                  "linear-gradient(90deg, #ff00aa, #aa00ff, #00aaff)",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                fontStyle: "italic",
              }}
              aria-label="Pixel House home"
            >
              ◆ Pixel House ◆
            </a>
            <span aria-hidden className="hidden md:inline ml-2 text-[12px]">
              [under construction]
            </span>

            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="pix-mobile"
              className="md:hidden ml-auto border-2 border-black bg-[#ffec5c] px-3 py-1 text-[11px] font-bold uppercase shadow-[3px_3px_0_#000]"
            >
              {open ? "[X]" : "≣ MENU"}
            </button>
          </div>

          <nav
            aria-label="Primary"
            className="hidden md:flex border-t-2 border-black bg-[#ffec5c]"
          >
            {NAV.map((item, i) => (
              <a
                key={item.href}
                href={item.href}
                className={`flex-1 border-r-2 border-black px-3 py-2 text-center text-[12.5px] font-bold uppercase hover:bg-[#ff00aa] hover:text-white transition-colors ${i === NAV.length - 1 ? "border-r-0" : ""}`}
              >
                {item.label}
              </a>
            ))}
            <a
              href="#email"
              className="border-l-2 border-black bg-[#ff00aa] px-4 py-2 text-center text-[12.5px] font-bold uppercase text-white hover:bg-black"
            >
              📧 sign guestbook
            </a>
          </nav>
        </div>

        {open && (
          <nav
            id="pix-mobile"
            className="md:hidden border-t-4 border-black bg-[#ffec5c] grid"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="border-b-2 border-black px-4 py-3 text-[13px] font-bold uppercase hover:bg-[#ff00aa] hover:text-white"
              >
                {item.label}
              </a>
            ))}
            <a
              href="#email"
              className="bg-[#ff00aa] px-4 py-3 text-[13px] font-bold uppercase text-white"
            >
              📧 SIGN GUESTBOOK
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-5xl px-4 py-6">
        <p className="text-[11px]">
          &gt; welcome.html · last_modified=04/22/2003 · 14 kB
        </p>
        <h1 className="mt-3 text-[28px] font-black uppercase">
          *｡♡ HELLO WORLD WIDE WEB ♡｡*
        </h1>
      </div>
    </div>
  );
}
Retro Web Navbar

*｡♡ HELLO WORLD WIDE WEB ♡｡*

｡♡ HELLO WORLD WIDE WEB ♡｡
