import Link from "next/link";
import Navbar from "@/components/Navbar";
import { SITE_NAV_GROUPS, flattenSiteNavItems } from "@/lib/siteNav";

const quickStarts = [
  { label: "Start shopping", href: "/market", hint: "Catalog, vendors, product detail pages, and checkout." },
  { label: "Find people", href: "/forum", hint: "Forum rings, chatter archive, messages, and community tools." },
  { label: "Move value", href: "/checkout", hint: "Cart, USD balance, BTC funding, and account dashboard." },
  { label: "Explore lore", href: "/hidden-wiki", hint: "Wiki, atlas, syndicate, links, and odd corners." },
];

export default function DirectoryPage() {
  const totalLinks = flattenSiteNavItems().length;

  return (
    <main className="min-h-screen bg-[#050505] text-zinc-100">
      <Navbar />
      <section className="relative overflow-hidden px-4 pb-12 pt-32">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,255,255,0.16),_transparent_38%),radial-gradient(circle_at_80%_20%,_rgba(191,0,255,0.13),_transparent_30%)]" />
        <div className="relative mx-auto max-w-6xl">
          <p className="font-mono text-[10px] uppercase tracking-[0.45em] text-neon-cyan/70">everything site</p>
          <div className="mt-4 grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-end">
            <div>
              <h1 className="font-orbitron text-4xl font-black uppercase leading-none md:text-6xl">
                CyberLux Master <span className="text-neon-cyan">Directory</span>
              </h1>
              <p className="mt-6 max-w-2xl text-base leading-relaxed text-zinc-400 md:text-lg">
                One onion, every room. Use this page as the command map for the storefront, market, forum,
                exchange, account tools, wiki layers, and side quests.
              </p>
            </div>
            <div className="rounded-3xl border border-neon-cyan/20 bg-black/50 p-6 shadow-2xl shadow-neon-cyan/5">
              <p className="font-mono text-xs uppercase tracking-[0.25em] text-neon-green/80">single ingress</p>
              <p className="mt-3 text-sm leading-relaxed text-zinc-400">
                Tor now publishes one hidden service from <code className="text-neon-cyan">cyberlux</code>. All
                sections live as normal paths under that one hostname.
              </p>
              <div className="mt-5 grid grid-cols-2 gap-3 text-center font-mono text-xs">
                <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                  <div className="text-2xl font-bold text-neon-cyan">1</div>
                  <div className="mt-1 text-zinc-500">onion address</div>
                </div>
                <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                  <div className="text-2xl font-bold text-neon-purple">{totalLinks}</div>
                  <div className="mt-1 text-zinc-500">mapped doors</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 py-8">
        <div className="grid gap-4 md:grid-cols-4">
          {quickStarts.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="group rounded-3xl border border-white/10 bg-white/[0.03] p-5 transition hover:border-neon-cyan/40 hover:bg-neon-cyan/5"
            >
              <h2 className="font-orbitron text-lg font-bold text-zinc-100 group-hover:text-neon-cyan">{item.label}</h2>
              <p className="mt-3 text-sm leading-relaxed text-zinc-500">{item.hint}</p>
            </Link>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-24 pt-8">
        <div className="mb-6 flex flex-col gap-3 border-b border-white/10 pb-6 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="font-mono text-[10px] uppercase tracking-[0.35em] text-neon-purple/70">site map</p>
            <h2 className="mt-2 font-orbitron text-3xl font-bold">All Rooms</h2>
          </div>
          <Link
            href="/search"
            className="rounded-full border border-neon-cyan/30 px-5 py-2 text-sm font-bold text-neon-cyan hover:bg-neon-cyan/10"
          >
            Search the site
          </Link>
        </div>

        <div className="grid gap-6 lg:grid-cols-2">
          {SITE_NAV_GROUPS.map((group) => (
            <section key={group.title} className="rounded-3xl border border-white/10 bg-black/40 p-5">
              <h3 className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-zinc-500">{group.title}</h3>
              <div className="mt-4 grid gap-2 sm:grid-cols-2">
                {group.items.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className="flex items-center gap-3 rounded-2xl border border-white/5 bg-white/[0.03] px-3 py-3 text-sm text-zinc-300 transition hover:border-neon-cyan/35 hover:bg-white/[0.06] hover:text-neon-cyan"
                  >
                    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/5 text-base">
                      {item.icon}
                    </span>
                    <span>
                      <span className="block font-semibold">{item.label}</span>
                      <span className="block font-mono text-[10px] text-zinc-600">{item.href}</span>
                    </span>
                  </Link>
                ))}
              </div>
            </section>
          ))}
        </div>
      </section>
    </main>
  );
}