@extends('layouts.app')
@section('title', __('nav.events'))

@section('content')

<div style="height:280px;background:linear-gradient(135deg,var(--ocean-deep),var(--turquoise-dark));display:flex;align-items:flex-end;padding-bottom:3rem;">
  <div class="container" style="text-align:center;width:100%;">
    <span class="section-label" style="color:var(--gold-light);">{{ __('events.label') }}</span>
    <h1 style="font-size:clamp(2.5rem,6vw,4.5rem);color:var(--white);">{{ __('events.page_title') }} <em style="color:var(--turquoise-light);">{{ __('events.page_title_em') }}</em></h1>
  </div>
</div>

<section class="events-section">
  <div class="container">
    @if($events->count())
      <div class="events-grid">
        @foreach($events as $event)
        <div class="event-card reveal">
          <div class="event-img" @if($event->image) style="background-image:url('{{ asset('storage/'.$event->image) }}');background-size:cover;background-position:center;" @endif>
            <span class="event-date-badge">
              {{ \Carbon\Carbon::parse($event->event_date)->locale(app()->getLocale())->isoFormat('D MMMM YYYY') }}
            </span>
          </div>
          <div class="event-body">
            <h3>{{ app()->getLocale() === 'tr' ? $event->title_tr : $event->title_en }}</h3>
            <p>{{ app()->getLocale() === 'tr' ? $event->description_tr : $event->description_en }}</p>
            <div class="event-meta">
              <span>🕐 {{ $event->start_time }}@if($event->end_time) – {{ $event->end_time }}@endif</span>
              @if($event->price)
              <span>💰 ₺{{ number_format($event->price) }}</span>
              @else
              <span style="color:var(--turquoise-dark);">{{ __('events.free') }}</span>
              @endif
            </div>
          </div>
        </div>
        @endforeach
      </div>
    @else
      <div style="text-align:center;padding:4rem;color:var(--text-muted);">
        <div style="font-size:3rem;margin-bottom:1rem;">🎉</div>
        <p>{{ __('events.none_yet') }}</p>
      </div>
    @endif
  </div>
</section>

@endsection