{% extends 'base.html' %}

{% block title %}首页 - 无锡东舜信息科技有限公司{% endblock %}

{% block extra_css %}
<style>
/* 额外的首页样式增强 */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.7;
    animation: float 6s infinite linear;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.hero-content {
    animation: heroSlideIn 1.5s ease-out;
}

@keyframes heroSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 统计数据区域 */
.stats-section {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 80px 0;
    position: relative;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L50,100 L100,0 Z" fill="rgba(255,255,255,0.05)"/></svg>') repeat-x;
    background-size: 100px 100px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

.stat-item {
    text-align: center;
    padding: 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
    margin-bottom: 10px;
    display: block;
}

.stat-label {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* 增强的服务卡片 */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(0, 195, 255, 0.1), transparent);
    transform: rotate(-45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.service-card:hover::before {
    animation: shimmer 0.8s ease-out;
    opacity: 1;
}

/* 优势卡片网格 */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.advantage-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.advantage-card:hover::before {
    transform: translateX(0);
}

.advantage-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 119, 204, 0.15);
}

.advantage-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 28px;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    transform: scale(1.1);
}

.advantage-card h4 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.advantage-card p {
    color: #666;
    line-height: 1.6;
}

/* CTA区域 */
.cta-section {
    background: linear-gradient(135deg, var(--dark), var(--primary));
    color: white;
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--accent);
}

.cta-btn.primary {
    background: var(--accent);
    color: var(--dark);
}

.cta-btn.secondary {
    background: transparent;
    color: var(--accent);
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 195, 255, 0.3);
}

.cta-btn.primary:hover {
    background: white;
    color: var(--primary);
}

.cta-btn.secondary:hover {
    background: var(--accent);
    color: var(--dark);
}

/* 响应式优化 */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-btn {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero" id="home">
    <div class="hero-particles" id="particles"></div>
    <div class="hero-content">
        <h1>无锡东舜信息科技有限公司</h1>
        <p>专业提供网络布线、弱电工程与网络运维解决方案，助力企业数字化转型</p>
        <div class="hero-buttons">
            <a href="{% url 'services' %}" class="hero-btn">了解服务</a>
            <a href="{% url 'contact' %}" class="hero-btn">联系我们</a>
        </div>
    </div>
</section>

<!-- 统计数据区域 -->
<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item fade-in">
                <span class="stat-number" data-count="10">0</span>
                <div class="stat-label">年行业经验</div>
            </div>
            <div class="stat-item fade-in">
                <span class="stat-number" data-count="20">0</span>
                <div class="stat-label">成功项目</div>
            </div>
            <div class="stat-item fade-in">
                <span class="stat-number" data-count="15">0</span>
                <div class="stat-label">合作客户</div>
            </div>
            <div class="stat-item fade-in">
                <span class="stat-number" data-count="24">0</span>
                <div class="stat-label">小时服务</div>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="section" id="about">
    <div class="container">
        <div class="section-title">
            <h2>关于我们</h2>
            <p class="section-subtitle">专业的科技服务提供商，致力于为企业提供优质的IT基础设施解决方案</p>
        </div>
        <div class="about-content">
            <div class="about-text fade-in">
                <h3>专业的科技服务提供商</h3>
                <p>无锡东舜信息科技有限公司成立于2023年，是一家专注于网络布线、弱电工程和网络运维的高科技企业。公司位于无锡市梁溪区嘉饰茂SOHO大厦，团队拥有超过10年的行业经验和技术积累。</p>
                <p>我们拥有一支经验丰富、技术精湛的专业团队，持有各类行业认证，能够为客户提供从咨询、设计、施工到运维的一站式服务解决方案。</p>
                <p>公司秉承"专业、创新、诚信、共赢"的经营理念，为企业、学校、医院和政府机构提供了高质量的IT基础设施服务。</p>
                <a href="{% url 'about' %}" class="hero-btn" style="margin-top: 20px;">了解更多</a>
            </div>
            <div class="about-image fade-in">
                <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3" alt="公司环境">
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="section services" id="services">
    <div class="container">
        <div class="section-title">
            <h2>核心服务</h2>
            <p class="section-subtitle">为企业提供全方位的IT基础设施服务</p>
        </div>
        <div class="services-grid">
            <div class="service-card fade-in">
                <div class="service-icon">
                    <i class="fas fa-network-wired"></i>
                </div>
                <h3>网络综合布线</h3>
                <p>提供专业的网络综合布线服务，包括光纤、千兆网络布线，无线区域覆盖等，满足各类办公、数据中心、智能楼宇的网络连接需求。</p>
            </div>
            <div class="service-card fade-in">
                <div class="service-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <h3>弱电系统工程</h3>
                <p>涵盖安防监控、门禁系统、楼宇自控、公共广播、会议系统、计算机配置等弱电系统的设计、安装与调试。</p>
            </div>
            <div class="service-card fade-in">
                <div class="service-icon">
                    <i class="fas fa-server"></i>
                </div>
                <h3>网络运维服务</h3>
                <p>提供7×24小时网络运维售后支持，包括网络设备维护、故障排除、性能优化和安全防护等服务。</p>
            </div>
        </div>
        <div class="text-center" style="margin-top: 40px;">
            <a href="{% url 'services' %}" class="hero-btn">查看所有服务</a>
        </div>
    </div>
</section>

<!-- Why Choose Us Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>为什么选择我们</h2>
            <p class="section-subtitle">专业团队 · 优质服务 · 可靠保障</p>
        </div>
        <div class="advantages-grid">
            <div class="advantage-card fade-in">
                <div class="advantage-icon">
                    <i class="fas fa-medal"></i>
                </div>
                <h4>专业认证团队</h4>
                <p>拥有10年以上行业经验的专业技术团队，持有华为、思科、H3C等多项专业认证</p>
            </div>
            <div class="advantage-card fade-in">
                <div class="advantage-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h4>质量保证体系</h4>
                <p>严格的质量管理体系，ISO9001认证，提供全方位质保服务和技术支持</p>
            </div>
            <div class="advantage-card fade-in">
                <div class="advantage-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h4>7×24小时服务</h4>
                <p>全天候技术支持热线，快速响应客户需求，提供及时的故障排除和技术咨询</p>
            </div>
            <div class="advantage-card fade-in">
                <div class="advantage-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <h4>高效交付能力</h4>
                <p>专业的项目管理团队，标准化施工流程，确保项目按时高质量完成</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <div class="cta-content fade-in">
            <h2>准备开始您的项目了吗？</h2>
            <p>立即联系我们，获取专业的技术咨询和解决方案</p>
            <div class="cta-buttons">
                <a href="{% url 'contact' %}" class="cta-btn primary">
                    <i class="fas fa-phone me-2"></i>立即咨询
                </a>
                <a href="{% url 'services' %}" class="cta-btn secondary">
                    <i class="fas fa-eye me-2"></i>查看服务
                </a>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 创建粒子效果
    const particlesContainer = document.getElementById('particles');
    if (particlesContainer) {
        for (let i = 0; i < 50; i++) {
            createParticle();
        }
        
        function createParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
            particlesContainer.appendChild(particle);
            
            // 移除已完成动画的粒子并创建新的
            setTimeout(() => {
                particle.remove();
                createParticle();
            }, 6000);
        }
    }
    
    // 数字计数动画
    const statNumbers = document.querySelectorAll('.stat-number');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const target = entry.target;
                const count = parseInt(target.getAttribute('data-count'));
                animateCount(target, 0, count, 2000);
                observer.unobserve(target);
            }
        });
    }, { threshold: 0.5 });
    
    statNumbers.forEach(el => observer.observe(el));
    
    function animateCount(element, start, end, duration) {
        const startTime = performance.now();
        
        function update(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const current = Math.floor(start + (end - start) * easeOutQuart(progress));
            
            element.textContent = current + (end === 24 ? '' : '+');
            
            if (progress < 1) {
                requestAnimationFrame(update);
            }
        }
        
        requestAnimationFrame(update);
    }
    
    function easeOutQuart(t) {
        return 1 - Math.pow(1 - t, 4);
    }
});
</script>
{% endblock %}