---
import Layout from '@layouts/Layout.astro';
import {
	getTestimonials,
	getTestimonialStats,
	getAllTestimonialCategories,
} from '@/utils/testimonials';
import TestimonialCard from '@components/testimonials/TestimonialCard.astro';
import { t } from '../../i18n';
import { localizePath } from '../../i18n';

const allTestimonials = await getTestimonials();
const stats = await getTestimonialStats();
const categories = getAllTestimonialCategories();

// Separate featured from non-featured
const featured = allTestimonials.filter((t) => t.data.featured);
const regular = allTestimonials.filter((t) => !t.data.featured);
---

<Layout
	title="Testimonials - Picture"
	description="Read what creators, designers, and businesses say about Picture. Real reviews from real users."
>
	<div class="min-h-screen bg-dark-bg">
		<!-- Hero Section -->
		<section class="relative overflow-hidden py-24">
			<div
				class="to-secondary-900/20 absolute inset-0 bg-gradient-to-br from-primary-900/20 via-dark-surface"
			>
			</div>

			<div class="container relative z-10 mx-auto px-4">
				<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>
					<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
						Loved by Creators Worldwide
					</h1>
					<p class="mb-8 text-xl text-gray-400">
						See what {stats.total} creators have to say about Picture. Real reviews from real users.
					</p>

					<!-- Stats Bar -->
					<div
						class="flex flex-wrap justify-center gap-8 rounded-xl border border-dark-border bg-dark-elevated p-6"
					>
						<div class="text-center">
							<div class="mb-1 text-3xl font-bold text-white">{stats.averageRating.toFixed(1)}</div>
							<div class="text-sm text-gray-400">Average Rating</div>
							<div class="mt-2 flex items-center justify-center gap-1">
								{
									Array.from({ length: 5 }, (_, i) => (
										<svg
											class={`h-5 w-5 ${i < Math.round(stats.averageRating) ? 'text-yellow-400' : 'text-gray-600'}`}
											fill="currentColor"
											viewBox="0 0 20 20"
										>
											<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
										</svg>
									))
								}
							</div>
						</div>
						<div class="h-16 w-px bg-dark-border"></div>
						<div class="text-center">
							<div class="mb-1 text-3xl font-bold text-white">{stats.total}</div>
							<div class="text-sm text-gray-400">Total Reviews</div>
						</div>
						<div class="h-16 w-px bg-dark-border"></div>
						<div class="text-center">
							<div class="mb-1 text-3xl font-bold text-white">{stats.verified}</div>
							<div class="text-sm text-gray-400">Verified Customers</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- Category Filter (Optional - for future) -->
		<!-- You can add category filtering here later -->

		<!-- Featured Testimonials -->
		{
			featured.length > 0 && (
				<section class="bg-dark-surface py-16">
					<div class="container mx-auto px-4">
						<h2 class="mb-8 text-3xl font-bold text-white">Featured Reviews</h2>
						<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
							{featured.map((testimonial) => (
								<TestimonialCard testimonial={testimonial} featured={true} />
							))}
						</div>
					</div>
				</section>
			)
		}

		<!-- All Testimonials -->
		<section class="py-16">
			<div class="container mx-auto px-4">
				<h2 class="mb-8 text-3xl font-bold text-white">All Reviews</h2>
				<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
					{regular.map((testimonial) => <TestimonialCard testimonial={testimonial} />)}
				</div>

				{
					allTestimonials.length === 0 && (
						<div class="py-16 text-center">
							<p class="text-xl text-gray-400">No testimonials yet. Check back soon!</p>
						</div>
					)
				}
			</div>
		</section>

		<!-- CTA Section -->
		<section
			class="via-secondary-900/30 bg-gradient-to-r from-primary-900/30 to-primary-900/30 py-24"
		>
			<div class="container mx-auto px-4 text-center">
				<h2 class="mb-6 text-4xl font-bold text-white">Join These Happy Creators</h2>
				<p class="mx-auto mb-8 max-w-2xl text-xl text-gray-300">
					Start creating stunning AI-generated images today. No credit card required to get started.
				</p>
				<a
					href="#"
					class="hover:to-secondary-700 inline-block 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"
				>
					Get Started Free
				</a>
			</div>
		</section>
	</div>
</Layout>
