@props([
    'title' => 'Default title',
    'text' => 'Default descriptive text.',
    'shortText' => 'Default short text.',
    'primaryButton' => [
        'text' => 'Default primary button text.',
        'url' => null,
        'ariaLabel' => '',
    ],
    'secondaryButton' => [
        'text' => 'Default secondary button text.',
        'url' => null,
        'ariaLabel' => '',
    ],
    'image' => [],
])

@php
  $hasImage = !empty($image);
@endphp
<div class="flex flex-col md:flex-row gap-4 w-full">
  {{-- First Column --}}
  <div class="flex max-w-xl flex-col justify-center grow">
    <p class="title-page mb-3 md:mb-5">{!! $title !!}</p>
    <x-landing.subtitle class="text-center md:text-left">{!! $text !!}</x-landing.subtitle>
    <div class="flex justify-center gap-4 md:justify-start">
      @if (!empty($primaryButton['url']))
        <x-buttons.secondary class="mt-6" target="_blank" type="link" href="{{ $primaryButton['url'] }}"
          aria-label="{{ $primaryButton['ariaLabel'] }}">
          {!! $primaryButton['text'] !!}
        </x-buttons.secondary>
      @endif
      @if (!empty($secondaryButton['url']))
        <x-buttons.outeline-white class="mt-6" target="_blank" type="link" href="{{ $secondaryButton['url'] }}"
          aria-label="{{ $secondaryButton['ariaLabel'] }}">
          {!! $secondaryButton['text'] !!}
        </x-buttons.outeline-white>
      @endif
    </div>

  </div>
  {{-- Second Column --}}
  @if ($hasImage)
    {{-- Imagen superpuesta al centro inferior cuando hay video --}}
    <div class="flex items-center justify-center flex-auto grow">
      @if ($image['linkout'])
        <a href="{{ $image['linkout'] }}" target="_blank"
          class="w-full max-w-[120px] md:max-w-[150px] lg:max-w-[250px]">
          <picture class="block">
            <source srcset="{{ $image['desktop'] }}" media="(min-width: 768px)">
            <source srcset="{{ $image['mobile'] }}" media="(max-width: 767px)">
            <img src="{{ $image['mobile'] }}" alt="{{ $image['alt'] }}" width="200" height="200"
              class="h-auto w-full object-contain drop-shadow-lg" loading="lazy" decoding="async" fetchpriority="{{ $image['priority'] ?? 'auto' }}">
          </picture>
        </a>
      @else
        <div
          class="w-full max-w-[120px] md:max-w-[150px] lg:max-w-[250px]">
          <picture class="block">
            <source srcset="{{ $image['desktop'] }}" media="(min-width: 768px)">
            <source srcset="{{ $image['mobile'] }}" media="(max-width: 767px)">
            <img src="{{ $image['mobile'] }}" alt="{{ $image['alt'] }}" width="200" height="200"
              class="h-auto w-full object-contain drop-shadow-lg" loading="lazy" fetchpriority="{{ $image['priority'] ?? 'auto' }}" decoding="async" >
          </picture>
        </div>
      @endif
    </div>
  @endif
</div>