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, getMediaUrl, type PayloadCar, type PayloadBrand, type PopulatedMedia } from "@/lib/payload-helpers"
import { SITE } from "@/lib/seo"
import { getSiteStats } from "@/lib/stats"
import { getSiteSettings } from "@/lib/site-settings"

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: 'brands', limit: 100, pagination: false })
  return (docs as unknown as PayloadBrand[]).map(b => ({ slug: b.urlSlug }))
}

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

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

  const title = brand.seoTitle ?? `Rent ${brand.name} in Dubai | NCK Car Rental`
  const description = brand.seoDesc
    ?? `Rent ${brand.name} cars in Dubai. ${count} 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}/carbrand/${slug}/` },
    robots:     { index: true, follow: true },
    openGraph: {
      title,
      description,
      url:      `${SITE.domain}/carbrand/${slug}/`,
      siteName: "NCK Car Rental",
      locale:   "en_AE",
      images:   [{ url: ogImageUrl, width: 1200, height: 630, alt: `${brand.name} rental Dubai` }],
    },
    twitter: {
      card:        "summary_large_image",
      title,
      description,
      images:      [ogImageUrl],
    },
  }
}

function getLogoUrl(brand: PayloadBrand): string | null {
  if (!brand.logo || typeof brand.logo === 'number') return null
  return getMediaUrl(brand.logo as PopulatedMedia) ?? null
}

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

  const brandResult = await payload.find({
    collection: 'brands', where: { urlSlug: { equals: slug } }, limit: 1, depth: 1,
  })
  const brand = brandResult.docs[0] as unknown as PayloadBrand | undefined
  if (!brand) notFound()

  const [carsResult, allBrandsResult, siteStats, s] = await Promise.all([
    payload.find({
      collection: 'cars',
      where: { brand: { equals: brand.id } },
      depth: 1,
      limit: 200,
      pagination: false,
    }),
    payload.find({ collection: 'brands', limit: 100, pagination: false, depth: 1 }),
    getSiteStats(),
    getSiteSettings(),
  ])

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

  const allBrands = allBrandsResult.docs as unknown as PayloadBrand[]
  const otherBrands = allBrands.filter(b => b.urlSlug !== slug)

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

  const logoUrl = getLogoUrl(brand)

  const whatsappUrl = `https://wa.me/${s.whatsapp1}?text=${encodeURIComponent(`Hi, I'd like to rent a ${brand.name} 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: `${brand.name} Rental Dubai` },
    ],
  }

  const itemListLd = {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    name: `${brand.name} Rental Dubai`,
    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 faqLd = brand.faqs?.length
    ? {
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        mainEntity: brand.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) }} />
      {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">{brand.name} Rental Dubai</span>
          </nav>
        </div>
      </div>

      {/* ── HERO - centered dark, structurally different from cartype navy hero ── */}
      <div className="bg-[#111827] text-white py-16">
        <div className="section-wrap">
          <div className="flex flex-col items-center text-center max-w-2xl mx-auto">

            {/* Brand logo or letter avatar */}
            {logoUrl ? (
              <div className="w-20 h-20 bg-white/10 rounded-2xl flex items-center justify-center mb-6 p-3">
                <Image
                  src={logoUrl}
                  alt={brand.name}
                  width={80}
                  height={80}
                  className="object-contain w-full h-full filter brightness-0 invert"
                />
              </div>
            ) : (
              <div className="w-20 h-20 bg-white/10 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl font-black text-white">{brand.name[0]}</span>
              </div>
            )}

            {/* Models tag */}
            <div className="inline-flex items-center gap-1.5 bg-white/10 rounded-full px-3 py-1 text-xs font-semibold text-white/70 mb-4">
              <span>🚗</span>
              <span>{cars.length} models available</span>
            </div>

            <h1 className="text-4xl sm:text-5xl font-black mb-4">{brand.name} Rental Dubai</h1>

            {brand.heroSubtitle && (
              <p className="text-white/60 text-lg leading-relaxed mb-6">{brand.heroSubtitle}</p>
            )}

            {/* Stats row */}
            <div className="flex items-center gap-6 text-sm mb-8 flex-wrap justify-center">
              <div className="flex items-center gap-1.5">
                <span className="text-2xl font-black">{cars.length}</span>
                <span className="text-white/50">models</span>
              </div>
              <div className="w-px h-6 bg-white/20" />
              {minPrice && (
                <>
                  <div className="flex items-center gap-1.5">
                    <span className="text-2xl font-black text-[#3b7dd9]">AED {minPrice.toLocaleString()}</span>
                    <span className="text-white/50">/day</span>
                  </div>
                  <div className="w-px h-6 bg-white/20" />
                </>
              )}
              <div className="flex items-center gap-1.5">
                <span className="text-yellow-400">★</span>
                <span className="text-2xl font-black">{siteStats.rating}</span>
                <span className="text-white/50">{siteStats.reviews.toLocaleString()} reviews</span>
              </div>
            </div>

            {/* CTAs */}
            <div className="flex gap-3 justify-center">
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white font-bold px-6 py-3 rounded-xl transition-colors text-sm"
              >
                <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 font-bold px-6 py-3 rounded-xl transition-colors text-sm"
              >
                <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>

      {/* ── MODEL RANGE ───────────────────────────────────────────────────────── */}
      {brand.modelRange && brand.modelRange.length > 0 && (
        <div className="bg-[#f8f9fb] py-12">
          <div className="section-wrap">
            <div className="text-center mb-8">
              <p className="text-xs font-bold uppercase tracking-widest text-brand mb-2">Lineup</p>
              <h2 className="text-2xl font-black text-[#1a1f2e]">The {brand.name} Range at NCK</h2>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
              {brand.modelRange.map((item, i) => (
                <div key={item.id ?? i} className="bg-white rounded-2xl border border-[#e2e6ed] p-5 relative">
                  <span className="absolute top-4 right-4 text-xs font-black text-[#adb7c7]">0{i + 1}</span>
                  <p className="font-bold text-[#1a1f2e] mb-2">{item.tier}</p>
                  <p className="text-[#5c6472] text-xs leading-relaxed">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ── INTRO ─────────────────────────────────────────────────────────────── */}
      {brand.intro && (
        <div className="bg-white py-12">
          <div className="section-wrap">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-black text-[#1a1f2e] mb-6">Renting {brand.name} in Dubai</h2>
              <div className="space-y-4 text-[#5c6472] text-sm leading-relaxed">
                {brand.intro.split('\n\n').filter(p => p.trim()).map((para, i) => (
                  <p key={i}>{para.trim()}</p>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── CAR GRID ──────────────────────────────────────────────────────────── */}
      <div className="bg-[#f8f9fb] py-12">
        <div className="section-wrap">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-black text-[#1a1f2e]">{brand.name} Available Now</h2>
            <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} 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>

      {/* ── DUBAI CONTEXT - full-width cinematic dark section ─────────────────── */}
      {brand.dubaiContext && (
        <div className="bg-[#111827] text-white py-16">
          <div className="section-wrap">
            <div className="lg:grid lg:grid-cols-5 lg:gap-16 lg:items-center">
              {/* Left 3/5 */}
              <div className="lg:col-span-3 mb-10 lg:mb-0">
                <p className="text-xs font-bold uppercase tracking-widest text-[#3b7dd9] mb-3">In Dubai</p>
                <h2 className="text-3xl font-black mb-5">{brand.name} on Dubai Roads</h2>
                <div className="space-y-3 text-white/70 text-base leading-relaxed">
                  {brand.dubaiContext.split('\n\n').filter(p => p.trim()).map((para, i) => (
                    <p key={i}>{para.trim()}</p>
                  ))}
                </div>
              </div>
              {/* Right 2/5 - stat badges */}
              <div className="hidden lg:flex lg:col-span-2 flex-col gap-4">
                {([
                  ['🚀', `${cars.length} ${brand.name} models`, 'ready for delivery'],
                  ['📍', 'Free delivery', 'anywhere in Dubai'],
                  ['🕐', '24/7 support', 'WhatsApp or call'],
                ] as [string, string, string][]).map(([icon, title, sub]) => (
                  <div key={title} className="bg-white/5 border border-white/10 rounded-2xl p-5 flex items-center gap-4">
                    <span className="text-2xl">{icon}</span>
                    <div>
                      <p className="font-bold text-white text-sm">{title}</p>
                      <p className="text-white/50 text-xs">{sub}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── HIGHLIGHTS - 4-up horizontal strip, accent bar not number ────────── */}
      {brand.highlights && brand.highlights.length > 0 && (
        <div className="bg-white py-12">
          <div className="section-wrap">
            <h2 className="text-2xl font-black text-[#1a1f2e] mb-6">Why Rent {brand.name} from NCK</h2>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              {brand.highlights.map((item, i) => (
                <div key={item.id ?? i} className="bg-[#f8f9fb] rounded-2xl border border-[#e2e6ed] p-5">
                  {/* Accent bar instead of number */}
                  <div className="w-8 h-1 bg-brand rounded-full mb-4" />
                  <p className="font-bold text-[#1a1f2e] text-sm mb-2">{item.title}</p>
                  <p className="text-[#5c6472] text-xs leading-relaxed">{item.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ── WHO RENTS + REQUIREMENTS - two-col section ───────────────────────── */}
      {(brand.whoRents || brand.requirements) && (
        <div className="bg-[#f8f9fb] py-12">
          <div className="section-wrap">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
              {brand.whoRents && (
                <div>
                  <h2 className="text-xl font-black text-[#1a1f2e] mb-4">Who Rents {brand.name} in Dubai</h2>
                  <div className="space-y-3 text-[#5c6472] text-sm leading-relaxed">
                    {brand.whoRents.split('\n\n').filter(p => p.trim()).map((para, i) => (
                      <p key={i}>{para.trim()}</p>
                    ))}
                  </div>
                </div>
              )}
              {brand.requirements && (
                <div>
                  <h2 className="text-xl font-black text-[#1a1f2e] mb-4">Rental Requirements</h2>
                  <ul className="space-y-3">
                    {brand.requirements.split('\n').filter(r => r.trim()).map((req, i) => (
                      <li key={i} className="flex items-start gap-3">
                        <span className="text-emerald-500 font-bold text-sm flex-shrink-0 mt-0.5">✓</span>
                        <span className="text-[#5c6472] text-sm leading-snug">{req.trim()}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── INLINE CTA STRIP - brand page exclusive, no cartype equivalent ───── */}
      <div className="bg-brand py-12">
        <div className="section-wrap text-center">
          <h2 className="text-2xl font-black text-white mb-2">Ready to Book a {brand.name} in Dubai?</h2>
          <p className="text-white/70 text-sm mb-6">Free delivery anywhere in Dubai. Book in 60 seconds on WhatsApp.</p>
          <div className="flex gap-3 justify-center">
            <a
              href={whatsappUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 bg-white text-brand font-bold px-6 py-3 rounded-xl transition-colors text-sm hover:bg-white/90"
            >
              <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 font-bold px-6 py-3 rounded-xl transition-colors text-sm"
            >
              <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>

      {/* ── FAQ - TWO COLUMN (cartype uses single column) ─────────────────────── */}
      {brand.faqs && brand.faqs.length > 0 && (
        <div className="bg-white py-12">
          <div className="section-wrap">
            <h2 className="text-2xl font-black text-[#1a1f2e] mb-6">Frequently Asked Questions</h2>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
              {brand.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>
          </div>
        </div>
      )}

      {/* ── SEO TEXT ──────────────────────────────────────────────────────────── */}
      {brand.seoText && (
        <div className="bg-[#f8f9fb] py-10">
          <div className="section-wrap max-w-3xl space-y-3">
            {brand.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>
        </div>
      )}

      {/* ── OTHER BRANDS ──────────────────────────────────────────────────────── */}
      {otherBrands.length > 0 && (
        <div className="bg-white py-8">
          <div className="section-wrap">
            <h3 className="text-sm font-bold text-[#1a1f2e] mb-4">Other Brands at NCK</h3>
            <div className="flex flex-wrap gap-2">
              {otherBrands.map(b => {
                const bLogoUrl = getLogoUrl(b)
                return (
                  <Link
                    key={b.urlSlug}
                    href={`/carbrand/${b.urlSlug}`}
                    className="flex items-center gap-2 border border-[#e2e6ed] rounded-full px-4 py-2 text-sm text-[#5c6472] hover:border-brand hover:text-brand transition-colors"
                  >
                    {bLogoUrl && (
                      <Image
                        src={bLogoUrl}
                        alt={b.name}
                        width={16}
                        height={16}
                        className="object-contain h-4 w-auto"
                      />
                    )}
                    {b.name}
                  </Link>
                )
              })}
            </div>
          </div>
        </div>
      )}
    </>
  )
}