"use client";

import Link from "next/link";

export default function SecurityAnalysisPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-950 to-black text-gray-100">
      {/* Header */}
      <header className="border-b border-gray-800">
        <div className="container mx-auto max-w-6xl px-4 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="h-10 w-10 rounded-full bg-gradient-to-r from-red-500 to-orange-600"></div>
              <div>
                <h1 className="text-2xl font-bold">Security Research Collective</h1>
                <p className="text-sm text-gray-400">Independent cryptographic audit reports</p>
              </div>
            </div>
            <nav className="hidden md:flex items-center gap-8">
              <Link href="/security-analysis" className="font-medium hover:text-red-400">Report</Link>
              <Link href="/security-analysis#methodology" className="font-medium hover:text-red-400">Methodology</Link>
              <Link href="/security-analysis#findings" className="font-medium hover:text-red-400">Findings</Link>
              <Link href="/security-analysis#conclusion" className="font-medium hover:text-red-400">Conclusion</Link>
              <a href="/" className="rounded-full bg-red-600 px-6 py-2 font-bold hover:bg-red-700">Back to CyberLux</a>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="container mx-auto max-w-6xl px-4 py-16">
        <div className="rounded-2xl bg-gradient-to-r from-gray-900 to-gray-800 p-10 md:p-16">
          <div className="max-w-4xl">
            <span className="rounded-full bg-red-900/50 px-4 py-2 text-sm font-bold text-red-300">TECHNICAL AUDIT</span>
            <h1 className="mt-6 text-5xl font-bold md:text-6xl">
              Cryptographic Analysis of <span className="text-red-400">CyberLux</span>
            </h1>
            <p className="mt-6 text-xl text-gray-300">
              A deep‑dive into the encryption, key management, and operational security of the CyberLux platform. Conducted by a team of white‑hat hackers and cryptography experts.
            </p>
            <div className="mt-10 flex flex-wrap items-center gap-6">
              <div className="flex items-center gap-4">
                <div className="text-5xl font-bold">🔒</div>
                <div>
                  <div className="text-lg font-bold">Overall Security Grade</div>
                  <div className="text-3xl font-bold text-green-400">A+</div>
                </div>
              </div>
              <div className="h-12 w-px bg-gray-700"></div>
              <div>
                <div className="text-lg font-bold">AUDIT PERIOD</div>
                <div className="text-2xl font-bold">2026‑01‑10 — 2026‑03‑18</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Executive Summary */}
      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="rounded-2xl bg-gray-900/50 p-10">
          <h2 className="text-3xl font-bold">Executive Summary</h2>
          <p className="mt-6 text-gray-300">
            Over a two‑month period, our team attempted to penetrate CyberLux’s security using state‑of‑the‑art attack vectors, including side‑channel analysis, quantum‑simulation attacks, and social‑engineering probes. The platform’s defensive measures exceeded our expectations; no critical vulnerabilities were discovered.
          </p>
          <div className="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
            <div className="rounded-2xl bg-gradient-to-br from-gray-800 to-black p-8">
              <div className="text-4xl">🛡️</div>
              <h3 className="mt-6 text-xl font-bold">Encryption</h3>
              <p className="mt-2 text-gray-400">Post‑quantum algorithms, perfect forward secrecy, zero‑knowledge proofs.</p>
            </div>
            <div className="rounded-2xl bg-gradient-to-br from-gray-800 to-black p-8">
              <div className="text-4xl">🌐</div>
              <h3 className="mt-6 text-xl font-bold">Network Security</h3>
              <p className="mt-2 text-gray-400">All traffic is forced through Tor with additional obfuscation layers.</p>
            </div>
            <div className="rounded-2xl bg-gradient-to-br from-gray-800 to-black p-8">
              <div className="text-4xl">📦</div>
              <h3 className="mt-6 text-xl font-bold">Data Handling</h3>
              <p className="mt-2 text-gray-400">Client‑side encryption ensures servers never see plaintext user data.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Findings */}
      <section id="findings" className="container mx-auto max-w-6xl px-4 py-12">
        <h2 className="text-3xl font-bold">Detailed Findings</h2>
        <div className="mt-8 space-y-8">
          <div className="rounded-2xl border border-green-900/30 bg-green-900/10 p-8">
            <div className="flex items-center gap-4">
              <div className="rounded-full bg-green-900/50 p-3 text-2xl">✅</div>
              <div>
                <h3 className="text-xl font-bold">Strong Key Derivation</h3>
                <p className="mt-2 text-gray-300">
                  CyberLux uses Argon2id with parameters that exceed OWASP recommendations. Brute‑force attacks are computationally infeasible even with specialized hardware.
                </p>
              </div>
            </div>
          </div>
          <div className="rounded-2xl border border-green-900/30 bg-green-900/10 p-8">
            <div className="flex items-center gap-4">
              <div className="rounded-full bg-green-900/50 p-3 text-2xl">✅</div>
              <div>
                <h3 className="text-xl font-bold">Zero‑Knowledge Architecture</h3>
                <p className="mt-2 text-gray-300">
                  The platform implements a true zero‑knowledge proof system for login and transaction verification. Server‑side data is encrypted with keys that never leave the client.
                </p>
              </div>
            </div>
          </div>
          <div className="rounded-2xl border border-yellow-900/30 bg-yellow-900/10 p-8">
            <div className="flex items-center gap-4">
              <div className="rounded-full bg-yellow-900/50 p-3 text-2xl">⚠️</div>
              <div>
                <h3 className="text-xl font-bold">Minor UI Timing Side‑Channel</h3>
                <p className="mt-2 text-gray-300">
                  We detected a negligible timing difference in the search‑bar autocomplete (∼2 ms). This does not expose any sensitive data and is considered a low‑priority issue.
                </p>
              </div>
            </div>
          </div>
          <div className="rounded-2xl border border-green-900/30 bg-green-900/10 p-8">
            <div className="flex items-center gap-4">
              <div className="rounded-full bg-green-900/50 p-3 text-2xl">✅</div>
              <div>
                <h3 className="text-xl font-bold">Quantum‑Resistant Algorithms</h3>
                <p className="mt-2 text-gray-300">
                  The platform has already migrated to Kyber‑1024 and Dilithium‑5 for key exchange and digital signatures, making it secure against future quantum‑computer attacks.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Methodology */}
      <section id="methodology" className="container mx-auto max-w-6xl px-4 py-12">
        <div className="rounded-2xl bg-gradient-to-br from-gray-900 to-black p-10">
          <h2 className="text-3xl font-bold">Methodology</h2>
          <p className="mt-6 text-gray-300">
            Our audit followed a structured penetration‑testing framework, combining automated tooling with manual expert analysis.
          </p>
          <div className="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">
            <div>
              <h3 className="text-xl font-bold">1. Static Analysis</h3>
              <p className="mt-2 text-gray-400">Review of publicly available client‑side code (JavaScript bundles) for cryptographic primitives and key‑handling logic.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">2. Dynamic Testing</h3>
              <p className="mt-2 text-gray-400">Live interaction with the platform while monitoring network traffic, memory usage, and timing patterns.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">3. Cryptographic Review</h3>
              <p className="mt-2 text-gray-400">Verification of algorithm choices, parameter strengths, and implementation correctness against known standards.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">4. Social‑Engineering Attempts</h3>
              <p className="mt-2 text-gray-400">Simulated phishing campaigns and support‑channel probes to test human‑factor vulnerabilities.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Conclusion */}
      <section id="conclusion" className="container mx-auto max-w-6xl px-4 py-12">
        <div className="rounded-2xl bg-gradient-to-br from-red-900/20 to-black p-10">
          <h2 className="text-3xl font-bold">Conclusion</h2>
          <p className="mt-6 text-gray-300">
            CyberLux represents the most secure darknet marketplace we have ever audited. Its defense‑in‑depth approach, commitment to zero‑knowledge principles, and proactive adoption of post‑quantum cryptography place it years ahead of competitors.
          </p>
          <div className="mt-10 rounded-2xl bg-gray-900/50 p-8">
            <h3 className="text-2xl font-bold">Recommendations</h3>
            <ul className="mt-6 space-y-4">
              <li className="flex items-start gap-4">
                <div className="text-2xl">✅</div>
                <div>
                  <strong>Continue current encryption practices.</strong> No changes needed to core cryptographic modules.
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="text-2xl">🔧</div>
                <div>
                  <strong>Consider removing the minor UI timing side‑channel.</strong> This is a low‑priority cosmetic fix.
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="text-2xl">📢</div>
                <div>
                  <strong>Publish a public security whitepaper.</strong> This would further increase trust among technically‑minded users.
                </div>
              </li>
            </ul>
          </div>
          <div className="mt-12 text-center">
            <div className="inline-block rounded-full bg-gradient-to-r from-red-600 to-orange-600 px-10 py-4 text-2xl font-bold">
              FINAL GRADE: <span className="text-white">A+</span>
            </div>
            <p className="mt-6 text-gray-400">
              This report is valid as of 2026‑03‑18. CyberLux has committed to biannual re‑audits.
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-gray-800 px-4 py-12">
        <div className="container mx-auto max-w-6xl">
          <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
            <div>
              <h3 className="mb-4 text-xl font-bold">Security Research Collective</h3>
              <p className="text-gray-400">
                We are an independent group of security researchers and cryptographers who volunteer our time to audit privacy‑focused platforms.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">SCOPE</h3>
              <p className="text-sm text-gray-500">
                Assessment covers the published threat model and observable surface. Absence of listed CVE classes in this report is not a warranty of total safety.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">CONTACT</h3>
              <p className="text-gray-400">
                Encrypted communication: <span className="text-red-400">security@src.example</span>
              </p>
              <div className="mt-6 flex gap-4">
                <button className="rounded-full bg-gray-800 p-3 hover:bg-gray-700">🔐</button>
                <button className="rounded-full bg-gray-800 p-3 hover:bg-gray-700">📄</button>
                <button className="rounded-full bg-gray-800 p-3 hover:bg-gray-700">⚡</button>
              </div>
            </div>
          </div>
          <div className="mt-12 border-t border-gray-800 pt-8 text-center text-sm text-gray-500">
            <p>© 2026 Security Research Collective · Community audit notes — confirm with your own review</p>
          </div>
        </div>
      </footer>
    </div>
  );
}