---
import type { CollectionEntry } from 'astro:content';
import { localizePath } from '../../i18n';
import { t } from '../../i18n';

interface Props {
	feature: CollectionEntry<'features'>;
}

const { feature } = Astro.props;
const { title, description, icon, coverImage, category, featured, available, comingSoon } =
	feature.data;

// Remove language prefix from slug (e.g., "en/cross-platform-apps" -> "cross-platform-apps")
const slug = feature.slug.split('/').pop() || feature.slug;
---

<article
	class="group relative overflow-hidden rounded-2xl border border-dark-border bg-dark-elevated transition-all duration-300 hover:scale-[1.02] hover:border-primary/50"
>
	<!-- Featured Badge -->
	{
		featured && (
			<div class="absolute right-4 top-4 z-20 rounded-full bg-primary px-3 py-1 text-xs font-bold uppercase text-white">
				{t('features.featured')}
			</div>
		)
	}

	<!-- Coming Soon Badge -->
	{
		comingSoon && (
			<div class="absolute left-4 top-4 z-20 rounded-full bg-secondary px-3 py-1 text-xs font-bold text-white">
				{t('features.coming_soon')}
			</div>
		)
	}

	<!-- Cover Image -->
	<a
		href={localizePath(`/features/${slug}`)}
		class="relative block aspect-video overflow-hidden bg-gradient-to-br from-primary/20 to-secondary/20"
	>
		<div class="absolute inset-0 flex items-center justify-center">
			<span class="text-8xl">{icon}</span>
		</div>
		<div
			class="absolute inset-0 bg-gradient-to-t from-dark-bg/90 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
		>
		</div>
	</a>

	<!-- Content -->
	<div class="p-6">
		<!-- Category Badge -->
		<div class="mb-3">
			<span
				class="rounded-full bg-dark-surface px-3 py-1 text-sm font-medium capitalize text-primary"
			>
				{t(`features.categories.${category}`)}
			</span>
		</div>

		<!-- Title -->
		<a href={localizePath(`/features/${slug}`)} class="mb-3 block">
			<h3
				class="line-clamp-2 text-xl font-bold text-white transition-colors group-hover:text-primary"
			>
				{title}
			</h3>
		</a>

		<!-- Description -->
		<p class="mb-4 line-clamp-3 text-gray-300">
			{description}
		</p>

		<!-- Benefits -->
		{
			feature.data.benefits && feature.data.benefits.length > 0 && (
				<ul class="mb-4 space-y-2">
					{feature.data.benefits.slice(0, 3).map((benefit) => (
						<li class="flex items-start gap-2 text-sm text-gray-400">
							<svg
								class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary"
								fill="currentColor"
								viewBox="0 0 20 20"
							>
								<path
									fill-rule="evenodd"
									d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
									clip-rule="evenodd"
								/>
							</svg>
							<span class="line-clamp-1">{benefit}</span>
						</li>
					))}
				</ul>
			)
		}

		<!-- CTA -->
		<a
			href={localizePath(`/features/${slug}`)}
			class="inline-flex items-center gap-2 font-medium text-primary transition-colors hover:text-primary-400"
		>
			{t('features.learn_more')}
			<svg
				class="h-4 w-4 transition-transform group-hover:translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
				></path>
			</svg>
		</a>

		<!-- Not Available Overlay -->
		{
			!available && (
				<div class="absolute inset-0 flex items-center justify-center rounded-2xl bg-dark-bg/80 backdrop-blur-sm">
					<span class="rounded-lg border border-dark-border bg-dark-elevated px-4 py-2 font-medium text-gray-300">
						{comingSoon ? t('features.coming_soon') : t('features.not_available')}
					</span>
				</div>
			)
		}
	</div>
</article>
