---
import { authService } from '@/lib/authService';

// Типы данных
type BenefitItem = {
    title: string;
    description: string;
    iconPath: string;
};

// Тип записи из PocketBase
type BenefitsRecord = {
    headline_start: string;
    headline_highlight: string;
    description: string;
    benefits_list: BenefitItem[];
};

// Инициализация клиента
const pb = authService.createClientFromRequest(Astro.request);

// Прямой запрос без проверок (предполагаем, что запись существует)
const record = await pb.collection('partner_benefits').getFirstListItem('') as unknown as BenefitsRecord;

// Достаем массив карточек
const benefits = record.benefits_list;
---

<section class="py-16 md:py-24 lg:py-32 bg-slate-900">
    <div class="max-w-7xl mx-auto px-6 sm:px-8">

        <!-- Section Header -->
        <div class="text-center mb-16 md:mb-24">
            <h2 class="text-4xl md:text-5xl font-bold text-white leading-tight">
                {record.headline_start}
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
                    {record.headline_highlight}
                </span>
            </h2>
            <p class="mt-6 text-lg md:text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
                {record.description}
            </p>
        </div>

        <!-- Benefits Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
            {benefits.map((item) => (
                    <div class="group h-full bg-slate-800/50 border border-slate-700 rounded-2xl p-8 text-center flex flex-col items-center transition-all duration-300 hover:border-amber-500/50 hover:bg-slate-800 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(245,158,11,0.15)]">

                        <!-- Icon Container -->
                        <div class="mb-6 flex-shrink-0 w-16 h-16 rounded-full flex items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 shadow-lg shadow-orange-500/20 group-hover:scale-110 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.iconPath} />
                            </svg>
                        </div>

                        <!-- Content -->
                        <h3 class="text-xl font-bold text-white mb-3 group-hover:text-amber-400 transition-colors">
                            {item.title}
                        </h3>

                        <p class="text-slate-400 text-sm leading-relaxed flex-grow">
                            {item.description}
                        </p>
                    </div>
            ))}
        </div>
    </div>
</section>