@if(($settings?->show_events ?? true) && $events->isNotEmpty())
<section class="section {{ $sectionBg ?? '' }}" id="eventos">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="badge-pill">Eventos</span>
            <h2 class="section-title mt-2">{!! $settings?->events_title ?: 'Proximos Eventos' !!}</h2>
            @if($settings?->events_subtitle)
                <p class="section-subtitle mx-auto">{!! $settings->events_subtitle !!}</p>
            @endif
        </div>
        <div class="timeline">
            @foreach($events as $event)
                <div class="row timeline-item align-items-center g-4" data-aos="fade-up">
                    <div class="col-12 col-md-5 {{ $loop->odd ? 'text-md-end' : 'order-md-2' }}">
                        <div class="fw-bold text-primary-brand">{{ $event->event_date->format('d F Y') }}</div>
                        <h6 class="fw-bold mb-1">{{ $event->title }}</h6>
                        <small class="text-muted"><i class="bi bi-geo-alt me-1"></i>{{ $event->location ?: 'Por confirmar' }}</small>
                    </div>
                    <div class="col-12 col-md-2 text-center d-none d-md-block position-relative">
                        <div class="timeline-dot"></div>
                    </div>
                    <div class="col-12 col-md-5 {{ $loop->odd ? 'order-md-3' : '' }}">
                        <div class="card card-hover shadow-sm">
                            <div class="card-body p-3">
                                <p class="text-muted small mb-0">{{ Str::limit($event->description ?? '', 90) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('events.index') }}" class="btn btn-outline-primary rounded-pill">Ver todos los eventos</a>
        </div>
    </div>
</section>
@endif
