<?php
$hero_headline = mb_get_block_field("hero_headline");
$hero_btn = mb_get_block_field("hero_btn");
$hero_url = mb_get_block_field("hero_url");
$hero_bg = mb_get_block_field("hero_bg");
$hero_as_video_bg = mb_get_block_field("hero_as_bg_video");
$hero_video_bg = mb_get_block_field("hero_bg_video");
$ctas = mb_get_block_field("cta");

if ($hero_headline) { ?>
<section
  <?= inoby_block_attrs($attributes, ["class" => "hero", "style" => "background: center/cover no-repeat url('" . (reset($hero_bg)["sizes"]["large"]["url"] ?? "") . "');"]) ?>>
  <?php if ($hero_as_video_bg) { ?>
  <div class="video-overlay">
    <video preload="auto" autoplay muted loop class="hero-video" playsinline>
      <source src="<?= reset($hero_video_bg)['src'] ?>">
    </video>
  </div>
  <?php } ?>
  <div class="container">
    <div class="row">
      <div class="col-6 col-md-12 hero-main">
        <?php if ($hero_headline) {
          echo "<h1>" . $hero_headline . "</h1>";
        }
        do_action("component_hero_after_headline");
        if ($hero_url) {
          echo '<a class="button" href="' . $hero_url . '">' . $hero_btn . "</a>";
        } ?>
      </div>
      <?php if ($ctas) { ?>
      <div class="col-6 col-md-12 hero-cta">
        <?php foreach ($ctas as $cta) {
          $cta_url = $cta["url"] ?? "";
          $cta_bg = $cta["bg"][0] ?? "";
          $bg = wp_get_attachment_image_url($cta_bg, "h-12") ?? "";
          echo '<a href="' . $cta_url . '" class="cta-section" style="background: center/cover no-repeat url(' . $bg . ');">';
          if ($cta["headline"]) {
            echo "<h2>" . $cta["headline"] . "</h2>";
          }
          do_action("component_hero_cta_after_headline", $cta);
          if ($cta["text"]) {
            echo "<p>" . $cta["text"] . "</p>";
          }
          echo "</a>";
        } ?>
      </div>
      <?php } ?>
    </div>
  </div>
</section>
<?php }