import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import SearchBar from "@/components/SearchBar";
import { getPayload } from 'payload'
import config from '@payload-config'
import { SITE, buildJsonLd, buildFaqJsonLd, FAQ_SCHEMA } from "@/lib/seo"
import { getSiteStats } from "@/lib/stats";
import { getSiteSettings } from "@/lib/site-settings";
import { BENEFITS } from "@/lib/data";
import { BRAND_SLUGS, CARTYPE_SLUGS } from "@/lib/taxonomy";
import {
  normalizeCar, normalizeLocation,
  type PayloadCar, type PayloadLocation, type PayloadBrand, type PayloadReview,
  type NormalizedCar,
} from "@/lib/payload-helpers";

export const revalidate = 300

export async function generateMetadata(): Promise<Metadata> {
  const { carsCount, minPrice } = await getSiteStats()
  const from = minPrice ? `AED ${minPrice}/day` : 'great rates'
  return {
    title: "NCK Car Rental Dubai | Luxury, Sports & SUV Hire, Free Delivery",
    description:
      `Rent a car in Dubai from ${from}. ${carsCount}+ cars across luxury, sports, SUV and convertibles, including Rolls Royce, Ferrari and Range Rover. Free delivery, no deposit, 24/7 support.`,
    alternates: { canonical: `${SITE.domain}/` },
    openGraph: {
      title:       "NCK Car Rental Dubai | Luxury, Sports & SUV Hire, Free Delivery",
      description: `${carsCount}+ cars from ${from}. Luxury, sports, SUV & economy. Free delivery across Dubai. No deposit. Book on WhatsApp in 60 seconds.`,
      url:         `${SITE.domain}/`,
      type:        "website",
    },
    twitter: {
      card:        "summary_large_image",
      title:       "NCK Car Rental Dubai | Luxury, Sports & SUV Hire",
      description: `${carsCount}+ cars from ${from}. Rolls Royce, Ferrari, Range Rover. Free delivery, no deposit, 24/7.`,
    },
  }
}


const CATEGORY_GRID = [
  { slug: CARTYPE_SLUGS.luxury,      label: "Luxury",      icon: "💎", desc: "Rolls Royce, Bentley & more" },
  { slug: CARTYPE_SLUGS.sports,      label: "Sports",      icon: "🏎️", desc: "Ferrari, Lamborghini & more" },
  { slug: CARTYPE_SLUGS.suv,         label: "SUV",         icon: "🚙", desc: "Range Rover, BMW X7 & more" },
  { slug: CARTYPE_SLUGS.convertible, label: "Convertible", icon: "🌞", desc: "Open-top Dubai experience" },
  { slug: CARTYPE_SLUGS.coupe,       label: "Coupe",       icon: "🚗", desc: "Sleek performance coupes" },
  { slug: CARTYPE_SLUGS.sedan,       label: "Sedan",       icon: "🚘", desc: "Comfort for every journey" },
];

function MiniCarCard({ car }: { readonly car: NormalizedCar }) {
  return (
    <Link href={`/car/${car.slug}`} className="car-card flex flex-col w-52 flex-shrink-0 group">
      <div className="relative bg-[#141414] h-32 overflow-hidden">
        {car.image ? (
          <Image
            src={car.image}
            alt={`${car.title} ${car.brand} ${car.category} car rental Dubai`}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-300"
            sizes="208px"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-[#333333]">
            <svg viewBox="0 0 120 60" className="w-20 h-10" 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 gap-1 flex-1">
        <p className="text-xs font-semibold text-[#5c6472]">{car.brand}</p>
        <p className="font-semibold text-[#1a1f2e] text-xs leading-tight">{car.title}</p>
        <div className="flex items-center gap-1.5 mt-auto pt-2">
          <span className="text-brand font-bold text-sm">AED {car.priceDay?.toLocaleString()}</span>
          <span className="text-[#5c6472] text-xs">/day</span>
        </div>
        <div className="flex items-center gap-2 text-xs text-[#5c6472]">
          <span>👤 {car.passengers}</span>
          <span>⚙️ {car.transmission}</span>
        </div>
      </div>
    </Link>
  );
}

export default async function Home() {
  const payload = await getPayload({ config })

  const [carsResult, locsResult, reviewsResult, brandsResult, allReviewsResult, s] = await Promise.all([
    payload.find({ collection: 'cars', depth: 1, limit: 500, pagination: false }),
    payload.find({ collection: 'locations', limit: 50, pagination: false }),
    payload.find({ collection: 'reviews', limit: 20, pagination: false, sort: '-reviewDate', where: { and: [{ rating: { greater_than_equal: 4 } }, { text: { exists: true } }] } }),
    payload.find({ collection: 'brands', limit: 100, pagination: false }),
    payload.find({ collection: 'reviews', limit: 500, pagination: false }),
    getSiteSettings(),
  ])

  const allCars     = (carsResult.docs as unknown as PayloadCar[]).map(doc => normalizeCar(doc))
  const locations   = (locsResult.docs as unknown as PayloadLocation[]).map(d => normalizeLocation(d))
  const reviews     = reviewsResult.docs as unknown as PayloadReview[]
  const allBrands   = brandsResult.docs as unknown as PayloadBrand[]

  const allReviews    = allReviewsResult.docs as unknown as PayloadReview[]
  const reviewCount   = allReviewsResult.totalDocs
  const ratingsWithValue = allReviews.filter(r => r.rating)
  const avgRating     = ratingsWithValue.length
    ? Math.round((ratingsWithValue.reduce((sum, r) => sum + (r.rating ?? 0), 0) / ratingsWithValue.length) * 10) / 10
    : 5

  const sportsRow      = allCars.filter(c => c.category === "sports").slice(0, 6)
  const suvRow         = allCars.filter(c => c.category === "suv").slice(0, 6)
  const luxRow         = allCars.filter(c => c.category === "luxury").slice(0, 6)
  const convertibleRow = allCars.filter(c => c.category === "convertible").slice(0, 6)
  const minPrice       = Math.min(...allCars.filter(c => c.priceDay).map(c => c.priceDay!))

  function pickOne(category: string) {
    return allCars.filter(c => c.category === category && c.priceDay)
      .sort((a, b) => (a.priceDay ?? 999999) - (b.priceDay ?? 999999))[0]
  }
  const PRICE_TABLE_CARS = [
    pickOne("luxury"), pickOne("sports"), pickOne("suv"),
    pickOne("convertible"), pickOne("coupe"), pickOne("sedan"),
  ].filter(Boolean) as NormalizedCar[]

  const featuredBrands = allBrands.filter(b => allCars.some(c => c.brand === b.name))

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(buildJsonLd({ rating: avgRating, reviews: reviewCount })) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(buildFaqJsonLd()) }} />

      {/* ══════════════════════════════════════════
          HERO
      ══════════════════════════════════════════ */}
      <section className="relative bg-navy-900 overflow-hidden" aria-label="Hero">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-brand/20 rounded-full -translate-y-1/2 translate-x-1/3 blur-3xl pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-orange/15 rounded-full translate-y-1/2 -translate-x-1/3 blur-3xl pointer-events-none" />

        <div className="section-wrap relative z-10 pt-20 pb-16">
          <div className="max-w-2xl mx-auto text-center">
              <div className="inline-flex items-center gap-2 bg-white/10 rounded-full px-4 py-1.5 mb-5">
                <span className="w-1.5 h-1.5 rounded-full bg-orange animate-pulse" />
                <span className="text-white/80 text-xs font-medium">
                  #1 Luxury Car Rental in Dubai · {allCars.length}+ Cars Available
                </span>
              </div>

              <h1 className="text-white text-4xl sm:text-5xl font-black leading-[1.1] mb-3">
                Rent a Car in Dubai<br />
                <span className="text-orange">from AED {minPrice}</span>/day
              </h1>
              <p className="text-white/60 text-base mb-5">
                Luxury, sports, SUV &amp; convertibles. Free delivery across Dubai. No deposit on all cars.
              </p>

              <div className="flex gap-1.5 flex-wrap mb-6 items-center justify-center">
                <span className="text-white/40 text-xs">📍 Serving:</span>
                {["Downtown","Marina","Palm Jumeirah","JBR","Business Bay","Dubai Airport"].map(loc => (
                  <span key={loc} className="bg-white/10 text-white/60 text-xs px-2.5 py-1 rounded-full">{loc}</span>
                ))}
              </div>

              <SearchBar />
            </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          TRUST BAR
      ══════════════════════════════════════════ */}
      <section className="bg-[#f8f9fb] border-b border-[#e2e6ed]">
        <div className="section-wrap py-4 flex flex-wrap items-center justify-between gap-4">
          {[
            ["⭐", `${avgRating} Google Rating`, `${reviewCount.toLocaleString()} reviews`],
            ["🚗", `${allCars.length}+ Cars`,      "Updated daily"],
            ["🚚", "Free Delivery",                "Across Dubai"],
            ["💳", "No Deposit",                   "On all cars"],
            ["🕐", "24/7 Support",                 "Always available"],
          ].map(([icon, label, sub]) => (
            <div key={label} className="flex items-center gap-2.5 min-w-fit">
              <span className="text-xl">{icon}</span>
              <div>
                <p className="text-sm font-bold text-[#1a1f2e]">{label}</p>
                <p className="text-xs text-[#5c6472]">{sub}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════════════════
          BRANDS
      ══════════════════════════════════════════ */}
      <section className="py-10" aria-labelledby="brands-heading">
        <div className="section-wrap">
          <div className="section-row">
            <h2 id="brands-heading" className="section-title">Top Car Brands in Dubai</h2>
            <Link href="/all-cars" className="btn-ghost">All cars →</Link>
          </div>
          <div className="hscroll">
            {featuredBrands.map(b => (
              <Link key={b.urlSlug} href={`/carbrand/${b.urlSlug}`} className="brand-chip">
                {b.name}
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          CATEGORY GRID
      ══════════════════════════════════════════ */}
      <section className="py-10 bg-[#f8f9fb]" aria-labelledby="categories-heading">
        <div className="section-wrap">
          <h2 id="categories-heading" className="section-title mb-5">Browse by Category</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            {CATEGORY_GRID.map(c => (
              <Link
                key={c.slug}
                href={`/cartype/${c.slug}`}
                className="flex flex-col items-center gap-2 p-4 bg-white rounded-2xl border border-[#e2e6ed] hover:border-brand/30 hover:bg-[#fff5f5] transition-all group"
              >
                <div className="w-12 h-12 rounded-2xl bg-[#f5f5f5] border border-[#e8e8e8] flex items-center justify-center text-xl group-hover:bg-brand/10 group-hover:border-brand/20 transition-all">
                  {c.icon}
                </div>
                <span className="font-semibold text-sm text-[#1a1f2e] group-hover:text-brand transition-colors">{c.label}</span>
                <span className="text-xs text-[#5c6472] text-center leading-tight">{c.desc}</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          CAR ROWS - Sports / SUV / Luxury / Coupe
      ══════════════════════════════════════════ */}
      {[
        { id: "luxury",      title: "Luxury Car Rental Dubai",    sub: "Rolls Royce, Bentley, Mercedes-Benz S-Class & more",  cars: luxRow,         href: `/cartype/${CARTYPE_SLUGS.luxury}` },
        { id: "sports",      title: "Sports Car Rental Dubai",    sub: "Ferrari, Lamborghini & more",  cars: sportsRow,      href: `/cartype/${CARTYPE_SLUGS.sports}` },
        { id: "suv",         title: "SUV Rental Dubai",           sub: "Range Rover, BMW X7 & more",  cars: suvRow,         href: `/cartype/${CARTYPE_SLUGS.suv}` },
        { id: "convertible", title: "Convertible Rental Dubai",   sub: "Open-top Dubai experience",   cars: convertibleRow, href: `/cartype/${CARTYPE_SLUGS.convertible}` },
      ].map(({ id, title, sub, cars, href }) => (
        <section key={id} className="py-6 odd:bg-white even:bg-[#f8f9fb]" aria-labelledby={`${id}-heading`}>
          <div className="section-wrap">
            <div className="section-row">
              <div>
                <h2 id={`${id}-heading`} className="section-title">{title}</h2>
                <p className="text-[#5c6472] text-xs mt-0.5">{sub}</p>
              </div>
              <Link href={href} className="btn-ghost">View all →</Link>
            </div>
            <div className="hscroll">
              {cars.map(car => <MiniCarCard key={car.slug} car={car} />)}
            </div>
          </div>
        </section>
      ))}

      {/* ══════════════════════════════════════════
          LOCATIONS
      ══════════════════════════════════════════ */}
      <section className="py-10" aria-labelledby="locations-heading">
        <div className="section-wrap">
          <div className="section-row">
            <div>
              <h2 id="locations-heading" className="section-title">We Deliver Across Dubai</h2>
              <p className="text-[#5c6472] text-xs mt-0.5">Free car delivery to all major areas, no extra charge</p>
            </div>
            <Link href="/locations" className="btn-ghost">All locations →</Link>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {locations.map(loc => (
              <Link key={loc.slug} href={`/locations/${loc.slug}`} className="city-card group">
                <div className="flex items-center gap-2.5">
                  <span className="text-xl flex-shrink-0">{loc.icon}</span>
                  <div>
                    <p className="font-semibold text-[#1a1f2e] text-sm group-hover:text-brand transition-colors">{loc.name}</p>
                    <p className="text-[#5c6472] text-xs">Free delivery</p>
                  </div>
                </div>
                <span className="text-brand text-sm">→</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          BENEFITS + CONDITIONS
      ══════════════════════════════════════════ */}
      <section className="py-10 bg-[#f8f9fb]" aria-labelledby="benefits-heading">
        <div className="section-wrap">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <h2 id="benefits-heading" className="section-title mb-1">Why Rent with NCK?</h2>
              <p className="text-[#5c6472] text-xs mb-5">Benefits included with every booking.</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {BENEFITS.map(b => (
                  <div key={b.title} className="flex items-start gap-3 bg-white rounded-2xl p-4 border border-[#e2e6ed]">
                    <div className="w-9 h-9 rounded-xl bg-brand/10 border border-brand/15 flex items-center justify-center text-sm flex-shrink-0">
                      {b.icon}
                    </div>
                    <div>
                      <p className="font-semibold text-[#1a1f2e] text-sm">{b.title}</p>
                      <p className="text-[#5c6472] text-xs mt-0.5">{b.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="space-y-6">
              <div>
                <h3 className="font-bold text-[#1a1f2e] mb-3">Rental Conditions</h3>
                <div className="bg-white rounded-2xl border border-[#e2e6ed] overflow-hidden">
                  {[
                    ["Insurance",        "Included"],
                    ["Min. rental",      "1 day"],
                    ["Min. driver age",  "23–25 y.o."],
                    ["Min. experience",  "1 year"],
                  ].map(([k, v]) => (
                    <div key={k} className="flex justify-between px-4 py-3 text-sm border-b border-[#e2e6ed] last:border-0">
                      <span className="text-[#5c6472]">{k}</span>
                      <span className="font-semibold text-[#1a1f2e]">{v}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <h3 className="font-bold text-[#1a1f2e] mb-3">Required Documents</h3>
                <div className="bg-white rounded-2xl border border-[#e2e6ed] p-4 space-y-3 text-sm">
                  <div>
                    <p className="font-semibold text-[#1a1f2e] text-xs uppercase tracking-wide mb-1.5">Tourists</p>
                    <ul className="space-y-1 text-[#5c6472] text-xs">
                      {["Passport","Visit Visa","Home Country License","International Driving Permit (IDP)"].map(d => (
                        <li key={d} className="flex gap-1.5"><span className="text-brand">•</span>{d}</li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold text-[#1a1f2e] text-xs uppercase tracking-wide mb-1.5">UAE Residents</p>
                    <ul className="space-y-1 text-[#5c6472] text-xs">
                      {["Emirates ID","Valid UAE Driving License"].map(d => (
                        <li key={d} className="flex gap-1.5"><span className="text-brand">•</span>{d}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          REVIEWS
      ══════════════════════════════════════════ */}
      <section className="py-10" aria-labelledby="reviews-heading">
        <div className="section-wrap">
          <div className="section-row">
            <div>
              <h2 id="reviews-heading" className="section-title">What Our Customers Say</h2>
              <p className="text-[#5c6472] text-xs mt-0.5">
                <span className="text-yellow-500 font-bold">{avgRating} ★</span> · {reviewCount.toLocaleString()} verified Google reviews
              </p>
            </div>
          </div>

          {/* Google Business strip */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-white border border-[#e2e6ed] rounded-2xl px-5 py-4 mb-5">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full border border-[#e2e6ed] flex items-center justify-center flex-shrink-0 bg-white">
                <svg viewBox="0 0 24 24" className="w-5 h-5" aria-hidden="true">
                  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <p className="font-bold text-[#1a1f2e] text-sm">Google Reviews</p>
                  <div className="flex items-center gap-0.5">
                    {[1,2,3,4,5].map(i => (
                      <svg key={i} className="w-3.5 h-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                      </svg>
                    ))}
                  </div>
                  <span className="text-[#1a1f2e] font-bold text-sm">{avgRating}</span>
                </div>
                <p className="text-[#5c6472] text-xs">{reviewCount.toLocaleString()} verified reviews · NCK Car Rental Dubai</p>
              </div>
            </div>
            <div className="flex items-center gap-2 flex-shrink-0">
              <a
                href="https://maps.app.goo.gl/wDcb1EAYCCm4f1XU9"
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs font-semibold text-brand border border-brand/30 bg-brand/5 px-4 py-2 rounded-xl hover:bg-brand hover:text-white transition-colors whitespace-nowrap"
              >
                View on Google →
              </a>
              <a
                href="https://maps.app.goo.gl/wDcb1EAYCCm4f1XU9"
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs font-semibold text-white bg-brand px-4 py-2 rounded-xl hover:bg-brand-dark transition-colors whitespace-nowrap"
              >
                Leave a Review ★
              </a>
            </div>
          </div>

          <div className="hscroll">
            {reviews.map(r => {
              const stars = Math.min(5, Math.max(1, r.rating ?? 5))
              return (
                <div key={r.id} className="review-card">
                  <div className="flex items-center gap-3 mb-3">
                    <div
                      className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0"
                      style={{ background: r.color ?? '#C8102E' }}
                    >
                      {r.name[0].toUpperCase()}
                    </div>
                    <div>
                      <div className="flex items-center gap-1.5">
                        <p className="font-semibold text-sm text-[#1a1f2e]">{r.name}</p>
                        {r.source === 'google' && (
                          <svg viewBox="0 0 24 24" className="w-3 h-3 flex-shrink-0" aria-label="Google review">
                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                          </svg>
                        )}
                      </div>
                      <div className="flex items-center gap-1">
                        {Array.from({ length: stars }, (_, i) => (
                          <span key={i} className="text-yellow-400 text-xs">★</span>
                        ))}
                        {r.relativeTime && (
                          <span className="text-[#5c6472] text-xs ml-1">{r.relativeTime}</span>
                        )}
                      </div>
                    </div>
                  </div>
                  <p className="review-card-text">{r.text}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          BOOK IN 60 SECONDS CTA
      ══════════════════════════════════════════ */}
      <section className="py-6 bg-[#f8f9fb]" aria-label="Book now">
        <div className="section-wrap">
          <div className="bg-navy-900 rounded-3xl p-8 flex flex-col sm:flex-row items-center justify-between gap-6 relative overflow-hidden">
            <div className="absolute right-0 top-0 w-64 h-64 bg-orange/10 rounded-full translate-x-1/3 -translate-y-1/3 pointer-events-none" />
            <div className="relative z-10">
              <h2 className="text-white font-black text-2xl mb-1">Book in 60 Seconds</h2>
              <p className="text-white/60 text-sm max-w-sm">
                Send us a WhatsApp with your dates and preferred car - we confirm, deliver, and you drive.
              </p>
            </div>
            <div className="flex gap-3 relative z-10 flex-shrink-0">
              <a href={`https://wa.me/${s.whatsapp1}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 bg-white text-navy-900 rounded-xl px-5 py-3 hover:bg-white/90 transition-all">
                <span className="text-xl">💬</span>
                <div><p className="text-xs text-gray-500 leading-none">Chat with us on</p><p className="text-sm font-bold">WhatsApp</p></div>
              </a>
              <a href={s.callUrl1} className="flex items-center gap-3 bg-white text-navy-900 rounded-xl px-5 py-3 hover:bg-white/90 transition-all">
                <span className="text-xl">📞</span>
                <div><p className="text-xs text-gray-500 leading-none">Call us at</p><p className="text-sm font-bold">{s.phone1}</p></div>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          POPULAR PRICING TABLE
      ══════════════════════════════════════════ */}
      <section className="py-10" aria-labelledby="pricing-heading">
        <div className="section-wrap">
          <div className="section-row mb-1">
            <div>
              <h2 id="pricing-heading" className="section-title">Popular Cars: Starting Prices</h2>
              <p className="text-[#5c6472] text-xs mt-0.5">Starting rates in AED per day.</p>
            </div>
            <Link href="/car-price-list" className="btn-ghost">Full price list →</Link>
          </div>
          <div className="overflow-x-auto rounded-2xl border border-[#e2e6ed]">
            <table className="w-full text-sm min-w-[520px]">
              <thead className="bg-[#f1f3f7]">
                <tr>
                  <th className="text-left px-4 py-3 text-[#5c6472] font-semibold text-xs uppercase tracking-wide">Model</th>
                  <th className="text-left px-4 py-3 text-[#5c6472] font-semibold text-xs uppercase tracking-wide hidden sm:table-cell">Type</th>
                  <th className="text-right px-4 py-3 text-[#5c6472] font-semibold text-xs uppercase tracking-wide">Daily</th>
                  <th className="text-right px-4 py-3 text-[#5c6472] font-semibold text-xs uppercase tracking-wide">Weekly</th>
                  <th className="text-left px-4 py-3 text-[#5c6472] font-semibold text-xs uppercase tracking-wide hidden md:table-cell">Book</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody>
                {PRICE_TABLE_CARS.map((car, i) => {
                  const daily  = car.priceDay!
                  const weekly = Math.round(daily * 6.5)
                  return (
                    <tr key={car.slug} className={`border-t border-[#e2e6ed] hover:bg-[#f8f9fb] transition-colors ${i % 2 === 0 ? "" : "bg-[#fafbfc]"}`}>
                      <td className="px-4 py-3">
                        <Link href={`/car/${car.slug}`} className="font-semibold text-[#1a1f2e] hover:text-brand text-xs">{car.title}</Link>
                        <p className="text-xs text-[#5c6472]">{car.brand}</p>
                      </td>
                      <td className="px-4 py-3 hidden sm:table-cell">
                        <span className="text-xs capitalize bg-[#f1f3f7] text-[#5c6472] px-2 py-0.5 rounded-full">{car.category}</span>
                      </td>
                      <td className="px-4 py-3 text-right font-black text-brand text-sm">AED {daily.toLocaleString()}</td>
                      <td className="px-4 py-3 text-right text-[#5c6472] text-xs">AED {weekly.toLocaleString()}</td>
                      <td className="px-4 py-3 hidden md:table-cell">
                        <a href={`https://wa.me/${s.whatsapp1}`} target="_blank" rel="noopener noreferrer" className="text-xs text-emerald-600 font-semibold hover:underline whitespace-nowrap">
                          WhatsApp for best price
                        </a>
                      </td>
                      <td className="px-4 py-3">
                        <Link href={`/car/${car.slug}`} className="text-xs font-semibold text-brand border border-brand/30 px-2.5 py-1 rounded-full hover:bg-brand hover:text-white transition-colors whitespace-nowrap">Book</Link>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          HOW IT WORKS
      ══════════════════════════════════════════ */}
      <section className="py-10 bg-[#f8f9fb]" aria-labelledby="steps-heading">
        <div className="section-wrap">
          <h2 id="steps-heading" className="section-title text-center mb-8">How to Rent a Car in Dubai</h2>
          <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 items-start">
            {[
              ["1", "Browse the fleet",   `${allCars.length}+ cars, filter by type or brand`],
              ["2", "Message us",         "WhatsApp or call - we respond in minutes"],
              ["3", "We deliver",         "Free delivery anywhere in Dubai"],
              ["4", "Enjoy your drive",   "24/7 support for the full rental period"],
            ].map(([num, title, desc], i) => (
              <div key={num} className="flex flex-col items-center text-center relative">
                <div className="w-10 h-10 rounded-full bg-brand text-white font-black flex items-center justify-center text-sm mb-3 flex-shrink-0">{num}</div>
                {i < 3 && <div className="absolute top-5 left-[60%] right-[-40%] h-px bg-brand/25 hidden sm:block" />}
                <p className="font-bold text-[#1a1f2e] text-sm mb-1">{title}</p>
                <p className="text-[#5c6472] text-xs leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          FAQ
      ══════════════════════════════════════════ */}
      <section className="py-10 bg-[#f8f9fb]" aria-labelledby="faq-heading">
        <div className="section-wrap">
          <div className="max-w-3xl mx-auto">
            <h2 id="faq-heading" className="section-title mb-1">Frequently Asked Questions</h2>
            <p className="text-[#5c6472] text-xs mb-6">
              Everything you need to know about renting a car in Dubai.{" "}
              <Link href="/car-price-list" className="text-brand hover:underline">See full price list →</Link>
            </p>
            <div className="bg-white rounded-2xl border border-[#e2e6ed] overflow-hidden divide-y divide-[#e2e6ed]">
              {FAQ_SCHEMA.map(({ q, a }) => (
                <details key={q} className="faq-item px-5">
                  <summary>
                    {q}
                    <svg className="w-4 h-4 text-[#5c6472] flex-shrink-0 transition-transform details-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </summary>
                  <p className="faq-body">{a}</p>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          SEO CONTENT - About NCK
      ══════════════════════════════════════════ */}
      <section className="py-10" aria-labelledby="about-heading">
        <div className="section-wrap">
          <div className="max-w-3xl">
            <h2 id="about-heading" className="section-title mb-4">About NCK Car Rental Dubai</h2>
            <div className="prose prose-sm max-w-none text-[#5c6472] space-y-4">
              <p>
                Looking for <Link href={`/cartype/${CARTYPE_SLUGS.luxury}`} className="text-brand hover:underline">luxury car rental in Dubai</Link>? NCK operates one of the city&apos;s largest premium fleets, covering Rolls Royce Cullinan, Bentley Bentayga, Mercedes S-Class, and more. Most cars are available for same-day delivery anywhere in Dubai, from Dubai Marina to Palm Jumeirah.
              </p>
              <p>
                NCK Car Rental has been operating in Dubai since 2018. The fleet covers over {allCars.length} models including{" "}
                <Link href={`/cartype/${CARTYPE_SLUGS.luxury}`} className="text-brand hover:underline">luxury cars</Link>,{" "}
                <Link href={`/cartype/${CARTYPE_SLUGS.sports}`} className="text-brand hover:underline">sports cars</Link>,{" "}
                <Link href={`/cartype/${CARTYPE_SLUGS.suv}`} className="text-brand hover:underline">SUVs</Link>, convertibles, and sedans from brands
                including Mercedes-Benz, BMW, Ferrari, Lamborghini, and Rolls Royce. Cars are available across Dubai, Abu Dhabi, Sharjah and Ras Al Khaimah.
              </p>
              <p>
                Every rental includes free delivery to your door and basic insurance. There is no counter to queue at. Book on WhatsApp,
                confirm the dates, and the car arrives clean and fuelled. Compare daily and weekly rates across the full{" "}
                <Link href="/all-cars" className="text-brand hover:underline">car fleet</Link>.
              </p>
              <p>
                Browse by brand:{" "}
                {[
                  ["Mercedes", BRAND_SLUGS["Mercedes"]],
                  ["BMW",      BRAND_SLUGS["BMW"]],
                  ["Lamborghini", BRAND_SLUGS["Lamborghini"]],
                  ["Porsche",  BRAND_SLUGS["Porsche"]],
                  ["Range Rover", BRAND_SLUGS["Range Rover"]],
                  ["Rolls Royce", BRAND_SLUGS["Rolls Royce"]],
                ].map(([brand, slug], i, arr) => (
                  <span key={slug}>
                    <Link href={`/carbrand/${slug}`} className="text-brand hover:underline">{brand}</Link>
                    {i < arr.length - 1 ? ", " : "."}
                  </span>
                ))}
                {" "}See the full{" "}
                <Link href="/car-price-list" className="text-brand hover:underline">car rental price list</Link>.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          INTERNAL LINKS - Locations
      ══════════════════════════════════════════ */}
      <section className="py-8 bg-[#f8f9fb] border-t border-[#e2e6ed]" aria-label="Popular links">
        <div className="section-wrap">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
            <div>
              <h3 className="text-xs font-bold text-[#5c6472] uppercase tracking-widest mb-3">Car Types</h3>
              <ul className="space-y-1.5">
                {[
                  ["Luxury Car Rental Dubai",      `/cartype/${CARTYPE_SLUGS.luxury}`],
                  ["Sports Car Rental Dubai",      `/cartype/${CARTYPE_SLUGS.sports}`],
                  ["SUV Rental Dubai",             `/cartype/${CARTYPE_SLUGS.suv}`],
                  ["Convertible Rental Dubai",     `/cartype/${CARTYPE_SLUGS.convertible}`],
                  ["Coupe Rental Dubai",           `/cartype/${CARTYPE_SLUGS.coupe}`],
                  ["Sedan Rental Dubai",           `/cartype/${CARTYPE_SLUGS.sedan}`],
                ].map(([label, href]) => (
                  <li key={href}><Link href={href} className="text-[#1a1f2e] text-xs hover:text-brand transition-colors">{label}</Link></li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-xs font-bold text-[#5c6472] uppercase tracking-widest mb-3">Top Brands</h3>
              <ul className="space-y-1.5">
                {[
                  ["Mercedes Benz Rental Dubai",    BRAND_SLUGS["Mercedes"]],
                  ["BMW Rental Dubai",              BRAND_SLUGS["BMW"]],
                  ["Lamborghini Rental Dubai",      BRAND_SLUGS["Lamborghini"]],
                  ["Porsche Rental Dubai",          BRAND_SLUGS["Porsche"]],
                  ["Rolls Royce Rental Dubai",      BRAND_SLUGS["Rolls Royce"]],
                  ["Range Rover Rental Dubai",      BRAND_SLUGS["Range Rover"]],
                ].map(([label, slug]) => (
                  <li key={slug}><Link href={`/carbrand/${slug}`} className="text-[#1a1f2e] text-xs hover:text-brand transition-colors">{label}</Link></li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-xs font-bold text-[#5c6472] uppercase tracking-widest mb-3">Locations</h3>
              <ul className="space-y-1.5">
                {locations.map(loc => (
                  <li key={loc.slug}>
                    <Link href={`/locations/${loc.slug}`} className="text-[#1a1f2e] text-xs hover:text-brand transition-colors">
                      Car Rental {loc.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}