---
import type { ServiceCardProps } from '@/types/globalInterfaces';

const { service } = Astro.props as ServiceCardProps;
---

<div class="service-card bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col group transition-all duration-500 hover:shadow-2xl border border-gray-100 relative opacity-0 animate-cardEntry">
    <!-- Decorative Element -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-amber-100 to-amber-50 rounded-bl-full opacity-50 -z-10"></div>

    <div class="p-8 flex-grow flex flex-col">
        <!-- Icon and Title -->
        <div class="flex items-center mb-6 group-hover:translate-x-1 transition-transform duration-300">
            <div class="flex-shrink-0 mr-5">
                <div class="icon-container flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-br from-amber-100 to-amber-50 text-amber-600 shadow-md group-hover:scale-110 group-hover:rotate-5 group-hover:shadow-amber transition-all duration-300">
                    <!-- Icon would be implemented here -->
                    <span class="text-2xl">{service.icon}</span>
                </div>
            </div>
            <h3 class="text-xl font-bold text-gray-800">{service.title}</h3>
        </div>

        <!-- Description -->
        <p class="text-gray-600 text-sm mb-6 flex-grow leading-relaxed">
            {service.description}
        </p>

        <!-- Features List -->
        <ul class="space-y-3 mb-6">
            {service.features.map((feature, index) => (
                    <li
                            class="flex items-center text-sm opacity-0 animate-featureEntry"
                            style={`animation-delay: ${0.1 * index}s`}
                    >
                        <span class="text-green-500 mr-2.5 flex-shrink-0">✓</span>
                        <span class="text-gray-700">{feature}</span>
                    </li>
            ))}
        </ul>
    </div>
</div>

<style>
    @keyframes cardEntry {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes featureEntry {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-cardEntry {
        animation: cardEntry 0.6s ease-out forwards;
    }

    .animate-featureEntry {
        animation: featureEntry 0.4s ease-out forwards;
    }

    .service-card:hover {
        transform: translateY(-10px);
    }

    .group-hover\:shadow-amber {
        box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
    }
</style>
