@extends('layouts.app')
@section('title', __('nav.events') . ' — Mon Cheri Beach By Enki')

@section('content')

{{-- ═══════════════════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════════════════ --}}
<section class="hero_in general">
    <div class="wrapper">
        <div class="container">
            <h1 class="fadeInUp">
                <span></span>
                {{ __('events.page_title') }}
            </h1>
        </div>
    </div>
</section>


{{-- ═══════════════════════════════════════════════════════
     EVENTS LIST
     ═══════════════════════════════════════════════════════ --}}
<div class="container margin_80_55">

    <div class="main_title_2 reveal" style="margin-bottom:70px;">
        <span><em></em></span>
        <h2>{{ __('events.upcoming') }}</h2>
        <p>{{ __('events.upcoming_sub') }}</p>
    </div>

    @if($events->count())

        <div style="display:flex;flex-direction:column;gap:0;">

            @foreach($events as $i => $event)
            @php
                $title = app()->getLocale() === 'tr' ? $event->title_tr       : $event->title_en;
                $desc  = app()->getLocale() === 'tr' ? $event->description_tr  : $event->description_en;
                $day   = \Carbon\Carbon::parse($event->event_date)->format('d');
                $month = \Carbon\Carbon::parse($event->event_date)->locale(app()->getLocale())->isoFormat('MMM');
                $year  = \Carbon\Carbon::parse($event->event_date)->format('Y');
                $img   = $event->image ? asset('storage/'.$event->image) : 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=900&q=85';
            @endphp

            <article class="reveal" style="
                display:grid;
                grid-template-columns:120px 1fr;
                gap:0;
                border-bottom:0.5px solid rgba(200,169,110,0.15);
                padding:48px 0;
                align-items:start;
            ">

                {{-- Tarih sütunu --}}
                <div style="
                    padding-right:40px;
                    border-right:0.5px solid rgba(200,169,110,0.2);
                    text-align:center;
                    padding-top:6px;
                ">
                    <span style="
                        font-family:'Cormorant Garamond',serif;
                        font-size:3rem;
                        font-weight:300;
                        color:#1B6B7A;
                        display:block;
                        line-height:1;
                    ">{{ $day }}</span>
                    <span style="
                        font-size:0.65rem;
                        letter-spacing:3px;
                        text-transform:uppercase;
                        color:rgba(200,169,110,0.7);
                        font-weight:500;
                        display:block;
                        margin-top:4px;
                    ">{{ $month }}</span>
                    <span style="
                        font-size:0.65rem;
                        letter-spacing:2px;
                        color:rgba(26,18,8,0.25);
                        display:block;
                        margin-top:2px;
                    ">{{ $year }}</span>
                </div>

                {{-- İçerik sütunu --}}
                <div style="padding-left:48px;">
                    <div style="display:flex;align-items:flex-start;gap:32px;">

                        {{-- Metin --}}
                        <div style="flex:1;">
                            {{-- Saat + fiyat bilgisi --}}
                            <div style="display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap;">
                                <span style="
                                    font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;
                                    color:rgba(200,169,110,0.7);font-weight:500;
                                    display:flex;align-items:center;gap:6px;
                                ">
                                    <i class="pe-7s-clock" style="font-size:0.9rem;"></i>
                                    {{ $event->start_time }}@if($event->end_time) – {{ $event->end_time }}@endif
                                </span>
                                <span style="
                                    font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;
                                    color:{{ $event->price ? '#1B6B7A' : 'rgba(26,18,8,0.3)' }};font-weight:500;
                                ">
                                    {{ $event->price ? '₺'.number_format($event->price) : (__('events.free') ?? 'Ücretsiz') }}
                                </span>
                            </div>

                            <h2 style="
                                font-family:'Cormorant Garamond',serif;
                                font-size:1.75rem;
                                font-weight:400;
                                color:#1A1208;
                                margin:0 0 16px;
                                letter-spacing:0.02em;
                                line-height:1.2;
                            ">{{ $title }}</h2>

                            @if($desc)
                            <p style="
                                font-size:0.88rem;
                                color:rgba(26,18,8,0.5);
                                line-height:1.8;
                                font-weight:300;
                                margin:0 0 24px;
                                max-width:560px;
                            ">{{ Str::limit($desc, 200) }}</p>
                            @endif

                            <a href="{{ route('contact') }}" style="
                                display:inline-flex;
                                align-items:center;
                                gap:8px;
                                font-family:'Jost',sans-serif;
                                font-size:0.68rem;
                                font-weight:500;
                                letter-spacing:2.5px;
                                text-transform:uppercase;
                                color:#1B6B7A;
                                text-decoration:none;
                                border-bottom:0.5px solid rgba(27,107,122,0.3);
                                padding-bottom:3px;
                                transition:all 0.3s ease;
                            " onmouseover="this.style.color='#0F4650';this.style.borderColor='rgba(15,70,80,0.4)'"
                               onmouseout="this.style.color='#1B6B7A';this.style.borderColor='rgba(27,107,122,0.3)'">
                                {{ __('events.reserve') }}
                                <i class="ti-arrow-right" style="font-size:0.75rem;"></i>
                            </a>
                        </div>

                        {{-- Görsel --}}
                        <div class="d-none d-lg-block" style="
                            width:220px;
                            height:165px;
                            flex-shrink:0;
                            border-radius:2px;
                            overflow:hidden;
                        ">
                            <img src="{{ $img }}" alt="{{ $title }}"
                                 style="width:100%;height:100%;object-fit:cover;transition:transform 0.7s ease;"
                                 onmouseover="this.style.transform='scale(1.04)'"
                                 onmouseout="this.style.transform='scale(1)'">
                        </div>

                    </div>
                </div>

            </article>
            @endforeach

        </div>

    @else

        {{-- Boş durum --}}
        <div class="reveal" style="
            text-align:center;
            padding:100px 20px;
            border:0.5px solid rgba(200,169,110,0.15);
            border-radius:2px;
        ">
            <i class="pe-7s-star" style="font-size:3rem;color:rgba(200,169,110,0.4);display:block;margin-bottom:24px;"></i>
            <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;color:#1A1208;margin-bottom:12px;">
                {{ __('events.none_title') }}
            </h3>
            <p style="font-size:0.88rem;color:rgba(26,18,8,0.4);font-weight:300;max-width:380px;margin:0 auto;">
                {{ __('events.none_yet') }}
            </p>
        </div>

    @endif

</div>


{{-- ═══════════════════════════════════════════════════════
     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';

    var obs = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.reveal, .reveal-fade').forEach(function (el) { obs.observe(el); });

    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 });
}());
</script>
@endpush

@endsection