{{--
  Renders a single project slot: image, text, video (youtube/bunny/frameio/mp4).
  Expected $slot shape:
    type  : 'image' | 'text' | 'video'
    image : ['url' => string, 'alt' => string]
    media : ['type' => string, 'url' => string, 'embedUrl' => string] | null
--}}
@php
  $stretch = $stretch ?? false;
  $squareEmbed = $squareEmbed ?? false;
  $slotType = $slot['type'] ?? '';
@endphp

@if($slotType === 'image' && !empty($slot['image']['url']))

  <div @class(['project-slot', 'project-slot--image', 'project-slot--stretch' => $stretch])>
    <img class="project-slot__image" src="{{ $slot['image']['url'] }}" alt="{{ $slot['image']['alt'] ?? '' }}">
  </div>

@elseif($slotType === 'text' && trim(strip_tags((string) ($slot['text'] ?? ''))) !== '')

  <div @class(['project-slot', 'project-slot--text', 'project-slot--stretch' => $stretch, 'd-flex' => true, 'align-items-center' => true])>
    <div class="project-slot__text col-12 col-lg-8 offset-lg-2">
      <div class="text-center w-100">
        {!! $slot['text'] !!}
      </div>
    </div>
  </div>

@elseif($slotType === 'video' && !empty($slot['media']))
  @php $media = $slot['media']; @endphp

  <div @class(['project-slot', 'project-slot--video', 'project-slot--stretch' => $stretch])>
    @if(in_array($media['type'], ['youtube', 'bunny', 'frameio']) && !empty($media['embedUrl']))
      <div class="project-slot__embed">
        <iframe
          class="project-slot__iframe"
          src="{!! $media['embedUrl'] !!}"
          frameborder="0"
          @if(!empty($media['autoplay']))
          style="width: 100%;{{ $squareEmbed ? ' aspect-ratio: 1/1;' : ' aspect-ratio: 16/9;' }};pointer-events:none;"
          @else
          style="width: 100%;{{ $squareEmbed ? ' aspect-ratio: 1/1;' : ' aspect-ratio: 16/9;' }}"
          @endif
          allow="autoplay; fullscreen; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>

    @elseif($media['type'] === 'video' && !empty($media['url']))
      <video
        class="project-video project-slot__video"
        @if(!empty($media['autoplay'])) autoplay @endif
        @if(!empty($media['muted'])) muted @endif
        @if(!empty($media['loop'])) loop @endif
        playsinline>
        <source src="{{ $media['url'] }}" type="video/mp4">
      </video>

    @endif
    </div>

@endif