---
// BigCard component - configurable card with link
interface Props {
	url: string;
	title: string;
	description: string;
	ctaText: string;
}

const { url, title, description, ctaText } = Astro.props;
---

<div class="max-w-4xl mx-auto">
	<a href={url} class="block group">
		<div class="bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-300 group-hover:scale-105 group-hover:shadow-3xl">
			<div class="p-12 text-center text-white">
				<!-- Icon -->
				<div class="mb-6">
					<svg class="w-24 h-24 mx-auto text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
					</svg>
				</div>
				
				<!-- Title -->
				<h2 class="text-4xl font-bold mb-4 group-hover:text-white transition-colors">
					{title}
				</h2>
				
				<!-- Description -->
				<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
					{description}
				</p>
				
				<!-- CTA Button -->
				<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-full px-8 py-4 group-hover:bg-white/30 transition-all duration-300">
					<span class="text-lg font-semibold">{ctaText}</span>
					<svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
					</svg>
				</div>
			</div>
			
			<!-- Decorative elements -->
			<div class="absolute top-4 right-4 w-16 h-16 bg-white/10 rounded-full"></div>
			<div class="absolute bottom-8 left-8 w-8 h-8 bg-white/10 rounded-full"></div>
		</div>
	</a>
</div> 