<script setup>
import { Apple, Facebook, Instagram, Linkedin, MessageCircle, Play } from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'
import { useSiteContent } from '~/content/site'

const homeContent = useHomeContent()
const siteContent = useSiteContent()
const ui = usePublicUi()
const homeFollowUsSection = computed(() => homeContent.homeFollowUsSection.value || {})
const socialProfiles = computed(() => siteContent.socialProfiles.value || [])
const storeButtons = computed(() => siteContent.storeButtons.value || [])
const followUsTitle = computed(() => ui.value.home.followUsTitle || homeFollowUsSection.value.title)

const socialIcons = {
  facebook: Facebook,
  messenger: MessageCircle,
  instagram: Instagram,
  linkedin: Linkedin,
}

const storeIcons = {
  play: Play,
  apple: Apple,
}
</script>

<template>
  <section class="py-16 bg-white overflow-hidden">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8" style="perspective: 1200px;">
      <div
        class="relative bg-brand-orange rounded-[2.5rem] py-16 px-6 md:px-12 flex flex-col items-center text-center shadow-[20px_30px_50px_rgba(234,88,12,0.25)] transition-transform duration-700 ease-out hover:rotate-0"
        style="transform: rotateY(-12deg) rotateX(4deg); transform-style: preserve-3d;"
      >
        <div class="flex flex-col items-center w-full" style="transform: translateZ(50px);">
          <h2 class="text-2xl md:text-3xl font-black text-slate-900 uppercase tracking-tight mb-8 md:mb-10">
            {{ followUsTitle }}
          </h2>

          <div class="flex flex-wrap items-center justify-center gap-4 md:gap-8 mb-12">
            <template v-for="social in socialProfiles" :key="social.id">
              <a
                v-if="social.href"
                :href="social.href"
                :aria-label="social.label"
                class="p-3 rounded-full text-slate-900 hover:bg-slate-900 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-xl bg-transparent"
                target="_blank"
                rel="noreferrer"
              >
                <component
                  :is="socialIcons[social.iconKey]"
                  v-if="social.iconKey !== 'monogram'"
                  class="w-7 h-7 md:w-8 md:h-8"
                />
                <div v-else class="flex flex-col items-center justify-center w-7 h-7 md:w-8 md:h-8">
                  <span class="font-black text-xl md:text-2xl leading-none tracking-tighter border-b-4 border-current pb-0.5">{{ social.monogram }}</span>
                </div>
              </a>

              <button
                v-else
                type="button"
                :aria-label="social.label"
                disabled
                class="p-3 rounded-full text-slate-900 bg-transparent cursor-default"
              >
                <component
                  :is="socialIcons[social.iconKey]"
                  v-if="social.iconKey !== 'monogram'"
                  class="w-7 h-7 md:w-8 md:h-8"
                />
                <div v-else class="flex flex-col items-center justify-center w-7 h-7 md:w-8 md:h-8">
                  <span class="font-black text-xl md:text-2xl leading-none tracking-tighter border-b-4 border-current pb-0.5">{{ social.monogram }}</span>
                </div>
              </button>
            </template>
          </div>

          <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <template v-for="store in storeButtons" :key="store.id">
              <a
                v-if="store.href"
                :href="store.href"
                class="flex items-center gap-3 bg-slate-900 text-white px-6 py-3 rounded-xl hover:bg-white hover:text-slate-900 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1 w-48 justify-center"
                target="_blank"
                rel="noreferrer"
              >
                <component :is="storeIcons[store.iconKey]" class="w-6 h-6 fill-current" :class="store.iconKey === 'apple' ? 'w-7 h-7' : ''" />
                <div class="text-left">
                  <div class="text-[10px] uppercase tracking-wider opacity-80 leading-none mb-1">{{ store.eyebrow }}</div>
                  <div class="text-sm font-bold leading-none">{{ store.label }}</div>
                </div>
              </a>

              <button
                v-else
                type="button"
                disabled
                class="flex items-center gap-3 bg-slate-900 text-white px-6 py-3 rounded-xl shadow-lg w-48 justify-center cursor-default"
              >
                <component :is="storeIcons[store.iconKey]" class="w-6 h-6 fill-current" :class="store.iconKey === 'apple' ? 'w-7 h-7' : ''" />
                <div class="text-left">
                  <div class="text-[10px] uppercase tracking-wider opacity-80 leading-none mb-1">{{ store.eyebrow }}</div>
                  <div class="text-sm font-bold leading-none">{{ store.label }}</div>
                </div>
              </button>
            </template>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
