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

export const Route = createFileRoute("/web-hosting")({
  head: () => ({
    meta: [
      { title: "Web Hosting — LumenHost" },
      { name: "description", content: "Lightning-fast cPanel web hosting with free SSL, unlimited bandwidth and LiteSpeed for blazing performance." },
    ],
  }),
  component: WebPage,
});

const make = (name: string, sites: string, ssd: string, db: string, email: string, price: number, popular?: boolean): PlanCardData => ({
  name,
  subtitle: "cPanel Web Hosting",
  price,
  iconNode: <Globe className="h-6 w-6 text-primary" />,
  popular,
  specs: [
    { icon: Globe, label: "Websites", value: sites },
    { icon: HardDrive, label: "NVMe", value: ssd },
    { icon: Database, label: "Databases", value: db },
    { icon: Mail, label: "Emails", value: email },
  ],
  features: ["Free SSL Certificate", "LiteSpeed Web Server", "Unlimited Bandwidth", "cPanel Access", "Daily Backups"],
  orderLink: `https://billing.zyro.cloud/products/web/${name.toLowerCase()}`,
});

const plans: PlanCardData[] = [
  make("Starter", "1", "10 GB", "5", "10", 1.49),
  make("Pro", "10", "50 GB", "Unlimited", "Unlimited", 3.99, true),
  make("Business", "Unlimited", "150 GB", "Unlimited", "Unlimited", 7.99),
];

function WebPage() {
  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">
            Lightning-fast <span className="gradient-text-violet">Web Hosting</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-muted-foreground md:text-lg">
            LiteSpeed-powered cPanel hosting with free SSL, unlimited bandwidth and daily backups.
          </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>
  );
}