@props([
'title' => null,
'subtitle' => null,
'cta' => null,
'ctaLink' => '#',
'size' => 'nm', // sm, nm, lg
'centered' => false,
])

<section {{ $attributes->merge(['class' => "section-{$size} overflow-hidden relative"]) }}>
    <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative z-10">
        @if($title || $subtitle)
        <div
            class="flex flex-col md:flex-row {{ $centered ? 'items-center text-center' : 'items-end justify-between' }} mb-8">
            <div class="{{ $centered ? 'max-w-3xl mx-auto' : '' }}">
                @if($title)
                    <h2 class="font-display text-4xl md:text-5xl font-black text-text-base dark:text-white tracking-tighter uppercase mb-4">{{
                    $title }}</h2>
                @endif
                @if($subtitle)
                    <p class="text-text-dim text-lg md:text-xl font-medium leading-relaxed">{{ $subtitle }}</p>
                @endif
            </div>
            @if($cta)
            <div class="{{ $centered ? 'mt-10' : 'mb-2' }}">
                <a href="{{ $ctaLink }}"
                    class="group flex items-center gap-3 text-sm font-bold text-brand-400 hover:text-white transition-all uppercase tracking-[0.2em]">
                    {{ $cta }}
                    <span
                        class="size-8 rounded-full border border-brand-500/20 flex items-center justify-center group-hover:bg-brand-500 group-hover:border-brand-500 transition-all">
                        <svg class="size-4 group-hover:translate-x-0.5 transition-transform" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </span>
                </a>
            </div>
            @endif
        </div>
        @endif

        {{ $slot }}
    </div>
</sectio