<script setup>
const ui = usePublicUi()

const defaultSeoSection = {
  titleStart: 'Car Rental',
  titleAccent: 'in Georgia',
  titleEnd: 'with a plan.',
  lead: 'Book in Tbilisi, Batumi, or Kutaisi, fix the handoff before arrival, and choose the car around the route instead of guessing at the counter.',
  columns: {
    left: [
      'Georgia is not one rental pattern. A compact automatic works in Tbilisi and airport-to-city runs. For family luggage, winter travel, or longer drives to Gudauri, Kakheti, Batumi, or Svaneti, an SUV or larger crossover usually makes more sense.',
    ],
    right: [
      'The important part is to lock the route logic early: pickup point, return city, insurance, second driver, child seat, Wi-Fi, and any transfer or chauffeur add-on. When that is clear before departure, the quote is easier to trust and the handoff starts cleanly.',
      'That is why people search for car rental in Georgia around airport pickup, city delivery, SUVs, and route fit, not just the lowest daily rate. Bent works best when the trip is planned that way.',
    ],
  },
}

const seoSection = computed(() => {
  const localized = ui.value.home?.seoSection || {}

  return {
    ...defaultSeoSection,
    ...localized,
    columns: {
      left: localized.columns?.left || defaultSeoSection.columns.left,
      right: localized.columns?.right || defaultSeoSection.columns.right,
    },
  }
})
</script>

<template>
  <section class="bg-[#111518] text-slate-300 py-20 md:py-32 rounded-t-[3rem] mt-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-start">
        <div class="lg:col-span-5 lg:sticky lg:top-32">
          <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-white uppercase tracking-tight leading-[1.1]">
            {{ seoSection.titleStart }} <br class="hidden lg:block">
            <span class="text-brand-orange">{{ seoSection.titleAccent }}</span> <br class="hidden lg:block">
            {{ seoSection.titleEnd }}
          </h2>
          <div class="w-24 h-2 bg-brand-orange mt-8 rounded-full" />
        </div>

        <div class="lg:col-span-7 space-y-6 text-base md:text-lg leading-relaxed opacity-90">
          <p class="text-xl md:text-2xl text-white font-semibold leading-snug mb-8">
            {{ seoSection.lead }}
          </p>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="space-y-6">
              <p v-for="paragraph in seoSection.columns.left" :key="paragraph">
                {{ paragraph }}
              </p>
            </div>
            <div class="space-y-6">
              <p v-for="paragraph in seoSection.columns.right" :key="paragraph">
                {{ paragraph }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
