<?php
$headline = mb_get_block_field("cta_box_headline");
$text = mb_get_block_field("cta_box_text");
$buttons = mb_get_block_field("cta_box_buttons");
$image = mb_get_block_field("cta_box_image");
$img = reset($image);
$align = mb_get_block_field("cta_box_align");
$light = mb_get_block_field("cta_box_light");

if ($headline) { ?>
<section <?= inoby_block_attrs($attributes, ["class" => "component-cta-box" . ($light ? "light" : "")]) ?>>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="cta-box <?php if ($align == 1) {
          echo "switch-sides";
        } ?>">
          <div class="cta-box-content">
            <h2><?= $headline ?? "" ?></h2>
            <p><?= $text ?? "" ?></p>
            <?php if ($buttons) {
              echo '<div class="buttons-wrap">';
              foreach ($buttons as $button) {

                $btn_href = empty($button[1]) ? "#0" : $button[1];
                $btn_target = empty($button[2]) ? "_self" : $button[2];
                $btn_class = empty($button[3]) ? "button" : $button[3];
                $btn_text = empty($button[0]) ? "" : $button[0];
                ?>
            <a href="<?= $btn_href ?>" target="<?= $btn_target ?>" class="<?= $btn_class ?>"><?= $btn_text ?></a>
            <?php
              }
              echo "</div>";
            } ?>
          </div>
          <?php if ($image): ?>
          <div class="cta-box-image"
            style="background: center/cover no-repeat url('<?= $img["sizes"]["v-6"]["url"] ?>');">
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</section>
<?php }
