{{-- resources/views/customer/agency/sections/hero.blade.php --}}
<section class="hero-section" style="background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; min-height: 600px; display: flex; align-items: center; position: relative; overflow: hidden;">
    @if($section->getConfig('background_image'))
        <div style="position: absolute; inset: 0; background-image: url('{{ asset('storage/' . $section->getConfig('background_image')) }}'); background-size: cover; background-position: center; opacity: 0.3;"></div>
    @endif

    <div class="container" style="position: relative; z-index: 1; text-align: center;">
        @if($section->title)
            <h1 style="font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2;">
                {{ $section->title }}
            </h1>
        @endif

        @if($section->subtitle)
            <p style="font-size: 1.5rem; margin-bottom: 2rem; opacity: 0.95;">
                {{ $section->subtitle }}
            </p>
        @endif

        @if($section->content)
            <p style="font-size: 1.125rem; margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto;">
                {{ $section->content }}
            </p>
        @endif

        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
            @if($section->getConfig('primary_button_text'))
                <a href="{{ $section->getConfig('primary_button_url') ?? '#' }}"
                   style="background: white; color: var(--primary); padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.2s;">
                    {{ $section->getConfig('primary_button_text') }}
                    <i class="fas fa-arrow-right"></i>
                </a>
            @endif

            @if($section->getConfig('secondary_button_text'))
                <a href="{{ $section->getConfig('secondary_button_url') ?? '#' }}"
                   style="background: rgba(255,255,255,0.2); color: white; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; text-decoration: none; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.3);">
                    {{ $section->getConfig('secondary_button_text') }}
                </a>
            @endif
        </div>
    </div>
</section>