Replace remote with local repo

app/hosting/page.tsx

@@ -0,0 +1,197 @@
+"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>
+    </>
+  );
+}