---
interface ValueItem {
    icon?: string | null;
    title: string;
    description?: string | null;
    id?: string | null;
}

interface Props {
    title: string;
    values?: ValueItem[] | null;
}

const { title, values } = Astro.props;
---

<div class="mb-20 animate-staggerFadeIn">
    <h2 class="text-2xl sm:text-3xl font-semibold mb-12 text-center text-gray-800 animate-fadeInUp">
        {title}
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {values && values.length > 0 ? (
            values.map((value, index) => {
                return (
                        <div
                                class="value-card bg-white rounded-2xl p-6 shadow-lg transition-all duration-300 flex flex-col items-center text-center group animate-cardEntry"
                                style={`animation-delay: ${index * 0.1}s; animation-fill-mode: both;`}
                        >
                            <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-100 transition-colors duration-300 text-2xl">
                                {value.icon}
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">
                                {value.title}
                            </h3>
                            {value.description && (
                                    <p class="text-gray-600 text-sm leading-relaxed">
                                        {value.description}
                                    </p>
                            )}
                        </div>
                );
            })
        ) : (
                <div class="col-span-4 text-center text-gray-400 py-10">
                    Нет данных для отображения ценностей.
                </div>
        )}
    </div>
</div>

<style>
    /* Локальные анимации для гарантии отображения */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes staggerFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes cardEntry {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

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

    .value-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
</style>