---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import { getRelatedCaseStudies } from '../../utils/caseStudies';
import CaseStudyCard from '../../components/caseStudies/CaseStudyCard.astro';

export async function getStaticPaths() {
	const caseStudies = await getCollection('caseStudies');
	return caseStudies.map((caseStudy) => ({
		params: { slug: caseStudy.id.replace('en/', '') },
		props: { caseStudy },
	}));
}

const { caseStudy } = Astro.props;
const { Content } = await caseStudy.render();
const relatedCaseStudies = await getRelatedCaseStudies(caseStudy, 3);

const pageTitle = `${caseStudy.data.title} | Picture Case Study`;
const pageDescription = caseStudy.data.description;
---

<Layout title={pageTitle} description={pageDescription}>
	<main
		class="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800"
	>
		<!-- Hero Section -->
		<section
			class="relative overflow-hidden bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 px-6 py-20 text-white"
		>
			<div class="mx-auto max-w-6xl">
				<!-- Breadcrumb -->
				<nav class="mb-8 text-sm">
					<a href="/" class="text-blue-100 hover:text-white">Home</a>
					<span class="mx-2 text-blue-100">/</span>
					<a href="/case-studies" class="text-blue-100 hover:text-white">Case Studies</a>
					<span class="mx-2 text-blue-100">/</span>
					<span class="text-white">{caseStudy.data.company.name}</span>
				</nav>

				<!-- Category Badge -->
				<div class="mb-4">
					<span
						class="inline-block rounded-full bg-white/20 px-4 py-1 text-sm font-semibold uppercase tracking-wide backdrop-blur-sm"
					>
						{caseStudy.data.category}
					</span>
				</div>

				<h1 class="mb-6 text-4xl font-bold md:text-5xl lg:text-6xl">
					{caseStudy.data.title}
				</h1>

				<p class="mb-8 text-xl text-blue-100 md:text-2xl">
					{caseStudy.data.description}
				</p>

				<!-- Company Info -->
				<div class="flex items-center gap-4">
					{
						caseStudy.data.company.logo && (
							<img
								src={caseStudy.data.company.logo}
								alt={caseStudy.data.company.name}
								class="h-12 w-12 rounded-lg bg-white p-2"
							/>
						)
					}
					<div>
						<div class="font-semibold">{caseStudy.data.company.name}</div>
						<div class="text-sm text-blue-100">{caseStudy.data.company.industry}</div>
					</div>
				</div>
			</div>

			<!-- Decorative Element -->
			<div class="absolute -right-32 -top-32 h-96 w-96 rounded-full bg-white/10 blur-3xl"></div>
			<div class="absolute -bottom-32 -left-32 h-96 w-96 rounded-full bg-white/10 blur-3xl"></div>
		</section>

		<!-- Key Metrics -->
		{
			caseStudy.data.metrics.length > 0 && (
				<section class="px-6 py-12">
					<div class="mx-auto max-w-6xl">
						<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
							{caseStudy.data.metrics.map((metric) => (
								<div class="rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
									{metric.icon && <div class="mb-2 text-4xl">{metric.icon}</div>}
									<div class="mb-1 text-4xl font-bold text-blue-600">{metric.value}</div>
									<div class="mb-1 font-semibold text-gray-900 dark:text-white">{metric.label}</div>
									{metric.description && (
										<div class="text-sm text-gray-600 dark:text-gray-400">{metric.description}</div>
									)}
								</div>
							))}
						</div>
					</div>
				</section>
			)
		}

		<!-- Cover Image -->
		{
			caseStudy.data.coverImage && (
				<section class="px-6 py-12">
					<div class="mx-auto max-w-6xl">
						<img
							src={caseStudy.data.coverImage}
							alt={caseStudy.data.title}
							class="h-auto w-full rounded-2xl shadow-2xl"
						/>
					</div>
				</section>
			)
		}

		<!-- Main Content -->
		<section class="px-6 py-12">
			<div class="mx-auto max-w-4xl">
				<div class="grid grid-cols-1 gap-12 lg:grid-cols-3">
					<!-- Main Story -->
					<div class="lg:col-span-2">
						<!-- Challenge -->
						<div class="mb-12">
							<h2 class="mb-4 text-3xl font-bold text-gray-900 dark:text-white">
								🚨 The Challenge
							</h2>
							<div class="prose max-w-none dark:prose-invert">
								<p class="text-lg text-gray-700 dark:text-gray-300">
									{caseStudy.data.challenge}
								</p>
							</div>
						</div>

						<!-- Solution -->
						<div class="mb-12">
							<h2 class="mb-4 text-3xl font-bold text-gray-900 dark:text-white">💡 The Solution</h2>
							<div class="prose max-w-none dark:prose-invert">
								<p class="text-lg text-gray-700 dark:text-gray-300">
									{caseStudy.data.solution}
								</p>
							</div>
						</div>

						<!-- Implementation -->
						<div class="mb-12">
							<h2 class="mb-4 text-3xl font-bold text-gray-900 dark:text-white">
								⚙️ Implementation
							</h2>
							<div class="prose max-w-none dark:prose-invert">
								<p class="text-lg text-gray-700 dark:text-gray-300">
									{caseStudy.data.implementation}
								</p>
							</div>
						</div>

						<!-- Results -->
						<div class="mb-12">
							<h2 class="mb-4 text-3xl font-bold text-gray-900 dark:text-white">📈 The Results</h2>
							<div class="prose max-w-none dark:prose-invert">
								<p class="text-lg text-gray-700 dark:text-gray-300">
									{caseStudy.data.results}
								</p>
							</div>
						</div>

						<!-- Detailed Content -->
						<div class="prose prose-lg max-w-none dark:prose-invert">
							<Content />
						</div>
					</div>

					<!-- Sidebar -->
					<div class="lg:col-span-1">
						<!-- Company Details -->
						<div class="sticky top-8 mb-8 rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
								About {caseStudy.data.company.name}
							</h3>

							<dl class="space-y-3 text-sm">
								<div>
									<dt class="font-semibold text-gray-700 dark:text-gray-300">Industry</dt>
									<dd class="text-gray-600 dark:text-gray-400">
										{caseStudy.data.company.industry}
									</dd>
								</div>

								{
									caseStudy.data.company.size && (
										<div>
											<dt class="font-semibold text-gray-700 dark:text-gray-300">Company Size</dt>
											<dd class="capitalize text-gray-600 dark:text-gray-400">
												{caseStudy.data.company.size}
											</dd>
										</div>
									)
								}

								{
									caseStudy.data.company.location && (
										<div>
											<dt class="font-semibold text-gray-700 dark:text-gray-300">Location</dt>
											<dd class="text-gray-600 dark:text-gray-400">
												{caseStudy.data.company.location}
											</dd>
										</div>
									)
								}

								{
									caseStudy.data.company.website && (
										<div>
											<dt class="font-semibold text-gray-700 dark:text-gray-300">Website</dt>
											<dd>
												<a
													href={caseStudy.data.company.website}
													target="_blank"
													rel="noopener noreferrer"
													class="text-blue-600 hover:underline"
												>
													Visit Website →
												</a>
											</dd>
										</div>
									)
								}
							</dl>
						</div>

						<!-- Features Used -->
						{
							caseStudy.data.featuresUsed.length > 0 && (
								<div class="mb-8 rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
									<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
										Features Used
									</h3>
									<div class="flex flex-wrap gap-2">
										{caseStudy.data.featuresUsed.map((feature) => (
											<span class="rounded-lg bg-blue-100 px-3 py-1 text-sm font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
												{feature}
											</span>
										))}
									</div>
								</div>
							)
						}

						<!-- Models Used -->
						{
							caseStudy.data.modelsUsed.length > 0 && (
								<div class="mb-8 rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-800">
									<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
										AI Models Used
									</h3>
									<div class="flex flex-wrap gap-2">
										{caseStudy.data.modelsUsed.map((model) => (
											<span class="rounded-lg bg-purple-100 px-3 py-1 text-sm font-medium text-purple-700 dark:bg-purple-900 dark:text-purple-300">
												{model}
											</span>
										))}
									</div>
								</div>
							)
						}
					</div>
				</div>
			</div>
		</section>

		<!-- Key Takeaways -->
		{
			caseStudy.data.keyTakeaways.length > 0 && (
				<section class="bg-gradient-to-r from-blue-50 to-purple-50 px-6 py-16 dark:from-gray-800 dark:to-gray-700">
					<div class="mx-auto max-w-4xl">
						<h2 class="mb-8 text-3xl font-bold text-gray-900 dark:text-white">🔑 Key Takeaways</h2>
						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
							{caseStudy.data.keyTakeaways.map((takeaway) => (
								<div class="flex items-start gap-3 rounded-xl bg-white p-4 shadow dark:bg-gray-800">
									<div class="text-2xl">✅</div>
									<div class="text-gray-700 dark:text-gray-300">{takeaway}</div>
								</div>
							))}
						</div>
					</div>
				</section>
			)
		}

		<!-- Testimonial -->
		{
			caseStudy.data.testimonial && (
				<section class="px-6 py-16">
					<div class="mx-auto max-w-4xl">
						<div class="rounded-3xl bg-gradient-to-br from-blue-600 to-purple-600 p-12 text-white shadow-2xl">
							<div class="mb-6 text-6xl opacity-50">"</div>
							<blockquote class="mb-8 text-2xl font-medium">
								{caseStudy.data.testimonial.quote}
							</blockquote>
							<div class="flex items-center gap-4">
								{caseStudy.data.contact?.avatar && (
									<img
										src={caseStudy.data.contact.avatar}
										alt={caseStudy.data.testimonial.author}
										class="h-16 w-16 rounded-full border-4 border-white/20"
									/>
								)}
								<div>
									<div class="font-bold">{caseStudy.data.testimonial.author}</div>
									<div class="text-blue-100">{caseStudy.data.testimonial.role}</div>
									<div class="text-sm text-blue-200">{caseStudy.data.company.name}</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			)
		}

		<!-- Related Case Studies -->
		{
			relatedCaseStudies.length > 0 && (
				<section class="px-6 py-16">
					<div class="mx-auto max-w-7xl">
						<h2 class="mb-8 text-3xl font-bold text-gray-900 dark:text-white">
							More Success Stories
						</h2>
						<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
							{relatedCaseStudies.map((related) => (
								<CaseStudyCard caseStudy={related} />
							))}
						</div>
					</div>
				</section>
			)
		}

		<!-- CTA Section -->
		<section class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-16 text-white">
			<div class="mx-auto max-w-4xl text-center">
				<h2 class="mb-4 text-4xl font-bold">Ready to Get Started?</h2>
				<p class="mb-8 text-xl text-blue-100">
					Join {caseStudy.data.company.name} and thousands of other businesses transforming their creative
					workflows
				</p>
				<div class="flex flex-col justify-center gap-4 sm:flex-row">
					<a
						href="/signup"
						class="rounded-xl bg-white px-8 py-4 font-bold text-blue-600 shadow-lg transition hover:bg-blue-50"
					>
						Start Free Trial
					</a>
					<a
						href="/demo"
						class="rounded-xl border-2 border-white px-8 py-4 font-semibold text-white transition hover:bg-white/10"
					>
						Book a Demo
					</a>
				</div>
			</div>
		</section>
	</main>
</Layout>
