"use client";

import { Boxes, Database, GitBranch, Globe2, Rocket, ShieldCheck } from "lucide-react";
import { ProductCatalogPage } from "@/components/ProductCatalogPage";
import { appHostTiers } from "@/lib/data/product-config";

const appConfig = [
  {
    label: "Deploy Method",
    options: [
      { label: "Git Deploy", description: "Connect a repo and redeploy from your branch.", icon: GitBranch, badge: "Recommended" },
      { label: "Container Image", description: "Run your own Docker image with env vars.", icon: Boxes },
      { label: "Upload Build", description: "Ship a zip or compiled artifact manually.", icon: Rocket },
    ],
  },
  {
    label: "Runtime Add-ons",
    options: [
      { label: "Managed Database", description: "Attach MySQL or PostgreSQL to the app.", icon: Database },
      { label: "Custom Domain", description: "Map your domain with automatic HTTPS.", icon: Globe2, badge: "SSL" },
      { label: "Private Runtime", description: "Isolated worker with stricter limits.", icon: ShieldCheck },
    ],
  },
];

export default function AppHostPage() {
  return (
    <ProductCatalogPage
      tiers={appHostTiers}
      defaultTier="nodejs"
      eyebrow="App Hosting"
      title="Deploy your"
      accentTitle="application."
      description="Managed runtimes for bots, APIs, dashboards, and databases. Pick your stack, choose the add-ons, and deploy without babysitting infrastructure."
      ctaLabel="Deploy App"
      configGroups={appConfig}
      specFields={[
        { key: "ram", label: "Memory" },
        { key: "cpu", label: "CPU" },
        { key: "storage", label: "Storage" },
        { key: "bandwidth", label: "Transfer" },
      ]}
      footerNote="Runtime and add-on choices are configured during checkout."
    />
  );
}