import { createFileRoute } from "@tanstack/react-router";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { LocationBanners } from "@/components/LocationBanners";
import { PlanCard, type PlanCardData } from "@/components/PlanCard";
import { Cpu, Server as ServerIcon, HardDrive, Globe } from "lucide-react";

export const Route = createFileRoute("/vps-hosting")({
  head: () => ({
    meta: [
      { title: "VPS Hosting — LumenHost" },
      { name: "description", content: "High-performance KVM VPS hosting on AMD EPYC with NVMe storage, full root access and DDoS protection." },
    ],
  }),
  component: VpsPage,
});

const make = (name: string, ram: string, cpu: string, ssd: string, bw: string, price: number, popular?: boolean): PlanCardData => ({
  name,
  subtitle: "KVM VPS",
  price,
  iconNode: <ServerIcon className="h-6 w-6 text-primary" />,
  popular,
  specs: [
    { icon: ServerIcon, label: "RAM", value: ram },
    { icon: Cpu, label: "vCPU", value: cpu },
    { icon: HardDrive, label: "NVMe", value: ssd },
    { icon: Globe, label: "Bandwidth", value: bw },
  ],
  features: ["Full Root Access", "AMD EPYC™ CPUs", "DDoS Protection", "1 Gbps Network", "24/7 Support"],
  orderLink: `https://billing.zyro.cloud/products/vps/${name.toLowerCase()}`,
});

const plans: PlanCardData[] = [
  make("Sprout", "2 GB", "1 vCPU", "20 GB", "1 TB", 4),
  make("Sapling", "4 GB", "2 vCPU", "40 GB", "2 TB", 7, true),
  make("Oak", "8 GB", "4 vCPU", "80 GB", "3 TB", 14),
  make("Sequoia", "16 GB", "6 vCPU", "160 GB", "5 TB", 26),
];

function VpsPage() {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,oklch(0.66_0.22_295/0.25),transparent_60%)]" />
        <div className="relative mx-auto max-w-7xl px-4 py-24 text-center">
          <h1 className="text-4xl font-extrabold tracking-tight md:text-6xl">
            High-performance <span className="gradient-text-violet">VPS Hosting</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-muted-foreground md:text-lg">
            Full root access, AMD EPYC™ CPUs, NVMe Gen4 storage and 1 Gbps network on a global edge.
          </p>
        </div>
      </section>
      <LocationBanners />
      <section className="mx-auto max-w-7xl px-4 py-16">
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {plans.map((p) => <PlanCard key={p.name} plan={p} />)}
        </div>
      </section>
      <Footer />
    </div>
  );
}