<?php
/**
 * 技术服务板块模板
 * 
 * 显示三个技术服务卡片：7x24h响应、认证售前售后技术人员、智能ESS守护者
 */
// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码参数
global $technical_service_shortcode_atts;
$atts = $technical_service_shortcode_atts;

// 设置默认值
$section_id = !empty($atts['id']) ? esc_attr($atts['id']) : 'nenghui-technical-service-' . uniqid();
$section_class = !empty($atts['class']) ? esc_attr($atts['class']) : '';
$title = !empty($atts['title']) ? esc_html($atts['title']) : 'Reliable Technical Service';
$subtitle = !empty($atts['subtitle']) ? esc_html($atts['subtitle']) : 'Enhance Experience for Customers';
$show_animation = !empty($atts['show_animation']) && $atts['show_animation'] !== 'false';

// 服务数据
$services = array(
    array(
        'icon' => get_template_directory_uri() . '/assets/images/24-h.webp',
        'title' => '7x24h Respond',
        'description' => 'We provide in-time response support to our customers'
    ),
    array(
        'icon' => get_template_directory_uri() . '/assets/images/Certified Pre-sales.webp',
        'title' => 'Certified Pre-sales & Post-sales Technical Personnel',
        'description' => 'Well trained technical experts to serve you online'
    ),
    array(
        'icon' => get_template_directory_uri() . '/assets/images/Intelligent ESS Guardian.webp',
        'title' => 'Intelligent ESS Guardian',
        'description' => 'Transformer Monitoring Proactively Eliminates 95% Operational Risks'
    )
);
?>

<section id="<?php echo $section_id; ?>" class="technical-service-section <?php echo $section_class; ?>">
    <div class="container">
        <!-- 标题区域 -->
        <div class="section-header text-center <?php echo $show_animation ? 'fade-in-up' : ''; ?>">
            <h2 class="section-title"><?php echo $title; ?></h2>
            <p class="section-subtitle"><?php echo $subtitle; ?></p>
        </div>
        
        <!-- 服务卡片网格 -->
        <div class="services-grid">
            <?php foreach ($services as $index => $service): ?>
            <div class="service-card <?php echo $show_animation ? 'fade-in-up' : ''; ?>" 
                 <?php if ($show_animation): ?>data-delay="<?php echo ($index + 1) * 200; ?>"<?php endif; ?>>
                <div class="service-icon">
                    <img src="<?php echo esc_url($service['icon']); ?>" alt="<?php echo esc_attr($service['title']); ?>" />
                </div>
                <div class="service-content">
                    <h3 class="service-title"><?php echo esc_html($service['title']); ?></h3>
                    <div class="service-divider"></div>
                    <p class="service-description"><?php echo esc_html($service['description']); ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<style>
.technical-service-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.technical-service-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin: 0;
    font-weight: 400;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    align-items: stretch;
}

.service-card {
    background: #ffffff;
    border-radius: 0;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid transparent;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 4px solid;
    border-image: linear-gradient(90deg, #009194 0%, #116598 100%) 1;
    transition: all 0.3s ease;
}

.service-icon {
    margin-bottom: 30px;
    position: relative;
    text-align: left;
}

.service-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: grayscale(0.2);
    display: block;
}

.service-card:hover .service-icon img {
    filter: grayscale(0) brightness(1.1);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* 为图标添加渐变遮罩效果 */
.service-card:hover .service-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 145, 148, 0.2) 0%, rgba(17, 101, 152, 0.2) 100%);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.3s ease;
}

.service-content {
    position: relative;
    text-align: left;
}

.service-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.4;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.service-divider {
    width: 60px;
    height: 3px;
    background: #e9ecef;
    margin: 0 0 20px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.service-card:hover .service-divider {
    background: linear-gradient(90deg, #009194 0%, #116598 100%);
    width: 80px;
    transition: all 0.3s ease;
}

.service-description {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* 动画效果 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-up[data-delay] {
    animation-delay: var(--delay, 0s);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 992px) {
    .technical-service-section {
        padding: 60px 0;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .service-card {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .technical-service-section {
        padding: 50px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .service-card {
        padding: 30px 20px;
    }
    
    .service-title {
        font-size: 1.2rem;
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .technical-service-section .container {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .service-icon img {
        width: 70px;
        height: 70px;
    }
    
    .service-card:hover .service-icon::after {
        width: 70px;
        height: 70px;
    }
}
</style>

<script>
// 动画初始化
document.addEventListener('DOMContentLoaded', function() {
    const animatedElements = document.querySelectorAll('.fade-in-up');
    
    // 设置动画延迟
    animatedElements.forEach(function(element) {
        const delay = element.getAttribute('data-delay');
        if (delay) {
            element.style.setProperty('--delay', delay + 'ms');
        }
    });
    
    // 滚动触发动画
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.style.animationPlayState = 'running';
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    animatedElements.forEach(function(element) {
        observer.observe(element);
    });
});
</script>