{{-- resources/views/customer/agency/sections/custom.blade.php --}}
<section class="custom-section" style="padding: 4rem 0;">
    <div class="container">
        @if($section->title)
            <div style="text-align: center; margin-bottom: 3rem;">
                @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

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

        @if($section->content)
            <div style="max-width: 1000px; margin: 0 auto;">
                {!! $section->content !!}
            </div>
        @endif

        @if($section->getConfig('custom_html'))
            <div style="margin-top: 2rem;">
                {!! $section->getConfig('custom_html') !!}
            </div>
        @endif
    </div>
</section>

<style>
    .custom-section img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .custom-section h3 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #111827;
        margin: 2rem 0 1rem;
    }

    .custom-section h4 {
        font-size: 1.375rem;
        font-weight: 600;
        color: #374151;
        margin: 1.5rem 0 0.75rem;
    }

    .custom-section p {
        font-size: 1.063rem;
        line-height: 1.8;
        color: #6B7280;
        margin-bottom: 1rem;
    }

    .custom-section ul,
    .custom-section ol {
        margin: 1rem 0 1rem 2rem;
        line-height: 1.8;
        color: #6B7280;
    }

    .custom-section a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }

    .custom-section a:hover {
        text-decoration: underline;
    }
</style>