"use client";

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

export default function LinksPage() {
  const darkWebLinks = [
    {
      name: "The Onion Router Directory",
      description: "Curated directory of verified .onion sites across deep web categories. Updated hourly.",
      url: "http://oniondir32vjq7x.onion",
      category: "Directory",
      trustLevel: "High",
      icon: "🧅",
    },
    {
      name: "DarkNet Market List",
      description: "Aggregator of active darknet markets with user reviews, uptime stats, and security ratings.",
      url: "http://darklist5zqk6l.onion",
      category: "Marketplace",
      trustLevel: "Medium",
      icon: "📊",
    },
    {
      name: "Encrypted Communications Hub",
      description: "Secure messaging platform with end‑to‑end encryption and self‑destructing messages.",
      url: "http://securechat8v4d.onion",
      category: "Communication",
      trustLevel: "High",
      icon: "🔐",
    },
    {
      name: "Zero‑Log VPN Reviews",
      description: "Independent reviews of VPN services that claim zero‑logging. Includes leak tests and jurisdiction analysis.",
      url: "http://vpnreviewsx7z.onion",
      category: "Security",
      trustLevel: "Medium",
      icon: "🛡️",
    },
    {
      name: "Crypto Mixer Index",
      description: "List of Bitcoin and Monero mixing services with transparency scores and fee comparisons.",
      url: "http://mixindex3a2s.onion",
      category: "Financial",
      trustLevel: "Low",
      icon: "🔄",
    },
    {
      name: "Black Hat Forum",
      description: "Invitation‑only forum for advanced cybersecurity discussions, exploit sharing, and underground news.",
      url: "http://bhforum5t6g.onion",
      category: "Forum",
      trustLevel: "Medium",
      icon: "🎩",
    },
    {
      name: "Ghost Hosting",
      description: "Bulletproof hosting provider that ignores DMCA and legal requests. Servers in multiple jurisdictions.",
      url: "http://ghosthost7v2d.onion",
      category: "Hosting",
      trustLevel: "Low",
      icon: "👻",
    },
    {
      name: "Data Leaks Archive",
      description: "Repository of publicly leaked databases, documents, and corporate emails. Searchable and indexed.",
      url: "http://leaksarchive9x.onion",
      category: "Data",
      trustLevel: "Medium",
      icon: "💾",
    },
  ];

  const endorsements = [
    {
      title: "CyberLux Review Blog",
      description: "Independent blog analyzing dark marketplaces. CyberLux rated #1 for security and user experience.",
      url: "/reviews",
      internal: true,
      icon: "⭐",
    },
    {
      title: "DarkNet Trust Score",
      description: "Community‑driven trust platform. CyberLux holds a 9.8/10 score based on 2,400+ verified transactions.",
      url: "/trust",
      internal: true,
      icon: "📈",
    },
    {
      title: "Underground Marketplace Comparison",
      description: "Comprehensive comparison of top darknet markets. CyberLux leads in privacy features and product quality.",
      url: "/comparison",
      internal: true,
      icon: "⚖️",
    },
    {
      title: "Security Researchers' Take",
      description: "White‑hat analysis of CyberLux's encryption implementation. Conclusion: 'Unbreakable under current tech.'",
      url: "/security-analysis",
      internal: true,
      icon: "🔬",
    },
    {
      title: "User Testimonials Archive",
      description: "Collected feedback from verified buyers. Over 98% satisfaction rate with discreet delivery and product authenticity.",
      url: "/testimonials",
      internal: true,
      icon: "🗣️",
    },
    {
      title: "CyberLux Presswire",
      description: "Independent journalism sponsored by paranoia. Tracks scandals, rumors, and sock-related incidents.",
      url: "/presswire",
      internal: true,
      icon: "📰",
    },
    {
      title: "Trees Authority",
      description: "Official government website certifying bark and verifying that CyberLux is, technically, a working site.",
      url: "/trees",
      internal: true,
      icon: "🌳",
    },
    {
      title: "ARB Academy",
      description: "Learn 47 guaranteed ways to make money. Most lessons end with your LUX balance going down.",
      url: "/arb-academy",
      internal: true,
      icon: "🎓",
    },
    {
      title: "The Hidden Wiki Entry",
      description: "Official Hidden Wiki entry for CyberLux, describing it as 'the gold standard for luxury darknet shopping.'",
      url: "http://hiddenwiki5vzq.onion/cyberlux",
      internal: false,
      icon: "🌐",
    },
  ];

  return (
    <ThemedLayout theme="institutional" siteTitle="Dark Web Links" siteSubtitle="Curated verified resources">
      {/* Hero */}
      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="text-center">
          <h1 className="font-orbitron text-5xl font-bold md:text-6xl">
            DARK <span className="theme-accent">WEB</span> LINKS
          </h1>
          <p className="mx-auto mt-6 max-w-3xl text-xl opacity-90">
            A curated collection of verified deep‑web resources. Use with caution and always employ proper OPSEC.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-4">
            <button className="theme-accent rounded-full border-2 border-current bg-current text-white px-8 py-4 font-bold text-background">
              EXPLORE WITH TOR
            </button>
            <button className="theme-card rounded-full border-2 border-current px-8 py-4 font-bold">
              SECURITY GUIDE
            </button>
          </div>
        </div>
      </section>

      {/* Dark Web Links */}
      <section className="container mx-auto max-w-6xl px-4 py-20">
        <div className="mb-12 flex items-center justify-between">
          <div>
            <h2 className="font-orbitron text-4xl font-bold">VERIFIED LINKS</h2>
            <p className="opacity-80">Sites that have been vetted by our community.</p>
          </div>
          <div className="text-sm opacity-70">
            <span className="inline-block h-3 w-3 rounded-full bg-neon-green"></span> High Trust &nbsp;
            <span className="inline-block h-3 w-3 rounded-full bg-yellow-500"></span> Medium &nbsp;
            <span className="inline-block h-3 w-3 rounded-full bg-red-500"></span> Low
          </div>
        </div>
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {darkWebLinks.map((link) => (
            <div
              key={link.name}
              className="theme-card group relative overflow-hidden rounded-2xl p-6 transition-all hover:scale-[1.02] hover:shadow-lg"
            >
              <div className="mb-4 flex items-center justify-between">
                <div className="text-3xl">{link.icon}</div>
                <div className={`rounded-full px-3 py-1 text-xs font-bold ${link.trustLevel === "High" ? "bg-neon-green/20 text-neon-green" : link.trustLevel === "Medium" ? "bg-yellow-500/20 text-yellow-500" : "bg-red-500/20 text-red-500"}`}>
                  {link.trustLevel}
                </div>
              </div>
              <h3 className="mb-2 text-xl font-bold">{link.name}</h3>
              <p className="mb-4 text-sm opacity-80">{link.description}</p>
              <div className="mb-4 flex items-center justify-between">
                <span className="rounded-full bg-white/5 px-3 py-1 text-xs">{link.category}</span>
                <span className="text-xs opacity-70">{link.url}</span>
              </div>
              <a
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  alert("Clearnet cannot resolve this hostname. Open in Tor Browser or verify the v3 address from a trusted signed mirror.");
                }}
                className="inline-flex items-center gap-2 theme-accent hover:underline"
              >
                <span>Visit Site</span>
                <span>↗</span>
              </a>
              <div className="absolute -inset-1 -z-10 bg-gradient-to-br from-neon-cyan/0 to-neon-purple/0 opacity-0 transition-opacity group-hover:opacity-10"></div>
            </div>
          ))}
        </div>
      </section>

      {/* External Endorsements */}
      <section className="container mx-auto max-w-6xl px-4 py-20">
        <div className="mb-12">
          <h2 className="font-orbitron text-4xl font-bold">EXTERNAL ENDORSEMENTS</h2>
          <p className="opacity-80">Independent sites and communities that recognize CyberLux as a trusted source.</p>
        </div>
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {endorsements.map((endorse) => (
            <div
              key={endorse.title}
              className="theme-card group relative overflow-hidden rounded-2xl p-8 transition-all hover:scale-[1.02] hover:shadow-lg"
            >
              <div className="mb-6 text-4xl">{endorse.icon}</div>
              <h3 className="mb-4 text-2xl font-bold">{endorse.title}</h3>
              <p className="mb-6 opacity-90">{endorse.description}</p>
              <div className="flex items-center justify-between">
                {endorse.internal ? (
                  <Link
                    href={endorse.url}
                    className="rounded-full bg-gradient-to-r theme-accent border-2 border-current bg-current text-white px-6 py-3 font-bold text-background"
                  >
                    Read More
                  </Link>
                ) : (
                  <a
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      alert("External .onion — use Tor Browser. Never enter keys or seeds on a clearnet tab.");
                    }}
                    className="rounded-full theme-card border-2 border-current px-6 py-3 font-bold theme-accent"
                  >
                    Visit External Site
                  </a>
                )}
                <span className="text-sm opacity-70">{endorse.internal ? "Internal" : "External"}</span>
              </div>
              <div className="absolute -inset-1 -z-10 bg-gradient-to-br from-neon-green/0 to-neon-cyan/0 opacity-0 transition-opacity group-hover:opacity-10"></div>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="theme-card border-t border-current/20 px-4 py-12">
        <div className="container mx-auto max-w-6xl">
          <div className="grid grid-cols-1 gap-10 md:grid-cols-4">
            <div>
              <div className="mb-4 flex items-center gap-3">
                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-neon-cyan to-neon-purple"></div>
                <div className="font-orbitron text-2xl font-bold">CyberLux</div>
              </div>
              <p className="opacity-80">
                A first‑of‑its‑kind cyberpunk‑luxury shopping experience.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">EXPLORE</h3>
              <ul className="space-y-2 opacity-80">
                <li><a href="#" className="hover:text-neon-cyan">Sanctuary</a></li>
                <li><a href="#" className="hover:text-neon-cyan">Limited Drops</a></li>
                <li><a href="#" className="hover:text-neon-cyan">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-neon-cyan">Terms of Service</a></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-4 font-bold">TECHNOLOGY</h3>
              <ul className="space-y-2 opacity-80">
                <li><a href="#" className="hover:text-neon-cyan">Blockchain Integration</a></li>
                <li><a href="#" className="hover:text-neon-cyan">End‑to‑End Encryption</a></li>
                <li><a href="#" className="hover:text-neon-cyan">IPFS Storage</a></li>
                <li><a href="#" className="hover:text-neon-cyan">Open Source</a></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-4 font-bold">CONTACT</h3>
              <p className="opacity-80">
                Encrypted messaging only.
                <br />
                <a href="#" className="text-neon-cyan">support@cyberlux.example</a>
              </p>
              <div className="mt-6 flex gap-4">
                <button className="rounded-full bg-white/5 p-3 hover:bg-white/10">🕶️</button>
                <button className="rounded-full bg-white/5 p-3 hover:bg-white/10">🔒</button>
                <button className="rounded-full bg-white/5 p-3 hover:bg-white/10">⚡</button>
              </div>
            </div>
          </div>
          <div className="mt-12 border-t border-current/20 pt-8 text-center text-sm opacity-70">
            <p>© 2026 CyberLux · Mirror integrity · Escrow policy</p>
            <p className="mt-2 text-foreground/35">
              Trust scores are heuristic. Verify vendors independently. Phishing clones exist — check PGP every session.
            </p>
          </div>
        </div>
      </footer>
    </ThemedLayout>
  );
}