@extends('layouts.layout-2')

@section('styles')
    <style>
        .incentive-hero {
            margin: -1.5rem -1.5rem 0 -1.5rem;
            position: relative;
            overflow: hidden;
            min-height: 520px;
            display: flex;
            align-items: flex-end;
        }

        .incentive-hero img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .incentive-hero .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.10) 0%,
                    rgba(0, 0, 0, 0.25) 40%,
                    rgba(0, 0, 0, 0.75) 100%);
        }

        .incentive-hero .hero-content {
            position: relative;
            z-index: 2;
            padding: 2.5rem;
            width: 100%;
        }

        .incentive-hero .hero-badge {
            display: inline-block;
            background: rgba(215, 215, 0, 0.92);
            color: #333;
            font-weight: 700;
            padding: .35rem 1rem;
            border-radius: 50px;
            font-size: .85rem;
            letter-spacing: .5px;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .incentive-hero h1 {
            font-size: 2.6rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
            margin-bottom: .5rem;
            line-height: 1.15;
        }

        .incentive-hero .hero-subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.92);
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .incentive-intro {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            color: #fff;
            border-radius: .75rem;
            padding: 2rem 2.5rem;
            font-size: 1.1rem;
            line-height: 1.7;
            position: relative;
            overflow: hidden;
        }

        .incentive-intro::before {
            content: '\201C';
            position: absolute;
            top: -10px;
            left: 15px;
            font-size: 8rem;
            opacity: .12;
            font-family: Georgia, serif;
            line-height: 1;
        }

        .incentive-intro strong {
            color: #d7d700;
        }

        .incentive-intro .cta-line {
            color: #d7d700;
            font-weight: 700;
        }

        .info-tile {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .info-tile:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }

        .info-tile .tile-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            font-size: 1.8rem;
            color: #fff;
        }

        .tile-icon-calendar {
            background: linear-gradient(135deg, #6b7758, #4a5340);
        }

        .tile-icon-plane {
            background: linear-gradient(135deg, #6b7758, #8a9a70);
        }

        .tile-icon-star {
            background: linear-gradient(135deg, #b8b800, #d7d700);
        }

        .info-tile .tile-value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .info-tile .tile-label {
            font-size: .82rem;
            color: #888;
            margin-top: .25rem;
        }

        .points-section {
            background: #f4f5f0;
            border-radius: .75rem;
            padding: 2.5rem;
        }

        .points-section .points-heading {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 1.8rem;
            text-align: center;
        }

        .point-card {
            background: #fff;
            border-radius: .75rem;
            padding: 1.5rem;
            height: 100%;
            border-left: 4px solid;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .point-card-partner {
            border-left-color: #6b7758;
        }

        .point-card-abo {
            border-left-color: #d7d700;
        }

        .point-card .point-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: .5rem;
        }

        .point-card-partner .point-value {
            color: #6b7758;
        }

        .point-card-abo .point-value {
            color: #9a9a00;
        }

        .point-card ul {
            padding-left: 1.1rem;
            margin: 0;
        }

        .point-card li {
            margin-bottom: .35rem;
            color: #555;
            font-size: .92rem;
        }

        .gallery-section {
            overflow: hidden;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: .5rem;
        }

        @media (max-width: 767px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .gallery-thumb {
            position: relative;
            overflow: hidden;
            border-radius: .5rem;
            cursor: pointer;
            aspect-ratio: 4/3;
        }

        .gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

        .gallery-thumb:hover img {
            transform: scale(1.08);
        }

        .gallery-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            transition: background .25s ease;
            border-radius: .5rem;
        }

        .gallery-thumb:hover::after {
            background: rgba(0, 0, 0, 0.15);
        }

        .gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.92);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .gallery-lightbox.active {
            display: flex;
        }

        .gallery-lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: .5rem;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
        }

        .gallery-lightbox .lb-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s;
        }

        .gallery-lightbox .lb-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .gallery-lightbox .lb-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 2.5rem;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.10);
            border: none;
            border-radius: 50%;
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s;
        }

        .gallery-lightbox .lb-nav:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .gallery-lightbox .lb-prev {
            left: 1.5rem;
        }

        .gallery-lightbox .lb-next {
            right: 1.5rem;
        }

        .cta-banner {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            border-radius: .75rem;
            color: #fff;
            padding: 3rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
        }

        .cta-banner h3 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: .5rem;
        }

        .cta-banner p {
            opacity: .9;
            font-size: 1.05rem;
        }

        .cta-banner .btn-light {
            font-weight: 700;
            padding: .65rem 2.5rem;
            font-size: 1.05rem;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .cta-banner .btn-light:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .cta-banner .btn-outline-light {
            font-weight: 600;
            padding: .65rem 2rem;
            font-size: 1.05rem;
            border-radius: 50px;
            border-width: 2px;
        }

        .cta-status-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            font-size: 2rem;
        }

        .cta-status-icon-success {
            background: rgba(255, 255, 255, 0.2);
            color: #d7d700;
        }

        .cta-status-icon-warning {
            background: rgba(255, 255, 255, 0.2);
            color: #d7d700;
        }

        .cta-status-icon-muted {
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.6);
        }

        .terms-toggle {
            border: none;
            border-radius: .75rem;
            overflow: hidden;
        }

        .terms-toggle .card-header {
            background: #f4f5f0;
            border: none;
            padding: 1rem 1.5rem;
        }

        .terms-toggle .card-header a {
            text-decoration: none;
            font-weight: 600;
        }

        @media (max-width: 767px) {
            .incentive-hero {
                min-height: 360px;
            }

            .incentive-hero h1 {
                font-size: 1.8rem;
            }

            .incentive-hero .hero-content {
                padding: 1.5rem;
            }

            .incentive-intro {
                padding: 1.5rem;
            }

            .points-section {
                padding: 1.5rem;
            }
        }
    </style>
@endsection

@section('content')

    {{-- ===== HERO ===== --}}
    @if ($incentive->image)
        <div class="incentive-hero mb-5">
            <img src="{{ asset('img/incentive/' . $incentive->image) }}" alt="{{ $incentive->name }}">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <span class="hero-badge">
                    <i class="ion ion-md-trophy mr-1"></i> {{ __('incentive.section_period') }}:
                    {{ $incentive->qualification_start->format('d.m.') }} &ndash;
                    {{ $incentive->qualification_end->format('d.m.Y') }}
                </span>
                <h1>{{ $incentive->name }}</h1>
                @if ($incentive->getLang('subtitle'))
                    <p class="hero-subtitle mb-0">{{ $incentive->getLang('subtitle') }}</p>
                @endif
            </div>
        </div>
    @else
        <div class="mb-5 pt-3">
            <h1 class="font-weight-bold">
                <i class="ion ion-md-trophy text-warning mr-2"></i>{{ $incentive->name }}
            </h1>
            @if ($incentive->getLang('subtitle'))
                <p class="lead text-muted">{{ $incentive->getLang('subtitle') }}</p>
            @endif
        </div>
    @endif

    {{-- ===== INTRO-TEXT ===== --}}
    @if ($incentive->getLang('description'))
        <div class="incentive-intro mb-5">
            {!! $incentive->getLang('description') !!}
        </div>
    @else
        <div class="incentive-intro mb-5">
            <p class="mb-1">
                <strong>{{ __('incentive.teaser_intro_bold') }}</strong>
                {{ __('incentive.teaser_intro_text') }}
            </p>
            <p class="mb-0 cta-line">
                {{ __('incentive.teaser_intro_cta', ['n' => $incentive->max_winners]) }}
            </p>
        </div>
    @endif

    {{-- ===== 3 INFO-KARTEN ===== --}}
    <div class="row mb-5">

        {{-- Qualifikationszeitraum --}}
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card info-tile h-100 shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="tile-icon tile-icon-calendar">
                        <i class="ion ion-md-calendar"></i>
                    </div>
                    <h5 class="font-weight-bold mb-3">{{ __('incentive.section_period') }}</h5>
                    <div class="mb-2">
                        <span class="tile-label d-block">{{ __('incentive.qualification_period') }}</span>
                        <span class="tile-value">
                            {{ $incentive->qualification_start->format('d.m.Y') }}
                            &ndash;
                            {{ $incentive->qualification_end->format('d.m.Y') }}
                        </span>
                    </div>
                    <div>
                        <span class="tile-label d-block">{{ __('incentive.calculation_period') }}</span>
                        <strong>{{ __('incentive.teaser_until') }}
                            {{ $incentive->calculation_end->format('d.m.Y') }}</strong>
                    </div>
                </div>
            </div>
        </div>

        {{-- Mindestqualifikation --}}
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card info-tile h-100 shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="tile-icon tile-icon-plane">
                        <i class="ion ion-md-airplane"></i>
                    </div>
                    <h5 class="font-weight-bold mb-3">{{ __('incentive.section_min_qual') }}</h5>
                    <div class="mb-3">
                        <div class="tile-value">{{ $incentive->min_direct_partners }}</div>
                        <span class="tile-label">{{ __('incentive.min_partners_label') }}</span>
                    </div>
                    <div>
                        <div class="tile-value">{{ $incentive->min_customer_abos }}</div>
                        <span class="tile-label">{{ __('incentive.min_abos_label') }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Punkte-System --}}
        <div class="col-md-4">
            <div class="card info-tile h-100 shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="tile-icon tile-icon-star">
                        <i class="ion ion-md-star"></i>
                    </div>
                    <h5 class="font-weight-bold mb-3">{{ __('incentive.section_points') }}</h5>
                    <div class="mb-3">
                        <span class="tile-value" style="color: #6b7758;">
                            {{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
                            <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                        </span>
                        <span class="tile-label d-block">{{ __('incentive.points_partners_title') }}</span>
                    </div>
                    <div>
                        <span class="tile-value" style="color: #9a9a00;">
                            {{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
                            <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                        </span>
                        <span class="tile-label d-block">{{ __('incentive.points_abos_title') }}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ===== PUNKTE-DETAIL ===== --}}
    <div class="points-section mb-5">
        <h4 class="points-heading">
            <i class="ion ion-md-star text-warning mr-1"></i>
            {{ __('incentive.section_points') }}
        </h4>
        <div class="row">
            <div class="col-md-6 mb-3 mb-md-0">
                <div class="point-card point-card-partner">
                    <h6 class="font-weight-bold mb-2">
                        <i class="ion ion-md-person-add mr-1"></i>
                        {{ __('incentive.points_partners_title') }}
                    </h6>
                    <div class="point-value">
                        {{ number_format($incentive->points_partner_onetime, 0, ',', '.') }}
                        <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                    </div>
                    <ul>
                        <li>{{ __('incentive.teaser_partner_onetime_text') }}</li>
                        <li>{{ __('incentive.points_starter_package_label') }}</li>
                        <li>{{ __('incentive.points_partner_boost') }}</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="point-card point-card-abo">
                    <h6 class="font-weight-bold mb-2">
                        <i class="ion ion-md-ribbon mr-1"></i>
                        {{ __('incentive.points_abos_title') }}
                    </h6>
                    <div class="point-value">
                        {{ number_format($incentive->points_abo_onetime, 0, ',', '.') }}
                        <span class="small font-weight-normal">{{ __('incentive.points_short') }}</span>
                    </div>
                    <ul>
                        <li>{{ __('incentive.teaser_abo_onetime_text') }}</li>
                        <li>{{ __('incentive.points_abo_direct') }}</li>
                        <li>{{ __('incentive.points_abo_boost') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== BILDERGALERIE ===== --}}
    @if (count($galleryImages) > 0)
        <div class="gallery-section mb-5">
            <h4 class="font-weight-bold mb-3 text-center">
                <i class="ion ion-md-images text-primary mr-1"></i>
                {{ __('incentive.gallery_title') }}
            </h4>
            <div class="gallery-grid">
                @foreach ($galleryImages as $idx => $img)
                    <div class="gallery-thumb" data-gallery-index="{{ $idx }}">
                        <img src="{{ asset($img) }}" alt="Impression {{ $idx + 1 }}" loading="lazy">
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Lightbox --}}
        <div class="gallery-lightbox" id="galleryLightbox">
            <button class="lb-close" title="Schließen">&times;</button>
            <button class="lb-nav lb-prev" title="Zurück"><i class="ion ion-md-arrow-back"></i></button>
            <button class="lb-nav lb-next" title="Weiter"><i class="ion ion-md-arrow-forward"></i></button>
            <img src="" alt="Gallery" id="lightboxImage">
        </div>
    @endif

    {{-- ===== CTA-BEREICH ===== --}}
    <div class="cta-banner mb-5">
        @if ($participant && $participant->accepted_terms_at)
            <div class="cta-status-icon cta-status-icon-success">
                <i class="ion ion-md-checkmark-circle"></i>
            </div>
            <h3>{{ __('incentive.you_participate') }}</h3>
            <p class="mb-4">{{ __('incentive.teaser_cta_already_in') }}</p>
            <a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg mr-2">
                <i class="ion ion-md-list mr-1"></i>{{ __('incentive.teaser_cta_to_ranking') }}
            </a>
            <a href="{{ route('user_incentive_details', [$incentive->slug]) }}" class="btn btn-outline-secondary btn-lg">
                <i class="ion ion-md-stats mr-1"></i>{{ __('incentive.my_details') }}
            </a>
        @elseif ($participant)
            <div class="cta-status-icon cta-status-icon-warning">
                <i class="ion ion-md-trophy"></i>
            </div>
            <h3>{{ __('incentive.teaser_pending_title') }}</h3>
            <p class="mb-4">{{ __('incentive.teaser_pending_text') }}</p>
            <a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg">
                <i class="ion ion-md-checkmark mr-1"></i>{{ __('incentive.teaser_cta_confirm') }}
            </a>
        @elseif($incentive->isActive())
            <div class="cta-status-icon cta-status-icon-warning">
                <i class="ion ion-md-trophy"></i>
            </div>
            <h3>{{ __('incentive.teaser_cta_ready') }}</h3>
            <p class="mb-4">{{ __('incentive.teaser_cta_text', ['n' => $incentive->max_winners]) }}</p>
            <a href="{{ route('user_incentive_show', [$incentive->slug]) }}" class="btn btn-secondary btn-lg">
                <i class="ion ion-md-checkmark mr-1"></i>{{ __('incentive.teaser_cta_button') }}
            </a>
        @else
            <div class="cta-status-icon cta-status-icon-muted">
                <i class="ion ion-md-time"></i>
            </div>
            <h3>{{ __('incentive.teaser_cta_coming_soon') }}</h3>
            <p class="mb-0">{{ __('incentive.not_active') }}</p>
        @endif
    </div>

    {{-- ===== TEILNAHMEBEDINGUNGEN (Collapse) ===== --}}
    @if ($incentive->getLang('terms'))
        <div class="card terms-toggle mb-4">
            <div class="card-header">
                <a href="#terms-teaser" data-toggle="collapse" class="text-body d-flex align-items-center collapsed">
                    <i class="ion ion-md-document mr-2"></i>
                    <strong>{{ __('incentive.terms') }}</strong>
                    <i class="ion ion-md-chevron-down ml-auto"></i>
                </a>
            </div>
            <div id="terms-teaser" class="collapse show">
                <div class="card-body">
                    {!! $incentive->getLang('terms') !!}
                </div>
            </div>
        </div>
    @endif

@endsection

@section('scripts')
    @if (count($galleryImages) > 0)
        <script>
            (function() {
                var images = @json(collect($galleryImages)->map(fn($i) => asset($i))->values());
                var current = 0;
                var lightbox = document.getElementById('galleryLightbox');
                var lbImg = document.getElementById('lightboxImage');

                document.querySelectorAll('.gallery-thumb').forEach(function(el) {
                    el.addEventListener('click', function() {
                        current = parseInt(el.dataset.galleryIndex);
                        lbImg.src = images[current];
                        lightbox.classList.add('active');
                    });
                });

                lightbox.querySelector('.lb-close').addEventListener('click', function() {
                    lightbox.classList.remove('active');
                });

                lightbox.querySelector('.lb-prev').addEventListener('click', function(e) {
                    e.stopPropagation();
                    current = (current - 1 + images.length) % images.length;
                    lbImg.src = images[current];
                });

                lightbox.querySelector('.lb-next').addEventListener('click', function(e) {
                    e.stopPropagation();
                    current = (current + 1) % images.length;
                    lbImg.src = images[current];
                });

                lightbox.addEventListener('click', function(e) {
                    if (e.target === lightbox) {
                        lightbox.classList.remove('active');
                    }
                });

                document.addEventListener('keydown', function(e) {
                    if (!lightbox.classList.contains('active')) return;
                    if (e.key === 'Escape') lightbox.classList.remove('active');
                    if (e.key === 'ArrowLeft') lightbox.querySelector('.lb-prev').click();
                    if (e.key === 'ArrowRight') lightbox.querySelector('.lb-next').click();
                });
            })();
        </script>
    @endif
@endsection