<template>
  <section id="nuances" class="py-12 sm:py-24 relative overflow-hidden bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-10 sm:mb-16 animate-slide-up">
        <span class="text-primary font-display text-sm tracking-widest uppercase">{{ t("nuances.subtitle") }}</span>
        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mt-4 mb-6">
          {{ t("nuances.title") }}
        </h2>
        <p class="text-muted-foreground max-w-2xl mx-auto">{{ t("nuances.description") }}</p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="(nuance, index) in nuances" :key="index" class="group">
          <div class="card-apple h-full p-6 hover:translate-y-[-4px] transition-all duration-500">
            <div class="flex items-start gap-4 mb-4">
              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-primary/20 transition-colors">
                <component :is="nuance.icon" class="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 class="font-display text-xl font-black mb-2 group-hover:text-primary transition-colors">{{ nuance.title }}</h3>
                <p class="text-sm text-muted-foreground leading-relaxed font-medium">{{ nuance.description }}</p>
              </div>
            </div>
            
            <div v-if="nuance.details" class="mt-4 pt-4 border-t border-border/30">
              <p class="text-xs text-muted-foreground/80 leading-relaxed">{{ nuance.details }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Disclaimer -->
      <div class="mt-12 sm:mt-16 p-6 bg-secondary/30 rounded-2xl border border-border/50 animate-fade-in">
        <div class="flex items-start gap-4">
          <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
            <Info class="w-5 h-5 text-primary" />
          </div>
          <div>
            <h4 class="font-display font-semibold mb-2">{{ t("nuances.disclaimer.title") }}</h4>
            <p class="text-sm text-muted-foreground">{{ t("nuances.disclaimer.text") }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { computed } from "vue";
import { 
  Layers, 
  FileWarning, 
  GitCompare, 
  Zap, 
  Ruler, 
  Palette,
  Droplets,
  Info
} from "lucide-vue-next";

const { t } = useI18n();

const nuances = computed(() => [
  {
    icon: Layers,
    title: t("nuances.items.layerStructure.title"),
    description: t("nuances.items.layerStructure.description"),
    details: t("nuances.items.layerStructure.details")
  },
  {
    icon: FileWarning,
    title: t("nuances.items.surfaceImperfections.title"),
    description: t("nuances.items.surfaceImperfections.description"),
    details: t("nuances.items.surfaceImperfections.details")
  },
  {
    icon: GitCompare,
    title: t("nuances.items.supportMarks.title"),
    description: t("nuances.items.supportMarks.description"),
    details: t("nuances.items.supportMarks.details")
  },
  {
    icon: Zap,
    title: t("nuances.items.zSeam.title"),
    description: t("nuances.items.zSeam.description"),
    details: t("nuances.items.zSeam.details")
  },
  {
    icon: Ruler,
    title: t("nuances.items.overhangs.title"),
    description: t("nuances.items.overhangs.description"),
    details: t("nuances.items.overhangs.details")
  },
  {
    icon: Palette,
    title: t("nuances.items.dimensionalTolerances.title"),
    description: t("nuances.items.dimensionalTolerances.description"),
    details: t("nuances.items.dimensionalTolerances.details")
  },
  {
    icon: Droplets,
    title: t("nuances.items.colorVariations.title"),
    description: t("nuances.items.colorVariations.description"),
    details: t("nuances.items.colorVariations.details")
  },
  {
    icon: Zap, // Using Zap for stringing as a visual hint
    title: t("nuances.items.stringing.title"),
    description: t("nuances.items.stringing.description"),
    details: t("nuances.items.stringing.details")
  }
]);
</script>