<template>
  <section id="services" class="py-12 sm:py-20 bg-white relative overflow-hidden scroll-mt-24">
    <div class="absolute inset-0 grid-pattern opacity-30" />

    <div v-if="isLoading" class="py-24 flex items-center justify-center">
      <Loader2 class="w-8 h-8 animate-spin text-primary" />
    </div>

    <div v-else class="container mx-auto px-4 relative z-10">
      <div class="text-center mb-12">
        <span class="text-primary font-display text-xs font-bold tracking-[0.2em] uppercase">{{ t("services.badge") }}</span>
        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-extrabold mt-4 mb-4 tracking-tight">
          {{ t("services.title") }} <span class="text-primary">{{ t("services.titleGradient") }}</span>
        </h2>
        <p class="text-foreground/60 max-w-xl mx-auto text-base font-medium">{{ t("services.description") }}</p>
      </div>

      <!-- Services Grid -->
      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12 sm:mb-24">
        <div
          v-for="(service, index) in services"
          :key="service.id"
          class="group p-6 card-apple"
          :style="{ animationDelay: `${index * 100}ms` }"
        >
          <div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500">
            <component :is="iconMap[service.tech_type] || iconMap.DEFAULT" class="w-6 h-6" />
          </div>
          <h3 class="font-display text-xl font-black mb-2 group-hover:text-primary transition-colors tracking-tight">
            {{ service[`name_${locale}` as keyof Service] || service.name_en }}
          </h3>
          <p class="text-foreground/50 text-sm leading-relaxed font-medium">{{ service[`desc_${locale}` as keyof Service] || service.desc_en }}</p>
        </div>
      </div>

      <!-- Materials -->
      <div id="materials" class="mt-10 sm:mt-16 scroll-mt-24">
        <div class="flex items-center gap-3 mb-8">
          <div class="w-8 h-8 bg-primary/5 rounded-lg flex items-center justify-center">
            <Sparkles class="w-4 h-4 text-primary" />
          </div>
          <h2 class="font-display text-2xl font-extrabold tracking-tight">{{ t("pricing.materials") }}</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(material, idx) in materials"
            :key="material.id"
            class="group p-8 card-apple hover:border-primary/20 animate-fade-in"
            :style="{ animationDelay: `${idx * 50}ms` }"
          >
            <h3 class="text-xl font-display font-black text-foreground mb-3 group-hover:text-primary transition-colors uppercase tracking-widest border-b border-black/[0.03] pb-2">
              {{ material[`name_${locale}` as keyof Material] || material.name_en }}
            </h3>
            <p class="text-sm text-foreground/50 leading-relaxed font-medium whitespace-pre-line">
              {{ material[`long_desc_${locale}` as keyof Material] || material[`desc_${locale}` as keyof Material] || material.desc_en }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { Layers, Zap, Loader2, Sparkles, Box, Cpu } from "lucide-vue-next";
import { getServices, getMaterials } from "@/lib/api";

const { t, locale } = useI18n();

interface Service { 
  id: number; 
  name_en: string; name_ru: string; name_me: string;
  desc_en: string; desc_ru: string; desc_me: string;
  tech_type: string 
}
interface Material { 
  id: number; 
  name_en: string; name_ru: string; name_me: string;
  desc_en: string; desc_ru: string; desc_me: string;
  long_desc_en?: string; long_desc_ru?: string; long_desc_ua?: string; long_desc_me?: string;
  price_per_cm3: number 
}

const iconMap: Record<string, any> = { FDM: Layers, SLA: Zap, DEFAULT: Box };
const services = ref<Service[]>([]);
const materials = ref<Material[]>([]);
const isLoading = ref(true);

onMounted(async () => {
  try {
    [services.value, materials.value] = await Promise.all([getServices(), getMaterials()]);
  } catch (e) {
    console.error("Failed to fetch services/materials:", e);
  } finally {
    isLoading.value = false;
  }
});
</script>
