<script setup lang="ts">
import Image from '@/components/ui/image/Image.vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

interface TabFeature {
  name: string
  description: string
  image: string
  imageAlt: string
}

interface Tab {
  name: string
  value: string
  features: TabFeature[]
}

withDefaults(
  defineProps<{
    title?: string
    description?: string
    tabs?: Tab[]
  }>(),
  {
    title: 'Technical Specifications',
    description: 'Every piece of gear in the Alpine Pro line is designed to perform in extreme winter conditions while keeping you comfortable all day on the mountain.',
    tabs: () => [
      {
        name: 'Protection',
        value: 'protection',
        features: [
          {
            name: 'Waterproof shell with taped seams',
            description: 'A 20K/20K waterproof-breathable membrane combined with fully taped seams ensures you stay dry in heavy snowfall, sleet, and wind-driven rain — even during extended sessions in the backcountry.',
            image: 'https://cdn.demo-shop.com/media/1366/768/e0/86/58/1740128566/mann_jacken.png?ts=1740128566',
            imageAlt: 'Man wearing a winter jacket in snowy mountain conditions',
          },
        ],
      },
      {
        name: 'Insulation',
        value: 'insulation',
        features: [
          {
            name: 'Synthetic down core warmth',
            description: 'Lightweight synthetic insulation retains heat even when damp, giving you consistent warmth without the bulk. Strategically placed in the core and hood to protect against wind chill on exposed lifts and ridgelines.',
            image: 'https://cdn.demo-shop.com/media/1366/768/30/da/24/1740128586/mann_winter_hose.png?ts=1740128586',
            imageAlt: 'Man wearing winter snow pants on the slopes',
          },
        ],
      },
      {
        name: 'Mobility',
        value: 'mobility',
        features: [
          {
            name: 'Articulated fit for unrestricted movement',
            description: 'Pre-shaped sleeves, gusseted underarms, and stretch panels in key areas give you full range of motion for carving, hiking, and adjusting gear — without the jacket riding up or bunching.',
            image: 'https://cdn.demo-shop.com/media/1366/768/0c/00/3b/1740127972/frau_handschuhe.png?ts=1740127972',
            imageAlt: 'Woman wearing winter gloves ready for the slopes',
          },
        ],
      },
      {
        name: 'Safety',
        value: 'safety',
        features: [
          {
            name: 'Helmet-compatible hood and rescue whistle',
            description: 'An adjustable, helmet-compatible hood provides full storm protection without limiting your peripheral vision. A built-in rescue whistle on the zipper pull adds a layer of backcountry safety when you need it most.',
            image: 'https://cdn.demo-shop.com/media/1366/768/c5/c0/51/1741782847/women_helmets.png?ts=1741782847',
            imageAlt: 'Women wearing ski helmets on the mountain',
          },
        ],
      },
    ],
  },
)
</script>

<template>
  <section class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
    <div class="max-w-3xl">
      <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ title }}</h2>
      <p class="mt-4 text-muted-foreground">{{ description }}</p>
    </div>

    <Tabs :default-value="tabs[0]?.value" class="mt-8">
      <div class="-mx-4 overflow-x-auto sm:mx-0">
        <div class="px-4 sm:px-0">
          <TabsList variant="line">
            <TabsTrigger
              v-for="tab in tabs"
              :key="tab.value"
              :value="tab.value"
            >
              {{ tab.name }}
            </TabsTrigger>
          </TabsList>
        </div>
      </div>

      <TabsContent
        v-for="tab in tabs"
        :key="tab.value"
        :value="tab.value"
        class="mt-0 space-y-16 pt-10 lg:pt-16"
      >
        <div
          v-for="feature in tab.features"
          :key="feature.name"
          class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8"
        >
          <div class="mt-6 lg:col-span-5 lg:mt-0">
            <h3 class="text-lg font-medium">{{ feature.name }}</h3>
            <p class="mt-2 text-sm text-muted-foreground">{{ feature.description }}</p>
          </div>
          <div class="lg:col-span-7">
            <Image
              :src="feature.image"
              :alt="feature.imageAlt"
              class="block aspect-2/1 w-full rounded-lg sm:aspect-5/2"
            />
          </div>
        </div>
      </TabsContent>
    </Tabs>
  </section>
</template>