@props([
  'slides' => [],
  'variant' => 'compact',  // 'main' | 'compact'
  'id' => 'hero'
])
@if(!empty($slides))
    <section class="hero-slider hero-slider--{{ $variant }}" id="{{ $id }}" aria-label="프로모션 배너">
        <div class="hero-track">
            @foreach($slides as $s)
                <div class="hero-slide">
                    <div class="hero-content">
                        @if(!empty($s['kicker']))
                            <div class="hero-kicker">{{ $s['kicker'] }}</div>
                        @endif

                        <h2 class="hero-title">{{ $s['title'] }}</h2>

                        @if(!empty($s['desc']))
                            <p class="hero-desc">{{ $s['desc'] }}</p>
                        @endif

                        @if(!empty($s['cta_label']) && !empty($s['cta_url']))
                            <a href="{{ $s['cta_url'] }}" class="btn btn-primary hero-cta">
                                {{ $s['cta_label'] }}
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        @if(count($slides) > 1)
            <button class="slider-arrow prev" aria-label="이전 배너">‹</button>
            <button class="slider-arrow next" aria-label="다음 배너">›</button>

            <div class="dots-container" aria-label="배너 선택">
                @foreach($slides as $idx => $s)
                    <button class="dot {{ $idx===0?'active':'' }}" data-index="{{ $idx }}" aria-label="배너 {{ $idx+1 }}"></button>
                @endforeach
            </div>
        @endif
    </section>
@endif