---
const allServices = [
    {
        title: "Уголовное право",
        desc: "Защита по экономическим статьям, наркотикам, насилию",
        icon: "shield",
        available: true
    },
    {
        title: "Арбитраж",
        desc: "Корпоративные споры, банкротство, долги",
        icon: "briefcase",
        available: true
    },
    {
        title: "Административное",
        desc: "ДТП, штрафы, лишение прав",
        icon: "document",
        available: true,
        link: "/services/dtp"
    },
    {
        title: "Жилищное право",
        desc: "Приватизация, выселение, незаконные перепланировки",
        icon: "home",
        available: false,
        note: "По записи"
    },
    {
        title: "Земельное право",
        desc: "Оформление участков, споры о границах",
        icon: "map",
        available: false,
        note: "Консультации"
    },
    {
        title: "Трудовое право",
        desc: "Увольнения, взыскание зарплаты, дискриминация",
        icon: "users",
        available: false,
        note: "Сезонно"
    }
];

const iconPaths = {
    shield: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
    briefcase: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
    document: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
    home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
    map: "M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7",
    users: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
};
---

<section id="all-services" class="py-24 bg-gray-50">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
            <div>
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Полный перечень услуг</h2>
                <p class="text-gray-600 max-w-2xl">
                    Оказываю профессиональную помощь по всем отраслям права. Однако приоритет отдается гражданским и семейным делам — по ним гарантирован индивидуальный подход и максимальная вовлеченность.
                </p>
            </div>

            <!-- Легенда -->
            <div class="flex gap-6 text-sm">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                    <span class="text-gray-600">Основное направление</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-[var(--color-gold)]"></div>
                    <span class="text-gray-600">Принимаю в работу</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-gray-300"></div>
                    <span class="text-gray-600">Консультации/Ограниченно</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {allServices.map((service) => (
                    <a href={service.link || "#"} class={`group relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border-2 ${service.available ? 'border-transparent hover:border-[var(--color-gold)]' : 'border-gray-100 opacity-75 hover:opacity-100'}`}>

                        <!-- Индикатор статуса -->
                        <div class={`absolute top-4 right-4 w-3 h-3 rounded-full ${service.available ? 'bg-[var(--color-gold)]' : 'bg-gray-300'}`}></div>

                        <div class="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mb-4 group-hover:bg-[var(--color-blue-primary)] transition-colors">
                            <svg class="w-6 h-6 text-[var(--color-blue-primary)] group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[service.icon]}/>
                            </svg>
                        </div>

                        <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-[var(--color-blue-primary)] transition-colors">
                            {service.title}
                        </h3>
                        <p class="text-gray-500 text-sm mb-4">
                            {service.desc}
                        </p>

                        {service.note ? (
                                <span class="inline-block px-3 py-1 bg-gray-100 text-gray-500 text-xs font-bold uppercase rounded-full">
                            {service.note}
                        </span>
                        ) : (
                                <span class="inline-flex items-center gap-2 text-[var(--color-gold)] text-sm font-bold group-hover:gap-3 transition-all">
                            Подробнее
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </span>
                        )}
                    </a>
            ))}
        </div>
    </div>
</section>
