---
import { getFeaturedTestimonials } from '@/utils/testimonials';
import TestimonialCard from '@components/testimonials/TestimonialCard.astro';
import { t } from '../i18n';
import { localizePath } from '../i18n';

const featuredTestimonials = await getFeaturedTestimonials();
---

<section class="relative overflow-hidden bg-dark-surface py-24">
	<!-- Background gradient -->
	<div
		class="absolute inset-0 bg-gradient-to-b from-dark-bg via-dark-surface to-dark-bg opacity-50"
	>
	</div>

	<div class="container relative z-10 mx-auto px-4">
		<!-- Section Header -->
		<div class="mx-auto mb-16 max-w-3xl text-center">
			<div
				class="mb-6 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-4 py-2"
			>
				<span class="text-sm text-primary-300">💬 Testimonials</span>
			</div>
			<h2 class="mb-6 text-4xl font-bold text-white md:text-5xl">Loved by Creators Worldwide</h2>
			<p class="text-xl text-gray-400">
				Join thousands of satisfied creators, designers, and businesses using Picture to bring their
				ideas to life.
			</p>
		</div>

		<!-- Testimonials Grid -->
		<div class="mb-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
			{
				featuredTestimonials.map((testimonial) => (
					<TestimonialCard testimonial={testimonial} featured={true} />
				))
			}
		</div>

		<!-- View All Link -->
		<div class="text-center">
			<a
				href={localizePath('/testimonials')}
				class="inline-flex items-center gap-2 rounded-lg border border-primary/30 bg-dark-elevated px-6 py-3 font-semibold text-primary transition-all duration-300 hover:scale-105 hover:border-primary/50 hover:text-primary-400"
			>
				<span>View All Testimonials</span>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
				</svg>
			</a>
		</div>
	</div>
</section>
