<?php
/**
 * futures区块模板
 * 支持自定义器设置和短代码调用
 */
 
 // 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码参数（如果通过短代码调用）
global $futures_shortcode_atts;
$shortcode_atts = isset($futures_shortcode_atts) ? $futures_shortcode_atts : array();

// 确保 $shortcode_atts 是数组
if (!is_array($shortcode_atts)) {
    $shortcode_atts = array();
}

// 设置默认参数
$atts = wp_parse_args($shortcode_atts, array(
    'id' => 'nenghui-futures-block',
    'class' => '',
    'title' => get_theme_mod('futures_title', 'Powering Sustainble Futures'),
    'show_animation' => 'true'
));

// 获取自定义器设置
$futures_title = !empty($atts['title']) ? $atts['title'] : get_theme_mod('futures_title', 'Powering Sustainble Futures');
$futures_bg_image = get_theme_mod('futures_bg_image', get_template_directory_uri() . '/assets/images/futures-bg.webp');
$futures_button_text = get_theme_mod('futures_button_text', 'About us');
$futures_button_link = get_theme_mod('futures_button_link', 'about.html');

// 获取特性项目数据
$futures_items = array();
$default_placeholder = get_template_directory_uri() . '/assets/images/NaN-img.png';

// 定义默认项目数据
$default_items = array(
    1 => array('title' => 'High-Performance', 'icon' => './images/2_03.png'),
    2 => array('title' => 'Advanced Safety', 'icon' => './images/2_05.png'),
    3 => array('title' => 'Smart Energy', 'icon' => './images/4_05.png'),
    4 => array('title' => 'Fast Deployment', 'icon' => './images/5_05.png'),
    5 => array('title' => 'Global Compliance', 'icon' => './images/7_05.png'),
);

for ($i = 1; $i <= 5; $i++) {
    // 获取自定义器设置，如果为空则使用默认值
    $title = get_theme_mod('futures_item_' . $i . '_title', $default_items[$i]['title']);
    $icon_url = get_theme_mod('futures_item_' . $i . '_icon', $default_placeholder);
    
    // 如果标题为空，使用默认值
    if (empty($title)) {
        $title = $default_items[$i]['title'];
    }
    
    // 如果没有设置图标或图标路径无效，使用默认占位图片
    if (empty($icon_url) || strpos($icon_url, './images/') === 0) {
        $icon_url = $default_placeholder;
    }
    
    $item = array(
        'icon' => $icon_url,
        'title' => $title
    );
    $futures_items[] = $item;
}

// 构建CSS类
$css_classes = array('ilist4');
if (!empty($atts['class'])) {
    $css_classes[] = $atts['class'];
}
$css_class = implode(' ', $css_classes);

// 动画类
$animation_class = ($atts['show_animation'] === 'true') ? 'wow fadeInUp' : '';

?>

<style>
.ilist4 {
    position: relative;
    padding: 80px 0;
    margin: 0 50px;
    margin-top: 3rem;
    background: url('<?php echo esc_url($futures_bg_image); ?>') no-repeat center center;
    background-size: cover;
    border-radius: 30px;
    color: #fff;
}

.ilist4 .contentbox {
    position: relative;
    z-index: 2;
}

.ilist4 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    z-index: 1;
}

.ilist4 .w1620 {
    max-width: 1620px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

.ilist4 .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 3rem;
    color: #fff;
}

.ilist4 .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.ilist4 .stat-item {
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.ilist4 .stat-item:hover {
    transform: translateY(-8px);
    transition: all 0.3s ease;
}

.ilist4 .stat-item

.ilist4 .stat-item img {
    width: auto;
    height: 60px;
    margin: 0 auto 1rem;
    display: block;
    object-fit: contain;
}

.ilist4 .stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #fff;
}



.ilist4 .cta-btn {
    text-align: center;
}

.ilist4 .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    background: #007cba;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ilist4 .cta-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 86, 179, 0.3);
    transition: all 0.3s ease;
    color: #fff;
    text-decoration: none;
}

.ilist4 .cta-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
    .ilist4 {
        margin: 0 20px;
        padding: 40px 0;
    }
    
    .ilist4 .section-title {
        font-size: 2rem;
    }
    
    .ilist4 .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}
</style>

<section id="<?php echo esc_attr($atts['id']); ?>" class="<?php echo esc_attr($css_class); ?>" data-aos="fade-up">
    <div class="contentbox" data-aos="fade-up" data-aos-delay="200">
        <div class="bg img-cover <?php echo esc_attr($animation_class); ?>" 
             style="background-image: url('<?php echo esc_url($futures_bg_image); ?>');" 
             data-wow-delay="0.1s"></div>
        <div class="w1620 warpbox" data-aos="fade-up" data-aos-delay="400">
            <h2 class="section-title" data-aos="fade-up" data-aos-delay="600"><?php echo esc_html($futures_title); ?></h2>
            <div class="stats-grid" data-aos="fade-up" data-aos-delay="800">
                <?php if (is_array($futures_items) && !empty($futures_items)) {
                    foreach ($futures_items as $index => $item): ?>
                <div class="stat-item">
                    <img src="<?php echo esc_url($item['icon']); ?>" alt="<?php echo esc_attr($item['title']); ?>">
                    <div class="stat-value"><?php echo esc_html($item['title']); ?></div>

                </div>
                <?php endforeach; 
                } ?>
            </div>
            <?php if (!empty($futures_button_text) && !empty($futures_button_link)): ?>
            <div class="cta-btn">
                <a href="<?php echo esc_url($futures_button_link); ?>" class="cta-button">
                    <span><?php echo esc_html($futures_button_text); ?></span>
                    <svg viewBox="0 0 13 10" height="10px" width="15px">
                        <path d="M1,5 L11,5"></path>
                        <polyline points="8 1 12 5 8 9"></polyline>
                    </svg>
                </a>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>