<?php
/**
 * 2026企业CMS - 服务页面（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = '专业提供网站建设、SEO优化、网络推广等全方位互联网服务 - ' . SITE_NAME;
$pageKeywords = '网站建设,SEO优化,网络推广,微信运营,数据分析,技术支持';
$breadcrumbItems = [['title' => '服务内容']];

$services = [
    [
        'icon' => '🚀',
        'title' => '网站建设',
        'desc' => '专业团队提供企业官网、商城、小程序等全方位网站建设服务，助力企业数字化转型。',
        'features' => ['响应式设计', 'SEO优化', '高性能架构', '安全防护']
    ],
    [
        'icon' => '💡',
        'title' => 'SEO优化',
        'desc' => '通过搜索引擎优化提升网站排名，获取更多精准流量，让客户主动找到您。',
        'features' => ['关键词优化', '内容优化', '外链建设', '数据分析']
    ],
    [
        'icon' => '🤝',
        'title' => '网络推广',
        'desc' => '多渠道网络推广方案，提升品牌知名度和转化率，实现营销目标。',
        'features' => ['社交媒体', '信息流广告', '内容营销', '效果追踪']
    ],
    [
        'icon' => '📱',
        'title' => '微信运营',
        'desc' => '微信公众号、小程序开发和运营，助力企业移动端营销，触达更多用户。',
        'features' => ['公众号开发', '小程序开发', '内容运营', '用户增长']
    ],
    [
        'icon' => '📊',
        'title' => '数据分析',
        'desc' => '专业数据分析服务，帮助企业做出数据驱动的决策，优化运营策略。',
        'features' => ['流量分析', '用户画像', '转化分析', '报表定制']
    ],
    [
        'icon' => '🛡️',
        'title' => '技术支持',
        'desc' => '7x24小时技术支持服务，保障网站稳定运行，让您无后顾之忧。',
        'features' => ['服务器运维', '安全防护', '数据备份', '紧急响应']
    ]
];

$steps = [
    ['number' => '01', 'label' => '需求沟通'],
    ['number' => '02', 'label' => '方案设计'],
    ['number' => '03', 'label' => '开发实施'],
    ['number' => '04', 'label' => '测试上线'],
    ['number' => '05', 'label' => '售后支持']
];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
            <h1 class="page-title">我们的服务</h1>
            <p style="max-width: 800px; margin: 0 auto; color: var(--color-gray-500); font-size: var(--text-lg); line-height: 1.8;">
                <?php echo SITE_NAME; ?>提供全方位互联网服务，助力企业数字化转型，
                从策划到上线，从推广到运维，一站式解决您的互联网需求。
            </p>
        </div>
        
        <!-- 服务卡片网格 -->
        <div class="grid grid-3">
            <?php foreach ($services as $s): ?>
            <div class="card service-card">
                <div class="card-body">
                    <div class="service-icon">
                        <span style="font-size: 48px;"><?php echo $s['icon']; ?></span>
                    </div>
                    <h3 class="card-title"><?php echo $s['title']; ?></h3>
                    <p class="card-desc"><?php echo $s['desc']; ?></p>
                    <ul class="service-features">
                        <?php foreach ($s['features'] as $f): ?>
                        <li>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 8px; flex-shrink: 0;">
                                <path d="M13.3332 4L5.99984 11.3333L2.6665 8" stroke="var(--color-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <?php echo $f; ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <!-- 服务流程 -->
        <div class="service-process">
            <h2 class="section-title">服务流程</h2>
            <div class="process-steps">
                <div class="process-line"></div>
                <?php foreach ($steps as $step): ?>
                <div class="process-step">
                    <div class="step-number"><?php echo $step['number']; ?></div>
                    <div class="step-label"><?php echo $step['label']; ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- CTA区域 -->
        <div class="cta-section">
            <h3>需要我们的服务？</h3>
            <p>请联系我们，获取专属解决方案和免费咨询服务</p>
            <a href="<?php echo cms_url('contact'); ?>" class="btn btn-primary btn-lg">
                立即咨询
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M4 10H16M16 10L11 5M16 10L11 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>
    </div>
</div>

<!-- 服务页面额外样式 -->
<style>
.service-card {
    text-align: center;
    padding: var(--space-8);
    transition: all var(--transition-normal);
}

.service-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-6);
    transition: all var(--transition-normal);
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    transform: scale(1.1);
}

.service-card:hover .service-icon span {
    filter: brightness(0) invert(1);
}

.service-features {
    list-style: none;
    text-align: left;
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.service-features li {
    display: flex;
    align-items: center;
    color: var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

@media (max-width: 768px) {
    .service-process {
        padding: var(--space-8) var(--space-4);
    }
}
</style>
