{% extends 'base.html' %}
{% load static %}

{% block content %}
<!-- Hero Carousel Section -->
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <!-- Slide 1: Welcome -->
        <div class="carousel-item active" style="height: 550px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1621761191319-c6fb62004040?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center;">
            <div class="container h-100 d-flex align-items-center">
                <div class="row w-100 align-items-center">
                    <div class="col-lg-7">
                        <h1 class="display-3 fw-bold mb-4">开启您的<br><span style="color: var(--accent-color);">加密货币</span>之旅</h1>
                        <p class="lead text-light mb-5">在全球最受信任的交易平台买卖和存储加密货币。BitCrypto 为您提供安全、稳定、高效的服务。</p>
                        <div class="d-flex gap-3">
                            <a href="{% url 'core:register' %}" class="btn btn-warning btn-lg px-5 fw-bold">立即注册</a>
                            <a href="{% url 'core:spot_trade' %}" class="btn btn-outline-light btn-lg px-5 fw-bold">开始交易</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Slide 2: Derivatives -->
        <div class="carousel-item" style="height: 550px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2064&auto=format&fit=crop'); background-size: cover; background-position: center;">
            <div class="container h-100 d-flex align-items-center">
                <div class="row w-100 align-items-center justify-content-end">
                    <div class="col-lg-7 text-lg-end">
                        <h1 class="display-4 fw-bold mb-4">领先的<span style="color: var(--accent-color);">衍生品</span>交易平台</h1>
                        <p class="lead text-light mb-5">最高200倍杠杆，支持多种永续合约，毫秒级撮合引擎。多空双向交易，灵活捕捉市场机会。</p>
                        <a href="{% url 'core:contract_trade' %}" class="btn btn-warning btn-lg px-5 fw-bold">进入合约交易</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Slide 3: App Download -->
        <div class="carousel-item" style="height: 550px; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1622639225985-84f8877b0c30?q=80&w=1944&auto=format&fit=crop'); background-size: cover; background-position: center;">
            <div class="container h-100 d-flex align-items-center">
                <div class="row w-100 align-items-center">
                    <div class="col-lg-12 text-center">
                        <h1 class="display-4 fw-bold mb-4">随时随地，随心交易</h1>
                        <p class="lead text-light mb-5">下载 BitCrypto App，享受极致交易体验。专业图表、实时推送、资产管理尽在掌握。</p>
                        <div class="d-flex justify-content-center gap-5">
                            <div class="download-badge">
                                <i class="bi bi-apple fs-1 mb-2"></i>
                                <p class="small mb-0">App Store</p>
                            </div>
                            <div class="download-badge">
                                <i class="bi bi-android2 fs-1 mb-2"></i>
                                <p class="small mb-0">Android APK</p>
                            </div>
                            <div class="download-badge">
                                <i class="bi bi-qr-code fs-1 mb-2"></i>
                                <p class="small mb-0">扫码下载</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- Quick Actions Section -->
<div class="container" style="margin-top: -50px; position: relative; z-index: 10;">
    <div class="glass-card p-4 d-flex flex-wrap justify-content-around align-items-center text-center shadow-lg" style="border-radius: 12px; border: 1px solid rgba(255,193,7,0.3);">
        <div class="download-item mb-3 mb-md-0">
            <h6 class="text-secondary mb-2 small fw-bold">iOS 下载</h6>
            <button class="btn btn-outline-light border-secondary px-4"><i class="bi bi-apple me-2 text-warning"></i>App Store</button>
        </div>
        <div class="vr d-none d-md-block opacity-25"></div>
        <div class="download-item mb-3 mb-md-0">
            <h6 class="text-secondary mb-2 small fw-bold">安卓下载</h6>
            <button class="btn btn-outline-light border-secondary px-4"><i class="bi bi-android2 me-2 text-warning"></i>Android</button>
        </div>
        <div class="vr d-none d-md-block opacity-25"></div>
        <div class="download-item">
            <h6 class="text-secondary mb-2 small fw-bold">API 支持</h6>
            <button class="btn btn-outline-light border-secondary px-4"><i class="bi bi-code-square me-2 text-warning"></i>开发者文档</button>
        </div>
    </div>
</div>

<!-- Market Section -->
<section id="markets" class="container py-5 mt-4">
    <div class="d-flex justify-content-between align-items-end mb-4">
        <div>
            <h2 class="fw-bold">热门行情</h2>
            <p class="text-secondary mb-0">实时获取全球顶级加密货币价格走势</p>
        </div>
        <a href="{% url 'core:market_center' %}" class="text-warning text-decoration-none fw-bold">查看更多市场 <i class="bi bi-arrow-right"></i></a>
    </div>

    <div class="table-responsive">
        <table class="table table-dark table-hover align-middle" style="border-radius: 12px; overflow: hidden; border: 1px solid #2b3139;">
            <thead class="text-secondary">
                <tr style="background: #1e2329;">
                    <th scope="col" class="ps-4 py-3">币种</th>
                    <th scope="col" class="py-3">价格</th>
                    <th scope="col" class="py-3">24h 涨跌</th>
                    <th scope="col" class="py-3">24h 最高 / 最低</th>
                    <th scope="col" class="text-end pe-4 py-3">操作</th>
                </tr>
            </thead>
            <tbody id="market-list">
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <div class="spinner-border text-warning" role="status"></div>
                        <p class="mt-2 text-secondary">正在加载实时行情...</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<!-- Features -->
<section class="container py-5">
    <h2 class="text-center fw-bold mb-5">领先行业的资产安全防护</h2>
    <div class="row g-4 text-center">
        <div class="col-md-4">
            <div class="p-5 h-100 glass-card">
                <div class="icon-box mb-4 mx-auto" style="width: 80px; height: 80px; background: rgba(255,193,7,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="bi bi-shield-check display-5 text-warning"></i>
                </div>
                <h4 class="fw-bold mb-3">资产保障基金</h4>
                <p class="text-secondary">BitCrypto 每日提取 10% 的交易手续费，存入资产保障基金，为您在极端情况下的资产提供全额赔付保障。</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="p-5 h-100 glass-card">
                <div class="icon-box mb-4 mx-auto" style="width: 80px; height: 80px; background: rgba(255,193,7,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="bi bi-cpu display-5 text-warning"></i>
                </div>
                <h4 class="fw-bold mb-3">高性能交易引擎</h4>
                <p class="text-secondary">每秒 200 万次的交易撮合能力，保证在市场波动剧烈时依然能够快速响应，不漏掉任何一个成交机会。</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="p-5 h-100 glass-card">
                <div class="icon-box mb-4 mx-auto" style="width: 80px; height: 80px; background: rgba(255,193,7,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="bi bi-safe2 display-5 text-warning"></i>
                </div>
                <h4 class="fw-bold mb-3">严密的隐私保护</h4>
                <p class="text-secondary">我们对用户数据采取离线分布式存储和多层加密，绝不将个人隐私泄露给任何第三方，确保您的身份隐私。</p>
            </div>
        </div>
    </div>
</section>

<style>
    .download-badge {
        transition: transform 0.3s;
        cursor: pointer;
    }
    .download-badge:hover {
        transform: translateY(-5px);
        color: var(--accent-color);
    }
    .icon-box { transition: all 0.3s; }
    .glass-card:hover .icon-box { transform: scale(1.1); background: rgba(255,193,7,0.2) !important; }
    .coin-icon { width: 32px; height: 32px; margin-right: 12px; }
</style>
{% endblock %}

{% block scripts %}
<script>
    const symbols = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'ADAUSDT', 'XRPUSDT', 'DOTUSDT', 'DOGEUSDT', 'MATICUSDT', 'LINKUSDT'];
    const coinIcons = {
        'BTC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
        'ETH': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
        'BNB': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1839.png',
        'SOL': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png',
        'ADA': 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png',
        'XRP': 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png',
        'DOT': 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png',
        'DOGE': 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png',
        'MATIC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png',
        'LINK': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png'
    };

    async function fetchMarkets() {
        try {
            const response = await fetch('https://api.binance.com/api/v3/ticker/24hr?symbols=' + JSON.stringify(symbols));
            const data = await response.json();
            const list = document.getElementById('market-list');
            list.innerHTML = '';

            data.forEach(coin => {
                const symbolBase = coin.symbol.replace('USDT', '');
                const change = parseFloat(coin.priceChangePercent);
                const changeClass = change >= 0 ? 'text-success' : 'text-danger';
                const changeIcon = change >= 0 ? '+' : '';
                const iconUrl = coinIcons[symbolBase] || 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png';

                list.innerHTML += `
                    <tr>
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center">
                                <img src="${iconUrl}" class="coin-icon" alt="${symbolBase}">
                                <div>
                                    <span class="fw-bold text-white">${symbolBase}</span>
                                    <span class="text-secondary small ms-1">/ USDT</span>
                                </div>
                            </div>
                        </td>
                        <td class="fw-bold py-3 text-white">$${parseFloat(coin.lastPrice).toLocaleString()}</td>
                        <td class="${changeClass} py-3 fw-bold">${changeIcon}${change.toFixed(2)}%</td>
                        <td class="py-3">
                            <div class="small text-white">高: $${parseFloat(coin.highPrice).toLocaleString()}</div>
                            <div class="small text-secondary">低: $${parseFloat(coin.lowPrice).toLocaleString()}</div>
                        </td>
                        <td class="text-end pe-4 py-3">
                            <a href="/trade/spot/?symbol=${coin.symbol}" class="btn btn-sm btn-warning fw-bold px-3 shadow-sm">交易</a>
                        </td>
                    </tr>
                `;
            });
        } catch (error) { console.error('Error:', error); }
    }

    fetchMarkets();
    setInterval(fetchMarkets, 5000);
</script>
{% endblock %}