@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)
                @php
                    $img = $s['image'] ?? null;
                    $imgDefault = is_array($img) ? ($img['default'] ?? null) : $img;
                    $imgMobile  = is_array($img) ? ($img['mobile'] ?? null) : null;
                    $bgPos = $s['bg_pos'] ?? 'center';
                    $style = '';
                    if ($imgDefault) $style .= "--hero-bg:url('{$imgDefault}');";
                    if ($imgMobile)  $style .= "--hero-bg-mobile:url('{$imgMobile}');";
                    if ($bgPos)      $style .= "--hero-bg-pos:{$bgPos};";
                @endphp

                <div class="hero-slide" style="{{ $style }}">
                    <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