import type { Metadata } from "next";
import { Suspense } from "react";
import CarsClient from "./CarsClient";
import { ListingSkeleton } from "@/components/ui/Skeletons";

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://drivehub.in";

export const metadata: Metadata = {
  title: "New Cars in India 2024 — Prices, Specs & Reviews | DriveHub",
  description:
    "Browse 500+ new cars in India. Compare prices, specs, mileage, and features. Filter by brand, fuel type, transmission, body type and budget range.",
  keywords: [
    "new cars india",
    "car prices india",
    "buy car india",
    "car comparison",
    "best cars 2024",
    "car specifications",
    "SUV",
    "sedan",
    "hatchback",
    "electric cars india",
  ],
  openGraph: {
    title: "New Cars in India — Prices, Specs & Reviews | DriveHub",
    description:
      "India's smartest car marketplace. Live prices, smart search, and side-by-side comparison for 500+ cars.",
    type: "website",
    url: `${SITE_URL}/cars`,
    siteName: "DriveHub",
  },
  twitter: {
    card: "summary_large_image",
    title: "New Cars in India — Prices, Specs & Reviews | DriveHub",
    description:
      "India's smartest car marketplace. Live prices, smart search, and side-by-side comparison for 500+ cars.",
  },
  alternates: {
    canonical: `${SITE_URL}/cars`,
  },
};

export default function CarsPage() {
  return (
    <Suspense fallback={<ListingSkeleton count={8} />}>
      <CarsClient />
    </Suspense>
  );
}