<template>
  <section class="bg-white dark:bg-gray-900 py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div
        class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-16 sm:gap-y-24 lg:mx-0 lg:max-w-none lg:grid-cols-2"
      >
        <!-- Quote + Image Card -->
        <div class="lg:pr-4">
          <div
            class="relative overflow-hidden rounded-3xl bg-gray-900 px-6 pt-64 pb-9 shadow-2xl sm:px-12 lg:max-w-lg lg:px-8 lg:pb-8 xl:px-10 xl:pb-10"
          >
            <img
              class="absolute inset-0 w-full h-full object-cover brightness-105 saturate-100"
              src="/assets/img/shoot.jpg"
              alt="Bobu team visual"
            />
            <!-- dark overlay ↔ lighten in light mode -->
            <div class="absolute inset-0 bg-black/40 dark:bg-black/60" />
            <figure class="relative isolate">
              <blockquote class="mt-6 text-xl font-semibold text-white">
                <p>
                  {{ $t('about.quote') }}
                </p>
              </blockquote>
              <figcaption class="mt-6 text-sm text-gray-300">
                <strong class="font-semibold text-white">CEO,</strong>
                {{ $t('about.ceo') }}
              </figcaption>
            </figure>
          </div>
        </div>

        <!-- Text Block -->
        <div>
          <div class="text-base text-gray-700 dark:text-gray-300 lg:max-w-lg">
            <p
              class="text-base font-semibold text-indigo-600 dark:text-indigo-400"
            >
              {{ $t('about.sectionLabel') }}
            </p>
            <h1
              class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 dark:text-white sm:text-5xl"
            >
              {{ $t('about.sectionTitle') }}
            </h1>

            <div class="max-w-xl">
              <p class="mt-6">{{ $t('about.mission') }}</p>
              <p class="mt-8">{{ $t('about.vision') }}</p>
              <p class="mt-8">{{ $t('about.portfolio') }}</p>
            </div>
          </div>

          <!-- Stats -->
          <dl
            class="mt-10 grid grid-cols-2 gap-8 border-t border-gray-900/10 dark:border-gray-100/10 pt-10 sm:grid-cols-4"
          >
            <div v-for="(stat, statIdx) in stats" :key="statIdx">
              <dt
                class="text-sm font-semibold text-gray-600 dark:text-gray-300"
              >
                {{ stat.label }}
              </dt>
              <dd
                class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white"
              >
                {{ stat.value }}
              </dd>
            </div>
          </dl>

          <!-- CTA -->
          <div class="mt-10 flex">
            <NuxtLink
              to="/projects"
              class="text-base font-semibold text-indigo-600 dark:text-indigo-400 hover:underline"
            >
              {{ $t('about.cta') }} <span aria-hidden="true">&rarr;</span>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script setup lang="ts">
const stats = [
  { label: 'Founded', value: '2018' },
  { label: 'Projects Delivered', value: '120+' },
  { label: 'Technologies', value: 'FILM / XR / 3D' },
  { label: 'Countries', value: '3' },
];
</script>

<style scoped>
/* Tailwind utilities handle all dark/light styling */
</style>
