<?php 
/* 
* Block Name: Hero
* Post Type: page, post
*/
?>
<?php if (isset($block['data']['previewImage'])): ?>
    <?php do_action('block_image', __FILE__); ?>
<?php else: ?>
    <?php

    // Block helper
    require \get_template_directory() . '/template-parts/base/block-helper.php';
    if (isset($disable) && $disable) {
        return;
    }

    // Position classes
    $horisontal = get_field('horisontal_text_position') ? 'justify-content-'.get_field('horisontal_text_position') : 'justify-content-center';
    $textAlign = 'text-'.get_field('horisontal_text_position');
    $vertical = get_field('vertical_text_position') ? 'align-items-'.get_field('vertical_text_position') : 'align-items-end';

    // Load values and assing defaults
    $title = get_field('title') ?: get_the_title(get_the_id());
    $ctas = get_field('ctas') ?: false;
    $scrollDownBtn = get_field('enable_scroll_down_button') ?:false;
    $scrollDownLabel = get_field('scroll_down_button_label') ?:false;
    $sectionId = get_field('section_id') ?: false;
?>
<?php if ($bgUrl): ?>
    <link rel="preload" href="<?php echo $bgUrl; ?>" as="image">
<?php endif; ?>
<?php if ($mobileBgUrl): ?>
    <link rel="preload" href="<?php echo $mobileBgUrl; ?>" as="image">
<?php endif; ?>
    <section class="section hero-section responsive-bg block d-flex <?php echo $className; ?> <?php echo $vertical; ?>" 
        <?php if ($bgUrl): ?>
            style="background-image: url('<?php echo $bgUrl; ?>');"
            data-desktop-image="<?php echo $bgUrl; ?>"
        <?php endif; ?>
        <?php if ($mobileBgUrl): ?>
            data-mobile-image="<?php echo $mobileBgUrl; ?>"
        <?php endif; ?>
        <?php if ($sectionId): ?>
            id="<?php echo $sectionId; ?>"
        <?php endif; ?>
    >
        <div class="hero-wrapper"></div>
        <div class="container d-flex <?php echo $horisontal; ?>">
            <div class="text-content <?php echo $textAlign; ?>">
                <?php if ($title): ?>
                    <h1 class="h1"><?php echo $title; ?></h1>
                <?php endif; ?>
                <?php if ($text): ?>
                    <div class="text"><?php echo $text; ?></div>
                <?php endif; ?>
                <?php if ($ctas && is_array($ctas)): ?>
                    <div class="cta">
                        <?php foreach ($ctas as $val): ?>
                            <?php if (is_array($val) && isset($val['cta']) && is_array($val['cta'])): $cta = $val['cta']; ?>
                                <a href="<?php echo $cta['url']; ?>" target="<?php echo $cta['target']; ?>" class="button btn btn-first my-2 me-2"><?php echo $cta['title']; ?></a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php if ($scrollDownBtn): ?> 
            <div class="scroll-down">
                <?php if ($scrollDownLabel): ?>
                    <small><?php echo $scrollDownLabel; ?></small>
                <?php endif; ?>
                <div class="icon-wrapper">
                    <svg width="51" height="76" viewBox="0 0 51 76" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M24.7994 56.7135C25.1934 57.1005 25.8265 57.0947 26.2135 56.7006L32.5194 50.2791C32.9063 49.885 32.9006 49.2519 32.5065 48.8649C32.1124 48.478 31.4793 48.4837 31.0923 48.8778L25.4871 54.5858L19.7791 48.9806C19.385 48.5937 18.7519 48.5994 18.3649 48.9935C17.978 49.3876 17.9837 50.0207 18.3778 50.4077L24.7994 56.7135ZM26.5 55.9909L26 0.990908L24 1.00909L24.5 56.0091L26.5 55.9909Z" fill="currentColor" />
                        <circle cx="25.5" cy="50.5002" r="24" transform="rotate(90 25.5 50.5002)" stroke="currentColor" stroke-width="3"/>
                    </svg>
                </div>
            </div>
        <?php endif; ?>
    </section>
<?php endif; ?>
