@extends('layouts.main')

@section('title', 'Rhythmic World Challenge Cup series: what to expect')

@section('styles')
<style>
    /* =====================================================
       HERO SLIDER
    ===================================================== */

    .hero-slider {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .hero-slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.08);
        transition: opacity 1.2s ease, transform 2s ease;
    }

        .hero-slide.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            z-index: 2;
        }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, rgba(15,23,42,.85), rgba(15,23,42,.45) );
    }

    .hero-content {
        position: relative;
        z-index: 5;
        height: 100%;
        max-width: 760px;
        padding-left: 8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
        animation: contentFade 1.5s ease;
    }

    .hero-badge {
        width: fit-content;
        padding: 12px 22px;
        border-radius: 50px;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,.15);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2px;
        margin-bottom: 24px;
        animation: slideUp 1s ease;
    }

    .hero-content h1 {
        font-size: 92px;
        font-weight: 800;
        line-height: 1.05;
        margin-bottom: 24px;
        animation: slideUp 1.2s ease;
    }

        .hero-content h1 span {
            display: block;
            background: linear-gradient( 135deg, #00c6ff, #00d084, #8bc34a );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .hero-content p {
        max-width: 650px;
        font-size: 18px;
        line-height: 1.9;
        color: rgba(255,255,255,.85);
        margin-bottom: 36px;
        animation: slideUp 1.4s ease;
    }

    .hero-btn {
        width: fit-content;
        text-decoration: none;
        padding: 18px 34px;
        border-radius: 60px;
        background: linear-gradient( 135deg, #00c6ff, #00d084 );
        color: white;
        font-weight: 600;
        box-shadow: 0 18px 40px rgba(0,208,132,.25);
        transition: .4s ease;
        animation: slideUp 1.6s ease;
    }

        .hero-btn:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 24px 55px rgba(0,208,132,.35);
            color: white;
        }

    .hero-dots {
        position: absolute;
        left: 50%;
        bottom: 40px;
        transform: translateX(-50%);
        display: flex;
        gap: 14px;
        z-index: 20;
    }

    .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255,255,255,.4);
        cursor: pointer;
        transition: .4s ease;
    }

        .dot.active {
            width: 42px;
            border-radius: 20px;
            background: linear-gradient( 135deg, #00c6ff, #00d084 );
        }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes contentFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @media(max-width:991px) {
        .hero-content { padding: 0 30px; }
        .hero-content h1 { font-size: 58px; }
    }

    @media(max-width:768px) {
        .hero-content h1 { font-size: 42px; }
        .hero-content p  { font-size: 16px; }
        .hero-btn        { padding: 15px 26px; }
    }

    /* =====================================================
       PREMIUM ARTICLE SECTION
    ===================================================== */

    .premium-article-section {
        background: #f7fafc;
    }

    .premium-article-card {
        background: white;
        border-radius: 32px;
        padding: 50px;
        box-shadow: 0 10px 40px rgba(15,23,42,.06);
        position: relative;
        overflow: hidden;
    }

    .article-top {
        display: flex;
        gap: 35px;
        align-items: flex-start;
        margin-bottom: 45px;
    }

    .article-image-wrapper {
        width: 280px;
        min-width: 280px;
        border-radius: 24px;
        overflow: hidden;
    }

    .article-image {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display: block;
    }

    .article-date {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        color: #00c896;
        letter-spacing: 1px;
        margin-bottom: 14px;
    }

    .article-title {
        font-size: 52px;
        line-height: 1.05;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 22px;
    }

    .article-intro {
        font-size: 17px;
        line-height: 1.8;
        color: #64748b;
    }

    .article-block {
        margin-bottom: 42px;
    }

        .article-block h2 {
            font-size: 38px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 18px;
        }

        .article-block p {
            font-size: 17px;
            line-height: 1.9;
            color: #64748b;
        }

    .article-social {
        display: flex;
        gap: 16px;
        margin-bottom: 30px;
    }

        .article-social a {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: white;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0f172a;
            font-size: 16px;
            transition: .3s;
            text-decoration: none;
        }

            .article-social a:hover {
                background: #00c896;
                color: white;
                transform: translateY(-3px);
            }

    /* SIDEBAR */

    .article-sidebar {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .sidebar-card {
        background: white;
        border-radius: 28px;
        padding: 32px;
        box-shadow: 0 10px 35px rgba(15,23,42,.06);
    }

    .sidebar-title {
        font-size: 22px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 28px;
    }

    .related-athlete {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 22px;
    }

        .related-athlete img {
            width: 72px;
            height: 72px;
            border-radius: 20px;
            object-fit: cover;
        }

        .related-athlete h4 {
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 4px;
            color: #0f172a;
        }

        .related-athlete span {
            color: #64748b;
            font-size: 14px;
        }

    .keyword-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

        .keyword-tags span {
            background: #0f172a;
            color: white;
            padding: 12px 18px;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 700;
        }

    .discipline-badge {
        background: linear-gradient(135deg,#00c6ff,#00d084);
        color: white;
        font-weight: 800;
        letter-spacing: 2px;
        text-align: center;
        padding: 18px;
        border-radius: 18px;
        font-size: 15px;
    }

    /* EVENT WIDGET */

    .event-widget {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 20px;
        border-radius: 20px;
        background: linear-gradient( 135deg, rgba(0,198,255,.08), rgba(0,208,132,.08) );
    }

    .event-date {
        width: 80px;
        height: 80px;
        border-radius: 22px;
        background: linear-gradient( 135deg, #00c6ff, #00d084 );
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        box-shadow: 0 12px 30px rgba(0,208,132,.25);
    }

        .event-date span {
            font-size: 28px;
            line-height: 1;
        }

    .event-info h4 {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 6px;
        color: #0f172a;
    }

    .event-info p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
    }

    @media(max-width:992px) {
        .article-top { flex-direction: column; }
        .article-image-wrapper { width: 100%; min-width: 100%; }
        .article-title { font-size: 38px; }
        .article-block h2 { font-size: 30px; }
    }

    @media(max-width:768px) {
        .premium-article-card { padding: 30px; }
        .article-title { font-size: 30px; }
        .article-block h2 { font-size: 24px; }
        .article-block p  { font-size: 15px; }
    }

    /* =====================================================
       RELATED EVENTS SECTION
    ===================================================== */

    .related-events-section {
        background: #f8fafc;
    }

    .related-events-card {
        background: white;
        border-radius: 30px;
        padding: 40px;
        box-shadow: 0 12px 40px rgba(15,23,42,.06);
        overflow: hidden;
    }

    .events-header {
        margin-bottom: 28px;
    }

        .events-header h2 {
            font-size: 38px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

    .events-table {
        margin: 0;
        border-collapse: separate;
        border-spacing: 0 14px;
    }

        .events-table thead th {
            border: none;
            color: #64748b;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            padding: 0 18px 12px;
            background: transparent;
        }

        .events-table tbody tr {
            background: #ffffff;
            border-radius: 18px;
            transition: .35s ease;
            box-shadow: 0 6px 18px rgba(15,23,42,.04);
        }

            .events-table tbody tr:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 35px rgba(0,208,132,.10);
            }

        .events-table tbody td {
            padding: 22px 18px;
            border: none;
            font-size: 15px;
            color: #334155;
            font-weight: 500;
            vertical-align: middle;
        }

            .events-table tbody td:nth-child(2) {
                font-weight: 700;
                color: #0f172a;
            }

    .event-search {
        width: 70px;
        text-align: center;
    }

        .event-search a {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            background: rgba(0,198,255,.08);
            color: #00b894;
            transition: .35s ease;
        }

            .event-search a:hover {
                background: linear-gradient( 135deg, #00c6ff, #00d084 );
                color: white;
                transform: scale(1.08);
            }

    @media(max-width:991px) {
        .related-events-card { padding: 28px; }
        .events-header h2 { font-size: 30px; }
        .events-table tbody td { min-width: 180px; }
    }

    @media(max-width:768px) {
        .events-header h2 { font-size: 24px; }
        .events-table tbody td { font-size: 14px; }
    }
</style>
@endsection

@section('content')

    <!-- HERO SECTION -->
    <section class="hero-slider">
        <!-- SLIDE 1 -->
        <div class="hero-slide active"
             style="background-image:url('https://images.unsplash.com/photo-1517649763962-0c623066013b?q=80&w=1600&auto=format&fit=crop');">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">WORLD GYMNASTICS</span>
                <h1>
                    Push Beyond
                    <span>Your Limits</span>
                </h1>
                <p>
                    Experience elite gymnastics competitions, world-class athletes,
                    and unforgettable moments.
                </p>
                <a href="#" class="hero-btn">Explore More</a>
            </div>
        </div>
        <!-- SLIDE 2 -->
        <div class="hero-slide"
             style="background-image:url('https://images.unsplash.com/photo-1547347298-4074fc3086f0?q=80&w=1600&auto=format&fit=crop');">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">CHAMPIONSHIP</span>
                <h1>
                    Train Like
                    <span>A Champion</span>
                </h1>
                <p>
                    Discover international tournaments, training programs,
                    and athlete development.
                </p>
                <a href="#" class="hero-btn">View Events</a>
            </div>
        </div>
        <!-- SLIDE 3 -->
        <div class="hero-slide"
             style="background-image:url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1600&auto=format&fit=crop');">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">GLOBAL EVENTS</span>
                <h1>
                    World Class
                    <span>Competitions</span>
                </h1>
                <p>
                    Follow elite gymnasts competing at the highest level
                    around the world.
                </p>
                <a href="#" class="hero-btn">Discover More</a>
            </div>
        </div>
        <!-- SLIDE 4 -->
        <div class="hero-slide"
             style="background-image:url('https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=1600&auto=format&fit=crop');">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">NEXT GENERATION</span>
                <h1>
                    Future Of
                    <span>Gymnastics</span>
                </h1>
                <p>
                    Inspiring the next generation through innovation,
                    passion and excellence.
                </p>
                <a href="#" class="hero-btn">Get Started</a>
            </div>
        </div>
        <!-- DOTS -->
        <div class="hero-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </section>

    <!-- PREMIUM ARTICLE SECTION -->
    <section class="premium-article-section py-5">
        <div class="container">
            <div class="row g-5">

                <!-- ARTICLE CONTENT -->
                <div class="col-lg-8">
                    <div class="premium-article-card">

                        <!-- SOCIAL -->
                        <div class="article-social">
                            <a href="#"><i class="bi bi-envelope"></i></a>
                            <a href="#"><i class="bi bi-facebook"></i></a>
                            <a href="#"><i class="bi bi-linkedin"></i></a>
                            <a href="#"><i class="bi bi-twitter-x"></i></a>
                        </div>

                        <!-- TOP -->
                        <div class="article-top">
                            <div class="article-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=1200&auto=format&fit=crop"
                                     class="article-image" alt="Article image">
                            </div>
                            <div class="article-header">
                                <span class="article-date">13/05/2026</span>
                                <h1 class="article-title">
                                    Rhythmic World Challenge Cup series:
                                    what to expect
                                </h1>
                                <p class="article-intro">
                                    Returning as a series of three events,
                                    the first Rhythmic World Challenge Cup
                                    of 2026 takes place later this week in Portugal.
                                </p>
                            </div>
                        </div>

                        <!-- BODY -->
                        <div class="article-body">

                            <div class="article-block">
                                <h2>What is the World Challenge Cup series?</h2>
                                <p>
                                    Smaller than the World Cup series,
                                    the World Challenge Cup continues to
                                    attract elite athletes from around the world.
                                    The competition offers athletes another
                                    opportunity to perform on the international stage.
                                </p>
                            </div>

                            <div class="article-block">
                                <h2>What's the schedule?</h2>
                                <p>
                                    Starting in Portimao, the series then moves
                                    across major international cities before
                                    concluding in a spectacular final event
                                    later this summer.
                                </p>
                            </div>

                            <div class="article-block">
                                <h2>How does the series work?</h2>
                                <p>
                                    Athletes earn points during each competition.
                                    Final rankings are determined by total
                                    accumulated performances across the series.
                                </p>
                            </div>

                            <div class="article-block">
                                <h2>Who should we look out for?</h2>
                                <p>
                                    Several Olympic finalists and rising stars
                                    are expected to compete, creating one of
                                    the most exciting seasons in recent years.
                                </p>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- SIDEBAR -->
                <div class="col-lg-4">
                    <div class="article-sidebar">

                        <!-- ATHLETES -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Related Athletes</h3>
                            <div class="related-athlete">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Raffaeli Sofia">
                                <div>
                                    <h4>RAFFAELI</h4>
                                    <span>Sofia</span>
                                </div>
                            </div>
                            <div class="related-athlete">
                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Varfolomeev Darja">
                                <div>
                                    <h4>VARFOLOMEEV</h4>
                                    <span>Darja</span>
                                </div>
                            </div>
                        </div>

                        <!-- KEYWORDS -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Related Keywords</h3>
                            <div class="keyword-tags">
                                <span>Rhythmic Gymnastics</span>
                                <span>World Challenge Cup</span>
                                <span>2026</span>
                            </div>
                        </div>

                        <!-- DISCIPLINE -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Related Discipline</h3>
                            <div class="discipline-badge">RHYTHMIC</div>
                        </div>

                        <!-- UPCOMING EVENT -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Upcoming Event</h3>
                            <div class="event-widget">
                                <div class="event-date">
                                    <span>15</span>
                                    MAY
                                </div>
                                <div class="event-info">
                                    <h4>Portimão Challenge Cup</h4>
                                    <p>Portugal • 15-17 May 2026</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- RELATED EVENTS SECTION -->
    <section class="related-events-section py-5">
        <div class="container">
            <div class="related-events-card">

                <div class="events-header">
                    <h2>Related Events</h2>
                </div>

                <div class="table-responsive">
                    <table class="table events-table align-middle">
                        <thead>
                            <tr>
                                <th>DATES</th>
                                <th>TITLE</th>
                                <th>CITY</th>
                                <th>DISCIPLINE(S)</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>15/05/2026 - 17/05/2026</td>
                                <td>FIG World Challenge Cup 2026</td>
                                <td>PORTIMAO (POR)</td>
                                <td>RGI, RGC</td>
                                <td class="event-search">
                                    <a href="#"><i class="bi bi-search"></i></a>
                                </td>
                            </tr>
                            <tr>
                                <td>26/06/2026 - 28/06/2026</td>
                                <td>FIG World Challenge Cup 2026</td>
                                <td>CLUJ-NAPOCA (ROU)</td>
                                <td>RGI, RGC</td>
                                <td class="event-search">
                                    <a href="#"><i class="bi bi-search"></i></a>
                                </td>
                            </tr>
                            <tr>
                                <td>19/06/2026 - 21/06/2026</td>
                                <td>FIG World Challenge Cup 2026</td>
                                <td>BEIJING (CHN)</td>
                                <td>RGI, RGC</td>
                                <td class="event-search">
                                    <a href="#"><i class="bi bi-search"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </section>

@endsection

@section('scripts')
<script>
    // Hero Slider
    (function () {
        const slides = document.querySelectorAll('.hero-slide');
        const dots   = document.querySelectorAll('.dot');
        let current  = 0;

        function goTo(index) {
            slides[current].classList.remove('active');
            dots[current].classList.remove('active');
            current = index;
            slides[current].classList.add('active');
            dots[current].classList.add('active');
        }

        dots.forEach(function (dot, i) {
            dot.addEventListener('click', function () { goTo(i); });
        });

        setInterval(function () {
            goTo((current + 1) % slides.length);
        }, 5000);
    })();
</script>
@endsection