import type { Metadata } from "next";
import { SectionHeader } from "@/components/SectionHeader";
import { StepCardsGrid } from "@/components/StepCard";
import { WhyItWorksList } from "@/components/WhyItWorksList";
import { HowItWorksBreadcrumbSection } from "./HowItWorksBreadcrumbSection";

export const metadata: Metadata = {
  title: "How Doorstep Vehicle Service Works",
  description:
    "See how Ride N Revive makes doorstep car and bike service simple: message us, share your location, get transparent support, and relax while we service your vehicle.",
  alternates: {
    canonical: "/how-it-works",
  },
  openGraph: {
    title: "How Doorstep Vehicle Service Works | Ride N Revive",
    description:
      "Learn the simple Ride N Revive booking process for doorstep vehicle inspection, service, and repair support.",
    url: "/how-it-works",
  },
};

export default function HowItWorks() {
  return (
    <>
      <HowItWorksBreadcrumbSection />

      <section className="mx-auto max-w-7xl px-4 py-14 2xl:py-20">
        <StepCardsGrid />
      </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 grid lg:grid-cols-2 gap-8 2xl:gap-10 items-center">
          <div>
            <SectionHeader
              eyebrow="What you experience"
              title="Convenience, clarity, and reliable service."
            />
            <p className="mt-4 text-muted-foreground">
              From booking to completion, Ride N Revive brings skilled technicians, transparent
              pricing, fast turnaround, and reliable service to your doorstep.
            </p>
          </div>
          <WhyItWorksList />
        </div>
      </section>
    </>
  );
}