{{-- Partial: card de slide existente do Hero SUCESU --}}
<div class="card mb-3 slide-item border shadow-sm" data-slide-index="{{ $index }}">
    <div class="card-header d-flex justify-content-between align-items-center py-2 px-3 bg-light">
        <h6 class="card-title mb-0 small fw-bold text-secondary">
            <i class="bi bi-image me-1" aria-hidden="true"></i> Slide <span class="slide-number">{{ $index + 1 }} de {{ $total }}</span>
        </h6>
        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-slide py-0 px-2"
                aria-label="Remover este slide">
            <i class="bi bi-trash-fill" aria-hidden="true"></i>
        </button>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label small fw-semibold" for="hero-slide-{{ $index }}-title">Título do Slide <span class="text-danger" aria-hidden="true">*</span></label>
                <input type="text" name="parameters[slides][{{ $index }}][title]"
                       id="hero-slide-{{ $index }}-title"
                       class="form-control form-control-sm" maxlength="255"
                       value="{{ $slide['title'] ?? '' }}"
                       placeholder="Ex: SUCESU — Tecnologia que transforma" required
                       aria-required="true">
            </div>
            <div class="col-md-6">
                <label class="form-label small fw-semibold" for="hero-slide-{{ $index }}-subtitle">Subtítulo</label>
                <input type="text" name="parameters[slides][{{ $index }}][subtitle]"
                       id="hero-slide-{{ $index }}-subtitle"
                       class="form-control form-control-sm" maxlength="500"
                       value="{{ $slide['subtitle'] ?? '' }}"
                       placeholder="Ex: Conectando profissionais de TI em todo o Brasil">
            </div>
            <div class="col-md-6">
                <label class="form-label small fw-semibold" for="hero-slide-{{ $index }}-cta-text">Texto do Botão (CTA)</label>
                <input type="text" name="parameters[slides][{{ $index }}][cta_text]"
                       id="hero-slide-{{ $index }}-cta-text"
                       class="form-control form-control-sm" maxlength="255"
                       value="{{ $slide['cta_text'] ?? '' }}"
                       placeholder="Ex: Saiba mais">
            </div>
            <div class="col-md-6">
                <label class="form-label small fw-semibold" for="hero-slide-{{ $index }}-cta-url">Link do Botão</label>
                <input type="text" name="parameters[slides][{{ $index }}][cta_url]"
                       id="hero-slide-{{ $index }}-cta-url"
                       class="form-control form-control-sm" maxlength="500"
                       value="{{ $slide['cta_url'] ?? '' }}"
                       placeholder="Ex: /sobre">
            </div>
            <div class="col-12">
                @include('v2-service-landingsectionseditor::components.forms.image-picker', [
                    'label'   => 'Imagem de Fundo do Slide',
                    'name'    => "parameters[slides][{$index}][image_id]",
                    'value'   => $slide['image_id'] ?? '',
                    'inputId' => "hero-slide-{$index}-image",
                ])
                <small class="text-muted d-block mt-1">
                    Recomendado: 1920×900px (paisagem). A imagem cobre todo o hero (recorte <code>cover</code>).
                </small>
            </div>
        </div>
    </div>
</div>