---
interface Props {
    post: {
        image: string;
        category: string;
        title: string;
        excerpt: string;
        date: string;
        slug: string;
    };
}

const { post } = Astro.props;
---

<article class="group relative bg-white/80 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/50 shadow-lg hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 transition-all duration-500 hover:-translate-y-1 flex flex-col h-full">
    <!-- Декоративный градиент при hover -->
    <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-blue-primary)]/5 via-transparent to-[var(--color-gold)]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

    <!-- Изображение -->
    <div class="relative h-56 overflow-hidden">
        <img
                src={post.image}
                alt={post.title}
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

        <!-- Категория на изображении -->
        <div class="absolute top-4 left-4">
            <span class="px-3 py-1 bg-white/95 backdrop-blur text-[var(--color-blue-primary)] text-[10px] font-bold uppercase tracking-wider rounded-full shadow-sm">
                {post.category}
            </span>
        </div>
    </div>

    <!-- Контент -->
    <div class="p-6 flex flex-col flex-grow relative z-10">
        <div class="flex items-center gap-2 text-xs text-gray-500 font-medium mb-3">
            <svg class="w-4 h-4 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <span>{post.date}</span>
        </div>

        <h3 class="text-xl font-bold text-gray-900 mb-3 leading-tight group-hover:text-[var(--color-blue-primary)] transition-colors duration-300">
            <a href={post.slug} class="hover:text-[var(--color-blue-primary)]">
                {post.title}
            </a>
        </h3>

        <p class="text-gray-700 text-sm mb-6 flex-grow line-clamp-3 leading-relaxed">
            {post.excerpt}
        </p>

        <!-- Футер -->
        <div class="mt-auto pt-4 border-t border-gray-100 flex justify-between items-center">
            <a href={post.slug} class="inline-flex items-center text-sm font-bold text-[var(--color-blue-primary)] hover:text-[var(--color-gold)] transition-colors group/link">
                Читать далее
                <svg class="w-4 h-4 ml-2 transform group-hover/link:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </a>
        </div>
    </div>
</article>