"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import LexiconStrip from "@/components/site/LexiconStrip";
import { SYNDICATE_ATMOSPHERE_TAGS } from "@/lib/cyberluxZoneLexicon";

const NAV: { href: string; label: string }[] = [
  { href: "/syndicate", label: "Node index" },
  { href: "/syndicate/topology", label: "Topology" },
  { href: "/syndicate/routing", label: "Routing lore" },
];

export default function SyndicateSiteChrome({ children }: { children: React.ReactNode }) {
  const pathname = usePathname() ?? "";
  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-200">
      <header className="border-b border-zinc-800 px-4 py-8">
        <div className="mx-auto max-w-4xl">
          <p className="font-mono text-[10px] uppercase tracking-[0.35em] text-fuchsia-400/80">syndicate · multi-layer</p>
          <Link href="/syndicate">
            <h1 className="mt-2 text-3xl font-bold tracking-tight text-white md:text-4xl">Syndicate shells</h1>
          </Link>
          <p className="mt-3 max-w-2xl text-sm text-zinc-400">
            Themed <code className="text-fuchsia-300/90">/w/*</code> relays on the same Next deployment — index, topology, and routing docs are separate pages so dedicated onions can deep-link without a single flat list.
          </p>
          <nav className="mt-6 flex flex-wrap gap-2 text-xs font-medium">
            {NAV.map((n) => {
              const active = n.href === "/syndicate" ? pathname === "/syndicate" : pathname.startsWith(n.href);
              return (
                <Link
                  key={n.href}
                  href={n.href}
                  className={`rounded border px-3 py-2 ${
                    active
                      ? "border-fuchsia-500 bg-fuchsia-500/15 text-fuchsia-100"
                      : "border-zinc-700 text-zinc-300 hover:border-fuchsia-500/40"
                  }`}
                >
                  {n.label}
                </Link>
              );
            })}
            <Link href="/" className="rounded border border-zinc-700 px-3 py-2 text-zinc-400 hover:border-zinc-500">
              Hub
            </Link>
            <Link href="/hidden-wiki" className="rounded border border-zinc-700 px-3 py-2 text-zinc-400 hover:border-zinc-500">
              Wiki
            </Link>
            <Link href="/search" className="rounded border border-zinc-700 px-3 py-2 text-zinc-400 hover:border-zinc-500">
              Crawler
            </Link>
          </nav>
          <div className="mt-6 text-zinc-500">
            <LexiconStrip label="Relay environment · operator lexicon" tags={SYNDICATE_ATMOSPHERE_TAGS} className="border-zinc-800" />
          </div>
        </div>
      </header>
      <div className="mx-auto max-w-4xl px-4 py-10">{children}</div>
    </div>
  );
}