<script setup lang="ts">
import type { Locale } from '../../i18n/translations'

import { getRoutes } from '../../config/routes'
import { t } from '../../i18n/translations'
import BrandButton from '../common/BrandButton.vue'
import GlassCard from '../common/GlassCard.vue'
import VideoPlayer from '../common/VideoPlayer.vue'

const { locale = 'en' } = defineProps<{ locale?: Locale }>()
const routes = getRoutes(locale)
</script>

<template>
  <section
    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
  >
    <GlassCard
      class="flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
    >
      <!-- Left: video -->
      <div class="flex-1 overflow-hidden rounded-4xl">
        <VideoPlayer
          src="https://media.comfy.org/website/customers/blackmath/video.webm"
          poster="https://media.comfy.org/website/customers/blackmath/poster.webp"
          minimal
          :tracks="[
            {
              src: 'https://media.comfy.org/website/customers/blackmath/video.vtt',
              kind: 'subtitles',
              srclang: 'en',
              label: 'English'
            }
          ]"
          :locale
        />
      </div>

      <!-- Right: content -->
      <div
        data-testid="case-study-content"
        class="flex flex-col justify-between p-6 lg:flex-1"
      >
        <div class="flex flex-col gap-8">
          <p
            class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
          >
            {{ t('caseStudy.label', locale) }}
          </p>
          <h2
            class="text-primary-comfy-canvas text-5xl font-light whitespace-pre-line"
          >
            {{ t('caseStudy.heading', locale) }}
          </h2>
          <p class="text-primary-warm-gray text-base">
            {{ t('caseStudy.subheading', locale) }}
          </p>
        </div>

        <div class="mt-8 flex flex-col items-start gap-3 sm:flex-row lg:mt-0">
          <BrandButton :href="routes.customers" variant="outline">
            {{ t('caseStudy.seeAll', locale) }}
          </BrandButton>
        </div>
      </div>
    </GlassCard>
  </section>
</template>
