@php
    $heroOverlayStyles = '';
    if ($block->overlay_opacity) {
        $opacity = $block->overlay_opacity / 100;
        $heroOverlayStyles .= "opacity: $opacity;";
        if ($block->overlay_color) {
            $heroOverlayStyles .= "background-color: $block->overlay_color;";
        }
    }
    // optimizes image load by preloading the resource
    if ($block->mobileImages->count()) {
        setRequestContext('preloadImages', [
            ['url' => getMediaUrl($block->mobileImages->random()['filename'], '640x1036') . '.webp', 'type' => 'image/webp']
        ]);
    }
@endphp
<div class="newhome-hero newhome-hero--{{ $block->hero_type }} newhome-hero--{{ $block->alignment }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}">
  @if ($block->anchor_id )
      <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
  @endif
  <div class="newhome-hero__media-wrapper">
    <picture>
        @if ($block->images->count())
            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($block->images->random()['filename'], '1920x768') }}.webp" type="image/webp">
            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($block->images->random()['filename'], '1920x768') }}">
        @endif
        @if ($block->mobileImages->count())
          <source srcset="{{ getMediaUrl($block->mobileImages->random()['filename'], '640x1036') }}.webp" type="image/webp">
          <img src="{{ getMediaUrl($block->mobileImages->random()['filename'], '640x1036') }}">
        @elseif ($block->images->count())
            <source srcset="{{ getMediaUrl($block->images->random()['filename'], '640x1036') }}.webp" type="image/webp">
            <img src="{{ getMediaUrl($block->images->random()['filename'], '640x1036') }}">
        @endif
    </picture>
    @if($block->bg_type == 'video' && !empty($block->bgVideo))
      <video autoplay muted="" preload="none" defaultmuted="" loop="true" width="1920" height="1080" data-role="visible-load">
        <source data-src="{{ getMediaUrl($block->bgVideo->filename) }}" type="video/mp4">
      </video>
    @endif
    <div
        class="newhome-hero__media-overlay"
        style="{{ $heroOverlayStyles }}"
    ></div>
  </div>
  <div class="newhome-hero__overlay">
    <div class="newhome-hero__content">
      <h1 class="newhome-hero__title">@title($block->block_title)</h1>
      {{-- <div class="newhome-hero__subtitle">{{ $block->block_subtitle }}</div> --}}
      <div class="newhome-hero__content-subtitle rich-content">
          {!! $block->content !!}
      </div>

      <div class="newhome-hero__cta">
        {!! generateLink($block->cta1, 'std-button std-button--large blue-button home-hero-button') !!}
      </div>
    </div>
  </div>
  <button class="scroll-down-btn" data-action="scroll-down"></button>
</div>
<style>
    @if($block->font_color)
        .newhome-hero .newhome-hero__title,
        .newhome-hero .newhome-hero__subtitle{
            color: {{ $block->font_color }};
        }
    @endif
</style>