---
export interface Props {
    case: {
        id: string;
        title: string;
        category: string;
        result: 'won' | 'settled' | 'ongoing';
        amount?: string;
        date: string;
        description: string;
        tag: string;
    };
}

const { case: caseData } = Astro.props;

const resultConfig = {
    won: {
        label: 'Дело выиграно',
        color: 'bg-green-500',
        bg: 'bg-green-50',
        text: 'text-green-700',
        stamp: 'ПОБЕДА'
    },
    settled: {
        label: 'Урегулировано',
        color: 'bg-[var(--color-gold)]',
        bg: 'bg-amber-50',
        text: 'text-amber-700',
        stamp: 'СОГЛАШЕНИЕ'
    },
    ongoing: {
        label: 'В процессе',
        color: 'bg-blue-500',
        bg: 'bg-blue-50',
        text: 'text-blue-700',
        stamp: 'В РАБОТЕ'
    }
};

const config = resultConfig[caseData.result];
---

<article class="group relative bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 transition-all duration-500 border border-gray-100">
    <!-- Верхняя плашка с категорией -->
    <div class="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
        <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">{caseData.category}</span>
        <span class="text-xs text-gray-400">{caseData.date}</span>
    </div>

    <div class="p-6 relative">
        <!-- "Печать" результата (появляется при hover) -->
        <div class="absolute top-4 right-4 w-20 h-20 border-4 border-[var(--color-gold)] rounded-full flex items-center justify-center transform rotate-12 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-50 group-hover:scale-100 pointer-events-none">
            <span class="text-[10px] font-black text-[var(--color-gold)] uppercase text-center leading-tight">{config.stamp}</span>
        </div>

        <!-- Тег дела -->
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg ${config.bg} ${config.text} text-xs font-bold mb-4">
            <span class="w-1.5 h-1.5 rounded-full ${config.color}"></span>
            {caseData.tag}
        </div>

        <!-- Заголовок -->
        <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-[var(--color-blue-primary)] transition-colors">
            {caseData.title}
        </h3>

        <!-- Описание -->
        <p class="text-gray-600 text-sm leading-relaxed mb-6 line-clamp-3">
            {caseData.description}
        </p>

        <!-- Футер с суммой и ссылкой -->
        <div class="flex items-end justify-between pt-4 border-t border-gray-100">
            <div>
                {caseData.amount && (
                        <div class="text-xs text-gray-500 uppercase tracking-wider mb-1">Сумма дела</div>
                        <div class="text-xl font-black text-gray-900">{caseData.amount}</div>
                )}
            </div>

            <button class="flex items-center gap-2 text-sm font-bold text-[var(--color-blue-primary)] hover:text-[var(--color-gold)] transition-colors group/btn">
                Подробнее
                <svg class="w-4 h-4 transform group-hover/btn: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"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Цветная полоска снизу -->
    <div class="h-1 w-full ${config.color} transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</article>
