---
interface Props {
	caseStudy: any;
	featured?: boolean;
}

const { caseStudy, featured = false } = Astro.props;
const data = caseStudy.data;
const slug = caseStudy.id.replace('en/', '');

// Get first metric or create default
const primaryMetric = data.metrics[0] || null;
---

<article
	data-category={data.category}
	class:list={[
		'group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-all hover:shadow-2xl dark:bg-gray-800',
		{ 'lg:col-span-2': featured },
	]}
>
	<a href={`/case-studies/${slug}`} class="block">
		<!-- Cover Image -->
		{
			data.coverImage && (
				<div class="relative aspect-video overflow-hidden">
					<img
						src={data.coverImage}
						alt={data.title}
						class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
					/>
					<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />

					{/* Badges */}
					<div class="absolute left-4 top-4 flex gap-2">
						{data.featured && (
							<span class="rounded-full bg-yellow-500 px-3 py-1 text-xs font-bold text-white">
								⭐ Featured
							</span>
						)}
						{data.trending && (
							<span class="rounded-full bg-pink-500 px-3 py-1 text-xs font-bold text-white">
								🔥 Trending
							</span>
						)}
					</div>

					{/* Primary Metric Overlay */}
					{primaryMetric && (
						<div class="absolute bottom-4 right-4 rounded-xl bg-white/90 px-4 py-2 backdrop-blur-sm dark:bg-gray-900/90">
							<div class="text-2xl font-bold text-blue-600">{primaryMetric.value}</div>
							<div class="text-xs text-gray-700 dark:text-gray-300">{primaryMetric.label}</div>
						</div>
					)}
				</div>
			)
		}

		<!-- Content -->
		<div class="p-6">
			<!-- Company Logo & Category -->
			<div class="mb-4 flex items-center justify-between">
				<div class="flex items-center gap-3">
					{
						data.company.logo && (
							<img
								src={data.company.logo}
								alt={data.company.name}
								class="h-10 w-10 rounded-lg bg-gray-100 p-1 dark:bg-gray-700"
							/>
						)
					}
					<div>
						<div class="font-semibold text-gray-900 dark:text-white">
							{data.company.name}
						</div>
						<div class="text-sm text-gray-600 dark:text-gray-400">
							{data.company.industry}
						</div>
					</div>
				</div>

				<span
					class="rounded-lg bg-blue-100 px-3 py-1 text-xs font-semibold uppercase text-blue-700 dark:bg-blue-900 dark:text-blue-300"
				>
					{data.category}
				</span>
			</div>

			<!-- Title & Description -->
			<h3
				class="mb-2 text-xl font-bold text-gray-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
			>
				{data.title}
			</h3>
			<p class="mb-4 line-clamp-2 text-gray-600 dark:text-gray-400">
				{data.description}
			</p>

			<!-- Metrics Grid (for non-featured cards) -->
			{
				!featured && data.metrics.length > 0 && (
					<div class="mb-4 grid grid-cols-3 gap-2">
						{data.metrics.slice(0, 3).map((metric: { value: string; label: string }) => (
							<div class="rounded-lg bg-gray-50 p-2 text-center dark:bg-gray-700">
								<div class="text-sm font-bold text-blue-600">{metric.value}</div>
								<div class="text-xs text-gray-600 dark:text-gray-400">{metric.label}</div>
							</div>
						))}
					</div>
				)
			}

			<!-- Tags -->
			{
				data.tags.length > 0 && (
					<div class="mb-4 flex flex-wrap gap-2">
						{data.tags.slice(0, 3).map((tag: string) => (
							<span class="rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300">
								{tag}
							</span>
						))}
						{data.tags.length > 3 && (
							<span class="rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300">
								+{data.tags.length - 3} more
							</span>
						)}
					</div>
				)
			}

			<!-- Footer -->
			<div class="flex items-center justify-between border-t pt-4 dark:border-gray-700">
				<div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
					{
						data.views > 0 && (
							<span class="flex items-center gap-1">
								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
									/>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
									/>
								</svg>
								{data.views.toLocaleString()}
							</span>
						)
					}
					{
						data.likes > 0 && (
							<span class="flex items-center gap-1">
								<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
									<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
								</svg>
								{data.likes}
							</span>
						)
					}
				</div>

				<span
					class="flex items-center gap-1 text-sm font-semibold text-blue-600 transition-transform group-hover:translate-x-1 dark:text-blue-400"
				>
					Read Story
					<svg class="h-4 w-4" 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>
				</span>
			</div>
		</div>
	</a>
</article>
