<template>
  <div class="min-h-screen bg-background text-foreground flex flex-col">
    <Header />
    <main class="flex-1 max-w-5xl mx-auto w-full px-6 py-24 sm:py-32 space-y-24">
      
      <!-- Hero -->
      <section 
        class="text-center space-y-8"
        v-motion
        :initial="{ opacity: 0, y: 20 }"
        :enter="{ opacity: 1, y: 0, transition: { duration: 600 } }"
      >
         <h1 class="text-4xl sm:text-7xl font-black tracking-tight leading-tight">
           {{ t('scanning.title').split(' ').slice(0, 2).join(' ') }}
           <span class="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent block">
             {{ t('scanning.title').split(' ').slice(2).join(' ') }}
           </span>
         </h1>
         <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
           {{ t('scanning.subtitle') }}
         </p>

         <div class="pt-8">
           <div class="relative group max-w-4xl mx-auto">
             <div class="absolute -inset-2 bg-gradient-to-r from-primary/20 to-primary/0 rounded-[3rem] blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
             <img 
               src="/images/scanning_hero.png" 
               alt="3D Scanning Digital Twin" 
               class="relative rounded-[2.5rem] border border-border/50 shadow-2xl"
             />
           </div>
         </div>
      </section>

      <!-- Workflow Steps -->
      <section class="space-y-12">
        <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-center">{{ t('scanning.workflow.title') }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div 
            v-for="(step, key) in ['scan', 'reverse', 'print']" 
            :key="key"
            class="relative group bg-card/40 border border-border/50 rounded-[2rem] p-8 space-y-6 backdrop-blur-sm hover:border-primary/30 transition-colors"
            v-motion
            :initial="{ opacity: 0, y: 30 }"
            :enter="{ opacity: 1, y: 0, transition: { delay: 200 + (key * 150), duration: 600 } }"
          >
            <div class="p-4 bg-primary/10 rounded-2xl w-fit">
              <component :is="getIcon(step)" class="w-8 h-8 text-primary" />
            </div>
            <h3 class="text-2xl font-bold leading-tight">{{ t(`scanning.workflow.${step}.title`) }}</h3>
            <p class="text-muted-foreground leading-relaxed">
              {{ t(`scanning.workflow.${step}.description`) }}
            </p>
            <div v-if="key < 2" class="hidden md:block absolute -right-6 top-1/2 -translate-y-1/2 z-10">
              <ChevronRight class="w-8 h-8 text-border" />
            </div>
          </div>
        </div>
      </section>

      <!-- Use Cases -->
      <section class="bg-secondary/30 rounded-[3.5rem] p-8 sm:p-16 space-y-12">
        <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-center">{{ t('scanning.useCases.title') }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div 
            v-for="(useCase, key) in ['restoration', 'yachting', 'archiving']" 
            :key="key"
            class="space-y-4"
          >
            <div class="flex items-center gap-3">
              <div class="w-1.5 h-1.5 rounded-full bg-primary" />
              <h3 class="text-xl font-bold">{{ t(`scanning.useCases.${useCase}.title`) }}</h3>
            </div>
            <p class="text-muted-foreground leading-relaxed pl-4 border-l border-border">
              {{ t(`scanning.useCases.${useCase}.description`) }}
            </p>
          </div>
        </div>
      </section>

      <!-- Final CTA -->
      <section 
        class="text-center py-12 space-y-10"
        v-motion
        :initial="{ opacity: 0 }"
        :enter="{ opacity: 1, transition: { delay: 800 } }"
      >
        <p class="text-2xl sm:text-3xl font-medium max-w-2xl mx-auto leading-relaxed">
          {{ t('scanning.cta.text') }}
        </p>
        <RouterLink 
          :to="`/${locale}/contact`" 
          class="inline-flex items-center justify-center px-12 py-5 text-xl font-bold bg-primary text-primary-foreground hover:bg-primary/90 rounded-2xl transition-all hover:scale-105 shadow-xl shadow-primary/20"
        >
          {{ t('scanning.cta.button') }}
        </RouterLink>
      </section>
      
    </main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useHead } from "@unhead/vue";
import { Scan, FileCode, Printer, ChevronRight } from "lucide-vue-next";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

const getIcon = (step: string) => {
  switch (step) {
    case 'scan': return Scan;
    case 'reverse': return FileCode;
    case 'print': return Printer;
    default: return Scan;
  }
};

useHead({
  title: computed(() => `${t('scanning.title')} | Radionica 3D`),
  meta: [
    { name: "description", content: computed(() => t('scanning.subtitle')) }
  ]
});
</script>
