<template>
  <section class="py-24 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-background via-secondary/20 to-background" />
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-glow rounded-full blur-3xl opacity-50" />

    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-3xl mx-auto text-center animate-fade-in">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary mb-6">
          <Sparkles class="w-4 h-4" />
          <span class="text-xs font-display font-medium tracking-wider uppercase">{{ t("hero.badge") }}</span>
        </div>

        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
          {{ t("upload.title") }} <span class="text-gradient">{{ t("upload.titleGradient") }}</span>
        </h2>

        <p class="text-muted-foreground text-lg mb-10 max-w-xl mx-auto leading-relaxed">{{ t("upload.description") }}</p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <Button variant="hero" size="xl" class="group" as="a" href="#upload">
            {{ t("hero.uploadButton") }}
            <ArrowRight class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </Button>
          <Button variant="heroOutline" size="xl" as="a" href="#philosophy">
            {{ t("nav.philosophy") }}
          </Button>
        </div>

        <div class="flex items-center justify-center gap-6 mt-12 text-sm text-muted-foreground">
          <span class="flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 bg-primary rounded-full" /> {{ t("pricing.trustSteps.step1") }}
          </span>
          <span class="flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 bg-primary rounded-full" /> {{ t("hero.stats.shipping") }}
          </span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ArrowRight, Sparkles } from "lucide-vue-next";
import Button from "./ui/button.vue";
const { t } = useI18n();
</script>
