---
import { PRACTICE_START_YEAR } from '@constants/constants.ts';
import { getYearDeclension } from '@utils/stats.utils.ts';

const whyUsImage = '/images/home/whyus/WhyUs.avif';

const currentYear = new Date().getFullYear();
const yearsOfPractice = currentYear - PRACTICE_START_YEAR;
const yearDeclension = getYearDeclension(yearsOfPractice);

const features = [
    {
        title: "Абсолютная анонимность",
        desc: "Строгое соблюдение адвокатской тайны. Любая информация остается полностью конфиденциальной.",
        icon: "shield-check"
    },
    {
        title: "Глубокая экспертиза",
        desc: "Опыт включает сотни выигранных дел в различных инстанциях, от мировых судов до Верховного Суда РФ.",
        icon: "academic-cap"
    },
    {
        title: "Прозрачные условия",
        desc: "Фиксированная стоимость услуг, прописанная в договоре. Никаких скрытых платежей.",
        icon: "currency"
    }
];

const iconPaths: Record<string, string> = {
    "shield-check": "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",
    "academic-cap": "M12 14l9-5-9-5-9 5 9 5z M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z M12 14L4.5 8.25",
    "currency": "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
};
---

<section class="relative py-24 bg-gray-50 overflow-hidden">
    <!-- Декоративный фон -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-1/2 left-0 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl -translate-y-1/2"></div>
    </div>

    <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

            <!-- Левая колонка: Изображение -->
            <div class="relative group">
                <div class="absolute -inset-4 bg-gradient-to-br from-[var(--color-gold)]/20 to-[var(--color-blue-primary)]/20 rounded-3xl blur-2xl opacity-50 group-hover:opacity-70 transition-opacity"></div>

                <div class="relative rounded-2xl overflow-hidden shadow-2xl">
                    <img
                            src={whyUsImage}
                            alt="Адвокатский стол"
                            class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
                            width="800"
                            height="600"
                            loading="lazy"
                    />

                    <!-- Плавающая карточка -->
                    <div class="absolute bottom-8 right-8 bg-white/95 backdrop-blur-xl p-6 rounded-2xl shadow-2xl border border-white/50 max-w-[240px]">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                                <span class="text-2xl font-bold text-white">{yearsOfPractice}</span>
                            </div>
                            <div>
                                <span class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Опыт работы</span>
                                <span class="text-sm text-gray-900 font-semibold leading-tight">{yearDeclension} безупречной практики</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Правая колонка: Контент -->
            <div>
                <div class="mb-12">
                    <span class="inline-block px-4 py-2 bg-[var(--color-blue-primary)]/10 text-[var(--color-blue-primary)] text-xs font-bold uppercase tracking-wider rounded-full mb-4">
                        Наше преимущество
                    </span>
                    <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
                        Почему выбирают <span class="text-[var(--color-blue-primary)]">нас?</span>
                    </h2>
                </div>

                <div class="space-y-8">
                    {features.map((item, index) => (
                            <div class="flex gap-6 group">
                                <div class="relative flex-shrink-0">
                                    <div class="w-14 h-14 bg-white rounded-2xl shadow-lg border border-gray-100 flex items-center justify-center group-hover:bg-[var(--color-blue-primary)] group-hover:border-[var(--color-blue-primary)] transition-all duration-300">
                                        <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[item.icon]}/>
                                        </svg>
                                    </div>
                                    <!-- Линия соединительная -->
                                    {index !== features.length - 1 && (
                                            <div class="absolute top-14 left-1/2 w-px h-8 bg-gray-200 -translate-x-1/2"></div>
                                    )}
                                </div>

                                <div class="pt-2">
                                    <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-[var(--color-blue-primary)] transition-colors">
                                        {item.title}
                                    </h3>
                                    <p class="text-gray-600 leading-relaxed">
                                        {item.desc}
                                    </p>
                                </div>
                            </div>
                    ))}
                </div>
            </div>
        </div>
    </div>
</section>