import type { Metadata } from "next";
import Link from "next/link";
import { MapPin, Star } from "lucide-react";

import { BreadcrumbSection } from "@/components/BreadcrumbSection";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { getLocationPages } from "@/lib/location-pages";
import { routePath } from "@/lib/route-url";

export const metadata: Metadata = {
  title: "Popular Service Locations",
  description:
    "Browse popular Ride N Revive service cities for doorstep car service, bike service, battery, tyre, AC, and engine support.",
  alternates: {
    canonical: "/cities/popular",
  },
};

export default async function PopularCitiesPage() {
  const locations = await getLocationPages(true);

  return (
    <>
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Home", path: "/" },
          { name: "Cities", path: "/cities/" },
          { name: "Popular Locations", path: "/cities/popular/" },
        ])}
      />
      <BreadcrumbSection
        currentPage="Popular Locations"
        title="Popular service locations"
        lead="Open a popular DB-backed location page and continue with city-specific doorstep service."
      />

      <main className="bg-slate-50 font-['Space_Grotesk']">
        <section className="mx-auto max-w-7xl px-4 py-14 md:px-6 2xl:py-20">
          {locations.length === 0 ? (
            <div className="rounded-lg border border-dashed border-border bg-white p-10 text-center">
              <p className="text-lg font-black text-foreground">No popular locations selected</p>
              <p className="mt-2 text-sm font-semibold text-muted-foreground">
                Mark locations as popular in the DB and this page will update automatically.
              </p>
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {locations.map((location) => (
                <Link
                  key={location.id}
                  href={routePath(`/cities/${location.slug}`)}
                  className="group rounded-lg border border-border bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-primary/35 hover:shadow-md"
                >
                  <span className="flex items-start gap-3">
                    <span className="relative grid h-10 w-10 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
                      <MapPin className="h-5 w-5" />
                      <Star className="absolute -right-1 -top-1 h-4 w-4 fill-primary text-primary" />
                    </span>
                    <span>
                      <span className="block text-lg font-black text-foreground group-hover:text-primary">
                        {location.name}
                      </span>
                      <span className="mt-1 block text-sm font-semibold text-muted-foreground">
                        Popular doorstep service location
                      </span>
                    </span>
                  </span>
                </Link>
              ))}
            </div>
          )}
        </section>
      </main>
    </>
  );
}