import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { getPayload } from 'payload'
import config from '@payload-config'
import { normalizeCar, type PayloadCar, type PopulatedCarType } from "@/lib/payload-helpers";
import { SITE } from "@/lib/seo";
import { getSiteStats } from "@/lib/stats";
import { getSiteSettings } from "@/lib/site-settings";
import { RENTAL_INCLUSIONS } from "@/lib/car-content";

interface Props { params: Promise<{ slug: string }> }

export const revalidate = 86400

export async function generateStaticParams() {
  const payload = await getPayload({ config })
  const { docs } = await payload.find({ collection: 'car-types', limit: 50, pagination: false })
  return (docs as unknown as PopulatedCarType[]).map(ct => ({ slug: ct.urlSlug }))
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const payload = await getPayload({ config })
  const { docs } = await payload.find({
    collection: 'car-types', where: { urlSlug: { equals: slug } }, limit: 1,
  })
  const ct = docs[0] as unknown as PopulatedCarType | undefined
  if (!ct) return { title: 'Car type not found' }

  const carsResult = await payload.find({
    collection: 'cars', where: { carType: { equals: ct.id } }, limit: 1, pagination: false, depth: 1,
  })
  const firstCar = carsResult.docs[0] as unknown as PayloadCar | undefined
  const ogImage = firstCar ? normalizeCar(firstCar).image : null

  const ctH1  = ct.h1 ?? `${ct.label} Car Rental Dubai`
  const title = ct.seoTitle ?? `${ctH1} | NCK Car Rental`
  const description = ct.seoDesc
    ?? `Rent ${ct.label.toLowerCase()} in Dubai. ${carsResult.totalDocs} models available with free delivery, no deposit & 24/7 support.`

  const fallbackOg = "/media/ferrari-f8-tributo-rental-dubai-02.webp"
  const ogImageUrl = ogImage ?? fallbackOg
  return {
    title,
    description,
    alternates: { canonical: `${SITE.domain}/cartype/${slug}/` },
    robots:     { index: true, follow: true },
    openGraph: {
      title,
      description,
      url:      `${SITE.domain}/cartype/${slug}/`,
      siteName: "NCK Car Rental",
      locale:   "en_AE",
      images:   [{ url: ogImageUrl, width: 1200, height: 630, alt: `${ct.label} Car Rental Dubai` }],
    },
    twitter: {
      card:        "summary_large_image",
      title,
      description,
      images:      [ogImageUrl],
    },
  }
}

const CAT_ICONS: Record<string, string> = {
  luxury: '💎', sports: '🏎️', suv: '🚙',
  convertible: '🌅', coupe: '🚗', sedan: '🚘',
}

export default async function CarTypePage({ params }: Readonly<Props>) {
  const { slug } = await params
  const payload = await getPayload({ config })

  const ctResult = await payload.find({
    collection: 'car-types', where: { urlSlug: { equals: slug } }, limit: 1,
  })
  const ct = ctResult.docs[0] as unknown as PopulatedCarType | undefined
  if (!ct) notFound()

  const [carsResult, allTypesResult, siteStats, s] = await Promise.all([
    payload.find({
      collection: 'cars',
      where: { carType: { equals: ct.id } },
      depth: 1, limit: 200, pagination: false,
    }),
    payload.find({ collection: 'car-types', limit: 50, pagination: false }),
    getSiteStats(),
    getSiteSettings(),
  ])

  const cars = (carsResult.docs as unknown as PayloadCar[]).map(doc => normalizeCar(doc))
  if (cars.length === 0) notFound()

  const allTypes = allTypesResult.docs as unknown as PopulatedCarType[]
  const otherTypes = allTypes.filter(t => t.urlSlug !== slug)

  const pricedCars = cars.filter(c => c.priceDay)
  const minPrice = pricedCars.length ? Math.min(...pricedCars.map(c => c.priceDay!)) : null
  const maxPrice = pricedCars.length ? Math.max(...pricedCars.map(c => c.priceDay!)) : null

  const catIcon = CAT_ICONS[ct.key] ?? '🚗'
  const pageH1  = ct.h1 ?? `${ct.label} Car Rental Dubai`
  const whatsappUrl = `https://wa.me/${s.whatsapp1}?text=${encodeURIComponent(`Hi, I'd like to rent a ${ct.label} in Dubai`)}`

  // ── Structured data ─────────────────────────────────────────────────────────

  const breadcrumbLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Home',     item: `${SITE.domain}/` },
      { '@type': 'ListItem', position: 2, name: 'All Cars', item: `${SITE.domain}/all-cars/` },
      { '@type': 'ListItem', position: 3, name: pageH1 },
    ],
  }

  const itemListLd = {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    name: pageH1,
    numberOfItems: cars.length,
    itemListElement: cars.slice(0, 20).map((car, i) => ({
      '@type': 'ListItem',
      position: i + 1,
      name: car.title,
      url: `${SITE.domain}/car/${car.slug}/`,
    })),
  }

  const offerCatalogLd = {
    '@context': 'https://schema.org',
    '@type': 'AutoRental',
    '@id': `${SITE.domain}/cartype/${slug}/#business`,
    name: `${SITE.name} - ${pageH1}`,
    url: `${SITE.domain}/cartype/${slug}/`,
    ...(minPrice && {
      priceRange: `AED ${minPrice}${maxPrice && maxPrice !== minPrice ? ` - AED ${maxPrice}` : ''}`,
    }),
    ...(siteStats.reviews > 0 && {
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: siteStats.rating,
        reviewCount: siteStats.reviews,
        bestRating: 5,
      },
    }),
    hasOfferCatalog: {
      '@type': 'OfferCatalog',
      name: pageH1,
      numberOfItems: cars.length,
    },
  }

  const faqLd = ct.faqs?.length
    ? {
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        mainEntity: ct.faqs.map(f => ({
          '@type': 'Question',
          name: f.question,
          acceptedAnswer: { '@type': 'Answer', text: f.answer },
        })),
      }
    : null

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

      {/* ── Breadcrumb strip ─────────────────────────────────────────────────── */}
      <div className="bg-[#f8f9fb] border-b border-[#e2e6ed]">
        <div className="section-wrap py-2.5">
          <nav className="flex items-center gap-1.5 text-xs text-[#5c6472]" aria-label="Breadcrumb">
            <Link href="/" className="hover:text-brand">Home</Link>
            <span>/</span>
            <Link href="/all-cars" className="hover:text-brand">All Cars</Link>
            <span>/</span>
            <span className="text-[#1a1f2e] font-medium">{pageH1}</span>
          </nav>
        </div>
      </div>

      {/* ── Hero ─────────────────────────────────────────────────────────────── */}
      <div className="bg-navy-900 text-white py-12">
        <div className="section-wrap">
          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8">

            {/* Left: title block */}
            <div className="flex-1">
              <div className="inline-flex items-center gap-2 bg-white/10 rounded-full px-3 py-1 text-xs font-semibold text-navy-200 mb-4">
                <span>{catIcon}</span>
                <span>{ct.label}</span>
              </div>
              <h1 className="text-3xl sm:text-4xl font-black leading-tight mb-3">
                {pageH1}
              </h1>
              {ct.heroSubtitle && (
                <p className="text-navy-200 text-base max-w-xl leading-relaxed">{ct.heroSubtitle}</p>
              )}
            </div>

            {/* Right: stats + CTA */}
            <div className="flex flex-col gap-4 lg:items-end">
              <div className="flex flex-wrap gap-x-6 gap-y-2">
                <div>
                  <p className="text-2xl font-black text-white">{cars.length}</p>
                  <p className="text-navy-300 text-xs">Models available</p>
                </div>
                {minPrice && (
                  <div>
                    <p className="text-2xl font-black text-brand">AED {minPrice.toLocaleString()}</p>
                    <p className="text-navy-300 text-xs">Starting price/day</p>
                  </div>
                )}
                <div>
                  <p className="text-2xl font-black text-white flex items-center gap-1">
                    <span className="text-yellow-400 text-xl">★</span>{siteStats.rating}
                  </p>
                  <p className="text-navy-300 text-xs">{siteStats.reviews.toLocaleString()} reviews</p>
                </div>
              </div>
              <div className="flex gap-3">
                <a
                  href={whatsappUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-bold px-5 py-2.5 rounded-xl transition-colors"
                >
                  <svg viewBox="0 0 24 24" className="w-4 h-4 flex-shrink-0" fill="currentColor">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                  </svg>
                  Book on WhatsApp
                </a>
                <a
                  href={s.callUrl1}
                  className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white text-sm font-bold px-5 py-2.5 rounded-xl transition-colors"
                >
                  <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                  </svg>
                  Call Us
                </a>
              </div>
            </div>

          </div>
        </div>
      </div>

      {/* ── Car Grid ─────────────────────────────────────────────────────────── */}
      <div className="bg-[#f8f9fb] py-10">
        <div className="section-wrap">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-xl font-black text-[#1a1f2e]">{ct.label} Available Now</h2>
              {minPrice && maxPrice && minPrice !== maxPrice && (
                <p className="text-[#5c6472] text-sm mt-0.5">
                  AED {minPrice.toLocaleString()} – {maxPrice.toLocaleString()} per day
                </p>
              )}
            </div>
            <span className="text-xs text-[#5c6472] bg-white border border-[#e2e6ed] px-3 py-1.5 rounded-full font-medium">
              {cars.length} {cars.length === 1 ? 'model' : 'models'}
            </span>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            {cars.map(car => (
              <Link key={car.slug} href={`/car/${car.slug}`} className="car-card flex flex-col group">
                <div className="relative bg-[#f1f3f7] aspect-[4/3] overflow-hidden">
                  {car.image ? (
                    <Image
                      src={car.image}
                      alt={`${car.title} ${ct.label.toLowerCase()} car rental Dubai`}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                      sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-[#adb7c7]">
                      <svg viewBox="0 0 120 60" className="w-24 h-12" fill="currentColor">
                        <path d="M14 38l10-18h62l10 18H14z" opacity=".25"/>
                        <circle cx="28" cy="46" r="8" opacity=".4"/>
                        <circle cx="92" cy="46" r="8" opacity=".4"/>
                      </svg>
                    </div>
                  )}
                  {car.noDeposit && (
                    <span className="absolute top-2 left-2 bg-emerald-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                      No Deposit
                    </span>
                  )}
                </div>
                <div className="p-3 flex flex-col flex-1">
                  <p className="text-xs font-semibold text-[#5c6472] uppercase tracking-wide mb-0.5">{car.brand}</p>
                  <p className="font-bold text-[#1a1f2e] text-sm leading-tight mb-2 flex-1">{car.title}</p>
                  <div className="flex gap-2 text-xs text-[#5c6472] mb-2">
                    <span>👤 {car.passengers}</span>
                    <span>🚪 {car.doors}</span>
                    <span>⚙️ {car.transmission}</span>
                  </div>
                  <p className="text-brand font-black text-base">
                    AED {car.priceDay?.toLocaleString() ?? 'N/A'}
                    <span className="text-[#5c6472] font-normal text-xs">/day</span>
                  </p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* ── Main content + Sidebar ────────────────────────────────────────────── */}
      <div className="section-wrap py-10">
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10">

          {/* ═══ LEFT: Content ═══════════════════════════════════════════════ */}
          <div className="lg:col-span-3 space-y-10">

            {/* Intro */}
            {(ct.intro ?? ct.description) && (
              <section aria-label={`About ${ct.label} rental in Dubai`}>
                <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                  {ct.label} Rental in Dubai
                </h2>
                <div className="text-[#5c6472] text-sm leading-relaxed space-y-3">
                  {(ct.intro ?? ct.description ?? '').split('\n\n').filter(p => p.trim()).map((para, i) => (
                    <p key={i}>{para.trim()}</p>
                  ))}
                </div>
              </section>
            )}

            {/* Why Rent */}
            {ct.whyRent && ct.whyRent.length > 0 && (
              <section aria-label={`Why rent a ${ct.label} in Dubai`}>
                <h2 className="text-xl font-black text-[#1a1f2e] mb-5">
                  Why Rent a {ct.label} in Dubai
                </h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {ct.whyRent.map((item, i) => (
                    <div key={item.id ?? i} className="bg-[#f8f9fb] border border-[#e2e6ed] rounded-2xl p-5">
                      <div className="flex items-center gap-3 mb-3">
                        <div className="w-7 h-7 rounded-full bg-brand text-white flex items-center justify-center font-black text-xs flex-shrink-0">
                          {i + 1}
                        </div>
                        <p className="font-bold text-[#1a1f2e] text-sm">{item.title}</p>
                      </div>
                      <p className="text-[#5c6472] text-xs leading-relaxed">{item.body}</p>
                    </div>
                  ))}
                </div>
              </section>
            )}

            {/* Dubai Context */}
            {ct.dubaiContext && (
              <section aria-label={`Driving ${ct.label} cars in Dubai`}>
                <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                  Driving a {ct.label} in Dubai
                </h2>
                <div className="bg-navy-900 text-white rounded-2xl p-6">
                  <div className="flex items-start gap-4">
                    <span className="text-2xl flex-shrink-0 mt-0.5">🗺️</span>
                    <p className="text-navy-200 text-sm leading-relaxed">{ct.dubaiContext}</p>
                  </div>
                </div>
              </section>
            )}

            {/* Who Rents */}
            {ct.whoRents && (
              <section aria-label={`Who rents ${ct.label} in Dubai`}>
                <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                  Who Rents {ct.label} in Dubai
                </h2>
                <div className="text-[#5c6472] text-sm leading-relaxed space-y-3">
                  {ct.whoRents.split('\n\n').filter(p => p.trim()).map((para, i) => (
                    <p key={i}>{para.trim()}</p>
                  ))}
                </div>
              </section>
            )}

            {/* Requirements */}
            {ct.requirements && (
              <section aria-label="Rental requirements">
                <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                  Rental Requirements
                </h2>
                <div className="bg-[#f0f9ff] border border-[#bae6fd] rounded-2xl p-6">
                  <div className="flex items-start gap-4">
                    <span className="text-2xl flex-shrink-0">📋</span>
                    <p className="text-[#334155] text-sm leading-relaxed">{ct.requirements}</p>
                  </div>
                </div>
              </section>
            )}

            {/* FAQ */}
            {ct.faqs && ct.faqs.length > 0 && (
              <section aria-label="Frequently asked questions">
                <h2 className="text-xl font-black text-[#1a1f2e] mb-5">
                  Frequently Asked Questions
                </h2>
                <div className="space-y-2">
                  {ct.faqs.map((faq, i) => (
                    <details
                      key={faq.id ?? i}
                      className="group bg-[#f8f9fb] border border-[#e2e6ed] rounded-xl overflow-hidden"
                    >
                      <summary className="flex items-center justify-between gap-4 px-5 py-4 cursor-pointer list-none font-semibold text-sm text-[#1a1f2e] hover:text-brand transition-colors">
                        <span>{faq.question}</span>
                        <svg
                          viewBox="0 0 24 24"
                          className="w-4 h-4 flex-shrink-0 text-[#adb7c7] transition-transform group-open:rotate-180"
                          fill="none" stroke="currentColor"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      </summary>
                      <div className="px-5 pb-5 text-sm text-[#5c6472] leading-relaxed border-t border-[#e2e6ed] pt-4">
                        {faq.answer}
                      </div>
                    </details>
                  ))}
                </div>
              </section>
            )}

            {/* SEO Text */}
            {ct.seoText && (
              <section aria-label="About this category" className="border-t border-[#e2e6ed] pt-8">
                <div className="space-y-3">
                  {ct.seoText.split('\n\n').filter(p => p.trim()).map((para, i) => (
                    <p key={i} className="text-[#5c6472] text-sm leading-relaxed">{para.trim()}</p>
                  ))}
                </div>
              </section>
            )}

          </div>

          {/* ═══ RIGHT: Sticky Sidebar ═══════════════════════════════════════ */}
          <div className="lg:col-span-2">
            <div className="sticky top-20 space-y-4">

              {/* Booking CTA card */}
              <div className="bg-white rounded-2xl border border-[#e2e6ed] p-6 shadow-card">
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-lg">{catIcon}</span>
                  <span className="text-xs font-semibold text-[#5c6472] uppercase tracking-wide">{ct.label}</span>
                </div>
                <h3 className="text-lg font-black text-[#1a1f2e] leading-tight mb-4">
                  Rent a {ct.label} in Dubai
                </h3>
                <div className="bg-[#f8f9fb] rounded-xl p-4 mb-5">
                  {minPrice ? (
                    <>
                      <p className="text-xs text-[#5c6472] mb-1">Starting from</p>
                      <p className="text-3xl font-black text-brand">
                        AED {minPrice.toLocaleString()}
                        <span className="text-[#5c6472] font-normal text-sm">/day</span>
                      </p>
                    </>
                  ) : (
                    <p className="text-sm text-[#5c6472]">Contact us for pricing</p>
                  )}
                  <p className="text-xs text-[#5c6472] mt-2">Insurance & delivery included</p>
                </div>
                <div className="space-y-2.5">
                  <a
                    href={whatsappUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="btn-orange w-full justify-center text-sm py-3"
                  >
                    <svg className="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                    </svg>
                    Book on WhatsApp
                  </a>
                  <a
                    href={s.callUrl1}
                    className="btn-outline w-full justify-center text-sm py-3"
                  >
                    <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    Call Us
                  </a>
                </div>
                <p className="text-center text-[#5c6472] text-xs mt-4">Free delivery across Dubai · 24/7 support</p>
              </div>

              {/* How to book */}
              <div className="bg-white rounded-2xl border border-[#e2e6ed] p-5">
                <h3 className="font-bold text-[#1a1f2e] text-sm mb-4">How to Book</h3>
                <div className="space-y-3">
                  {[
                    ['1', 'Choose your car', `Browse the ${ct.label.toLowerCase()} above and pick a model.`],
                    ['2', 'Message on WhatsApp', 'Tell us the car, dates, and delivery address.'],
                    ['3', 'We deliver to you', 'Clean, fuelled, and insured. Delivered anywhere in Dubai.'],
                  ].map(([num, title, desc]) => (
                    <div key={num} className="flex gap-3 items-start">
                      <div className="w-6 h-6 rounded-full bg-brand text-white text-xs font-black flex items-center justify-center flex-shrink-0">
                        {num}
                      </div>
                      <div>
                        <p className="font-semibold text-[#1a1f2e] text-xs">{title}</p>
                        <p className="text-[#5c6472] text-xs leading-snug">{desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* What's included */}
              <div className="bg-[#f8f9fb] rounded-2xl border border-[#e2e6ed] p-5">
                <h3 className="font-bold text-[#1a1f2e] text-xs mb-4 uppercase tracking-wide">Included with Every Rental</h3>
                <div className="space-y-3">
                  {RENTAL_INCLUSIONS.map(item => (
                    <div key={item.label} className="flex items-start gap-3">
                      <span className="text-base flex-shrink-0">{item.icon}</span>
                      <div>
                        <p className="font-semibold text-[#1a1f2e] text-xs">{item.label}</p>
                        <p className="text-[#5c6472] text-xs leading-snug">{item.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Other car types */}
              {otherTypes.length > 0 && (
                <div className="bg-white rounded-2xl border border-[#e2e6ed] p-5">
                  <h3 className="font-bold text-[#1a1f2e] text-xs mb-3 uppercase tracking-wide">Other Car Types</h3>
                  <div className="space-y-1.5">
                    {otherTypes.map(t => (
                      <Link
                        key={t.urlSlug}
                        href={`/cartype/${t.urlSlug}`}
                        className="flex items-center justify-between text-sm text-[#5c6472] hover:text-brand transition-colors py-1 border-b border-[#f1f3f7] last:border-0"
                      >
                        <span className="flex items-center gap-2">
                          <span className="text-base">{CAT_ICONS[t.key] ?? '🚗'}</span>
                          <span>{t.label}</span>
                        </span>
                        <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </Link>
                    ))}
                  </div>
                </div>
              )}

            </div>
          </div>

        </div>
      </div>
    </>
  )
}