<?php
/**
 * BW Step Layout Block Template
 * 
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during backend preview render.
 * @param   int $post_id The post ID the block is rendering content against.
 * @param   array $context The context provided to the block by the post or it's parent block.
 */

// Default values
$step_direction = get_field('step_direction') ?: 'low-to-high';

// Create class attribute
$className = 'bw-step-layout';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
$className .= ' bw-step-layout--' . $step_direction;

// Default cards if no data
$cards = array();
for($i = 1; $i <= 3; $i++) {
    $cards[] = array(
        'image' => get_field('card_' . $i . '_image'),
        'title' => get_field('card_' . $i . '_title') ?: 'Card ' . $i . ' Title',
        'description' => get_field('card_' . $i . '_description') ?: 'Card ' . $i . ' description text goes here.',
        'button_text' => get_field('card_' . $i . '_button_text') ?: 'LEARN MORE',
        'button_url' => get_field('card_' . $i . '_button_url') ?: '#',
    );
}
?>

<div class="<?php echo esc_attr($className); ?>">
    <div class="bw-step-layout__inner">
        <?php foreach($cards as $index => $card): 
            $card_number = $index + 1;
            $has_image = !empty($card['image']);
        ?>
            <div class="bw-step-layout__card bw-step-layout__card--<?php echo $card_number; ?>" 
                 <?php if($has_image): ?>data-has-image="true"<?php endif; ?>>
                
                <?php if($has_image): ?>
                    <div class="bw-step-layout__background">
                        <?php if(is_array($card['image'])): ?>
                            <img src="<?php echo esc_url($card['image']['url']); ?>" 
                                 alt="<?php echo esc_attr($card['image']['alt']); ?>" />
                        <?php else: ?>
                            <?php echo wp_get_attachment_image($card['image'], 'large', false, array('loading' => 'lazy')); ?>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
                
                <div class="bw-step-layout__content">
                    <h3 class="bw-step-layout__title"><?php echo esc_html($card['title']); ?></h3>
                    <p class="bw-step-layout__description"><?php echo esc_html($card['description']); ?></p>
                    
                    <?php if(!empty($card['button_text']) && !empty($card['button_url'])): ?>
                        <a href="<?php echo esc_url($card['button_url']); ?>" 
                           class="bw-step-layout__button">
                            <?php echo esc_html($card['button_text']); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<?php if($is_preview): ?>
<script>
// Re-initialize any JavaScript if needed in preview mode
</script>
<?php endif; ?>