import Link from "next/link";
import Navbar from "@/components/Navbar";
import ParticleBackground from "@/components/ParticleBackground";

export default function LaunchPage() {
  return (
    <>
      <ParticleBackground />
      <Navbar />
      <main className="relative z-10 mx-auto max-w-3xl px-4 pb-32 pt-28">
        <p className="font-mono text-[10px] uppercase tracking-[0.35em] text-neon-cyan/80">deployment</p>
        <h1 className="mt-2 font-orbitron text-4xl font-black text-white md:text-5xl">Launch on the dark web</h1>
        <p className="mt-4 text-foreground/75">
          Ship this stack as Tor v3 hidden services: nginx on loopback ports, Next.js on{" "}
          <code className="rounded bg-white/10 px-1.5 py-0.5 text-neon-green">127.0.0.1:3000</code>, one onion per vertical.
          Repo ships generators and systemd hooks — you bring the box and opsec.
        </p>

        <section className="mt-12 space-y-6 rounded-2xl border border-white/10 bg-black/40 p-8 backdrop-blur">
          <h2 className="font-orbitron text-lg font-bold text-neon-purple">1. Build & wire Tor + nginx</h2>
          <pre className="overflow-x-auto rounded-xl bg-black/60 p-4 text-xs leading-relaxed text-neon-cyan/90">
            {`cd ~/cyberlux
./start.sh
# or prepare only, then systemd:
# CYBERLUX_PREPARE_ONLY=1 ./start.sh
# sudo CYBERLUX_USER=$USER bash scripts/install-systemd.sh`}
          </pre>
        </section>

        <section className="mt-8 space-y-4 rounded-2xl border border-white/10 bg-black/40 p-8 backdrop-blur">
          <h2 className="font-orbitron text-lg font-bold text-neon-purple">2. Run the app</h2>
          <p className="text-sm text-foreground/70">
            Foreground: <code className="text-neon-green">npm run start:onion</code> · Boot:{" "}
            <code className="text-neon-green">sudo systemctl start cyberlux.service</code>
          </p>
        </section>

        <section className="mt-8 space-y-4 rounded-2xl border border-white/10 bg-black/40 p-8 backdrop-blur">
          <h2 className="font-orbitron text-lg font-bold text-neon-purple">3. Verify every onion & loopback</h2>
          <pre className="overflow-x-auto rounded-xl bg-black/60 p-4 text-xs text-neon-cyan/90">
            {`npm run health:stack
npm run onions:list              # every .onion URL
sudo bash scripts/list-onion-urls.sh   # if hostname files need root
npm run onions:status            # URLs + loopback checks`}
          </pre>
        </section>

        <p className="mt-10 text-sm text-foreground/55">
          Full reference: <code className="text-foreground/80">DEPLOY.md</code> in the repo root (Torrc, key backup, firewall).
        </p>

        <div className="mt-10 flex flex-wrap gap-4">
          <Link href="/" className="rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple px-6 py-3 text-sm font-bold text-black">
            ← Hub
          </Link>
          <Link href="/account/hidden-services" className="glass rounded-full border border-white/20 px-6 py-3 text-sm font-semibold">
            Hidden services & mirrors
          </Link>
        </div>
      </main>
    </>
  );
}