"use client";

import { useState } from "react";
import Link from "next/link";
import Navbar from "@/components/Navbar";

const PLANS = [
  {
    id: "spectre",
    name: "Spectre",
    tagline: "Ghost-tier starter slice",
    price: 50,
    unit: "VOID / mo",
    specs: { cpu: "1 vCPU", ram: "512 MB", disk: "5 GB SSD", bw: "100 GB", onions: 1 },
    features: ["Tor v3 hidden service", "Managed torrc", "SSH access", "Basic DDoS mitigation", "99.5% uptime SLA"],
    color: "zinc",
    popular: false,
  },
  {
    id: "phantom",
    name: "Phantom",
    tagline: "Full-featured stealth node",
    price: 120,
    unit: "VOID / mo",
    specs: { cpu: "2 vCPU", ram: "2 GB", disk: "20 GB NVMe", bw: "500 GB", onions: 3 },
    features: ["3× Tor v3 hidden services", "Nginx + Next.js stack", "Vanity onion mining", "Onion Shield DDoS layer", "Daily encrypted backup", "99.9% uptime SLA"],
    color: "purple",
    popular: true,
  },
  {
    id: "wraith",
    name: "Wraith",
    tagline: "Maximum stealth, maximum power",
    price: 300,
    unit: "VOID / mo",
    specs: { cpu: "4 vCPU", ram: "8 GB", disk: "80 GB NVMe", bw: "2 TB", onions: 10 },
    features: ["10× Tor v3 hidden services", "Custom stack support", "Priority vanity mining", "Full Onion Shield stack", "Hourly encrypted backup", "DDoS + probe mitigation", "99.99% uptime SLA", "Dedicated support channel"],
    color: "cyan",
    popular: false,
  },
];

const FAQS = [
  { q: "How do I pay?", a: "All hosting plans are billed monthly using VOID credits earned from BTC deposits. First-month payment is charged on sign-up." },
  { q: "Will my .onion address persist?", a: "Yes. We back up your hs_ed25519_secret_key nightly. Your onion address is tied to your key, not the machine." },
  { q: "What OS do you provision?", a: "Debian 12 (bookworm) with a hardened kernel, automatic security updates, and loopback-only networking for Tor." },
  { q: "Can I run custom software?", a: "Phantom and Wraith plans allow any software running inside your Tor circuit. We do not proxy clearnet traffic." },
  { q: "What happens to my data if I cancel?", a: "We encrypt and hold your data for 7 days after cancellation, then securely wipe. Backups are provided on request." },
];

export default function HostingPage() {
  const [selected, setSelected] = useState<string | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#0a0a0a] pt-24 pb-20">
        {/* Hero */}
        <section className="container mx-auto max-w-6xl px-4 mb-16 text-center">
          <p className="mb-3 font-mono text-[10px] uppercase tracking-[0.35em] text-neon-cyan/70">
            darkhost · tor-native infrastructure
          </p>
          <h1 className="font-orbitron text-5xl font-bold md:text-6xl">
            DARK<span className="text-neon-cyan">HOST</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-lg text-foreground/60">
            The dark web&apos;s hosting provider. Deploy hidden services on hardened, loopback-only infrastructure managed by CyberLux. Your keys, your onion, your rules.
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-4 text-sm text-foreground/50">
            <span className="flex items-center gap-2"><span className="text-neon-cyan">✓</span> Loopback-only — zero clearnet exposure</span>
            <span className="flex items-center gap-2"><span className="text-neon-cyan">✓</span> Tor v3 only — no legacy v2 services</span>
            <span className="flex items-center gap-2"><span className="text-neon-cyan">✓</span> Paid in BTC via VOID credits</span>
            <span className="flex items-center gap-2"><span className="text-neon-cyan">✓</span> Managed Tor/nginx/systemd stack</span>
          </div>
        </section>

        {/* Plans */}
        <section className="container mx-auto max-w-6xl px-4 mb-20">
          <div className="grid gap-6 md:grid-cols-3">
            {PLANS.map((plan) => (
              <div
                key={plan.id}
                onClick={() => setSelected(plan.id === selected ? null : plan.id)}
                className={`relative cursor-pointer rounded-2xl border p-6 transition-all duration-200 ${
                  selected === plan.id
                    ? "border-neon-cyan/60 bg-neon-cyan/5 shadow-lg shadow-neon-cyan/10"
                    : plan.popular
                    ? "border-neon-purple/50 bg-neon-purple/5"
                    : "border-zinc-700/40 bg-black/40 hover:border-zinc-500"
                }`}
              >
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-neon-purple px-4 py-0.5 text-[10px] font-bold tracking-widest text-background">
                    POPULAR
                  </div>
                )}
                <h2 className="font-orbitron text-2xl font-bold">{plan.name}</h2>
                <p className="mt-1 text-xs text-foreground/50">{plan.tagline}</p>
                <p className="mt-5 font-mono text-3xl font-bold text-neon-purple">
                  ✦ {plan.price}
                  <span className="ml-2 text-sm text-foreground/50">{plan.unit}</span>
                </p>

                {/* Specs */}
                <div className="mt-5 grid grid-cols-2 gap-2 text-xs">
                  {Object.entries(plan.specs).map(([k, v]) => (
                    <div key={k} className="rounded-lg bg-white/5 px-3 py-2">
                      <p className="text-foreground/40 uppercase tracking-wider text-[9px]">{k}</p>
                      <p className="font-bold text-foreground">{v}</p>
                    </div>
                  ))}
                </div>

                {/* Features */}
                <ul className="mt-5 space-y-1.5">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2 text-xs text-foreground/70">
                      <span className="mt-0.5 text-neon-cyan">✓</span> {f}
                    </li>
                  ))}
                </ul>

                <div className="mt-6">
                  <Link
                    href="/account/add-funds"
                    className={`block w-full rounded-lg py-2.5 text-center text-sm font-bold transition ${
                      plan.popular
                        ? "bg-gradient-to-r from-neon-cyan to-neon-purple text-background hover:opacity-90"
                        : "border border-zinc-600 bg-white/5 text-foreground hover:border-zinc-400"
                    }`}
                  >
                    Reserve {plan.name} →
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* How it works */}
        <section className="container mx-auto max-w-6xl px-4 mb-20">
          <h2 className="font-orbitron mb-8 text-2xl font-bold text-center">How It Works</h2>
          <div className="grid gap-6 sm:grid-cols-4">
            {[
              { step: "01", title: "Deposit BTC", desc: "Fund your account with BTC. Credits appear after 1 confirmation." },
              { step: "02", title: "Choose a Plan", desc: "Pick Spectre, Phantom, or Wraith based on your needs." },
              { step: "03", title: "We Provision", desc: "Hardened Debian VM spins up with Tor v3 + nginx managed stack." },
              { step: "04", title: "You Deploy", desc: "SSH in, drop your app, we handle the Tor side. Your keys, your onion." },
            ].map((s) => (
              <div key={s.step} className="rounded-xl border border-zinc-800 bg-black/40 p-5">
                <p className="font-orbitron text-3xl font-black text-neon-cyan/20">{s.step}</p>
                <p className="mt-2 font-bold text-foreground">{s.title}</p>
                <p className="mt-1 text-sm text-foreground/55">{s.desc}</p>
              </div>
            ))}
          </div>
        </section>

        {/* FAQ */}
        <section className="container mx-auto max-w-3xl px-4 mb-16">
          <h2 className="font-orbitron mb-6 text-2xl font-bold text-center">FAQ</h2>
          <div className="space-y-2">
            {FAQS.map((faq, i) => (
              <div key={i} className="rounded-xl border border-zinc-800 bg-black/40 overflow-hidden">
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-center justify-between px-5 py-4 text-sm font-semibold text-left"
                >
                  {faq.q}
                  <span className="text-foreground/40">{openFaq === i ? "−" : "+"}</span>
                </button>
                {openFaq === i && (
                  <div className="px-5 pb-4 text-sm text-foreground/60">{faq.a}</div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="container mx-auto max-w-2xl px-4 text-center">
          <div className="rounded-2xl border border-neon-cyan/20 bg-neon-cyan/5 p-10">
            <h2 className="font-orbitron text-2xl font-bold mb-3">Ready to go dark?</h2>
            <p className="text-foreground/60 mb-6">Deposit BTC, earn VOID credits, and spin up your hidden service in minutes.</p>
            <Link
              href="/account/add-funds"
              className="inline-block rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple px-8 py-3 font-bold text-background hover:opacity-90"
            >
              Fund Account → Deploy
            </Link>
          </div>
        </section>
      </main>
    </>
  );
}