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

<section class="relative overflow-hidden py-24">
	<!-- Background -->
	<div
		class="via-secondary-900/30 absolute inset-0 bg-gradient-to-r from-primary-900/30 to-primary-900/30"
	>
	</div>

	<div class="container relative z-10 mx-auto px-4">
		<div class="mx-auto max-w-4xl">
			<!-- Content Card -->
			<div
				class="relative rounded-3xl border border-dark-border bg-gradient-to-br from-dark-elevated/80 to-dark-surface/80 p-12 backdrop-blur-sm"
			>
				<!-- Glow Effect -->
				<div
					class="absolute -inset-1 rounded-3xl bg-gradient-to-r from-primary-600 to-secondary-600 opacity-20 blur-xl"
				>
				</div>

				<div class="relative text-center">
					<!-- Heading -->
					<h2 class="mb-6 text-4xl font-bold text-white md:text-5xl">
						{t('cta.title')}
					</h2>

					<!-- Subtitle -->
					<p class="mx-auto mb-10 max-w-2xl text-xl text-gray-300">
						{t('cta.subtitle')}
					</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('cta.button_primary')}
							<span class="ml-2 inline-block transition-transform group-hover:translate-x-1">→</span
							>
						</a>
						<a
							href="#"
							class="rounded-lg border-2 border-dark-border bg-transparent px-8 py-4 text-lg font-semibold text-white transition-all duration-300 hover:border-primary hover:bg-dark-elevated"
						>
							{t('cta.button_secondary')}
						</a>
					</div>

					<!-- Trust Indicators -->
					<div
						class="mt-10 flex flex-col items-center justify-center gap-6 text-sm text-gray-400 sm:flex-row"
					>
						<div class="flex items-center gap-2">
							<svg class="h-5 w-5 text-success" fill="currentColor" viewBox="0 0 20 20">
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"></path>
							</svg>
							<span>{t('cta.trust.no_credit_card')}</span>
						</div>
						<div class="flex items-center gap-2">
							<svg class="h-5 w-5 text-success" fill="currentColor" viewBox="0 0 20 20">
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"></path>
							</svg>
							<span>{t('cta.trust.free_plan')}</span>
						</div>
						<div class="flex items-center gap-2">
							<svg class="h-5 w-5 text-success" fill="currentColor" viewBox="0 0 20 20">
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"></path>
							</svg>
							<span>{t('cta.trust.cancel_anytime')}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Decorative Blobs -->
	<div
		class="absolute left-1/4 top-0 h-96 w-96 rounded-full bg-primary/20 opacity-30 blur-3xl filter"
	>
	</div>
	<div
		class="absolute bottom-0 right-1/4 h-96 w-96 rounded-full bg-secondary/20 opacity-30 blur-3xl filter"
	>
	</div>
</section>
