{% extends "user/base.html" %}

{% block title %}太一软件系统 - 首页{% endblock %}

{% block extra_css %}
<style>
    /* 首页特有样式 */
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4rem 0;
        margin-bottom: 2rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #667eea;
    }
    
    .quick-access-btn {
        transition: all 0.3s ease;
        margin: 0.5rem;
    }
    
    .quick-access-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .emergency-contact {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 2rem;
        margin-top: 2rem;
    }
    
    .wechat-qrcode {
        max-width: 200px;
        height: auto;
        border: 1px solid #dee2e6;
        border-radius: 5px;
    }
    
    .system-value {
        text-align: center;
        padding: 2rem 0;
    }
    
    .system-value h3 {
        font-weight: bold;
        margin-bottom: 1rem;
    }
    
    .system-value p {
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<!-- 系统价值区 -->
<div class="hero-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="display-4 fw-bold mb-3">企业级高效协作软件</h1>
                <p class="lead mb-4">覆盖文档管理、任务协作、数据分析等核心场景，助力企业数字化转型</p>
                
                <!-- 核心功能图标 -->
                <div class="row mt-5">
                    <div class="col-md-4 mb-4">
                        <div class="feature-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h5>文档管理</h5>
                        <p class="text-light">集中存储，版本控制</p>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="feature-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <h5>任务协作</h5>
                        <p class="text-light">实时同步，进度追踪</p>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="feature-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h5>数据分析</h5>
                        <p class="text-light">智能报表，决策支持</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 快速入口区 -->
<div class="container">
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h2 class="mb-4">快速开始</h2>
            <div class="d-flex flex-wrap justify-content-center">
                <a href="{{ url_for('user.user_products') }}" class="btn btn-primary btn-lg quick-access-btn">
                    <i class="fas fa-box me-2"></i>查看产品
                </a>
                <a href="{{ url_for('user.user_license_purchase') }}" class="btn btn-success btn-lg quick-access-btn">
                    <i class="fas fa-shopping-cart me-2"></i>购买授权
                </a>
                <a href="{{ url_for('user.user_tickets') }}" class="btn btn-info btn-lg quick-access-btn">
                    <i class="fas fa-headset me-2"></i>售后咨询
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 紧急咨询区 -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="emergency-contact text-center">
                <h3 class="mb-3">
                    <i class="fas fa-exclamation-circle text-danger me-2"></i>
                    紧急需求？
                </h3>
                <p class="mb-4">扫码添加微信，快速响应需求</p>
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#wechatModal">
                    <i class="fab fa-weixin me-2"></i>紧急咨询
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 微信二维码模态框 -->
<div class="modal fade" id="wechatModal" tabindex="-1" aria-labelledby="wechatModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wechatModalLabel">紧急咨询</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>扫码添加微信，快速响应需求</p>
                <img src="/static/images/wechat-qrcode.jpg" alt="微信二维码" class="wechat-qrcode img-fluid">
                <p class="mt-2 text-muted small">微信ID: TaiYiSupport</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 首页特有JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        console.log('太一软件系统首页加载完成');
    });
</script>
{% endblock %}