---
import Layout from '@layouts/Layout.astro';
import { t } from '../../i18n';
import { getFeatures, getFeaturedFeatures, getAllFeatureCategories } from '@/utils/features';
import FeatureCard from '@components/features/FeatureCard.astro';
import { localizePath } from '../../i18n';

const allFeatures = await getFeatures();
const featuredFeatures = await getFeaturedFeatures();
const categories = getAllFeatureCategories();
---

<Layout title={t('features.title')} description={t('features.description')}>
	<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">{t('features.badge')}</span>
					</div>
					<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
						{t('features.title')}
					</h1>
					<p class="text-xl text-gray-400">
						{t('features.subtitle')}
					</p>
				</div>
			</div>
		</section>

		<!-- Featured Features -->
		{
			featuredFeatures.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">{t('features.featured_features')}</h2>
						<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
							{featuredFeatures.map((feature) => (
								<FeatureCard feature={feature} />
							))}
						</div>
					</div>
				</section>
			)
		}

		<!-- Category Filters -->
		<section class="border-b border-dark-border bg-dark-bg py-8">
			<div class="container mx-auto px-4">
				<div class="flex flex-wrap justify-center gap-3">
					<a
						href={localizePath('/features')}
						class="rounded-lg bg-primary px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600"
					>
						{t('features.all_features')}
					</a>
					{
						categories.map((category) => (
							<a
								href={localizePath(`/features/category/${category}`)}
								class="rounded-lg border border-dark-border bg-dark-elevated px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-dark-surface hover:text-white"
							>
								{t(`features.categories.${category}`)}
							</a>
						))
					}
				</div>
			</div>
		</section>

		<!-- All Features -->
		<section class="py-16">
			<div class="container mx-auto px-4">
				<h2 class="mb-8 text-3xl font-bold text-white">{t('features.all_features')}</h2>
				<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
					{allFeatures.map((feature) => <FeatureCard feature={feature} />)}
				</div>

				{
					allFeatures.length === 0 && (
						<div class="py-16 text-center">
							<p class="text-xl text-gray-400">{t('features.no_features')}</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">
					{t('features.cta_title')}
				</h2>
				<p class="mx-auto mb-8 max-w-2xl text-xl text-gray-300">
					{t('features.cta_subtitle')}
				</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"
				>
					{t('features.cta_button')}
				</a>
			</div>
		</section>
	</div>
</Layout>
