<?php 
/**
 * 业务流程设计区块模板
 */

// 获取自定义器设置
$show_process = get_theme_mod('business_process_show', true);
$process_title = get_theme_mod('business_process_title', '设计业务流程');
$process_subtitle = get_theme_mod('business_process_subtitle', '专业的设计流程，确保项目成功');

// 获取各个tab的配置
$tab_items = [];
for ($i = 1; $i <= 4; $i++) {
    $tab_items[] = [
        'number' => sprintf('%02d', $i),
        'title' => get_theme_mod("business_process_tab{$i}_title", "步骤{$i}"),
        'description' => get_theme_mod("business_process_tab{$i}_description", "步骤{$i}的详细描述"),
        'image' => get_theme_mod("business_process_tab{$i}_image", get_template_directory_uri() . '/assets/images/FWas.jpg')
    ];
}

// 如果不显示区块，直接返回
if (!$show_process) {
    return;
}
?>

<div class="business-process-block" id="business-process">
    <div class="container">
        <?php if ($process_title || $process_subtitle): ?>
        <div class="process-header">
            <?php if ($process_title): ?>
            <h2 class="process-title"><?php echo esc_html($process_title); ?></h2>
            <?php endif; ?>
            <?php if ($process_subtitle): ?>
            <p class="process-subtitle"><?php echo esc_html($process_subtitle); ?></p>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        
        <div class="process-content">
            <!-- 左侧Tab标签 -->
            <div class="process-tabs">
                <?php foreach ($tab_items as $index => $item): ?>
                <div class="process-tab <?php echo $index === 0 ? 'active' : ''; ?>" data-tab="<?php echo $index; ?>">
                    <div class="tab-number"><?php echo esc_html($item['number']); ?></div>
                    <div class="tab-content">
                        <h3 class="tab-title"><?php echo esc_html($item['title']); ?></h3>
                        <p class="tab-description"><?php echo esc_html($item['description']); ?></p>
                    </div>
                    <div class="tab-arrow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- 右侧图片显示区域 -->
            <div class="process-images">
                <?php foreach ($tab_items as $index => $item): ?>
                <div class="process-image <?php echo $index === 0 ? 'active' : ''; ?>" data-image="<?php echo $index; ?>">
                    <img src="<?php echo esc_url($item['image']); ?>" 
                         alt="<?php echo esc_attr($item['title']); ?>" 
                         loading="lazy">
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>