@extends('layouts.app')
@section('title', __('site.name'))

@section('content')

{{-- ═══════════════════════════════════════════════════════
     HERO SLIDER
     ═══════════════════════════════════════════════════════ --}}
<section class="hero-slider" id="heroSlider">
    @php
        $slides = [
            [
                'type'      => 'image',
                'src'       => 'public/img/mon-cheri/slider-1.webp',
                'label'     => __('hero.slide1_label'),
                'title'     => __('hero.slide1_title'),
                'subtitle'  => __('hero.slide1_sub'),
                'cta'       => __('hero.slide1_cta'),
                'cta_link'  => route('about'),
            ],
            // [
            //     'type'      => 'video',
            //     'src'       => asset('public/videos/moncheri-hero.mp4'),
            //     'poster'    => 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=85',
            //     'label'     => __('hero.slide2_label'),
            //     'title'     => __('hero.slide2_title'),
            //     'subtitle'  => __('hero.slide2_sub'),
            //     'cta'       => __('hero.slide2_cta'),
            //     'cta_link'  => route('menu'),
            // ],
            // [
            //     'type'      => 'image',
            //     'src'       => 'https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=1600&q=85',
            //     'label'     => __('hero.slide3_label'),
            //     'title'     => __('hero.slide3_title'),
            //     'subtitle'  => __('hero.slide3_sub'),
            //     'cta'       => __('hero.slide3_cta'),
            //     'cta_link'  => route('contact'),
            // ],
        ];
    @endphp

    <div class="slider-wrapper">
        @foreach($slides as $i => $slide)
        <div class="slide {{ $i === 0 ? 'active' : '' }}" data-index="{{ $i }}">

            @if($slide['type'] === 'video')
            <video class="slide-media" autoplay muted loop playsinline poster="{{ $slide['poster'] }}">
                <source src="{{ $slide['src'] }}" type="video/mp4">
            </video>
            @else
            <div class="slide-media" style="background-image:url('{{ $slide['src'] }}')"></div>
            @endif

            <div class="slide-overlay"></div>

            <div class="slide-content">
                <span class="slide-label">{{ $slide['label'] }}</span>
                <h1 class="slide-title">{{ $slide['title'] }}</h1>
                <p class="slide-subtitle">{{ $slide['subtitle'] }}</p>
                <a href="{{ $slide['cta_link'] }}" class="btn_1">{{ $slide['cta'] }}</a>
            </div>

        </div>
        @endforeach
    </div>

    <button class="slider-arrow prev" aria-label="Önceki"><i class="ti-angle-left"></i></button>
    <button class="slider-arrow next" aria-label="Sonraki"><i class="ti-angle-right"></i></button>

    <div class="slider-dots">
        @foreach($slides as $i => $slide)
        <span class="dot {{ $i === 0 ? 'active' : '' }}" data-index="{{ $i }}"></span>
        @endforeach
    </div>

</section>


{{-- ═══════════════════════════════════════════════════════
     EXPERIENCES
     ═══════════════════════════════════════════════════════ --}}
<section class="experiences-section">
    <div class="container">

        <div class="experiences-header reveal">
            <span class="section-label">{{ __('home.featured_label') ?? 'Curated Experiences' }}</span>
            <h2>{{ __('home.featured_title') }}</h2>
            <p>{{ __('home.featured_sub') }}</p>
        </div>

        @php
            $experiences = [
                [
                    'img'   => 'public/img/mon-cheri/mon_cher_beach-10.webp',
                    'label' => __('features.beach_label'),
                    'title' => __('features.beach'),
                    'desc'  => __('features.beach_desc'),
                    'link'  => route('about'),
                ],
                [
                    'img'   => 'public/img/mon-cheri/mon_cher_beach-6.webp',
                    'label' => __('features.restaurant_label'),
                    'title' => __('features.restaurant'),
                    'desc'  => __('features.restaurant_desc'),
                    'link'  => route('menu'),
                ],
                [
                    'img'   => 'public/img/mon-cheri/mon_cher_beach-8.webp',
                    'label' => __('features.cocktails_label'),
                    'title' => __('features.cocktails'),
                    'desc'  => __('features.cocktails_desc'),
                    'link'  => route('menu'),
                ],
            ];
        @endphp

        <div class="experiences-grid">
            @foreach($experiences as $i => $exp)
            <div class="exp-card reveal reveal-delay-{{ $i + 1 }}" onclick="window.location='{{ $exp['link'] }}'">
                <div class="exp-image" style="background-image:url('{{ $exp['img'] }}')"></div>
                <div class="exp-overlay"></div>
                <div class="exp-content">
                    <span class="exp-label">{{ $exp['label'] }}</span>
                    <h3 class="exp-title">{{ $exp['title'] }}</h3>
                    <p class="exp-desc">{{ $exp['desc'] }}</p>
                    <a href="{{ $exp['link'] }}" class="exp-link">{{ __('home.read_more') }}</a>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>


{{-- ═══════════════════════════════════════════════════════
     EVENTS (sadece varsa)
     ═══════════════════════════════════════════════════════ --}}
@if($events->count())
<div class="bg_color_1">
    <div class="container margin_80_55">

        <div class="main_title_2 reveal">
            <span><em></em></span>
            <h2>{{ __('events.upcoming') }}</h2>
            <p>{{ __('events.upcoming_sub') }}</p>
        </div>

        <div class="row">
            @foreach($events as $i => $event)
            <div class="col-lg-6">
                <a class="box_news reveal reveal-delay-{{ ($i % 2) + 1 }}" href="{{ route('events') }}">
                    <figure>
                        <img src="{{ $event->image ? asset('storage/'.$event->image) : 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=800&q=85' }}" alt="{{ app()->getLocale() === 'tr' ? $event->title_tr : $event->title_en }}">
                        <figcaption>
                            <strong>{{ \Carbon\Carbon::parse($event->event_date)->format('d') }}</strong>
                            {{ \Carbon\Carbon::parse($event->event_date)->locale(app()->getLocale())->isoFormat('MMM') }}
                        </figcaption>
                    </figure>
                    <ul>
                        <li>{{ $event->start_time }}</li>
                        <li>{{ \Carbon\Carbon::parse($event->event_date)->format('d.m.Y') }}</li>
                    </ul>
                    <h4>{{ app()->getLocale() === 'tr' ? $event->title_tr : $event->title_en }}</h4>
                    <p>{{ Str::limit(app()->getLocale() === 'tr' ? $event->description_tr : $event->description_en, 120) }}</p>
                </a>
            </div>
            @endforeach
        </div>

        <p class="btn_home_align reveal">
            <a href="{{ route('events') }}" class="btn_1">{{ __('events.all_events') }}</a>
        </p>

    </div>
</div>
@endif

{{-- ═══════════════════════════════════════════════════════
     GALLERY
     ═══════════════════════════════════════════════════════ --}}
 <section class="gallery-section">
     <div class="container">
         <div class="gallery-header reveal">
             <span class="section-label">{{ __('home.gallery_label') ?? 'Galeri' }}</span>
             <h2>{{ __('home.gallery_title') ?? 'Mon Cheri\'den Kareler' }}</h2>
             <p>{{ __('home.gallery_sub') ?? 'Her anı özel, her kare benzersiz' }}</p>
         </div>
     </div>

     @php
         $homeGallery = [
             ['i' => 1, 'title' => 'Plaj Manzarası', 'w' => 2, 'h' => 2],
             ['i' => 2, 'title' => 'Restaurant',     'w' => 1, 'h' => 1],
             ['i' => 3, 'title' => 'Kokteyl',        'w' => 1, 'h' => 1],
             ['i' => 4, 'title' => 'Lezzetler',      'w' => 1, 'h' => 1],
             ['i' => 5, 'title' => 'Gün Batımı',     'w' => 1, 'h' => 1],
         ];
     @endphp

     <div class="gallery-grid magnific-gallery">
         @foreach($homeGallery as $img)
         @php $src = asset('public/img/mon-cheri/mon_cher_beach-' . $img['i'] . '.webp'); @endphp
         <a href="{{ $src }}" class="gallery-item reveal reveal-delay-{{ min(($loop->index % 4) + 1, 4) }} {{ $img['w'] == 2 ? 'gallery-wide' : '' }} {{ $img['h'] == 2 ? 'gallery-tall' : '' }}">
             <img src="{{ $src }}" loading="lazy">
             <div class="gallery-overlay">
                 <div class="gallery-hover-content">
                     <span class="gallery-icon"><i class="ti-plus"></i></span>
                 </div>
             </div>
         </a>
         @endforeach
     </div>

 </section>

{{-- ═══════════════════════════════════════════════════════
     CTA
     ═══════════════════════════════════════════════════════ --}}
 <section class="cta-section">
     <div class="cta-overlay"></div>
     <div class="cta-content reveal">
         <span class="cta-label">{{ __('home.cta_label') ?? 'Deneyiminizi Rezerve Edin' }}</span>
         <h2>{{ __('home.cta_title') }}</h2>
         <p>{{ __('home.cta_sub') }}</p>
         <a href="{{ route('contact') }}" class="btn_1 outline">{{ __('home.reserve') }}</a>
     </div>
 </section>

@push('scripts')
<script>
(function () {
    'use strict';

    /* ── Slider ─────────────────────────────────────── */
    var slider  = document.getElementById('heroSlider');
    if (!slider) return;

    var slides  = slider.querySelectorAll('.slide');
    var dots    = slider.querySelectorAll('.dot');
    var current = 0;
    var delay   = 6500;
    var timer;

    function goTo(i) {
        if (i < 0) i = slides.length - 1;
        if (i >= slides.length) i = 0;

        slides[current].classList.remove('active');
        dots[current].classList.remove('active');

        /* pause video on old slide */
        var oldVideo = slides[current].querySelector('video');
        if (oldVideo) oldVideo.pause();

        current = i;

        slides[current].classList.add('active');
        dots[current].classList.add('active');

        /* play video on new slide */
        var newVideo = slides[current].querySelector('video');
        if (newVideo) newVideo.play();
    }

    function next()  { goTo(current + 1); resetTimer(); }
    function prev()  { goTo(current - 1); resetTimer(); }

    function resetTimer() {
        clearInterval(timer);
        timer = setInterval(next, delay);
    }

    slider.querySelector('.next').addEventListener('click', next);
    slider.querySelector('.prev').addEventListener('click', prev);

    dots.forEach(function (dot) {
        dot.addEventListener('click', function () {
            goTo(parseInt(this.dataset.index, 10));
            resetTimer();
        });
    });

    /* pause on hover */
    slider.addEventListener('mouseenter', function () { clearInterval(timer); });
    slider.addEventListener('mouseleave', resetTimer);

    /* keyboard */
    document.addEventListener('keydown', function (e) {
        if (e.key === 'ArrowLeft')  prev();
        if (e.key === 'ArrowRight') next();
    });

    /* touch swipe */
    var touchStartX = 0;
    slider.addEventListener('touchstart', function (e) { touchStartX = e.touches[0].clientX; }, { passive: true });
    slider.addEventListener('touchend',   function (e) {
        var diff = touchStartX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 50) { diff > 0 ? next() : prev(); }
    }, { passive: true });

    resetTimer();

    /* ── Scroll progress bar ────────────────────────── */
    window.addEventListener('scroll', function () {
        var h   = document.documentElement;
        var pct = (h.scrollTop || document.body.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
        document.querySelector('header').style.setProperty('--scroll-progress', pct + '%');
    }, { passive: true });

    /* ── Reveal on scroll ───────────────────────────── */
    var revealObs = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (e.isIntersecting) {
                e.target.classList.add('visible');
                revealObs.unobserve(e.target);
            }
        });
    }, { threshold: 0.12 });

    document.querySelectorAll('.reveal, .reveal-fade').forEach(function (el) {
        revealObs.observe(el);
    });
}());
</script>
@endpush

@endsection