@extends('layouts.landing')

@section('title', config('app.name').' | Carreras, eventos y entradas')
@section('meta_description', 'Encuentra y compra entradas para carreras 5K, 21K y eventos destacados. Regiticket ofrece ticketing profesional con pagos seguros.')
@section('og_title', config('app.name').' | Eventos y ticketing')
@section('og_description', 'Plataforma profesional de entradas: carreras, maratones y más. Explora eventos destacados y compra con confianza.')
@section('twitter_title', config('app.name'))
@section('twitter_description', 'Carreras y eventos destacados. Compra entradas de forma segura.')

@push('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <style>
        .rt-experience-band-white {
            background-color: #ffffff;
            position: relative;
        }
        .rt-service-card-white {
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            height: 100%;
        }
        .rt-service-card-white:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-color: rgba(185, 24, 48, 0.2);
        }
        .rt-service-card-white .step-badge {
            width: 32px;
            height: 32px;
            background: var(--rt-cherry);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.75rem;
            margin: 0 auto;
            box-shadow: 0 4px 10px rgba(185, 24, 48, 0.3);
        }
        .rt-service-card-white .card-title {
            color: #1c1c1e;
            font-weight: 700;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .rt-experience-eyebrow-dark {
            color: var(--rt-cherry);
            font-weight: 800;
            letter-spacing: 0.15em;
            font-size: 0.75rem;
        }
    </style>
@endpush

@section('content')
    <section id="inicio" class="rt-hero-swiper-section">
        <div class="swiper rt-swiper-hero">
            <div class="swiper-wrapper">
                @foreach ($carouselSlides as $i => $slide)
                    <div class="swiper-slide">
                        <div class="rt-slide-media">
                            <div class="rt-slide-bg" style="--rt-slide-img: url('{{ $slide['image'] }}');"></div>
                        </div>
                        <div class="rt-slide-scrim" aria-hidden="true"></div>
                        <div class="rt-slide-noise" aria-hidden="true"></div>
                        <div class="container rt-hero-content position-relative">
                            <div class="col-lg-9 col-xl-8">
                                <p class="rt-hero-eyebrow text-uppercase mb-2">{{ __('Ticketing premium') }}</p>
                                <h1 class="rt-hero-title text-white mb-3">{{ $slide['title'] }}</h1>
                                <p class="rt-hero-sub lead mb-4">{{ $slide['subtitle'] }}</p>
                                <a href="#resultados" class="btn btn-lg rt-btn-cherry px-4 rt-btn-shine">{{ __('Ver eventos') }}</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination rt-swiper-pagination"></div>
            <div class="swiper-button-prev rt-swiper-nav rt-swiper-nav--prev" aria-label="{{ __('Anterior') }}"></div>
            <div class="swiper-button-next rt-swiper-nav rt-swiper-nav--next" aria-label="{{ __('Siguiente') }}"></div>
        </div>

        <a href="#resultados" class="rt-scroll-hint text-decoration-none">
            <span class="rt-scroll-hint__label">{{ __('Eventos destacados') }}</span>
            <span class="rt-scroll-hint__icon" aria-hidden="true"></span>
        </a>
    </section>

    <section id="resultados" class="py-5 py-lg-6 bg-white border-top">
        <div class="container">
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-8">
                    <h2 class="rt-section-title display-6 text-dark fw-bold mb-3">{{ __('Próximos eventos') }}</h2>
                    <p class="text-muted mb-0" style="font-size: 1.1rem;">{{ __('Explora y reserva tu lugar en los mejores eventos deportivos y experiencias.') }}</p>
                </div>
            </div>

            <div class="row rt-events-grid g-4">
                @foreach ($events as $event)
                    @include('landing.partials.event-card', ['event' => $event])
                @endforeach
            </div>
        </div>
    </section>

    <section class="rt-experience-band-white py-5 py-lg-7 border-top" aria-labelledby="rt-experience-heading">
        <div class="container">
            <div class="row justify-content-center text-center mb-5 mb-lg-6">
                <div class="col-lg-9 col-xl-8">
                    <p class="rt-experience-eyebrow-dark text-uppercase mb-2">{{ __('Tu compra en simples pasos') }}</p>
                    <h2 id="rt-experience-heading" class="rt-section-title display-6 text-dark fw-bold mb-0">
                        {{ __('La mejor experiencia de compra para tus eventos favoritos.') }}
                    </h2>
                </div>
            </div>
            <div class="row rt-experience-grid row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-5 g-4 justify-content-center">
                @foreach ($experienceSteps as $index => $step)
                    <div class="col">
                        <article class="rt-service-card-white d-flex flex-column">
                            <div class="d-flex align-items-center justify-content-center pt-4" style="background: #ffffff;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; background: #f8f9fa; padding: 20px;">
                                    <img
                                        src="{{ $step['image'] }}"
                                        alt=""
                                        class="img-fluid"
                                        loading="lazy"
                                        style="mix-blend-mode: multiply; opacity: 0.9; max-height: 100%;"
                                    >
                                </div>
                            </div>
                            <div class="p-4 text-center flex-grow-1 d-flex flex-column justify-content-center">
                                <span class="step-badge mb-3">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                                <h3 class="card-title mb-0">{{ __($step['title']) }}</h3>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof Swiper === 'undefined') return;

            new Swiper('.rt-swiper-hero', {
                loop: true,
                speed: 900,
                effect: 'fade',
                fadeEffect: { crossFade: true },
                autoplay: {
                    delay: 5500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.rt-swiper-pagination',
                    type: 'progressbar',
                },
                navigation: {
                    nextEl: '.rt-swiper-nav--next',
                    prevEl: '.rt-swiper-nav--prev',
                },
                watchSlidesProgress: true,
            });
        });
    </script>
@endpush
