@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'image' => null,
    'buttonText' => null,
    'buttonLink' => null,
    'reverse' => false,
    'cardClass' => 'mb-4',
    'sectionClass' => '',
])

@if(filled($title) || filled($description) || filled($image))
    <section class="panel-card rounded-5 p-4 p-lg-5 h-100 {{ $cardClass }} {{ $sectionClass }}">
        <div class="row g-4 align-items-center {{ $reverse ? 'flex-lg-row-reverse' : '' }}">
            <div class="{{ filled($image) ? 'col-lg-6 content-section-copy' : 'col-12 content-section-copy' }}">
                @if(filled($eyebrow))
                    <div class="small text-secondary text-uppercase fw-semibold mb-2">{{ $eyebrow }}</div>
                @endif
                @if(filled($title))
                    <h2 class="h3 mb-3">{{ $title }}</h2>
                @endif
                @if(filled($description))
                    <div class="text-secondary" style="white-space: pre-line;">{{ $description }}</div>
                @endif
                @if(filled($buttonText) && filled($buttonLink))
                    <div class="mt-4">
                        <a href="{{ $buttonLink }}" class="btn btn-primary rounded-pill">{{ $buttonText }}</a>
                    </div>
                @endif
            </div>
            @if(filled($image))
                <div class="col-lg-6">
                    <img src="{{ asset('storage/'.$image) }}" alt="{{ $title ?: 'Section image' }}" class="img-fluid rounded-5 w-100" style="object-fit: cover; max-height: 420px;">
                </div>
            @endif
        </div>
    </section>
@endif