<template>
  <section
    class="bg-white dark:bg-gray-900 pt-24 pb-16 sm:pt-32 sm:pb-24 xl:pb-32"
  >
    <div class="bg-gray-900 pb-20 sm:pb-24 xl:pb-0">
      <div
        class="mx-auto flex max-w-7xl flex-col items-center gap-x-8 gap-y-10 px-6 sm:gap-y-8 lg:px-8 xl:flex-row xl:items-stretch"
      >
        <!-- CEO Image -->
        <div class="-mt-8 w-full max-w-2xl xl:-mb-8 xl:w-96 xl:flex-none">
          <div
            class="relative aspect-2/1 h-full md:-mx-8 xl:mx-0 xl:aspect-auto"
          >
            <img
              class="absolute inset-0 size-full rounded-2xl bg-gray-800 object-cover shadow-2xl"
              :src="ABOUT_IMAGES.ceoQuote"
              alt="CEO or creative leadership"
            />
          </div>
        </div>

        <!-- CEO Quote -->
        <div
          class="w-full max-w-2xl xl:max-w-none xl:flex-auto xl:px-16 xl:py-24"
        >
          <figure class="relative isolate pt-6 sm:pt-12">
            <svg
              viewBox="0 0 162 128"
              fill="none"
              aria-hidden="true"
              class="absolute top-0 left-0 -z-10 h-32 stroke-white/20"
            ></svg>
            <blockquote
              class="text-xl font-semibold text-white sm:text-2xl leading-relaxed"
            >
              <p>
                {{ $t('about.ceoQuote') }}
              </p>
            </blockquote>
            <figcaption class="mt-8 text-base">
              <div class="font-semibold text-white">{{ $t('about.ceo') }}</div>
              <div class="mt-1 text-gray-400">{{ $t('about.ceoTitle') }}</div>
            </figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ABOUT_IMAGES } from '@/data/assets';
</script>
