---
const { icon, title, description, link } = Astro.props;
---
<a href={link} class="block group relative bg-gradient-to-br from-black-deep to-black-medium overflow-hidden rounded-xl border border-silver-dark/20 shadow-xl transition-all duration-300 hover:shadow-2xl hover:border-silver-metallic/50 hover:translate-y-[-5px]">
  <div class="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-accent-blue/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  
  <div class="p-8 flex flex-col items-center text-center z-10 relative">
    <div class="mb-6 text-silver-metallic w-16 h-16 flex items-center justify-center bg-black-deep/50 rounded-full border border-silver-dark/30 shadow-inner p-4 transition-all duration-300 group-hover:scale-110 group-hover:border-accent-gold/50">
      <Fragment set:html={icon} />
    </div>
    <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-4">{title}</h3>
    <p class="text-silver-light/80 text-base mb-6">{description}</p>
    <div class="mt-auto">
      <span class="inline-flex items-center text-accent-gold hover:text-accent-blue transition-colors duration-300 text-sm font-medium">
        Learn More
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </span>
    </div>
  </div>
</a> 