// app/pricing/page.tsx
import type { Metadata } from "next";
import PricingTable from "@/components/pricing/PricingTable";
import ComparisonTable from "@/components/pricing/ComparisonTable";
import PlanRecommender from "@/components/pricing/PlanRecommender";
import ROICalculator from "@/components/pricing/ROICalculator";
import FAQ from "@/components/pricing/FAQ";
import Guarantee from "@/components/pricing/Guarantee";
import { Plan } from "@/components/pricing/types";

export const metadata: Metadata = {
  title: "Pricing & SLAs — Van Hunen IT",
  description:
    "Simple plans with real SLAs. Essential, Growth, Mission-Critical. Month-to-month, 30-day cancel, incident credits.",
};

const plans: Plan[] = [
  {
    id: "essential",
    name: "Essential Care",
    bestFor: "Solo & micro businesses",
    monthlyPrice: 149,
    yearlyDiscount: 0.1,
    outcomes: ["Inbox-ready email", "99.9% uptime"],
    inclusions: [
      "SPF/DKIM/DMARC monitoring",
      "Automated backups + quarterly restore test",
      "Uptime & SSL watch",
      "Incident credits",
      "Business-hours support (8×5)",
    ],
    sla: "Next-business-day first response (8×5)",
    ctaLabel: "Start Essential",
    popular: false,
  },
  {
    id: "growth",
    name: "Growth Care",
    bestFor: "SMB team sites",
    monthlyPrice: 299,
    yearlyDiscount: 0.1,
    outcomes: ["99.95% uptime", "Faster TTFB"],
    inclusions: [
      "Everything in Essential",
      "Cloudflare WAF & bot tuning",
      "Monthly Web Vitals report",
      "Priority incident handling",
    ],
    sla: "4-hour first response (8×5)",
    ctaLabel: "Start Growth",
    popular: true,
  },
  {
    id: "mission",
    name: "Mission-Critical",
    bestFor: "High-traffic & 24/7",
    monthlyPrice: 649,
    yearlyDiscount: 0.1,
    outcomes: ["99.99% uptime", "24/7 on-call"],
    inclusions: [
      "Everything in Growth",
      "24/7 paging",
      "Weekly checks",
      "DR runbook & drills",
    ],
    sla: "1-hour first response (24/7)",
    ctaLabel: "Talk to us",
    popular: false,
    contactOnly: true,
  },
];

export default function PricingPage() {
  return (
    <main className="mx-auto max-w-7xl px-6 py-16">
      <header className="mx-auto max-w-3xl text-center">
        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
          Simple plans with real SLAs
        </h1>
        <p className="mt-4 text-lg text-gray-600">
          Pick the care level that matches your traffic and risk. Month-to-month, 30-day
          cancel. Fix Sprint available for urgent issues.
        </p>
      </header>

      {/* Engaging element #1: Billing toggle inside table */}
      <section className="mt-12">
        <PricingTable plans={plans} />
        <p className="mt-3 text-center text-sm text-gray-500">
          Prices exclude VAT. Annual billing saves 10%.
        </p>
      </section>

      {/* Engaging element #2: Plan recommender */}
      <section className="mt-24">
        <PlanRecommender plans={plans} />
      </section>

      {/* Comparison matrix */}
      <section className="mt-24">
        <ComparisonTable plans={plans} />
      </section>

      {/* Engaging element #3: ROI calculator */}
      <section className="mt-24">
        <ROICalculator plans={plans} />
      </section>

      <section className="mt-24">
        <Guarantee />
      </section>

      <section className="mt-24">
        <FAQ />
      </section>
    </main>
  );
}