<?php
/**
 * Warehousing and Distribution Project Block Template
 * 仓储和配送项目区块模板
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码属性
global $warehousing_distribution_shortcode_atts;
$atts = isset($warehousing_distribution_shortcode_atts) ? $warehousing_distribution_shortcode_atts : array();

// 设置默认值
$block_id = !empty($atts['id']) ? $atts['id'] : 'nenghui-warehousing-distribution-' . uniqid();
$block_class = !empty($atts['class']) ?  $atts['class'] : '';
$show_animation = isset($atts['show_animation']) ? $atts['show_animation'] : 'true';

// 项目标题
$project_title = 'Our Warehousing and Distribution Project';

// 项目特性列表
$project_features = array(
    'Address: Koning Leopoldlaan 5, 2870 Puurs',
    'CO2 Neutral Warehouse',
    '22 loading docks',
    'Immediately available',
    'Next to major road connection',
    'Existing battery and ESS flows',
    'Bonded warehouse',
    '22,500 sqm',
    'Heavy material handling equipment available up to 3 tons payload'
);

// 图片路径
$image_1 = get_template_directory_uri() . '/assets/images/htgfvdd.png';
$image_2 = get_template_directory_uri() . '/assets/images/htbgfd.png';
?>

<section id="<?php echo esc_attr($block_id); ?>" class="warehousing-distribution-section <?php echo esc_attr($block_class); ?>" data-aos="fade-up">
    <div class="container">
        <!-- 项目标题 -->
        <div class="project-header" data-aos="fade-up" data-aos-delay="200">
            <h2 class="project-title"><?php echo esc_html($project_title); ?></h2>
        </div>
        
        <!-- 第一个项目展示区域 -->
        <div class="project-showcase first-project" data-aos="fade-up" data-aos-delay="400">
            <div class="project-content">
                <!-- 左侧内容区域 -->
                <div class="project-left" data-aos="fade-right" data-aos-delay="600">
                    <div class="project-details">
                        <h3 class="details-title">Key Details and Features</h3>
                        <ul class="features-list">
                            <?php foreach ($project_features as $index => $feature): ?>
                                <li class="feature-item" data-aos="fade-up" data-aos-delay="<?php echo 700 + ($index * 50); ?>">
                                    <span class="feature-bullet">·</span>
                                    <span class="feature-text"><?php echo esc_html($feature); ?></span>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
                
                <!-- 右侧图片区域 -->
                <div class="project-right" data-aos="fade-left" data-aos-delay="800">
                    <div class="project-image">
                        <img src="<?php echo esc_url($image_1); ?>" alt="Warehousing and Distribution Project - Aerial View" loading="lazy" />
                        <div class="image-overlay">
                            <span class="location-tag">ANTWERP</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 第二个项目展示区域 -->
        <div class="project-showcase second-project" data-aos="fade-up" data-aos-delay="1000">
            <div class="project-content">
                <!-- 左侧图片区域 -->
                <div class="project-left" data-aos="fade-right" data-aos-delay="1200">
                    <div class="project-image">
                        <img src="<?php echo esc_url($image_2); ?>" alt="Warehousing and Distribution Project - Interior View" loading="lazy" />
                        <div class="image-overlay">
                            <span class="location-tag">OPER</span>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧空白区域或其他内容 -->
                <div class="project-right" data-aos="fade-left" data-aos-delay="1400">
                    <!-- 可以添加其他内容或保持空白 -->
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.warehousing-distribution-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.project-header {
    text-align: center;
    margin-bottom: 60px;
}

.project-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #2c5aa0;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.project-showcase {
    margin-bottom: 80px;
}

.project-showcase:last-child {
    margin-bottom: 0;
}

.project-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    justify-content: space-between;
}

.project-left,
.project-right {
    flex: 1;
    max-width: 50%;
}

.project-details {
    padding: 40px 0;
}

.details-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.3;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 8px 0;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateX(10px);
    color: #2c5aa0;
}

.feature-bullet {
    color: #2c5aa0;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
    line-height: 1.5;
}

.feature-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    flex: 1;
}

.project-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.project-image:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.project-image:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(44, 90, 160, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.location-tag {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 第二个项目的特殊样式 */
.second-project .project-content {
    flex-direction: row;
}

.second-project .project-left {
    order: 1;
}

.second-project .project-right {
    order: 2;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .container {
        padding: 0 30px;
    }
    
    .project-content {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .project-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .project-left,
    .project-right {
        max-width: 100%;
    }
    
    .project-title {
        font-size: 2.2rem;
    }
    
    .second-project .project-content {
        flex-direction: column;
    }
    
    .second-project .project-left {
        order: 1;
    }
    
    .second-project .project-right {
        order: 2;
    }
}

@media (max-width: 768px) {
    .warehousing-distribution-section {
        padding: 60px 0;
    }
    
    .container {
        padding: 0 20px;
    }
    
    .project-header {
        margin-bottom: 40px;
    }
    
    .project-title {
        font-size: 1.8rem;
    }
    
    .project-showcase {
        margin-bottom: 60px;
    }
    
    .project-details {
        padding: 20px 0;
    }
    
    .details-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    
    .feature-item {
        margin-bottom: 12px;
        padding: 6px 0;
    }
    
    .feature-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .warehousing-distribution-section {
        padding: 40px 0;
    }
    
    .project-title {
        font-size: 1.5rem;
    }
    
    .project-content {
        gap: 30px;
    }
    
    .project-details {
        padding: 15px 0;
    }
    
    .details-title {
        font-size: 1.2rem;
    }
    
    .feature-bullet {
        font-size: 1rem;
        margin-right: 10px;
    }
    
    .feature-text {
        font-size: 0.85rem;
    }
    
    .image-overlay {
        bottom: 15px;
        left: 15px;
        padding: 6px 12px;
    }
    
    .location-tag {
        font-size: 0.8rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php if ($show_animation === 'true'): ?>
    // 初始化AOS动画库（如果已加载）
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            easing: 'ease-out-cubic',
            once: true,
            offset: 100
        });
    }
    
    // 添加滚动视差效果
    const images = document.querySelectorAll('#<?php echo esc_js($block_id); ?> .project-image');
    
    function handleScroll() {
        const scrolled = window.pageYOffset;
        const rate = scrolled * -0.5;
        
        images.forEach((image, index) => {
            const speed = 0.5 + (index * 0.1);
            image.style.transform = `translateY(${rate * speed}px)`;
        });
    }
    
    // 节流函数
    let ticking = false;
    function requestTick() {
        if (!ticking) {
            requestAnimationFrame(handleScroll);
            ticking = true;
            setTimeout(() => {
                ticking = false;
            }, 16);
        }
    }
    
    window.addEventListener('scroll', requestTick);
    <?php endif; ?>
});
</script>