{{-- resources/views/customer/agency/sections/about.blade.php --}}
<section class="about-section" style="background: #F9FAFB;">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
            <div>
                @if($section->title)
                    <h2 style="font-size: 2.5rem; font-weight: 700; color: #111827; margin-bottom: 1rem;">
                        {{ $section->title }}
                    </h2>
                @endif

                @if($section->subtitle)
                    <p style="font-size: 1.125rem; color: var(--accent); font-weight: 600; margin-bottom: 1.5rem;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->content)
                    <div style="font-size: 1.125rem; line-height: 1.8; color: #6B7280; margin-bottom: 2rem;">
                        {!! nl2br(e($section->content)) !!}
                    </div>
                @endif

                @if($section->getConfig('features'))
                    <ul style="list-style: none; padding: 0; margin: 2rem 0;">
                        @foreach($section->getConfig('features') as $feature)
                            <li style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                                <i class="fas fa-check-circle" style="color: var(--primary); font-size: 1.25rem;"></i>
                                <span style="font-size: 1.125rem; color: #374151;">{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <div>
                @if($section->getConfig('image'))
                    <img src="{{ asset('storage/' . $section->getConfig('image')) }}"
                         alt="{{ $section->title }}"
                         style="width: 100%; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
                @endif
            </div>
        </div>
    </div>
</section>

<style>
    @media (max-width: 768px) {
        .about-section > .container > div {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
</style>