<?php
/**
 * CTA Block — render template
 *
 * Variants:
 *   - 1-button: primary button only (cta_button_2 empty)
 *   - 2-button: primary + secondary outline button (cta_button_2 filled)
 *
 * Built forward-from-Figma 2026-04-12 by Lark.
 * Figma source: CTA-1Button (7566:305661), CTA-2Buttons (9992:12752)
 * Vexeyes spec used for exact CSS values.
 *
 * Kate's overlap bug fix: desktop layout uses flexbox with percentage widths
 * instead of the original fixed 747/693px absolute positioning that broke
 * in the 1280-1440px viewport range.
 */

$heading     = get_field('cta_heading');
$description = get_field('cta_description');
$button      = get_field('cta_button');
$button_2    = get_field('cta_button_2');
$image       = get_field('cta_image');

// Early return — nothing to render
if (!$heading && !$description) {
    return;
}

$has_two_buttons = !empty($button_2) && !empty($button_2['url']);
$block_classes   = 'cta-block';
if ($has_two_buttons) {
    $block_classes .= ' cta-block--two-buttons';
}

// Block wrapper attributes from ACF
$block_attrs = get_block_wrapper_attributes([
    'class'          => $block_classes,
    'data-figma-id'  => '7566:305661',
]);
?>

<section <?php echo $block_attrs; ?>>
    <div class="cta-block__content">
        <div class="cta-block__inner" data-figma-id="5490:45884">
            <div class="cta-block__text" data-figma-id="5490:45885">
                <?php if ($heading): ?>
                    <h2 class="cta-block__heading" data-figma-id="5490:45886">
                        <?php echo esc_html($heading); ?>
                    </h2>
                <?php endif; ?>

                <?php if ($description): ?>
                    <p class="cta-block__description" data-figma-id="5490:45887">
                        <?php echo esc_html($description); ?>
                    </p>
                <?php endif; ?>
            </div>

            <?php if ($button || $button_2): ?>
                <div class="cta-block__buttons">
                <?php if ($button && !empty($button['url'])): ?>
                    <a href="<?php echo esc_url($button['url']); ?>"
                       class="cta-btn cta-btn--primary"
                       <?php echo !empty($button['target']) ? 'target="' . esc_attr($button['target']) . '" rel="noopener"' : ''; ?>
                       data-figma-id="5490:45888">
                        <span class="cta-btn__text" data-figma-id="I5490:45888;3129:87429"><?php echo esc_html($button['title'] ?: 'Learn More'); ?></span>
                        <span class="cta-btn__icon" data-figma-id="I5490:45888;16365:213269" aria-hidden="true">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M7.5 3.333L14.167 10L7.5 16.667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </a>
                <?php endif; ?>

                <?php if ($has_two_buttons): ?>
                    <a href="<?php echo esc_url($button_2['url']); ?>"
                       class="cta-btn cta-btn--outline"
                       <?php echo !empty($button_2['target']) ? 'target="' . esc_attr($button_2['target']) . '" rel="noopener"' : ''; ?>
                       data-figma-id="9992:12755">
                        <span class="cta-btn__text" data-figma-id="I9992:12755;3129:87429"><?php echo esc_html($button_2['title'] ?: 'Learn More'); ?></span>
                        <span class="cta-btn__icon" data-figma-id="I9992:12755;16365:213269" aria-hidden="true">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M7.5 3.333L14.167 10L7.5 16.667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </a>
                <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="cta-block__image" data-figma-id="5490:45892">
        <?php if ($image): ?>
            <img src="<?php echo esc_url($image['url']); ?>"
                 alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
                 width="<?php echo esc_attr($image['width'] ?? ''); ?>"
                 height="<?php echo esc_attr($image['height'] ?? ''); ?>"
                 loading="lazy">
        <?php else: ?>
            <?php // TODO: Remove default image once Kate populates cta_image via WP admin ?>
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/blocks/cta/default.png"
                 alt=""
                 loading="lazy">
        <?php endif; ?>
    </div>
</section>