<script setup>
import {
  AlertTriangle,
  ArrowRight,
  Building,
  Camera,
  CarFront,
  CheckCircle2,
  Clock,
  Clock4,
  CreditCard,
  AlertCircle,
  Snowflake,
  Map,
  MapPin,
  Mountain,
  MessageCircle,
  Navigation,
  Phone,
  Plane,
  Crown,
  ShieldEllipsis,
  ShieldAlert,
  Sun,
  Users,
} from "lucide-vue-next";
import { normalizeCityRentalHref } from "~/components/city-rental/link-utils";

const props = defineProps({
  seoBlocks: {
    type: Object,
    required: true,
  },
  searchUrl: {
    type: String,
    default: "",
  },
});

const seoBlocks = computed(() => props.seoBlocks || {});
const searchUrl = computed(() => normalizeCityRentalHref(props.searchUrl));
const airportDarkCtaUrl = computed(() =>
  normalizeCityRentalHref(
    seoBlocks.value.airport?.ctas?.find((item) => item.variant === 'dark')?.href,
  ),
);
const airportDarkCtaLabel = computed(
  () => seoBlocks.value.airport?.ctas?.find((item) => item.variant === 'dark')?.label || '',
);
const airportWhatsappCtaLabel = computed(
  () => seoBlocks.value.airport?.ctas?.find((item) => item.variant === 'whatsapp')?.label || '',
);
const whatsappUrl = computed(() =>
  normalizeCityRentalHref(seoBlocks.value.business?.whatsappUrl),
);
const mapLinkUrl = computed(() =>
  normalizeCityRentalHref(seoBlocks.value.business?.mapLinkUrl),
);
const priceNoteIcons = {
  economy: CarFront,
  suv: Mountain,
  family: Users,
  premium: Crown,
};
function priceNoteTierIcon(item = {}) {
  const type = String(item?.type || "").toLowerCase();
  if (type.includes("economy")) return priceNoteIcons.economy;
  if (type.includes("suv")) return priceNoteIcons.suv;
  if (type.includes("family")) return priceNoteIcons.family;
  if (type.includes("premium")) return priceNoteIcons.premium;
  return CarFront;
}
function mistakeLinkUrl(item = {}) {
  return normalizeCityRentalHref(item?.linkUrl || item?.link_url || searchUrl.value);
}
const cityIntentIcons = [CarFront, CreditCard, MapPin];
const cityIntentColors = [
  "text-brand-orange",
  "text-blue-500",
  "text-emerald-500",
];
const deliveryAreaIcons = {
  plane: Plane,
  mapPin: MapPin,
  navigation: Navigation,
  map: Map,
};
const routeToneIcons = {
  green: CheckCircle2,
  amber: AlertCircle,
  red: ShieldAlert,
};
const drivingToneClasses = {
  blue: "bg-blue-50",
  amber: "bg-amber-50",
  slate: "bg-slate-100",
  emerald: "bg-emerald-50",
};
const labels = computed(() => ({
  stepLabel: props.seoBlocks?.airport?.stepLabel || 'Step-by-step',
  whatsappAvailabilityLabel: props.seoBlocks?.business?.whatsappAvailabilityLabel || 'WhatsApp Available 24/7',
  openingHoursText: props.seoBlocks?.business?.openingHoursText || 'Open 24 hours (Prior booking required)',
  pricePrefix: props.seoBlocks?.business?.pricePrefix || 'Price:',
  areasLabel: props.seoBlocks?.business?.areasLabel || 'Areas Served:',
  fixLabel: props.seoBlocks?.mistakes?.fixLabel || 'Do this instead',
}))
</script>

<template>
  <div class="space-y-24 mb-24">
    <section
      class="bg-slate-50 rounded-[2.5rem] p-8 md:p-12 border border-slate-100 flex flex-col md:flex-row gap-12 items-center"
    >
      <div class="flex-1">
        <div
          class="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider mb-6"
        >
          <Plane class="w-4 h-4" />
          {{ seoBlocks.airport.badge }}
        </div>
        <h2
          class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6"
        >
          {{ seoBlocks.airport.title }}
        </h2>
        <p class="text-slate-600 text-lg leading-relaxed mb-8">
          {{ seoBlocks.airport.description }}
        </p>

        <div
          class="bg-white border border-slate-200 rounded-2xl p-6 mb-8 relative"
        >
          <div
            class="absolute -top-3 left-6 bg-white px-2 text-[10px] font-bold text-brand-orange uppercase tracking-wider"
          >
            {{ labels.stepLabel }}
          </div>
          <ol class="relative border-l border-slate-200 ml-3 space-y-5">
            <li
              v-for="(step, index) in seoBlocks.airport.steps"
              :key="step.title"
              class="pl-6 relative"
            >
              <span
                :class="[
                  'absolute flex items-center justify-center w-6 h-6 rounded-full -left-3 ring-4 ring-white text-xs font-bold',
                  index === 2
                    ? 'bg-brand-orange/10 text-brand-orange'
                    : 'bg-blue-100 text-blue-800',
                ]"
              >
                {{ index + 1 }}
              </span>
              <span class="font-bold text-sm text-slate-900 block">{{
                step.title
              }}</span>
              <span class="text-xs text-slate-500">{{ step.text }}</span>
            </li>
          </ol>
          <div
            class="mt-5 p-4 bg-amber-50/50 rounded-2xl border border-amber-100 flex gap-4 items-start"
          >
            <div class="bg-amber-100/50 p-2 rounded-lg shrink-0">
              <Clock class="w-5 h-5 text-amber-600" />
            </div>
            <div>
              <span class="block text-sm font-bold text-slate-900 mb-0.5">{{
                seoBlocks.airport.warningTitle
              }}</span>
              <span class="block text-xs text-slate-600 leading-relaxed">{{
                seoBlocks.airport.warningText
              }}</span>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap gap-4">
          <NuxtLink
            v-if="airportDarkCtaUrl"
            :to="airportDarkCtaUrl"
            class="bg-slate-900 text-white px-6 py-3.5 rounded-xl font-bold hover:bg-slate-800 transition-colors"
          >
            {{ airportDarkCtaLabel }}
          </NuxtLink>
          <a
            v-if="whatsappUrl"
            :href="whatsappUrl"
            target="_blank"
            rel="noreferrer"
            class="px-6 py-3.5 rounded-xl font-bold transition-colors flex-1 sm:flex-none justify-center inline-flex items-center gap-2 bg-[#25D366]/10 text-[#25D366] hover:bg-[#25D366]/20"
          >
            <MessageCircle class="w-5 h-5" />
            {{ airportWhatsappCtaLabel }}
          </a>
        </div>
      </div>
      <div class="flex-1 w-full max-w-sm shrink-0 hidden md:block">
        <img
          :src="seoBlocks.airport.image"
          alt="Tbilisi Airport Car Rental"
          class="w-full rounded-3xl shadow-lg border border-slate-200"
          loading="lazy"
        />
      </div>
    </section>

    <section
      class="bg-amber-50/50 rounded-[2.5rem] p-8 md:p-12 border border-amber-100"
    >
      <div class="flex flex-col md:flex-row gap-8 items-start mb-10">
        <div
          class="w-16 h-16 bg-white rounded-2xl border border-amber-100 shadow-sm flex items-center justify-center shrink-0"
        >
          <AlertTriangle class="w-8 h-8 text-amber-500" />
        </div>
        <div>
          <h2
            class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-4"
          >
            {{ seoBlocks.mistakes.title }}
          </h2>
          <p class="text-slate-600 max-w-2xl text-lg">
            {{ seoBlocks.mistakes.description }}
          </p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="item in seoBlocks.mistakes.items"
          :key="item.mistake"
          class="bg-white border border-amber-100/50 p-6 rounded-2xl shadow-sm flex flex-col h-full hover:border-amber-200 transition-colors"
        >
          <div class="flex items-start gap-3 mb-4">
            <div
              class="w-6 h-6 bg-red-50 rounded-full flex items-center justify-center shrink-0 mt-0.5"
            >
              <span class="text-red-500 font-bold text-xs">✕</span>
            </div>
            <div class="text-sm font-semibold text-slate-900">
              {{ item.mistake }}
            </div>
          </div>
          <div
            class="flex items-start gap-3 mb-6 bg-green-50/50 p-4 rounded-xl border border-green-100/50 flex-1"
          >
            <div
              class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center shrink-0 mt-0.5"
            >
              <CheckCircle2 class="w-4 h-4 text-green-600" />
            </div>
            <div>
              <div
                class="text-[10px] font-bold uppercase tracking-wider text-green-700 mb-1"
              >
                {{ labels.fixLabel }}
              </div>
              <div class="text-sm text-slate-700">
                {{ item.better }}
              </div>
            </div>
          </div>
          <NuxtLink
            v-if="mistakeLinkUrl(item)"
            :to="mistakeLinkUrl(item)"
            class="text-sm font-bold text-amber-700 hover:text-amber-800 transition-colors text-left group flex items-center gap-1 w-max"
          >
            {{ item.linkLabel }}
            <ArrowRight class="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </NuxtLink>
        </div>
      </div>
    </section>

    <section>
      <h2
        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6"
      >
        {{ seoBlocks.deliveryAreas.title }}
      </h2>
      <p class="text-slate-600 text-lg max-w-3xl mb-8">
        {{ seoBlocks.deliveryAreas.description }}
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <a
          v-for="item in seoBlocks.deliveryAreas.items"
          :key="item.area"
          :href="seoBlocks.deliveryAreas.ctaUrl"
          target="_blank"
          rel="noreferrer"
          class="bg-white border border-slate-100 p-5 rounded-2xl shadow-sm hover:border-brand-orange/30 hover:shadow-md transition-all cursor-pointer group flex flex-col"
        >
          <div class="flex items-center gap-3 mb-3">
            <div
              class="w-10 h-10 bg-slate-50 flex items-center justify-center rounded-xl group-hover:bg-brand-orange/10 transition-colors"
            >
              <component
                :is="deliveryAreaIcons[item.iconKey] || MapPin"
                class="w-5 h-5 text-slate-400 group-hover:text-brand-orange transition-colors"
              />
            </div>
            <h3 class="font-bold text-slate-900">{{ item.area }}</h3>
          </div>
          <p class="text-xs text-slate-500 mb-4 flex-1">{{ item.text }}</p>
          <div class="text-xs font-bold text-brand-orange group-hover:underline">
            {{ seoBlocks.deliveryAreas.ctaLabel }}
          </div>
        </a>
      </div>
    </section>

    <section
      class="bg-slate-900 rounded-[2.5rem] p-8 md:p-12 text-white relative overflow-hidden"
    >
      <div
        class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.05),transparent_70%)] pointer-events-none"
      />
      <div class="relative z-10">
        <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">
          {{ seoBlocks.priceNotes.title }}
        </h2>
        <p class="text-slate-400 text-lg mb-10 max-w-2xl">
          {{ seoBlocks.priceNotes.description }}
        </p>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div
            v-for="tier in seoBlocks.priceNotes.tiers"
            :key="tier.type"
            class="group bg-white/5 border border-white/10 p-6 rounded-2xl flex flex-col transition-all duration-300 hover:bg-white/10 hover:-translate-y-1"
          >
            <div class="flex justify-center mb-6">
              <component
                :is="priceNoteTierIcon(tier)"
                class="w-16 h-16 text-slate-400 group-hover:text-brand-orange transition-colors duration-300"
              />
            </div>
            <div class="flex flex-col flex-1 text-center">
              <div
                class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-2"
              >
                {{ tier.type }}
              </div>
              <div class="font-bold text-white mb-2">
                <span class="text-3xl tracking-tight">${{ tier.price }}</span>
                <span class="text-slate-400 font-normal">/day</span>
              </div>
              <div class="text-sm text-slate-400 mt-auto">
                {{ tier.desc }}
              </div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
          <div
            v-for="note in seoBlocks.priceNotes.notes"
            :key="note.title"
            class="bg-slate-800/50 p-5 rounded-2xl border border-slate-700"
          >
            <div class="flex gap-4 items-start">
              <div
                class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center shrink-0"
                :class="
                  note.title.includes('Winter')
                    ? 'text-blue-400'
                    : 'text-amber-500'
                "
              >
                <component
                  :is="note.title.includes('Winter') ? Snowflake : Sun"
                  class="w-5 h-5"
                />
              </div>
              <div>
                <div class="font-bold text-white mb-1 text-sm">
                  {{ note.title }}
                </div>
                <div class="text-sm text-slate-400 leading-relaxed">
                  {{ note.text }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-sm text-slate-500 flex items-center gap-2">
          <AlertCircle class="w-4 h-4" />
          {{ seoBlocks.priceNotes.footer }}
        </div>
      </div>
    </section>

    <section>
      <h2
        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-10"
      >
        {{ seoBlocks.scenarios.title }}
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="scenario in seoBlocks.scenarios.items"
          :key="scenario.title"
          class="bg-white border border-slate-100 shadow-[0_4px_20px_rgb(0,0,0,0.02)] p-6 rounded-2xl flex flex-col h-full hover:border-brand-orange/30 transition-colors"
        >
          <div
            class="text-[10px] font-bold text-brand-orange uppercase tracking-wider mb-3 bg-brand-orange/10 w-max px-2 py-1 rounded"
          >
            {{ scenario.tag }}
          </div>
          <h3 class="text-xl font-bold text-slate-900 mb-2">
            {{ scenario.title }}
          </h3>
          <div
            class="flex items-center gap-2 text-sm font-semibold text-brand-orange mb-3"
          >
            <ArrowRight class="w-4 h-4" />
            Recommended: {{ scenario.rec }}
          </div>
          <p class="text-sm text-slate-500 mb-6 flex-1">{{ scenario.why }}</p>
          <NuxtLink
            v-if="searchUrl"
            :to="searchUrl"
            class="text-sm font-bold text-slate-900 border border-slate-200 py-2.5 rounded-xl hover:bg-slate-50 transition-colors w-full text-center"
          >
            Show suitable cars
          </NuxtLink>
        </div>
      </div>
    </section>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <section
        v-for="(block, index) in seoBlocks.intentBlocks"
        :key="block.title"
        class="bg-white border border-slate-100 p-8 rounded-[2rem] shadow-sm flex flex-col"
      >
        <component
          :is="cityIntentIcons[index] || CarFront"
          :class="[
            'w-8 h-8 mb-4',
            cityIntentColors[index] || 'text-brand-orange',
          ]"
        />
        <h2 class="text-2xl font-display font-bold text-slate-900 mb-3">
          {{ block.title }}
        </h2>
        <p class="text-sm text-slate-600 mb-5">
          {{ block.description }}
        </p>
        <div
          v-if="block.tagItems?.length"
          class="flex flex-wrap gap-2 mb-6 mt-auto"
        >
          <span
            v-for="tag in block.tagItems"
            :key="tag"
            class="bg-slate-50 border border-slate-100 text-slate-600 text-[11px] font-bold px-2 py-1 rounded-md uppercase tracking-wider"
          >
            {{ tag }}
          </span>
        </div>
        <NuxtLink
          v-if="searchUrl"
          :to="searchUrl"
          class="text-sm font-bold text-brand-orange border border-brand-orange/20 py-2.5 rounded-xl hover:bg-brand-orange/5 transition-colors w-full text-center"
        >
          {{ block.ctaLabel }}
        </NuxtLink>
      </section>
    </div>

    <section
      class="bg-slate-50 border border-slate-100 rounded-[2.5rem] p-8 md:p-12"
    >
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div>
          <h2
            class="text-2xl md:text-3xl font-display font-bold text-slate-900 mb-6 flex items-center gap-3"
          >
            <ShieldEllipsis class="w-8 h-8 text-brand-orange" />
            {{ seoBlocks.conditions.title }}
          </h2>
          <div class="grid grid-cols-2 gap-3 mb-6">
            <div
              v-for="item in seoBlocks.conditions.items"
              :key="item.label"
              class="bg-white p-4 rounded-2xl border border-slate-100 shadow-[0_2px_10px_rgb(0,0,0,0.02)]"
            >
              <div class="text-[10px] uppercase font-bold text-slate-400 mb-1">
                {{ item.label }}
              </div>
              <div class="text-sm font-bold text-slate-800">
                {{ item.value }}
              </div>
            </div>
          </div>
          <div
            class="bg-slate-50/50 rounded-2xl p-6 border border-slate-100 text-sm"
          >
            <div class="font-bold text-slate-900 mb-3">
              {{ seoBlocks.conditions.depositIntro }}
            </div>
            <ul class="space-y-3 text-slate-600">
              <li
                v-for="point in seoBlocks.conditions.depositPoints"
                :key="point"
                class="flex items-start gap-3"
              >
                <CheckCircle2 class="w-4 h-4 text-green-500 shrink-0 mt-0.5" />
                <span class="leading-tight">{{ point }}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="flex flex-col justify-center">
          <h2
            class="text-2xl md:text-3xl font-display font-bold text-slate-900 mb-6 flex items-center gap-3"
          >
            <Navigation class="w-8 h-8 text-blue-500" />
            {{ seoBlocks.routeDifficulty.title }}
          </h2>
            <div class="space-y-3">
              <div
                v-for="item in seoBlocks.routeDifficulty.items"
                :key="item.title"
                :class="[
                  'bg-white p-5 md:p-6 rounded-2xl border border-slate-100 shadow-[0_2px_10px_rgb(0,0,0,0.02)] flex items-start gap-5 transition-colors',
                  item.tone === 'green'
                    ? 'hover:border-green-200'
                    : item.tone === 'amber'
                      ? 'hover:border-amber-200'
                      : 'hover:border-red-200',
                ]"
              >
                <div
                  :class="[
                    'w-12 h-12 rounded-xl flex items-center justify-center shrink-0',
                    item.tone === 'green'
                      ? 'bg-green-50 border border-green-100'
                      : item.tone === 'amber'
                        ? 'bg-amber-50 border border-amber-100'
                        : 'bg-red-50 border border-red-100',
                  ]"
                >
                <component
                  :is="routeToneIcons[item.tone] || ShieldAlert"
                  :class="
                    item.tone === 'green'
                      ? 'w-6 h-6 text-green-600'
                      : item.tone === 'amber'
                        ? 'w-6 h-6 text-amber-600'
                        : 'w-6 h-6 text-red-600'
                  "
                />
              </div>
              <div>
                <div class="font-bold text-slate-900 mb-1">
                  {{ item.title }}
                </div>
                <div class="text-xs text-slate-500 mb-2 font-medium">
                  {{ item.note }}
                </div>
                <div
                  class="text-[10px] uppercase font-bold text-slate-400 tracking-wider"
                >
                  {{ item.caption }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2
        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-8"
      >
        {{ seoBlocks.drivingTips.title }}
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div
          v-for="item in seoBlocks.drivingTips.items"
          :key="item.title"
          class="bg-white border border-slate-100 p-6 rounded-[1.5rem] shadow-[0_4px_20px_rgb(0,0,0,0.02)] hover:-translate-y-1 transition-transform"
        >
          <div
            :class="[
              'w-12 h-12 rounded-xl flex items-center justify-center mb-4',
              drivingToneClasses[item.tone] || 'bg-slate-100',
            ]"
          >
            <component
              :is="
                item.title === 'Parking'
                  ? MapPin
                  : item.title === 'Traffic'
                    ? AlertTriangle
                    : item.title === 'Cameras'
                      ? Camera
                      : Mountain
              "
              :class="
                item.title === 'Parking'
                  ? 'w-6 h-6 text-blue-500'
                  : item.title === 'Traffic'
                    ? 'w-6 h-6 text-amber-500'
                    : item.title === 'Cameras'
                      ? 'w-6 h-6 text-slate-700'
                      : 'w-6 h-6 text-emerald-500'
              "
            />
          </div>
          <h3 class="font-bold text-slate-900 mb-2">{{ item.title }}</h3>
          <p class="text-sm text-slate-600 leading-relaxed">{{ item.text }}</p>
        </div>
      </div>
    </section>

    <section
      class="bg-white rounded-[2rem] border border-slate-200 p-8 md:p-12 mb-12 shadow-sm"
      itemScope
      itemType="https://schema.org/AutoRental"
    >
      <div class="flex flex-col md:flex-row gap-10 items-start">
        <div class="flex-1">
          <div
            class="text-[10px] font-bold text-brand-orange uppercase tracking-wider mb-2"
          >
            {{ seoBlocks.business.title }}
          </div>
          <h2
            class="text-3xl font-display font-bold text-slate-900 mb-2"
            itemProp="name"
          >
            {{ seoBlocks.business.name }}
          </h2>
          <p class="text-slate-500 mb-6 text-sm" itemProp="description">
            {{ seoBlocks.business.description }}
          </p>

          <div class="space-y-4 mb-8">
            <div
              class="flex items-center gap-3 text-sm font-medium text-slate-700"
            >
              <Building class="w-5 h-5 text-slate-400" />
              <span
                itemProp="address"
                itemScope
                itemType="https://schema.org/PostalAddress"
              >
                <span itemProp="addressLocality">{{
                  seoBlocks.business.addressLocality
                }}</span
                >,
                <span itemProp="addressCountry">{{
                  seoBlocks.business.addressCountry
                }}</span>
              </span>
            </div>
            <div
              class="flex items-center gap-3 text-sm font-medium text-slate-700"
            >
              <Phone class="w-5 h-5 text-slate-400" />
              <span itemProp="telephone">{{
                seoBlocks.business.telephone
              }}</span>
            </div>
            <div class="flex items-center gap-3 text-sm font-medium text-slate-700">
              <MessageCircle class="w-5 h-5 text-[#25D366]" />
              {{ labels.whatsappAvailabilityLabel }}
            </div>
            <div
              class="flex items-center gap-3 text-sm font-medium text-slate-700"
            >
              <Clock4 class="w-5 h-5 text-slate-400" />
              <span
                itemProp="openingHours"
                :content="seoBlocks.business.openingHours"
                >{{ labels.openingHoursText }}</span
              >
            </div>
          </div>

          <div class="flex flex-wrap gap-2 text-xs font-bold">
            <span
              class="bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md"
              itemProp="priceRange"
              >{{ labels.pricePrefix }} {{ seoBlocks.business.priceRange }}</span
            >
            <span class="bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md">{{
              seoBlocks.business.acceptedPayments
            }}</span>
          </div>
        </div>

        <div
          class="w-full md:w-80 shrink-0 bg-slate-50 rounded-2xl p-6 border border-slate-100"
        >
          <div class="font-bold text-slate-900 mb-4">{{ labels.areasLabel }}</div>
          <ul class="space-y-2 mb-6">
            <li
              v-for="area in seoBlocks.business.areasServed"
              :key="area"
              class="text-sm text-slate-600 flex items-center gap-2"
            >
              <CheckCircle2 class="w-4 h-4 text-green-500" />
              {{ area }}
            </li>
          </ul>
          <NuxtLink
            v-if="mapLinkUrl"
            :to="mapLinkUrl"
            class="block w-full text-center bg-slate-900 text-white font-bold py-3 rounded-xl hover:bg-slate-800 transition-colors"
          >
            {{ seoBlocks.business.mapLinkLabel }}
          </NuxtLink>
          <link itemProp="url" :href="seoBlocks.business.siteUrl" />
        </div>
      </div>
    </section>
  </div>
</template>
