import Link from "next/link";
import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function WebringPage() {
  const sites = [
    { name: "The Candy Shop", path: "/market", desc: "Premium sweets and treats." },
    { name: "Darknet Ping Pong", path: "/game", desc: "The shared entity." },
    { name: "Shadow Lotto", path: "/drops", desc: "Win big or lose it all." },
    { name: "The Truth Seeker", path: "/conspiracies", desc: "Uncover the hidden." },
    { name: "The Sanctuary", path: "/sanctuary", desc: "Peace in the void." },
    { name: "Master Control", path: "/vault", desc: "The eye that sees all." },
    { name: "Arb Academy", path: "/arb-academy", desc: "Learn the trade." },
    { name: "Syndicate Shells", path: "/syndicate", desc: "Relay skins and topology notes." },
  ];

  return (
    <ThemedLayout theme="hacker" title="The Webring">
      <div className="space-y-8">
        <h2 className="text-3xl font-bold border-b border-[#00ff41]/20 pb-4">Network Directory</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {sites.map((site, i) => (
            <Link
              key={i} 
              href={site.path}
              className="group border border-[#00ff41]/20 p-6 hover:bg-[#00ff41]/5 transition-all"
            >
              <div className="text-xl font-bold mb-2 group-hover:text-white transition-colors">
                [{i.toString().padStart(2, '0')}] {site.name}
              </div>
              <p className="text-xs opacity-60">{site.desc}</p>
              <div className="mt-4 text-[10px] opacity-20 group-hover:opacity-100 transition-opacity">
                CONNECTING TO NODE_{i}... SUCCESS
              </div>
            </Link>
          ))}
        </div>

        <div className="mt-20 p-12 border-2 border-dashed border-[#00ff41]/10 text-center">
          <div className="text-4xl mb-4 animate-spin inline-block">⚙️</div>
          <h3 className="text-xl font-bold mb-2">Expanding the Network...</h3>
          <p className="text-xs opacity-40">Dozens of new nodes are being provisioned by the Shadow Protocol.</p>
        </div>
      </div>
    </ThemedLayout>
  );
}