<script setup>
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const homeDiscoverSection = computed(() => homeContent.homeDiscoverSection.value || {})

function discoverGallerySrcSet(url) {
  if (typeof url !== 'string' || !url.startsWith('/content/discover/')) {
    return undefined
  }

  const smallUrl = url.replace('/content/discover/', '/content/discover/280/')

  return `${smallUrl} 280w, ${url} 560w`
}
</script>

<template>
  <section id="discover-section" class="mt-12 md:mt-20 mb-20">
    <div class="flex items-center gap-6 mb-8">
      <h3 class="text-xl md:text-2xl font-display font-light text-slate-900 tracking-tight whitespace-nowrap">
        {{ homeDiscoverSection.title }}
      </h3>
      <div class="h-[1px] w-full bg-slate-200/50" />
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      <div
        v-for="item in homeDiscoverSection.galleryItems"
        :key="item.label"
        class="group relative h-40 md:h-48 lg:h-56 rounded-2xl overflow-hidden cursor-pointer shadow-sm hover:shadow-xl transition-all duration-500"
      >
        <img
          :src="item.url"
          :srcset="discoverGallerySrcSet(item.url)"
          sizes="(min-width: 1024px) 16vw, (min-width: 768px) 33vw, 50vw"
          :alt="item.label"
          loading="lazy"
          decoding="async"
          class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-500" />
        <div class="absolute bottom-4 left-4 right-4 translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
          <div class="text-white font-display font-medium tracking-wider text-xs md:text-sm uppercase">{{ item.label }}</div>
          <div class="w-6 h-[2px] bg-brand-orange mt-2 transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500 delay-100" />
        </div>
      </div>
    </div>
  </section>
</template>
