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

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

// Получение данных из PocketBase
const valuesData = await pb.collection('company_values').getFirstListItem('');
const valueItems = await pb.collection('company_value_items').getList(1, 50, {
  filter: `parent_value = "${valuesData.id}"`,
  sort: 'order'
});
---

<!-- Company Values Component -->
<section class="py-20 bg-gradient-to-br from-slate-50 to-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {valuesData.title}
            </h2>
            <div class="w-24 h-1 bg-amber-500 mx-auto mb-6"></div>
            <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
                {valuesData.subtitle}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {valueItems.items.map((value) => (
                <div class="bg-white rounded-xl shadow-lg p-8 border border-slate-100 hover:shadow-xl transition-all duration-300 flex flex-col items-center text-center group h-full hover:-translate-y-2">
                    <div class="flex items-center justify-center h-20 w-20 rounded-full bg-amber-100 text-amber-600 mb-6 group-hover:bg-amber-500 group-hover:text-white transition-all duration-300 group-hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={value.icon} />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">{value.value_title}</h3>
                    <p class="text-gray-600 flex-grow">{value.value_description}</p>
                    <div class="mt-4 w-12 h-1 bg-amber-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:w-10"></div>
                </div>
            ))}
        </div>

        <div class="mt-16 text-center">
            <p class="text-gray-600 italic max-w-2xl mx-auto">
                &ldquo;{valuesData.quote}&rdquo;
            </p>
        </div>
    </div>
</section>