import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { PlanCard, type PlanCardData } from "@/components/PlanCard";
import { Bot, Cpu, Server, HardDrive, Database } from "lucide-react";

export const Route = createFileRoute("/bot-hosting")({
  head: () => ({
    meta: [
      { title: "Discord Bot Hosting — LumenHost" },
      { name: "description", content: "Premium Discord bot hosting with 24/7 uptime, DDR5 RAM, instant setup and full Node.js support starting at $1/mo." },
    ],
  }),
  component: BotPage,
});

type Tier = "standard" | "premium";

const features = [
  "Instant Setup",
  "24/7 Uptime",
  "Node.js, Python & Java",
  "Full FTP Access",
  "Auto Backups",
];

const make = (
  name: string, ram: string, cpu: string, storage: string,
  db: string, price: number, tier: Tier, popular?: boolean,
): PlanCardData & { tier: Tier } => ({
  name,
  subtitle: "Discord Bot Hosting",
  price,
  iconNode: <Bot className="h-6 w-6 text-primary" />,
  popular,
  tier,
  specs: [
    { icon: Server, label: "RAM", value: `${ram} DDR5` },
    { icon: Cpu, label: "CPU", value: cpu },
    { icon: HardDrive, label: "Storage", value: storage },
    { icon: Database, label: "Databases", value: db },
  ],
  features,
  orderLink: `https://billing.zyro.cloud/products/nodejs/${name.toLowerCase().replace(/\s+/g, "-")}`,
});

const plans: (PlanCardData & { tier: Tier })[] = [
  make("Starter Plan", "1 GB", "1 Core", "Unmetered NVMe", "2 MySQL", 1, "standard"),
  make("Coder Plan", "2 GB", "1.5 Core", "Unmetered NVMe", "4 MySQL", 2, "standard", true),
  make("Developer Plan", "4 GB", "2 Core", "Unmetered NVMe", "6 MySQL", 3, "standard"),
  make("Builder Plan", "3 GB", "2 Core", "20 GB NVMe", "4 MySQL", 4, "premium"),
  make("Architect Plan", "6 GB", "3 Core", "Unmetered NVMe", "8 MySQL", 6, "premium", true),
  make("Enterprise Plan", "8 GB", "4 Core", "Unmetered NVMe", "Unlimited", 9, "premium"),
];

function BotPage() {
  const [tier, setTier] = useState<Tier>("standard");
  const filtered = plans.filter((p) => p.tier === tier);

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* Hero */}
      <section className="relative w-full 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="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background" />
        <div className="relative mx-auto flex min-h-[55vh] max-w-7xl flex-col items-center justify-center px-4 py-24 text-center">
          <h1 className="text-4xl font-extrabold tracking-tight md:text-6xl">
            Premium <span className="gradient-text-violet">Discord Bot</span> Hosting
          </h1>
          <p className="mt-5 max-w-xl text-muted-foreground md:text-lg">
            High-performance hosting with DDR5 RAM, instant setup, and 24/7 uptime.
          </p>
        </div>
      </section>

      {/* Plans */}
      <section id="plans" className="mx-auto max-w-7xl px-4 py-20">
        <div className="mb-3 text-center">
          <p className="mb-2 inline-flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">
            <span className="h-px w-8 bg-primary/40" />
            Choose your perfect plan
            <span className="h-px w-8 bg-primary/40" />
          </p>
          <h2 className="text-3xl font-extrabold md:text-5xl">Simple, Transparent Pricing</h2>
          <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
            All plans include instant setup, 24/7 uptime, and full Node.js support.
          </p>
        </div>

        <div className="my-10 flex justify-center">
          <div className="inline-flex rounded-2xl border border-white/10 bg-card/40 p-1.5 backdrop-blur">
            {(["standard", "premium"] as const).map((t) => (
              <button
                key={t}
                onClick={() => setTier(t)}
                className={`inline-flex items-center gap-2 rounded-xl px-7 py-3 text-sm font-semibold capitalize transition ${
                  tier === t
                    ? "gradient-violet text-white shadow-lg shadow-primary/30"
                    : "text-muted-foreground hover:text-foreground"
                }`}
              >
                {t}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((p) => (
            <PlanCard key={p.name} plan={p} />
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
}