@props([
    'imagePath' => null,
    'imageAlt' => null,
    'heading' => null,
    'intro' => null,
    'points' => [],
])

@if ($heading || count($points) > 0)
    <section aria-labelledby="audience-heading" class="border-b border-amare-border bg-amare-bg-deep" data-reveal-group>
        <div class="grid min-h-[390px] lg:grid-cols-2">
            <div class="min-h-[300px] bg-amare-bg lg:min-h-0" data-reveal-media data-reveal-from="left">
                @if ($imagePath)
                    <x-media.image :path="$imagePath" :alt="$imageAlt ?: $heading" loading="lazy" sizes="(max-width: 1023px) 100vw, 50vw" class="img-editorial h-full w-full object-cover" />
                @endif
            </div>
            <div class="flex items-center bg-amare-bg-deep px-6 py-16 lg:px-[clamp(3rem,6vw,6rem)]">
                <div class="w-full max-w-[430px]" data-reveal data-reveal-from="right">
                    @if ($heading)
                        <h2 id="audience-heading" class="text-3xl font-medium uppercase tracking-[0.05em]">{{ $heading }}</h2>
                        <div class="mt-4 h-px w-12 bg-amare-border" aria-hidden="true"></div>
                    @endif
                    @if ($intro)
                        <p class="mt-6 text-lg text-amare-text-muted">{{ $intro }}</p>
                    @endif
                    @if (count($points) > 0)
                        <ul class="mt-8 space-y-3">
                            @foreach ($points as $point)
                                <li class="flex items-start gap-3">
                                    <span aria-hidden="true" class="text-amare-accent">✓</span>
                                    <span>{{ $point }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endif