{{-- Hero Template 1 - Main Hero Section --}}
<div class="hero1-section-area">
    <div class="bg1">
        <img src="{{ asset('assets/img/bg/header-bg2.png') }}" alt="" class="header-bg1" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="hero1-header heading1">
                    <h5 data-aos="fade-left" data-aos-duration="800">
                        <img src="{{ asset('assets/img/icons/sub-logo1.svg') }}" alt="" />
                        {{ $event->hero_subtitle ?? 'Lead Purpose, Innovate with Passion' }}
                    </h5>
                    <div class="space16"></div>
                    <h1 class="text-anime-style-3" data-aos="fade-left" data-aos-duration="900">
                        {{ $event->title }}
                    </h1>
                    <div class="space16"></div>
                    <p data-aos="fade-left" data-aos-duration="900">
                        {{ $event->hero_description ?? $event->description }}
                    </p>
                    <div class="space32"></div>
                    <div class="btn-area1" data-aos="fade-left" data-aos-duration="1100">
                        @if ($event->ticketTypes && count($event->ticketTypes) > 0)
                            <a href="{{ route('registration.form', $event) }}" class="vl-btn1">{{ __('Réserver ma place') }}</a>
                        @elseif($event->registration_url)
                            <a href="{{ $event->registration_url }}" class="vl-btn1" target="_blank">{{ __('S\'inscrire') }}</a>
                        @else
                            <a href="#" class="vl-btn1">{{ __('Réserver ma place') }}</a>
                        @endif
                        <a href="#about" class="vl-btn2">{{ __('En savoir plus') }}</a>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5">
                <div class="header-images">
                    <div class="img1" data-aos="zoom-in" data-aos-duration="1000">
                        @if($event->hero_image)
                            <img src="{{ asset('storage/' . $event->hero_image) }}" alt="{{ $event->title }}" />
                        @else
                            <img src="{{ asset('assets/img/all-images/hero/hero-img1.png') }}" alt="{{ $event->title }}" />
                        @endif
                    </div>
                    <div class="images-content-area" data-aos="fade-up" data-aos-duration="900">
                        <h3>{{ strtoupper($event->title) }}</h3>
                        <div class="space12"></div>
                        @if($event->start_date)
                            <a href="#">{{ $event->start_date->format('d F Y') }}</a>
                        @else
                            <a href="#">{{ __('Date à confirmer') }}</a>
                        @endif
                        <div class="space12"></div>
                        @if($event->location)
                            <a href="#">{{ strtoupper($event->location) }}</a>
                        @endif
                        <div class="space16"></div>
                        <p>{{ $event->hero_summary ?? $event->description }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-1">
                <div class="timer" data-aos="fade-left" data-aos-duration="1000">
                    <div class="time-box">
                        <span id="days" class="time-value">--</span>
                        <div class="space8"></div>
                    </div>
                    <div class="space14"></div>
                    <div class="time-box">
                        <span id="hours" class="time-value">--</span>
                        <div class="space8"></div>
                    </div>
                    <div class="space14"></div>
                    <div class="time-box">
                        <span id="minutes" class="time-value">--</span>
                        <div class="space8"></div>
                    </div>
                    <div class="space14"></div>
                    <div class="time-box" style="margin: 0">
                        <span id="seconds" class="time-value">--</span>
                        <div class="space8"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Countdown script for hero section
document.addEventListener('DOMContentLoaded', function() {
    @if($event->start_date)
    // Set the date we're counting down to
    var countDownDate = new Date("{{ $event->start_date }}").getTime();
    
    // Update the count down every 1 second
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Display the result
        document.getElementById("days").innerHTML = days;
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;
        
        // If the count down is finished, display message
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("days").innerHTML = "0";
            document.getElementById("hours").innerHTML = "0";
            document.getElementById("minutes").innerHTML = "0";
            document.getElementById("seconds").innerHTML = "0";
        }
    }, 1000);
    @else
    // Si pas de date, afficher des valeurs par défaut
    document.getElementById("days").innerHTML = "--";
    document.getElementById("hours").innerHTML = "--";
    document.getElementById("minutes").innerHTML = "--";
    document.getElementById("seconds").innerHTML = "--";
    @endif
});
</script>