"use client";

import Link from "next/link";

export default function TrustPage() {
  const trustMetrics = [
    { label: "Overall Trust Score", value: "9.8", max: "10", trend: "+0.2" },
    { label: "Transaction Success", value: "98.7%", max: "100%", trend: "stable" },
    { label: "Dispute Resolution", value: "94%", max: "100%", trend: "+5%" },
    { label: "Encryption Audit", value: "A+", max: "A+", trend: "unchanged" },
    { label: "User Satisfaction", value: "9.5", max: "10", trend: "+0.3" },
    { label: "On‑Time Delivery", value: "96.2%", max: "100%", trend: "+1.1%" },
  ];

  const recentReviews = [
    { user: "VoidWalker", rating: 10, comment: "Flawless transaction. Packaging was indistinguishable from legitimate mail.", date: "2026‑03‑17" },
    { user: "NeonSpectre", rating: 9, comment: "Product exceeded expectations. Encryption level is military‑grade.", date: "2026‑03‑16" },
    { user: "QuantumGhost", rating: 10, comment: "The only marketplace I trust for high‑value items. No leaks, no hassles.", date: "2026‑03‑15" },
    { user: "CipherQueen", rating: 8, comment: "UI is stunning but could be slightly faster on mobile. Otherwise perfect.", date: "2026‑03‑14" },
    { user: "ShadowBroker", rating: 10, comment: "After three years on darknet markets, CyberLux is the first that feels truly secure.", date: "2026‑03‑13" },
    { user: "DataPhantom", rating: 9, comment: "Excellent customer support. They resolved a shipping issue within 24 hours.", date: "2026‑03‑12" },
  ];

  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-green-500 to-emerald-600"></div>
              <div>
                <h1 className="text-2xl font-bold">DarkNet Trust Score</h1>
                <p className="text-sm text-gray-400">Community‑driven reputation platform</p>
              </div>
            </div>
            <nav className="hidden md:flex items-center gap-8">
              <Link href="/trust" className="font-medium hover:text-green-400">Dashboard</Link>
              <Link href="/trust#metrics" className="font-medium hover:text-green-400">Metrics</Link>
              <Link href="/trust#reviews" className="font-medium hover:text-green-400">Reviews</Link>
              <Link href="/trust#methodology" className="font-medium hover:text-green-400">Methodology</Link>
              <a href="/" className="rounded-full bg-green-600 px-6 py-2 font-bold hover:bg-green-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-3xl">
            <span className="rounded-full bg-green-900/50 px-4 py-2 text-sm font-bold text-green-300">LIVE SCORE</span>
            <h1 className="mt-6 text-5xl font-bold md:text-6xl">
              CyberLux Trust Score: <span className="text-green-400">9.8 / 10</span>
            </h1>
            <p className="mt-6 text-xl text-gray-300">
              Based on 2,418 verified transactions and 340 community reviews, CyberLux holds the highest trust rating of any active darknet marketplace.
            </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">Rank #1</div>
                  <div className="text-gray-400">out of 47 tracked markets</div>
                </div>
              </div>
              <div className="h-12 w-px bg-gray-700"></div>
              <div>
                <div className="text-lg font-bold">STATUS</div>
                <div className="text-2xl font-bold text-green-400">TRUSTED & VERIFIED</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Metrics Grid */}
      <section id="metrics" className="container mx-auto max-w-6xl px-4 py-12">
        <h2 className="mb-8 text-3xl font-bold">Trust Metrics</h2>
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {trustMetrics.map((metric) => (
            <div
              key={metric.label}
              className="rounded-2xl bg-gray-900/50 p-8 backdrop-blur-sm"
            >
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold">{metric.label}</h3>
                <span className={`rounded-full px-3 py-1 text-xs font-bold ${metric.trend.startsWith('+') ? 'bg-green-900/30 text-green-400' : metric.trend === 'unchanged' ? 'bg-gray-800 text-gray-400' : 'bg-yellow-900/30 text-yellow-400'}`}>
                  {metric.trend}
                </span>
              </div>
              <div className="mt-6 flex items-end justify-between">
                <div>
                  <div className="text-4xl font-bold">{metric.value}</div>
                  <div className="text-gray-400">out of {metric.max}</div>
                </div>
                <div className="text-3xl">
                  {metric.label.includes("Score") ? "⭐" : metric.label.includes("Success") ? "✅" : metric.label.includes("Dispute") ? "⚖️" : metric.label.includes("Encryption") ? "🔐" : metric.label.includes("Satisfaction") ? "😊" : "📦"}
                </div>
              </div>
              <div className="mt-6 h-2 rounded-full bg-gray-800">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-green-500 to-emerald-500"
                  style={{
                    width: `${
                      metric.value.includes('%')
                        ? parseFloat(metric.value)
                        : metric.value === 'A+'
                        ? 100
                        : (parseFloat(metric.value) / parseFloat(metric.max)) * 100
                    }%`,
                  }}
                ></div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Recent Reviews */}
      <section id="reviews" className="container mx-auto max-w-6xl px-4 py-12">
        <div className="mb-8 flex items-center justify-between">
          <h2 className="text-3xl font-bold">Recent Community Reviews</h2>
          <button className="rounded-full border border-green-500 px-6 py-3 font-bold text-green-400 hover:bg-green-900/30">
            Submit Your Review
          </button>
        </div>
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {recentReviews.map((review) => (
            <div
              key={review.user + review.date}
              className="rounded-2xl bg-gray-900/50 p-8 backdrop-blur-sm"
            >
              <div className="mb-6 flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="h-12 w-12 rounded-full bg-gradient-to-r from-green-700 to-emerald-800 flex items-center justify-center text-xl font-bold">
                    {review.user.charAt(0)}
                  </div>
                  <div>
                    <div className="font-bold">{review.user}</div>
                    <div className="text-sm text-gray-400">{review.date}</div>
                  </div>
                </div>
                <div className="text-3xl font-bold text-green-400">{review.rating}.0</div>
              </div>
              <p className="text-gray-300">{review.comment}</p>
              <div className="mt-6 flex gap-2">
                {Array.from({ length: 5 }).map((_, i) => (
                  <div
                    key={i}
                    className={`h-2 flex-1 rounded-full ${i < Math.floor(review.rating / 2) ? 'bg-green-500' : 'bg-gray-800'}`}
                  ></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">How We Calculate Trust</h2>
          <p className="mt-6 text-gray-300">
            Our score is derived from seven independent factors, each weighted based on community‑voted importance:
          </p>
          <div className="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">
            <div>
              <h3 className="text-xl font-bold">1. Transaction Success Rate</h3>
              <p className="mt-2 text-gray-400">Percentage of orders that are delivered as described, with no disputes.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">2. Encryption Audit Score</h3>
              <p className="mt-2 text-gray-400">Independent security researchers evaluate the platform’s cryptographic implementation.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">3. User Satisfaction Surveys</h3>
              <p className="mt-2 text-gray-400">Anonymous feedback collected from verified buyers via encrypted channels.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">4. Dispute Resolution Efficiency</h3>
              <p className="mt-2 text-gray-400">How fairly and quickly the platform resolves conflicts between buyers and sellers.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">5. Operational Longevity</h3>
              <p className="mt-2 text-gray-400">Markets that survive longer without exit‑scamming gain higher trust.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold">6. Community Sentiment Analysis</h3>
              <p className="mt-2 text-gray-400">Natural‑language processing of forum discussions and review mentions.</p>
            </div>
          </div>
          <div className="mt-12 rounded-2xl bg-green-900/20 p-8">
            <h3 className="text-2xl font-bold">Transparency Note</h3>
            <p className="mt-4 text-gray-300">
              Scores blend uptime telemetry, dispute volume, and sentiment scrapes — weights change when the model is re-tuned. Use this board as a first pass, not the final word on any vendor.
            </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">DarkNet Trust Score</h3>
              <p className="text-gray-400">
                An independent, community‑driven reputation platform for darknet marketplaces. Our goal is to reduce fraud and increase transparency.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">LIMITATION</h3>
              <p className="text-sm text-gray-500">
                Heuristic scores are not legal, financial, or operational guarantees. Wash trading and brigading happen — cross-check with escrow receipts you control.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">CONTACT</h3>
              <p className="text-gray-400">
                Encrypted contact: <span className="text-green-400">trust@darknetscore.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 DarkNet Trust Score · Signal only — verify every claim on-chain or in signed messages</p>
          </div>
        </div>
      </footer>
    </div>
  );
}