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 } from "@/lib/payload-helpers";
import { SITE } from "@/lib/seo";
import { getSiteSettings } from "@/lib/site-settings";
import CarImageGallery from "@/components/CarImageGallery";
import {
  generateDescription, generateFAQs, getWhyRent,
  RENTAL_INCLUSIONS, DUBAI_AREAS,
} from "@/lib/car-content";

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

export const revalidate = 3600

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const payload = await getPayload({ config })
  const { docs } = await payload.find({ collection: 'cars', where: { slug: { equals: slug } }, limit: 1 })
  const doc = docs[0] as unknown as PayloadCar | undefined
  if (!doc) return { title: "Car not found" }
  const car = normalizeCar(doc)
  const price = car.priceDay ? ` | AED ${car.priceDay.toLocaleString()}/day` : ''

  const title = car.seoTitle || `Rent ${car.title} in Dubai${price} | NCK Car Rental`
  const desc  = car.seoDesc  ||
    `Rent the ${car.title} in Dubai from AED ${car.priceDay?.toLocaleString()}/day. ` +
    `Free delivery, insurance included${car.noDeposit ? ', no deposit required' : ''}. ` +
    `Book via WhatsApp in 60 seconds at NCK Car Rental.`

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

export default async function CarPage({ params }: Props) {
  const { slug } = await params
  const payload = await getPayload({ config })

  const [carResult, allCarsResult, reviewsResult, s] = await Promise.all([
    payload.find({ collection: 'cars', where: { slug: { equals: slug } }, depth: 1, limit: 1 }),
    payload.find({ collection: 'cars', depth: 1, limit: 500, pagination: false }),
    payload.find({ collection: 'reviews', limit: 500, pagination: false }),
    getSiteSettings(),
  ])

  const doc = carResult.docs[0] as unknown as PayloadCar | undefined
  if (!doc) notFound()
  const car = normalizeCar(doc)

  const waMsg    = encodeURIComponent(`Hi, I'm interested in renting the ${car.title}. Can you confirm availability and pricing?`)
  const WHATSAPP = `https://wa.me/${s.whatsapp1}?text=${waMsg}`
  const CALL     = s.callUrl1

  const related = (allCarsResult.docs as unknown as PayloadCar[])
    .map(normalizeCar)
    .filter(c => c.brand === car.brand && c.slug !== slug)
    .slice(0, 4)

  const sameType = (allCarsResult.docs as unknown as PayloadCar[])
    .map(normalizeCar)
    .filter(c => c.category === car.category && c.slug !== slug && !related.find(r => r.slug === c.slug))
    .slice(0, 4)

  const allReviews = reviewsResult.docs as unknown as { rating?: number }[]
  const reviewCount = reviewsResult.totalDocs
  const rated = allReviews.filter(r => r.rating)
  const avgRating = rated.length
    ? Math.round((rated.reduce((s, r) => s + (r.rating ?? 0), 0) / rated.length) * 10) / 10
    : 5


  const description = car.description || generateDescription(car)
  const faqs        = car.faqs.length > 0 ? car.faqs : generateFAQs(car)
  const whyRent     = getWhyRent(car)

  const nextMonth = new Date()
  nextMonth.setMonth(nextMonth.getMonth() + 1)

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

  const productLd = {
    "@context": "https://schema.org",
    "@type": "Vehicle",
    name: car.title,
    description,
    image: car.images.length > 0 ? car.images : car.image,
    url: `${SITE.domain}/car/${slug}/`,
    brand: { "@type": "Brand", name: car.brand },
    vehicleTransmission: car.transmission,
    seatingCapacity: car.passengers,
    vehicleEngine: {
      "@type": "EngineSpecification",
      engineType: car.transmission === "Automatic" ? "Automatic Transmission" : "Manual Transmission",
    },
    itemCondition: "https://schema.org/NewCondition",
    aggregateRating: {
      "@type": "AggregateRating",
      ratingValue: avgRating,
      reviewCount,
      bestRating: 5,
    },
    offers: car.priceDay ? {
      "@type": "Offer",
      price: car.priceDay,
      priceCurrency: "AED",
      priceValidUntil: nextMonth.toISOString().split("T")[0],
      availability: "https://schema.org/InStock",
      seller: { "@type": "AutoRental", name: SITE.name, url: SITE.domain },
    } : undefined,
  }

  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: car.brand,  item: `${SITE.domain}/carbrand/${car.brandSlug}/` },
      { "@type": "ListItem", position: 4, name: car.title },
    ],
  }

  const faqLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map(({ q, a }) => ({
      "@type": "Question",
      name: q,
      acceptedAnswer: { "@type": "Answer", text: a },
    })),
  }

  const catLabel = car.category.charAt(0).toUpperCase() + car.category.slice(1)

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

      {/* ── Breadcrumb ── */}
      <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>
            {car.brandSlug && (
              <>
                <Link href={`/carbrand/${car.brandSlug}`} className="hover:text-brand">{car.brand}</Link>
                <span>/</span>
              </>
            )}
            <span className="text-[#1a1f2e] font-medium">{car.title}</span>
          </nav>
        </div>
      </div>

      <div className="section-wrap py-8">
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">

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

            {/* Gallery */}
            <CarImageGallery images={car.images} title={car.title} noDeposit={car.noDeposit} />

            {/* Specs strip */}
            <div className="grid grid-cols-4 gap-3">
              {[
                ["👤", `${car.passengers} Seats`],
                ["🚪", `${car.doors} Doors`],
                ["🧳", `${car.bags} Bags`],
                ["⚙️", car.transmission],
              ].map(([icon, label]) => (
                <div key={label} className="bg-[#f8f9fb] rounded-xl p-3 text-center border border-[#e2e6ed]">
                  <div className="text-xl mb-1">{icon}</div>
                  <div className="text-xs font-semibold text-[#1a1f2e]">{label}</div>
                </div>
              ))}
            </div>

            {/* Features */}
            {car.features.length > 0 && (
              <div className="bg-[#f8f9fb] rounded-2xl p-5 border border-[#e2e6ed]">
                <h3 className="font-bold text-[#1a1f2e] text-sm mb-3">Included Features</h3>
                <div className="flex flex-wrap gap-2">
                  {car.features.map(f => (
                    <span key={f} className="bg-white border border-[#e2e6ed] text-[#5c6472] text-xs px-3 py-1.5 rounded-full">
                      ✓ {f}
                    </span>
                  ))}
                </div>
              </div>
            )}

            {/* ── Description ── */}
            <section aria-label="About this car">
              <h2 className="text-xl font-black text-[#1a1f2e] mb-3">
                Rent {car.title} in Dubai
              </h2>
              <div className="text-[#5c6472] text-sm leading-relaxed space-y-3">
                {description.split('\n\n').map((para, i) => (
                  <p key={i}>{para}</p>
                ))}
              </div>
            </section>

            {/* ── What's Included ── */}
            <section aria-label="What's included">
              <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                What&apos;s Included in Your {car.title} Rental
              </h2>
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {RENTAL_INCLUSIONS.map(item => (
                  <div key={item.label} className="bg-[#f8f9fb] border border-[#e2e6ed] rounded-xl p-4 flex gap-3 items-start">
                    <span className="text-xl flex-shrink-0">{item.icon}</span>
                    <div>
                      <p className="font-semibold text-[#1a1f2e] text-xs mb-0.5">{item.label}</p>
                      <p className="text-[#5c6472] text-xs leading-snug">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* ── Why rent this car ── */}
            <section aria-label="Why choose this car">
              <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                Why Choose the {car.title} for Your Dubai Trip
              </h2>
              <div className="space-y-3">
                {whyRent.map(([title, desc]) => (
                  <div key={title} className="flex gap-3 items-start">
                    <div className="w-5 h-5 rounded-full bg-brand/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <svg className="w-3 h-3 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <div>
                      <p className="font-semibold text-[#1a1f2e] text-sm">{title}</p>
                      <p className="text-[#5c6472] text-xs leading-relaxed">{desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* ── Delivery areas ── */}
            <section aria-label="Delivery areas">
              <h2 className="text-xl font-black text-[#1a1f2e] mb-2">
                {car.title} Delivery Across Dubai
              </h2>
              <p className="text-[#5c6472] text-sm mb-4">
                NCK delivers the {car.title} free of charge to any location in Dubai.
                Popular delivery areas include:
              </p>
              <div className="flex flex-wrap gap-2">
                {DUBAI_AREAS.map(area => (
                  <span key={area} className="bg-white border border-[#e2e6ed] text-[#5c6472] text-xs px-3 py-1.5 rounded-full">
                    📍 {area}
                  </span>
                ))}
              </div>
              <p className="text-[#5c6472] text-xs mt-3">
                Not on the list? We deliver anywhere in Dubai. Just ask.
              </p>
            </section>

            {/* ── FAQ ── */}
            <section aria-label="Frequently asked questions">
              <h2 className="text-xl font-black text-[#1a1f2e] mb-4">
                Frequently Asked Questions: {car.title} Rental Dubai
              </h2>
              <div className="space-y-3">
                {faqs.map(({ q, a }) => (
                  <details key={q} className="group bg-[#f8f9fb] border border-[#e2e6ed] rounded-xl overflow-hidden">
                    <summary className="flex justify-between items-center p-4 cursor-pointer font-semibold text-sm text-[#1a1f2e] list-none">
                      {q}
                      <svg className="w-4 h-4 text-[#5c6472] flex-shrink-0 ml-3 transition-transform group-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="px-4 pb-4 text-[#5c6472] text-sm leading-relaxed border-t border-[#e2e6ed] pt-3">{a}</p>
                  </details>
                ))}
              </div>
            </section>

          </div>

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

              {/* ── Booking card ── */}
              <div className="bg-white rounded-2xl border border-[#e2e6ed] p-6 shadow-card">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs font-semibold text-[#5c6472] uppercase tracking-wide">{catLabel}</span>
                  {car.brandSlug && (
                    <Link href={`/carbrand/${car.brandSlug}`} className="text-brand text-xs font-semibold hover:underline">
                      {car.brand} →
                    </Link>
                  )}
                </div>
                <h1 className="text-xl font-black text-[#1a1f2e] leading-tight mb-4">{car.title}</h1>

                <div className="bg-[#f8f9fb] rounded-xl p-4 mb-4">
                  <p className="text-xs text-[#5c6472] mb-1">Daily rental price</p>
                  <div className="flex items-end gap-2">
                    <span className="text-3xl font-black text-brand">AED {car.priceDay?.toLocaleString()}</span>
                    <span className="text-[#5c6472] text-sm mb-1">/day</span>
                  </div>
                  {car.priceOrig && car.priceOrig > (car.priceDay ?? 0) && (
                    <p className="text-xs text-[#5c6472] line-through mt-0.5">AED {car.priceOrig.toLocaleString()}</p>
                  )}
                  {car.noDeposit && (
                    <div className="flex items-center gap-1.5 mt-2">
                      <span className="text-emerald-500">✓</span>
                      <span className="text-emerald-700 text-xs font-semibold">No deposit required</span>
                    </div>
                  )}
                </div>

                <div className="space-y-2.5">
                  <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" className="btn-orange w-full justify-center text-sm py-3">
                    <svg className="w-4 h-4" 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={CALL} className="btn-outline w-full justify-center text-sm py-3">
                    <svg className="w-4 h-4" 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>
                    Book by Call
                  </a>
                </div>
                <p className="text-center text-[#5c6472] text-xs mt-4">Free delivery across Dubai · 24/7 support</p>
              </div>

              {/* ── Rental process ── */}
              <div className="bg-white rounded-2xl border border-[#e2e6ed] p-5">
                <h3 className="font-bold text-[#1a1f2e] text-sm mb-4">How to Rent in Dubai</h3>
                <div className="space-y-3">
                  {[
                    ["1", "Choose your dates",       "Tell us when you need the car and for how long."],
                    ["2", "Book via WhatsApp",        "Send us a message. We confirm within minutes."],
                    ["3", "We deliver to your door",  "Clean, fuelled, and ready when it arrives."],
                  ].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">{desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* ── Quick specs ── */}
              <div className="bg-[#f8f9fb] rounded-2xl border border-[#e2e6ed] p-4">
                <h3 className="font-bold text-[#1a1f2e] text-xs mb-3 uppercase tracking-wide">Vehicle Details</h3>
                <div className="space-y-2">
                  {[
                    ["Category",     catLabel],
                    ["Brand",        car.brand],
                    ["Transmission", car.transmission],
                    ["Passengers",   `${car.passengers} seats`],
                    ["Luggage",      `${car.bags} bags`],
                    ["Doors",        `${car.doors} doors`],
                  ].map(([k, v]) => (
                    <div key={k} className="flex justify-between border-b border-[#e2e6ed] pb-2 last:border-0 last:pb-0">
                      <span className="text-[#5c6472] text-xs">{k}</span>
                      <span className="font-semibold text-[#1a1f2e] text-xs">{v}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* ── Browse more links ── */}
              <div className="bg-[#f8f9fb] rounded-2xl border border-[#e2e6ed] p-4 space-y-2">
                <h3 className="font-bold text-[#1a1f2e] text-xs mb-3 uppercase tracking-wide">Browse More</h3>
                {car.brandSlug && (
                  <Link href={`/carbrand/${car.brandSlug}`} className="flex items-center justify-between text-xs text-brand font-semibold hover:underline py-1">
                    All {car.brand} rentals in Dubai →
                  </Link>
                )}
                {car.carTypeUrlSlug && (
                  <Link href={`/cartype/${car.carTypeUrlSlug}`} className="flex items-center justify-between text-xs text-brand font-semibold hover:underline py-1">
                    All {catLabel} cars in Dubai →
                  </Link>
                )}
                <Link href="/all-cars" className="flex items-center justify-between text-xs text-brand font-semibold hover:underline py-1">
                  Browse full fleet →
                </Link>
              </div>

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

        {/* ── Related: same brand ── */}
        {related.length > 0 && (
          <section className="mt-14" aria-labelledby="related-brand">
            <div className="flex items-center justify-between mb-5">
              <h2 id="related-brand" className="section-title">More {car.brand} Rentals in Dubai</h2>
              {car.brandSlug && (
                <Link href={`/carbrand/${car.brandSlug}`} className="btn-ghost text-xs">See all →</Link>
              )}
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
              {related.map(rc => (
                <Link key={rc.slug} href={`/car/${rc.slug}`} className="car-card flex flex-col">
                  <div className="relative bg-[#f1f3f7] aspect-[4/3]">
                    {rc.image && (
                      <Image src={rc.image} alt={`${rc.title} rental Dubai`} fill className="object-cover" sizes="(max-width: 640px) 50vw, 25vw" />
                    )}
                  </div>
                  <div className="p-3">
                    <p className="font-semibold text-[#1a1f2e] text-xs leading-tight mb-1">{rc.title}</p>
                    <p className="text-brand font-bold text-sm">
                      AED {rc.priceDay?.toLocaleString()}<span className="text-[#5c6472] font-normal text-xs">/day</span>
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        )}

        {/* ── Related: same type ── */}
        {sameType.length > 0 && (
          <section className="mt-10" aria-labelledby="related-type">
            <div className="flex items-center justify-between mb-5">
              <h2 id="related-type" className="section-title">More {catLabel} Cars for Rent in Dubai</h2>
              {car.carTypeUrlSlug && (
                <Link href={`/cartype/${car.carTypeUrlSlug}`} className="btn-ghost text-xs">See all →</Link>
              )}
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
              {sameType.map(rc => (
                <Link key={rc.slug} href={`/car/${rc.slug}`} className="car-card flex flex-col">
                  <div className="relative bg-[#f1f3f7] aspect-[4/3]">
                    {rc.image && (
                      <Image src={rc.image} alt={`${rc.title} rental Dubai`} fill className="object-cover" sizes="(max-width: 640px) 50vw, 25vw" />
                    )}
                  </div>
                  <div className="p-3">
                    <p className="font-semibold text-[#1a1f2e] text-xs leading-tight mb-1">{rc.title}</p>
                    <p className="text-brand font-bold text-sm">
                      AED {rc.priceDay?.toLocaleString()}<span className="text-[#5c6472] font-normal text-xs">/day</span>
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        )}

      </div>

      {/* ── Mobile sticky booking bar ── */}
      <div className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-[#e2e6ed] px-4 py-3 flex items-center gap-3 shadow-[0_-4px_16px_rgba(0,0,0,0.08)]">
        <div className="flex-1 min-w-0">
          <p className="text-xs text-[#5c6472] leading-none mb-0.5 truncate">{car.title}</p>
          <p className="font-black text-brand text-lg leading-none">AED {car.priceDay?.toLocaleString()}<span className="text-[#5c6472] font-normal text-xs">/day</span></p>
        </div>
        <a href={CALL} className="flex items-center gap-1.5 border border-[#e2e6ed] text-[#1a1f2e] font-semibold text-sm px-4 py-2.5 rounded-xl hover:bg-[#f8f9fb] transition-colors flex-shrink-0">
          <svg className="w-4 h-4" 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
        </a>
        <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5 bg-[#25d366] hover:bg-[#1ebe5d] text-white font-bold text-sm px-5 py-2.5 rounded-xl transition-colors flex-shrink-0">
          <svg className="w-4 h-4" 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>
      </div>
    </>
  )
}