@extends('layouts.app')

@section('title', 'CinemaTwisty - Séances de cinéma')

@section('content')
<div class="container mx-auto px-4 py-8">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600;700&display=swap');

        .ct-logo-intro {
            border: 1px solid rgba(255, 255, 255, 0.18);
            /* background: linear-gradient(180deg, rgba(17, 24, 39, 0.35), rgba(17, 24, 39, 0.12)); */
            background: linear-gradient(180deg, rgba(1, 0, 1, 1.35), rgba(12, 19, 34, 0.12));
            backdrop-filter: blur(6px);
        }

        .ct-logo-stage {
            position: relative;
            width: min(92vw, 460px);
            height: 250px;
            margin: 0 auto;
        }

        .ct-logo-title-wrap {
            display: inline-block;
            opacity: 0;
            transform: translateY(18px) scale(0.88) rotate(-2deg);
            padding-top: 6px;
        }

        .ct-logo-title-wrap.ct-play-intro {
            animation: ctTitleCycleIntro 10s cubic-bezier(0.2, 0.9, 0.2, 1) 1 both;
        }

        .ct-logo-title-wrap.ct-play-loop {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(0deg);
            animation: ctTitleCycleLoop 10s cubic-bezier(0.2, 0.9, 0.2, 1) 1 both;
        }

        .ct-logo-title {
            display: inline-block;
            font-size: clamp(2rem, 5.2vw, 3.4rem);
            line-height: 1;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.01em;
            text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
            white-space: nowrap;
            transform-origin: center bottom;
        }

        .ct-logo-title.ct-font-comfortaa {
            font-family: 'Comfortaa', 'Trebuchet MS', 'Segoe UI', sans-serif;
            font-weight: 700;
            letter-spacing: 0.015em;
        }

        .ct-logo-mascot {
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -50%);
            width: clamp(120px, 22vw, 175px);
            aspect-ratio: 2 / 3;
            object-fit: cover;
            border-radius: 10px;
            pointer-events: none;
        }

        .ct-logo-paw {
            position: absolute;
            width: clamp(46px, 9vw, 50px);
            --paw-mouth-left: 49%;
            --paw-mouth-top: 71%;
            --paw-mouth-rotate: 0deg;
            --paw-pot-left: 50%;
            --paw-pot-top: 80%;
            --paw-pot-rotate: 110deg;
            --paw-mid-left: 50.5%;
            --paw-mid-top: 75.8%;
            --paw-mid-rotate: 62deg;
            left: var(--paw-pot-left);
            top: var(--paw-pot-top);
            transform: translate(-50%, -50%) rotate(var(--paw-pot-rotate));
            pointer-events: none;
        }

        .ct-logo-paw.ct-paw-cycle {
            animation: ctPawCycle 10s linear 1 both;
        }

        .ct-logo-paw-mouth {
            left: var(--paw-mouth-left);
            top: var(--paw-mouth-top);
            transform: translate(-50%, -50%) rotate(var(--paw-mouth-rotate));
        }

        .ct-logo-paw-pot {
            left: var(--paw-pot-left);
            top: var(--paw-pot-top);
            transform: translate(-50%, -50%) rotate(var(--paw-pot-rotate));
        }

        .ct-logo-paw-mid {
            left: var(--paw-mid-left);
            top: var(--paw-mid-top);
            transform: translate(-50%, -50%) rotate(var(--paw-mid-rotate));
        }

        @keyframes ctPawCycle {
            0% {
                left: var(--paw-pot-left);
                top: var(--paw-pot-top);
                transform: translate(-50%, -50%) rotate(var(--paw-pot-rotate));
            }
            3.15% {
                left: var(--paw-mid-left);
                top: var(--paw-mid-top);
                transform: translate(-50%, -50%) rotate(var(--paw-mid-rotate));
            }
            6.3% {
                left: var(--paw-mouth-left);
                top: var(--paw-mouth-top);
                transform: translate(-50%, -50%) rotate(var(--paw-mouth-rotate));
            }
            11.7% {
                left: var(--paw-mouth-left);
                top: var(--paw-mouth-top);
                transform: translate(-50%, -50%) rotate(var(--paw-mouth-rotate));
            }
            14.85% {
                left: 50.2%;
                top: 78.6%;
                transform: translate(-50%, -50%) rotate(100deg);
            }
            18%,
            100% {
                left: var(--paw-pot-left);
                top: var(--paw-pot-top);
                transform: translate(-50%, -50%) rotate(var(--paw-pot-rotate));
            }
        }

        .ct-logo-arc {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
        }

        .ct-logo-arc-glow {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            filter: url(#ct-arc-neon-filter);
        }

        .ct-logo-dot {
            fill: #ffffff;
            filter:
                drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
                drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 18px rgba(255, 255, 255, 0.8));
        }

        .ct-logo-dot-halo {
            fill: url(#ct-dot-glow-gradient);
        }

        @keyframes ctArcDrawCycle {
            0% { stroke-dashoffset: 100; }
            22% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 0; }
        }

        @keyframes ctTitleCycleIntro {
            0%, 21.9% {
                opacity: 0;
                transform: translateY(18px) scale(0.88) rotate(-2deg);
            }
            22% {
                opacity: 0.05;
                transform: translateY(16px) scale(0.9) rotate(-1.8deg);
            }
            27% {
                opacity: 1;
                transform: translateY(-6px) scale(1.08) rotate(1deg);
            }
            31% {
                transform: translateY(3px) scale(0.98) rotate(-0.6deg);
            }
            34% {
                transform: translateY(0) scale(1) rotate(0);
            }
            37% {
                transform: translateY(-2px) scale(1.03) rotate(0.8deg);
            }
            40% {
                transform: translateY(0) scale(1) rotate(-0.7deg);
            }
            43% {
                transform: translateY(0) scale(1) rotate(0.35deg);
            }
            46%, 100% {
                opacity: 1;
                transform: translateY(0) scale(1) rotate(0deg);
            }
        }

        @keyframes ctTitleCycleLoop {
            0%, 21.9% {
                opacity: 1;
                transform: translateY(0) scale(1) rotate(0deg);
            }
            22% {
                opacity: 1;
                transform: translateY(-1px) scale(1.01) rotate(0.2deg);
            }
            27% {
                opacity: 1;
                transform: translateY(-6px) scale(1.08) rotate(1deg);
            }
            31% {
                transform: translateY(3px) scale(0.98) rotate(-0.6deg);
            }
            34% {
                transform: translateY(0) scale(1) rotate(0);
            }
            37% {
                transform: translateY(-2px) scale(1.03) rotate(0.8deg);
            }
            40% {
                transform: translateY(0) scale(1) rotate(-0.7deg);
            }
            43% {
                transform: translateY(0) scale(1) rotate(0.35deg);
            }
            46%, 100% {
                opacity: 1;
                transform: translateY(0) scale(1) rotate(0deg);
            }
        }

    </style>

    @php
        $nextSeance = \App\Models\Seance::where('seance_at', '>=', now())
            ->orderBy('seance_at')
            ->first();

        $reservedSeanceIds = collect();
        if (auth('site_users')->check()) {
            $reservedSeanceIds = \App\Models\Reservation::where('site_user_id', auth('site_users')->id())
                ->pluck('seance_id');
        }

        $isNextSeanceReserved = $nextSeance ? $reservedSeanceIds->contains($nextSeance->id) : false;
    @endphp

    <section class="mb-12">
        <div class="ct-logo-intro rounded-2xl p-6 md:p-8 text-center shadow-2xl">
            <div class="ct-logo-stage">
                <svg class="absolute inset-0 w-full h-full" viewBox="0 0 460 250" aria-hidden="true">
                    <defs>
                        <radialGradient id="ct-dot-glow-gradient" cx="50%" cy="50%" r="50%">
                            <stop offset="0%" stop-color="rgba(255,255,255,0.95)" />
                            <stop offset="45%" stop-color="rgba(255,255,255,0.45)" />
                            <stop offset="100%" stop-color="rgba(255,255,255,0)" />
                        </radialGradient>
                        <filter id="ct-arc-neon-filter" x="-25%" y="-25%" width="150%" height="150%">
                            <feGaussianBlur stdDeviation="3.1" result="blur" />
                        </filter>
                    </defs>
                    <path
                        class="ct-logo-arc-glow"
                        d="M 28 234 A 202 180 0 0 1 432 234"
                        pathLength="100"
                        fill="none"
                        stroke="rgba(255,255,255,0.62)"
                        stroke-width="6"
                        stroke-linecap="round"
                    >
                        <animate
                            id="ct-arc-glow-anim"
                            attributeName="stroke-dashoffset"
                            values="100;0;0"
                            keyTimes="0;0.22;1"
                            dur="10s"
                            calcMode="linear"
                            begin="indefinite"
                            fill="freeze"
                        />
                    </path>
                    <path
                        id="ct-logo-arc-path"
                        class="ct-logo-arc"
                        d="M 28 234 A 202 180 0 0 1 432 234"
                        pathLength="100"
                        fill="none"
                        stroke="rgba(255,255,255,0.95)"
                        stroke-width="3"
                        stroke-linecap="round"
                    >
                        <animate
                            id="ct-arc-anim"
                            attributeName="stroke-dashoffset"
                            values="100;0;0"
                            keyTimes="0;0.22;1"
                            dur="10s"
                            calcMode="linear"
                            begin="indefinite"
                            fill="freeze"
                        />
                    </path>
                    <g>
                    <circle class="ct-logo-dot-halo" r="18">
                        <animateMotion
                            id="ct-dot-halo-anim"
                            dur="10s"
                            begin="indefinite"
                            fill="freeze"
                            calcMode="linear"
                            keyTimes="0;0.22;1"
                            keyPoints="0;1;1"
                            path="M 28 234 A 202 180 0 0 1 432 234"
                        />
                    </circle>
                    <circle class="ct-logo-dot" r="4.5">
                        <animateMotion
                            id="ct-dot-anim"
                            dur="10s"
                            begin="indefinite"
                            fill="freeze"
                            calcMode="linear"
                            keyTimes="0;0.22;1"
                            keyPoints="0;1;1"
                            path="M 28 234 A 202 180 0 0 1 432 234"
                        />
                    </circle>
                    </g>
                </svg>
                <img src="{{ asset('images/cat without paw.png') }}" alt="Mascotte Cinema Twisty" class="ct-logo-mascot">
                <img
                    id="ct-logo-paw"
                    src="{{ asset('images/paw without popcorn.png') }}"
                    data-empty-src="{{ asset('images/paw without popcorn.png') }}"
                    data-with-src="{{ asset('images/paw with popcorn.png') }}"
                    alt=""
                    class="ct-logo-paw ct-logo-paw-pot"
                    aria-hidden="true"
                >
            </div>
            <div id="ct-logo-title-wrap" class="ct-logo-title-wrap mt-2">
                <h1 id="ct-logo-title" class="ct-logo-title ct-font-comfortaa">Cinéma Twisty</h1>
            </div>

        </div>
    </section>

    <script>
        (() => {
            const cycleMs = 10000;
            const animationIds = ['ct-arc-anim', 'ct-arc-glow-anim', 'ct-dot-halo-anim', 'ct-dot-anim'];
            const titleWrap = document.getElementById('ct-logo-title-wrap');
            const paw = document.getElementById('ct-logo-paw');
            let timer = null;
            let introPlayed = false;
            let pawTimeouts = [];

            const clearPawTimeouts = () => {
                for (const timeoutId of pawTimeouts) {
                    clearTimeout(timeoutId);
                }
                pawTimeouts = [];
            };

            const restartPawCycle = () => {
                if (!paw) {
                    return;
                }

                paw.classList.remove('ct-paw-cycle');
                void paw.offsetWidth;
                paw.classList.add('ct-paw-cycle');
            };

            const startCycle = () => {
                for (const id of animationIds) {
                    document.getElementById(id)?.beginElement();
                }

                if (titleWrap) {
                    titleWrap.classList.remove('ct-play-intro', 'ct-play-loop');
                    void titleWrap.offsetWidth;
                    titleWrap.classList.add(introPlayed ? 'ct-play-loop' : 'ct-play-intro');
                }

                if (paw) {
                    clearPawTimeouts();

                    // Etat initial du cycle: patte au pot sans popcorn.
                    paw.classList.remove('ct-paw-cycle');
                    paw.src = paw.dataset.emptySrc ?? paw.src;

                    // Cycle unique et continu pour eviter toute micro-saccade.
                    requestAnimationFrame(() => {
                        paw.src = paw.dataset.withSrc ?? paw.src;
                        restartPawCycle();
                    });

                    // Changement d'image pendant la phase haute, sans relancer l'animation.
                    pawTimeouts.push(window.setTimeout(() => {
                        paw.src = paw.dataset.emptySrc ?? paw.src;
                    }, 1130));
                }

                introPlayed = true;
            };

            const armTimer = () => {
                if (timer !== null) {
                    clearInterval(timer);
                }

                timer = window.setInterval(startCycle, cycleMs);
            };

            startCycle();
            armTimer();

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden) {
                    startCycle();
                    armTimer();
                }
            });
        })();
    </script>

    <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch mb-12">
        <div class="relative rounded-2xl p-7 md:p-8 bg-white/8 backdrop-blur-md border border-white/15 overflow-hidden">
            <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-fuchsia-400/15 blur-3xl"></div>
            <div class="absolute -bottom-10 -left-8 w-36 h-36 rounded-full bg-blue-300/10 blur-3xl"></div>

            <p class="relative inline-flex items-center gap-2 text-xs uppercase tracking-widest text-white/80 mb-4">
                <i class="fas fa-film text-fuchsia-300"></i>Bienvenue
            </p>
            <h1 class="relative text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
                Vivez le cinéma en version <span class="text-fuchsia-300">Twisty</span>
            </h1>
            <p class="relative text-lg text-gray-200 mb-7 max-w-xl">
                Consulte les prochaines séances, réserve ton pack idéal et profite d'une expérience plus immersive.
            </p>

            <div class="relative flex flex-wrap gap-3">
                <a href="{{ route('seances.upcoming') }}" class="bg-blue-600/95 hover:bg-blue-700 text-white px-5 py-3 rounded-lg font-semibold transition duration-200">
                    <i class="fas fa-calendar-alt mr-2"></i>Voir les prochaines séances
                </a>
                @guest('site_users')
                    <a href="{{ route('register') }}" class="bg-white/10 border border-white/25 text-white hover:bg-white/20 px-5 py-3 rounded-lg font-semibold transition duration-200">
                        <i class="fas fa-user-plus mr-2"></i>Créer un compte
                    </a>
                @else
                    <a href="{{ route('reservations.index') }}" class="bg-white/10 border border-white/25 text-white hover:bg-white/20 px-5 py-3 rounded-lg font-semibold transition duration-200">
                        <i class="fas fa-ticket-alt mr-2"></i>Mes réservations
                    </a>
                @endguest
            </div>
        </div>

        <div class="relative rounded-2xl p-6 md:p-7 bg-gradient-to-br from-slate-900/70 via-purple-900/60 to-indigo-900/70 border border-white/15 overflow-hidden">
            @if($nextSeance)
                <div class="flex items-center justify-between gap-3 mb-4">
                    <p class="text-fuchsia-200 uppercase text-xs tracking-widest font-bold">À la une</p>
                    <span class="text-xs text-white/70">{{ $nextSeance->seance_at->format('d/m/Y') }}</span>
                </div>

                <div class="grid grid-cols-[5.5rem_1fr] sm:grid-cols-[6.5rem_1fr] gap-4 items-start">
                    @if($nextSeance->poster_path)
                        <img src="{{ asset('storage/' . $nextSeance->poster_path) }}"
                             alt="{{ $nextSeance->title }}"
                             class="w-full aspect-[2/3] object-cover rounded-lg border border-white/20 {{ $isNextSeanceReserved ? 'opacity-20' : '' }}">
                    @else
                        <div class="w-full aspect-[2/3] bg-gray-700 rounded-lg border border-white/20 flex items-center justify-center {{ $isNextSeanceReserved ? 'opacity-20' : '' }}">
                            <i class="fas fa-film text-3xl text-gray-400"></i>
                        </div>
                    @endif

                    <div class="pt-0.5">
                        <h2 class="text-2xl font-bold text-white mb-2">{{ $nextSeance->title }}</h2>
                        <div class="flex items-center text-gray-200 mb-1.5">
                            <i class="fas fa-clock mr-2 text-xs"></i>{{ $nextSeance->seance_at->format('d/m/Y à H:i') }}
                        </div>
                        <div class="flex items-center text-gray-300 mb-3">
                            <i class="fas fa-location-dot mr-2 text-xs"></i>{{ $nextSeance->lieu }}
                        </div>

                        @if($nextSeance->description)
                            <p class="text-gray-300 text-sm mb-4">
                                {{ Str::limit($nextSeance->description, 110) }}
                            </p>
                        @endif

                        @auth('site_users')
                            @if($isNextSeanceReserved)
                                <span class="inline-flex items-center bg-gray-600/85 text-white py-2 px-4 rounded-lg text-sm cursor-not-allowed opacity-90">
                                    <i class="fas fa-check mr-2"></i>Réservation déjà faite
                                </span>
                            @else
                                <a href="{{ route('reservations.create', $nextSeance) }}" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg text-sm transition duration-200">
                                    <i class="fas fa-ticket-alt mr-2"></i>Réserver cette séance
                                </a>
                            @endif
                        @else
                            <a href="{{ route('login') }}" class="inline-flex items-center bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg text-sm transition duration-200">
                                <i class="fas fa-sign-in-alt mr-2"></i>Se connecter pour réserver
                            </a>
                        @endauth
                    </div>
                </div>
            @else
                <div class="h-full flex flex-col justify-center items-center text-center px-6 py-6">
                    <i class="fas fa-calendar-times text-5xl text-gray-400 mb-4"></i>
                    <h2 class="text-2xl font-bold text-white mb-2">Aucune séance programmée</h2>
                    <p class="text-gray-300 mb-6">Revenez bientôt pour les prochaines dates.</p>
                    <a href="{{ route('seances.past') }}" class="text-fuchsia-200 hover:text-white transition">
                        <i class="fas fa-clock-rotate-left mr-2"></i>Voir les séances passées
                    </a>
                </div>
            @endif
        </div>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
        <div class="text-center">
            <div class="text-blue-300 mb-3">
                <i class="fas fa-ticket-alt text-5xl"></i>
            </div>
            <h3 class="text-white text-2xl font-bold mb-2">Réservation facile</h3>
            <p class="text-gray-300">Choisis ta séance en quelques clics et valide rapidement.</p>
        </div>
        <div class="text-center">
            <div class="text-amber-300 mb-3">
                <i class="fas fa-utensils text-5xl"></i>
            </div>
            <h3 class="text-white text-2xl font-bold mb-2">Snacks & ambiance</h3>
            <p class="text-gray-300">Compose ton pack gourmand pour une séance sur mesure.</p>
        </div>
        <div class="text-center">
            <div class="text-emerald-300 mb-3">
                <i class="fas fa-spa text-5xl"></i>
            </div>
            <h3 class="text-white text-2xl font-bold mb-2">Confort premium</h3>
            <p class="text-gray-300">Ajoute des prestations pour rendre l'expérience encore meilleure.</p>
        </div>
    </section>
</div>
@endsection