import type { Metadata } from "next";
import { IncludedFeaturesList } from "@/components/IncludedFeaturesList";
import { SectionHeader } from "@/components/SectionHeader";
import { ServiceCardsGrid } from "@/components/ServiceCard";
import { JsonLd, breadcrumbJsonLd, serviceJsonLd } from "@/lib/seo";
import { ServicesBreadcrumbSection } from "./ServicesBreadcrumbSection";

export const metadata: Metadata = {
  title: "Doorstep Vehicle Services",
  description:
    "Explore Ride N Revive doorstep car service, bike service, repairs, inspections, emergency support, battery, tyre, AC, and engine care.",
  alternates: {
    canonical: "/services",
  },
  openGraph: {
    title: "Doorstep Vehicle Services | Ride N Revive",
    description:
      "Book car and bike maintenance, inspections, repairs, and emergency vehicle support at your doorstep.",
    url: "/services",
  },
};

export default function ServicesPage() {
  return (
    <>
      <JsonLd
        data={[
          serviceJsonLd({
            name: "Doorstep Vehicle Services",
            description:
              "Doorstep car service, bike service, repairs, inspections, battery, tyre, AC, and engine care from Ride N Revive.",
            path: "/services/",
            serviceType: "Vehicle service",
          }),
          breadcrumbJsonLd([
            { name: "Home", path: "/" },
            { name: "Services", path: "/services/" },
          ]),
        ]}
      />
      <ServicesBreadcrumbSection />

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

      <section className="mx-auto max-w-7xl px-4 pb-14 2xl:pb-20">
        <div className="rounded-2xl bg-surface border border-border p-6 sm:p-8 2xl:p-12">
          <SectionHeader
            eyebrow="Why choose us"
            title="Doorstep service without the garage hassle"
          />
          <IncludedFeaturesList />
        </div>
      </section>
    </>
  );
}