import type { Metadata } from "next";
import { PlanCardsGrid } from "@/components/PlanCard";
import { PlanComparisonTable } from "@/components/PlanComparisonTable";
import { SectionHeader } from "@/components/SectionHeader";
import { PlansBreadcrumbSection } from "./PlansBreadcrumbSection";

export const metadata: Metadata = {
  title: "Rewards & Roadside Assistance",
  description:
    "Explore Ride N Revive referral rewards, roadside assistance, doorstep service support, and vehicle care benefits for cars and bikes.",
  alternates: {
    canonical: "/plans",
  },
  openGraph: {
    title: "Rewards & Roadside Assistance | Ride N Revive",
    description:
      "Compare Ride N Revive support options for referral rewards, roadside help, and doorstep service assistance.",
    url: "/plans",
  },
};

export default function PlansPage() {
  return (
    <>
      <PlansBreadcrumbSection />

      <section className="mx-auto max-w-7xl px-4 py-14 2xl:py-20">
        <PlanCardsGrid />
      </section>

      <section className="mx-auto max-w-7xl px-4 pb-14 2xl:pb-20">
        <SectionHeader eyebrow="Compare" title="What each support option includes" />
        <PlanComparisonTable />
      </section>
    </>
  );
}