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 { MonitorSmartphone, Cpu, HardDrive, Globe } from "lucide-react";

export const Route = createFileRoute("/rdp-hosting")({
  head: () => ({
    meta: [
      { title: "RDP Hosting — LumenHost" },
      { name: "description", content: "Windows RDP hosting with admin access, NVMe storage and high-bandwidth network for trading, automation and remote work." },
    ],
  }),
  component: RdpPage,
});

const make = (name: string, ram: string, cpu: string, ssd: string, bw: string, price: number, popular?: boolean): PlanCardData => ({
  name, subtitle: "Windows RDP", price, iconNode: <MonitorSmartphone className="h-6 w-6 text-primary" />, popular,
  specs: [
    { icon: MonitorSmartphone, label: "RAM", value: ram },
    { icon: Cpu, label: "vCPU", value: cpu },
    { icon: HardDrive, label: "NVMe", value: ssd },
    { icon: Globe, label: "Bandwidth", value: bw },
  ],
  features: ["Windows Server 2022", "Admin Access", "DDoS Protection", "1 Gbps Network", "Instant Setup"],
  orderLink: `https://billing.zyro.cloud/products/rdp/${name.toLowerCase()}`,
});

const plans: PlanCardData[] = [
  make("Lite RDP", "4 GB", "2 vCPU", "60 GB", "1 TB", 8),
  make("Pro RDP", "8 GB", "4 vCPU", "120 GB", "2 TB", 15, true),
  make("Elite RDP", "16 GB", "6 vCPU", "200 GB", "Unmetered", 28),
];

function RdpPage() {
  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">
            Windows <span className="gradient-text-violet">RDP Hosting</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-muted-foreground md:text-lg">
            Admin RDP access on enterprise infrastructure — perfect for trading, automation and remote work.
          </p>
        </div>
      </section>
      <LocationBanners />
      <section className="mx-auto max-w-7xl px-4 py-16">
        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {plans.map((p) => <PlanCard key={p.name} plan={p} />)}
        </div>
      </section>
      <Footer />
    </div>
  );
}