"use client";

import { Boxes, Lock, MonitorCog, Server, ShieldCheck, Terminal } from "lucide-react";
import { ProductCatalogPage } from "@/components/ProductCatalogPage";
import { vpsTiers } from "@/lib/data/product-config";

const vpsConfig = [
  {
    label: "Operating System",
    options: [
      { label: "Ubuntu 24.04", description: "Best default for web apps, APIs, and panels.", icon: Terminal, badge: "Recommended" },
      { label: "Debian 12", description: "Minimal, stable, and clean for production services.", icon: Server },
      { label: "Windows Server", description: "Remote desktop workloads and Windows-native apps.", icon: MonitorCog },
    ],
  },
  {
    label: "or use templates...",
    options: [
      { label: "Self Managed", description: "Full root access with a clean OS image.", icon: Lock },
      { label: "Docker Ready", description: "Docker Engine installed and ready to deploy.", icon: Boxes, badge: "Fast" },
      { label: "Hardened Base", description: "Firewall defaults and SSH hardening prepared.", icon: ShieldCheck },
    ],
  },
];

export default function VpsPage() {
  return (
    <ProductCatalogPage
      tiers={vpsTiers}
      defaultTier="standard"
      eyebrow="VPS Hosting"
      title="Deploy your"
      accentTitle="virtual server."
      description="Full root access, NVMe-backed storage, and isolated compute for production workloads, bots, APIs, and internal tools."
      ctaLabel="Deploy VPS"
      configGroups={vpsConfig}
      specFields={[
        { key: "cpu", label: "CPU" },
        { key: "ram", label: "RAM" },
        { key: "storage", label: "NVMe" },
        { key: "bandwidth", label: "Traffic" },
      ]}
      footerNote="OS and setup selections are applied during checkout provisioning."
    />
  );
}