import Link from "next/link";
import { SYNDICATE_NODES } from "@/lib/syndicateNetwork";

/** Index of themed `/w/[slug]` nodes — same Next app, different chrome. */
export default function SyndicateIndexPage() {
  return (
    <main>
      <p className="mb-8 text-sm text-zinc-400">
        Deep links:{" "}
        <Link href="/syndicate/topology" className="text-fuchsia-400 underline hover:text-fuchsia-300">
          topology
        </Link>
        {" · "}
        <Link href="/syndicate/routing" className="text-fuchsia-400 underline hover:text-fuchsia-300">
          routing lore
        </Link>
      </p>
      <ul className="grid gap-3 sm:grid-cols-2">
        {SYNDICATE_NODES.map((n) => (
          <li key={n.slug}>
            <Link
              href={`/w/${n.slug}`}
              className="block rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 transition hover:border-fuchsia-500/40 hover:bg-zinc-900"
            >
              <span className="font-mono text-sm text-fuchsia-300">/{n.slug}</span>
              <p className="mt-1 text-xs text-zinc-500">{n.tagline}</p>
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}