<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Sign Up Block Preview')) {
    return;
}
$className = 'sign-up-cta-block sk-section-spacing ' . ($block['className'] ?? '');
$form_id = get_field('form_id');

?>
<section class="<?php echo esc_attr(trim($className)); ?>" data-aos="fade-up">
    <div class="container">
        <div class="sign-up-cta-wrapper">
            <div class="sign-up-cta-heading">
                <?php $heading = get_field('heading');
                if (isset($heading) && !empty($heading)): ?>
                    <h2><?php echo esc_html($heading); ?></h2>
                <?php endif; ?>
                <?php $description = get_field('description');
                if (isset($description) && !empty($description)): ?>
                <p><?php echo $description; ?></p>
                <?php endif; ?>
            </div>
            <div class="sign-up-form-wrapper">
                <?php if (!empty($form_id)) : ?>
                    <?php
                    global $hs_forms_script_loaded;
                    if (empty($hs_forms_script_loaded)) :
                        $hs_forms_script_loaded = true;
                    ?>
                        <script src="//js.hsforms.net/forms/embed/v2.js"></script>
                    <?php endif; ?>
                    <script data-hubspot-rendered="true">
                        if (typeof hbspt !== "undefined") {
                            hbspt.forms.create({
                                region: "na1",
                                portalId: "21157292",
                                formId: "<?php echo esc_js($form_id); ?>",
                                sfdcCampaignId: "",
                                css: " ",
                                onFormReady: ($form) => {
                                    const formInputs = $form.find(".hs-fieldtype-text input");
                                    formInputs.each(function() {
                                        const input = this;
                                        if (input.value) {
                                            input.closest(".hs-fieldtype-text")
                                                .classList.add("focused");
                                        }
                                        input.addEventListener("focus", () => {

                                            input.closest(".hs-fieldtype-text")
                                                .classList.add("focused");
                                        });
                                        input.addEventListener("blur", () => {
                                            if (!input.value) {

                                                input.closest(".hs-fieldtype-text")
                                                    .classList.remove("focused");
                                            }
                                        });
                                    });
                                }
                            });
                        }
                    </script>
                <?php endif; ?>
            </div>
            <div class="sign-up-img-wrapper">
                <?php
                $left_image = get_field('left_image');
                if (isset($left_image) && !empty($left_image)) : ?>
                    <img src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo (isset($left_image['alt']) && !empty($left_image['alt'])) ? esc_attr($left_image['alt']) : ''; ?>">
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>