---
import { t } from '../i18n';
---

<section class="relative flex min-h-screen items-center justify-center overflow-hidden">
	<!-- Background Gradient -->
	<div
		class="to-secondary-900/20 absolute inset-0 bg-gradient-to-br from-primary-900/20 via-dark-surface"
	>
	</div>

	<!-- Content -->
	<div class="container relative z-10 mx-auto px-4 py-24">
		<div class="mx-auto max-w-4xl text-center">
			<!-- Badge -->
			<div
				class="mb-8 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-4 py-2"
			>
				<span class="text-sm text-primary-300">{t('hero.badge')}</span>
			</div>

			<!-- Main Heading -->
			<h1 class="mb-6 text-6xl font-bold leading-tight md:text-7xl lg:text-8xl">
				<span
					class="animate-gradient bg-gradient-to-r from-primary-400 via-secondary-400 to-primary-400 bg-clip-text text-transparent"
				>
					{t('hero.title')}
				</span>
				<br />
				<span class="text-white">{t('hero.subtitle')}</span>
			</h1>

			<!-- Subtitle -->
			<p class="mx-auto mb-12 max-w-2xl text-xl text-gray-300 md:text-2xl">
				{t('hero.description')}
			</p>

			<!-- CTA Buttons -->
			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
				<a
					href="#"
					class="hover:to-secondary-700 group rounded-lg bg-gradient-to-r from-primary-600 to-secondary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg shadow-primary/50 transition-all duration-300 hover:scale-105 hover:from-primary-700 hover:shadow-primary/70"
				>
					{t('hero.cta_primary')}
					<span class="ml-2 inline-block transition-transform group-hover:translate-x-1">→</span>
				</a>
				<a
					href="#features"
					class="rounded-lg border border-dark-border bg-dark-elevated/50 px-8 py-4 text-lg font-semibold text-white transition-all duration-300 hover:border-primary/50 hover:bg-dark-elevated"
				>
					{t('hero.cta_secondary')}
				</a>
			</div>

			<!-- Stats -->
			<div class="mx-auto mt-16 grid max-w-2xl grid-cols-3 gap-8">
				<div class="text-center">
					<div class="mb-2 text-3xl font-bold text-white md:text-4xl">50K+</div>
					<div class="text-sm text-gray-400">{t('hero.stats.images')}</div>
				</div>
				<div class="text-center">
					<div class="mb-2 text-3xl font-bold text-white md:text-4xl">10+</div>
					<div class="text-sm text-gray-400">{t('hero.stats.models')}</div>
				</div>
				<div class="text-center">
					<div class="mb-2 text-3xl font-bold text-white md:text-4xl">99%</div>
					<div class="text-sm text-gray-400">{t('hero.stats.satisfaction')}</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Decorative Elements -->
	<div
		class="absolute left-10 top-1/4 h-72 w-72 animate-pulse rounded-full bg-primary/30 opacity-20 blur-3xl filter"
	>
	</div>
	<div
		class="absolute bottom-1/4 right-10 h-96 w-96 animate-pulse rounded-full bg-secondary/30 opacity-20 blur-3xl filter delay-1000"
	>
	</div>
</section>

<style>
	@keyframes gradient {
		0%,
		100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	.animate-gradient {
		background-size: 200% 200%;
		animation: gradient 3s ease infinite;
	}
</style>
