import type { Metadata } from "next";
import Link from "next/link";
import { getPayload } from 'payload'
import config from '@payload-config'
import { normalizeLocation, type PayloadLocation } from "@/lib/payload-helpers";
import { SITE } from "@/lib/seo";
import { getSiteSettings } from "@/lib/site-settings";

export const revalidate = 86400

const DEFAULT_OG = "/media/ferrari-f8-tributo-rental-dubai-02.webp"

export const metadata: Metadata = {
  title: "Car Rental Locations in Dubai | Free Delivery | NCK Car Rental",
  description: "NCK Car Rental delivers to all major locations in Dubai: Downtown, Dubai Marina, Palm Jumeirah, Business Bay, Jumeirah, Al Barsha and Dubai Airport. Free delivery.",
  alternates: { canonical: `${SITE.domain}/locations/` },
  robots: { index: true, follow: true },
  openGraph: {
    title:       "Car Rental Locations in Dubai | Free Delivery | NCK Car Rental",
    description: "Free car delivery to Downtown Dubai, Marina, Palm Jumeirah, Business Bay & more. NCK Car Rental covers all Dubai areas.",
    url:         `${SITE.domain}/locations/`,
    siteName:    "NCK Car Rental",
    locale:      "en_AE",
    images:      [{ url: DEFAULT_OG, width: 1200, height: 630, alt: "Car Rental Locations Dubai - NCK Car Rental" }],
  },
  twitter: {
    card:        "summary_large_image",
    title:       "Car Rental Locations in Dubai | NCK Car Rental",
    description: "Free delivery to Downtown, Marina, Palm Jumeirah & all Dubai areas.",
    images:      [DEFAULT_OG],
  },
};

export default async function LocationsPage() {
  const [{ docs }, s] = await Promise.all([
    getPayload({ config }).then(p => p.find({ collection: 'locations', limit: 50, pagination: false })),
    getSiteSettings(),
  ])
  const locations = (docs as unknown as PayloadLocation[]).map(d => normalizeLocation(d))

  const breadcrumbLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home",      item: `${SITE.domain}/` },
      { "@type": "ListItem", position: 2, name: "Locations", item: `${SITE.domain}/locations/` },
    ],
  }

  const serviceAreaLd = {
    "@context": "https://schema.org",
    "@type": "AutoRental",
    "@id": `${SITE.domain}/locations/`,
    name: `${SITE.name} - Dubai Delivery Locations`,
    url: `${SITE.domain}/locations/`,
    telephone: s.phone1,
    address: {
      "@type": "PostalAddress",
      addressLocality: "Dubai",
      addressRegion: "Dubai",
      addressCountry: "AE",
    },
    areaServed: locations.map(loc => ({
      "@type": "Place",
      name: loc.name,
      url: `${SITE.domain}/locations/${loc.slug}/`,
    })),
    openingHoursSpecification: {
      "@type": "OpeningHoursSpecification",
      dayOfWeek: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
      opens: "00:00",
      closes: "23:59",
    },
  }

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceAreaLd) }} />

      <div className="bg-navy-900 text-white py-10">
        <div className="section-wrap">
          <nav className="flex items-center gap-1.5 text-xs text-navy-300 mb-3">
            <Link href="/" className="hover:text-white">Home</Link>
            <span>/</span>
            <span>Locations</span>
          </nav>
          <h1 className="text-3xl font-black mb-2">Car Rental Locations in Dubai</h1>
          <p className="text-navy-300 text-sm max-w-xl">
            Free delivery to all major areas in Dubai. Book online and we bring the car to you.
          </p>
        </div>
      </div>

      <div className="section-wrap py-10">

        {/* Intro */}
        <div className="max-w-2xl mb-8">
          <p className="text-[#5c6472] text-sm leading-relaxed">
            NCK Car Rental delivers directly to {locations.length}+ locations across Dubai with no pickup counter and no queue.
            Message on WhatsApp, confirm your dates, and the car arrives at your hotel, apartment, or office.
            Delivery typically takes one to two hours from booking. All areas below are covered at no extra charge.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {locations.map(loc => (
            <Link
              key={loc.slug}
              href={`/locations/${loc.slug}`}
              className="flex items-start gap-4 bg-white rounded-2xl border border-[#e2e6ed] p-5 hover:border-brand/30 hover:shadow-card transition-all group"
            >
              <span className="text-3xl flex-shrink-0 mt-0.5">{loc.icon}</span>
              <div>
                <p className="font-bold text-[#1a1f2e] group-hover:text-brand transition-colors mb-1">{loc.name}</p>
                <p className="text-[#5c6472] text-xs leading-relaxed line-clamp-2">{loc.seoDesc || loc.desc}</p>
                <p className="text-brand text-xs font-semibold mt-2">Free delivery →</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}