@php($p = $block->get('prefix', 'uph'))
@php($v = $block->get('variant', 'intro'))
@php($reverse = (bool) $block->get('reverse', false))
@php($framed = (bool) $block->get('framed', true))
@php($paragraphs = $block->get('paragraphs', []))
  <section class="{{ $p }}-{{ $v }}">
    <div class="{{ $p }}-{{ $v }}-inner">
@unless($reverse)
      <div class="{{ $p }}-{{ $v }}-text" data-reveal>
        <p class="{{ $block->get('eyebrow_class', 'section-eyebrow') }}">{{ $block->get('eyebrow') }}</p>
        <h2 class="{{ $block->get('title_class', $p.'-section-title') }}">{!! $block->get('title_html') !!}</h2>
@foreach($paragraphs as $para)
        <p class="{{ $para['class'] ?? '' }}">{!! $para['html'] ?? '' !!}</p>
@endforeach
      </div>
      <figure class="{{ $p }}-{{ $v }}-img" data-reveal>
@if($framed)
        <div class="{{ $p }}-{{ $v }}-img-frame">
          <img src="{{ media_url($block->get('image')) }}" alt="{{ $block->get('image_alt') }}" loading="lazy" />
        </div>
@else
        <img src="{{ media_url($block->get('image')) }}" alt="{{ $block->get('image_alt') }}" loading="lazy" />
@endif
        <figcaption class="{{ $p }}-{{ $v }}-img-cap">
          <span>{{ $block->get('caption_label') }}</span>
          <em>{{ $block->get('caption_em') }}</em>
        </figcaption>
      </figure>
@else
      <figure class="{{ $p }}-{{ $v }}-img" data-reveal>
@if($framed)
        <div class="{{ $p }}-{{ $v }}-img-frame">
          <img src="{{ media_url($block->get('image')) }}" alt="{{ $block->get('image_alt') }}" loading="lazy" />
        </div>
@else
        <img src="{{ media_url($block->get('image')) }}" alt="{{ $block->get('image_alt') }}" loading="lazy" />
@endif
        <figcaption class="{{ $p }}-{{ $v }}-img-cap">
          <span>{{ $block->get('caption_label') }}</span>
          <em>{{ $block->get('caption_em') }}</em>
        </figcaption>
      </figure>
      <div class="{{ $p }}-{{ $v }}-text" data-reveal>
        <p class="{{ $block->get('eyebrow_class', 'section-eyebrow') }}">{{ $block->get('eyebrow') }}</p>
        <h2 class="{{ $block->get('title_class', $p.'-custom-title') }}">{!! $block->get('title_html') !!}</h2>
@foreach($paragraphs as $para)
        <p class="{{ $para['class'] ?? '' }}">{!! $para['html'] ?? '' !!}</p>
@endforeach
      </div>
@endunless
    </div>
  </section>