{{-- resources/views/customer/agency/sections/features.blade.php --}}
<section class="features-section" style="background: white; position: relative;">
    <div style="position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%); z-index: 0;"></div>

    <div class="container" style="position: relative; z-index: 1;">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 4rem;">
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: #111827; line-height: 1.2;">
                        {{ $section->title }}
                    </h2>
                @endif
            </div>
        @endif

        @php
            $features = $section->getConfig('features', [
                ['icon' => 'fa-shield-alt', 'title' => 'Güvenli Ödeme', 'description' => 'SSL sertifikalı güvenli ödeme altyapısı ile işlemleriniz koruma altında'],
                ['icon' => 'fa-headset', 'title' => '7/24 Destek', 'description' => 'Her an yanınızdayız, sorularınız için profesyonel destek ekibimiz hizmetinizde'],
                ['icon' => 'fa-certificate', 'title' => 'Lisanslı Acentemiz', 'description' => 'TÜRSAB belgeli, güvenilir ve profesyonel turizm hizmeti'],
                ['icon' => 'fa-undo', 'title' => 'Esnek İptal', 'description' => 'Planlarınız değişirse kolay iptal ve iade politikamızdan yararlanın']
            ]);
        @endphp

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem;">
            @foreach($features as $feature)
                <div style="background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; transition: all 0.3s; border: 2px solid transparent;">
                    <div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); transform: rotate(-5deg);">
                        <i class="fas {{ $feature['icon'] }}" style="font-size: 2rem; color: white; transform: rotate(5deg);"></i>
                    </div>

                    <h3 style="font-size: 1.375rem; font-weight: 700; color: #111827; margin-bottom: 0.875rem;">
                        {{ $feature['title'] }}
                    </h3>

                    <p style="color: #6B7280; line-height: 1.7; font-size: 1rem;">
                        {{ $feature['description'] }}
                    </p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<style>
    .features-section > .container > div:last-child > div:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        border-color: var(--primary);
    }

    .features-section > .container > div:last-child > div:hover > div:first-child {
        transform: rotate(0deg) scale(1.1);
    }
</style>