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 { Boxes, HardDrive, Database, Users } from "lucide-react";

export const Route = createFileRoute("/reseller-hosting")({
  head: () => ({
    meta: [
      { title: "Reseller Hosting — LumenHost" },
      { name: "description", content: "Start your own hosting business with WHM/cPanel reseller hosting on enterprise infrastructure." },
    ],
  }),
  component: ResellerPage,
});

const make = (name: string, accounts: string, ssd: string, db: string, bw: string, price: number, popular?: boolean): PlanCardData => ({
  name, subtitle: "WHM Reseller", price, iconNode: <Boxes className="h-6 w-6 text-primary" />, popular,
  specs: [
    { icon: Users, label: "Accounts", value: accounts },
    { icon: HardDrive, label: "NVMe", value: ssd },
    { icon: Database, label: "Databases", value: db },
    { icon: Boxes, label: "Bandwidth", value: bw },
  ],
  features: ["WHM + cPanel", "Free Migration", "White Label", "Free SSL", "24/7 Support"],
  orderLink: `https://billing.zyro.cloud/products/reseller/${name.toLowerCase()}`,
});

const plans: PlanCardData[] = [
  make("Bronze", "20", "30 GB", "Unlimited", "300 GB", 9.99),
  make("Silver", "50", "75 GB", "Unlimited", "750 GB", 19.99, true),
  make("Gold", "Unlimited", "150 GB", "Unlimited", "Unmetered", 34.99),
];

function ResellerPage() {
  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">
            Start your own <span className="gradient-text-violet">Hosting Business</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-muted-foreground md:text-lg">
            White-label WHM/cPanel reseller hosting on enterprise infrastructure with free migration.
          </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>
  );
}