@php
  $locale = app()->getLocale();
  $videos = [
    ['title' => ['tr' => 'Modüler Koltuk', 'en' => 'Modular Sofa'], 'src' => 'videos/Cisa-Moduler-Koltuk.mp4', 'poster' => 'images/collections/mona/cover.jpeg'],
    ['title' => ['tr' => 'Mona Büyük Köşe', 'en' => 'Mona Big Corner'], 'src' => 'videos/Cisa-Moduler-Koltuk.mp4', 'poster' => 'images/collections/mona/cover.jpeg'],
    ['title' => ['tr' => 'Curved Koltuk', 'en' => 'Curved Sofa'], 'src' => 'videos/Cisa-Moduler-Koltuk.mp4', 'poster' => 'images/collections/lisa/cover.jpg'],
    ['title' => ['tr' => 'Karyola', 'en' => 'Bed Frame'], 'src' => 'videos/Cisa-Moduler-Koltuk.mp4', 'poster' => 'images/collections/porto-bed/cover.jpg'],
    ['title' => ['tr' => 'Koltuk', 'en' => 'Sofa'], 'src' => 'videos/Cisa-Moduler-Koltuk.mp4', 'poster' => 'images/collections/porto/cover.jpg'],
  ];
@endphp
@extends('layouts.app')

@section('title', 'Çisa Salotti — '.__('site.videos.title'))

@section('content')
<main>
  <section class="page-hero">
    <img class="page-hero__image" src="{{ asset('images/collections/teo/cover.jpg') }}" alt="" loading="eager">
    <div class="page-hero__overlay"></div>
    <div class="page-hero__content container">
      <p class="section-label">{{ __('site.videos.label') }}</p>
      <h1 class="display-lg">{{ __('site.videos.title') }}</h1>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="videos-grid videos-grid--full">
        @foreach($videos as $video)
          <article class="video-card" data-video="{{ media_url($video['src']) }}">
            <div class="video-card__wrap">
              <img class="video-card__poster" src="{{ media_url($video['poster']) }}" alt="{{ $video['title'][$locale] ?? $video['title']['tr'] }}" loading="lazy" decoding="async">
              <video class="video-card__video" muted loop playsinline preload="none"></video>
              <button class="video-card__play" aria-label="Play">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              </button>
            </div>
            <p class="video-card__title">{{ $video['title'][$locale] ?? $video['title']['tr'] }}</p>
          </article>
        @endforeach
      </div>
    </div>
  </section>
</main>
@endsection

@push('scripts')
  <script src="{{ asset('js/videos.js') }}"></script>
@endpush