@props([
'subject' => null,
'title' => '',
'description' => null,
'primaryButton' => null,
'secondaryButton' => null,
])

<div {{ $attributes->merge(['class' => 'w-full mx-auto max-w-7xl p-4 py-20']) }}>
    <x-atoms.title
        :subject="$subject"
        :title="$title"
        :subtitle="$description ? (is_array($description) ? $description : [$description]) : []"
        align="center"
        class="mb-8 max-w-[700px] mx-auto" />

    @if($primaryButton || $secondaryButton)
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
        @if($primaryButton)
        <x-atoms.button-link :href="$primaryButton['to'] ?? $primaryButton['href'] ?? '#'">
            {{ $primaryButton['text'] ?? $primaryButton['label'] ?? '' }}
        </x-atoms.button-link>
        @endif
        @if($secondaryButton)
        <x-atoms.button-link :href="$secondaryButton['to'] ?? $secondaryButton['href'] ?? '#'" variant="outline">
            {{ $secondaryButton['text'] ?? $secondaryButton['label'] ?? '' }}
        </x-atoms.button-link>
        @endif
    </div>
    @endif
</div>