<?php
session_start();
include 'header.php';
require_once 'db/config.php';

// Fetch market data for the home page table
$trending_pairs = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT'];
?>

<main>
    <!-- Carousel Section (Constrained Width) -->
    <section class="hero-carousel-section" style="padding: 20px 0; background: #0b0e11;">
        <div class="carousel-container" style="max-width: 1200px; margin: 0 auto; position: relative; height: 500px; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.6);">
            <div class="carousel-track" id="carouselTrack" style="display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                <div class="carousel-slide" style="min-width: 100%; position: relative;">
                    <img src="https://images.pexels.com/photos/6771574/pexels-photo-6771574.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
                    <div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 650px;">
                        <h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">NovaEx Global Launch</h2>
                        <p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">Experience the next generation of digital asset trading with ultra-low latency and bank-grade security.</p>
                        <a href="register.php" class="btn-primary" style="padding: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);"><?php echo __('join_now'); ?></a>
                    </div>
                </div>
                <div class="carousel-slide" style="min-width: 100%; position: relative;">
                    <img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
                    <div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 650px;">
                        <h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">Trade Futures with 100x Leverage</h2>
                        <p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">Maximize your capital efficiency with our professional perpetual futures contracts.</p>
                        <a href="futures.php" class="btn-primary" style="padding: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem;"><?php echo __('start_trading'); ?></a>
                    </div>
                </div>
                <div class="carousel-slide" style="min-width: 100%; position: relative;">
                    <img src="https://images.pexels.com/photos/6771178/pexels-photo-6771178.jpeg?auto=compress&cs=tinysrgb&w=1920" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
                    <div class="carousel-content" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: white; max-width: 650px;">
                        <h2 class="carousel-title" style="font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1; text-shadow: 0 10px 20px rgba(0,0,0,0.5);">Secure Crypto Staking</h2>
                        <p class="carousel-desc" style="font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; line-height: 1.6;">Earn passive income on your idle assets with our high-yield staking pools.</p>
                        <a href="mining.php" class="btn-primary" style="padding: 15px 45px; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; background: var(--primary-color); color: white; font-size: 1.1rem;"><?php echo __('earn_now'); ?></a>
                    </div>
                </div>
            </div>
            <div class="carousel-dots" style="position: absolute; bottom: 30px; left: 8%; display: flex; gap: 12px;">
                <div class="carousel-dot active" onclick="goToSlide(0)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
                <div class="carousel-dot" onclick="goToSlide(1)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
                <div class="carousel-dot" onclick="goToSlide(2)" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5; transition: 0.3s;"></div>
            </div>
        </div>
    </section>

    <!-- Market Trends -->
    <section class="container" style="padding: 60px 20px;">
        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;">
            <h2 class="section-title-home" style="font-size: 2.2rem; font-weight: 800; margin: 0;"><?php echo __('market_trends'); ?></h2>
            <a href="markets.php" style="color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 15px;"><?php echo __('view_more_markets'); ?> <i class="fas fa-chevron-right" style="font-size: 11px; margin-left: 5px;"></i></a>
        </div>

        <div class="market-table-container" style="background: var(--card-bg); border-radius: 24px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.3);">
            <table class="market-table" style="width: 100%; border-collapse: collapse; text-align: left; min-width: 600px;">
                <thead>
                    <tr style="border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.03);">
                        <th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('pair'); ?></th>
                        <th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('last_price'); ?></th>
                        <th style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('24h_change'); ?></th>
                        <th class="desktop-only-cell" style="padding: 20px 25px; color: var(--text-muted); font-weight: 600; font-size: 14px;"><?php echo __('market_cap'); ?></th>
                    </tr>
                </thead>
                <tbody id="home-market-list">
                    <!-- JS Filled -->
                </tbody>
            </table>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="container" style="padding: 80px 20px; border-top: 1px solid rgba(255,255,255,0.05);">
        <div style="text-align: center; margin-bottom: 60px;">
            <h2 class="section-title-home" style="font-size: 2.8rem; font-weight: 800; margin-bottom: 20px;"><?php echo __('why_choose_us'); ?></h2>
            <p style="color: var(--text-muted); max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.7;"><?php echo __('platform_desc'); ?></p>
        </div>

        <div class="grid-3" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
            <div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s ease;">
                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('secure_storage'); ?></h3>
                <p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('secure_storage_desc'); ?></p>
            </div>
            <div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s ease;">
                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #00c087 0%, #00d2ff 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(0, 192, 135, 0.3);">
                    <i class="fas fa-user-lock"></i>
                </div>
                <h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('protected_insurance'); ?></h3>
                <p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('protected_insurance_desc'); ?></p>
            </div>
            <div class="choose-card" style="padding: 50px 40px; background: rgba(255,255,255,0.02); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.4s ease;">
                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #f0b90b 0%, #ff9a00 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: white; font-size: 2rem; box-shadow: 0 10px 20px rgba(240, 185, 11, 0.3);">
                    <i class="fas fa-microchip"></i>
                </div>
                <h3 style="margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: white;"><?php echo __('industry_best_practices'); ?></h3>
                <p style="color: var(--text-muted); line-height: 1.7; font-size: 1rem;"><?php echo __('industry_best_practices_desc'); ?></p>
            </div>
        </div>
    </section>

    <!-- Partners -->
    <section style="padding: 100px 0; background: #0b0e11; border-top: 1px solid rgba(255,255,255,0.05);">
        <div class="container" style="text-align: center;">
            <h2 style="font-size: 2.2rem; font-weight: 800; margin-bottom: 15px;"><?php echo __('global_partners'); ?></h2>
            <p style="color: var(--text-muted); margin-bottom: 60px; font-size: 1.1rem;"><?php echo __('partners_subtitle'); ?></p>
            <div class="partners-grid-custom" style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px;">
                <div class="partner-item"><i class="fab fa-google-pay" style="font-size: 2.5rem; color: #4285F4;"></i></div>
                <div class="partner-item"><i class="fab fa-apple-pay" style="font-size: 2.5rem; color: #ffffff;"></i></div>
                <div class="partner-item"><i class="fab fa-visa" style="font-size: 2.5rem; color: #1a1f71;"></i></div>
                <div class="partner-item"><i class="fab fa-mastercard" style="font-size: 2.5rem; color: #eb001b;"></i></div>
                <div class="partner-item"><i class="fab fa-paypal" style="font-size: 2.5rem; color: #003087;"></i></div>
                <div class="partner-item"><i class="fab fa-stripe" style="font-size: 2.5rem; color: #6772e5;"></i></div>
                <div class="partner-item"><i class="fab fa-amazon-pay" style="font-size: 2.5rem; color: #FF9900;"></i></div>
                <div class="partner-item"><i class="fab fa-alipay" style="font-size: 2.5rem; color: #00A3EE;"></i></div>
                <div class="partner-item"><i class="fab fa-cc-amex" style="font-size: 2.5rem; color: #007bc1;"></i></div>
                <div class="partner-item"><i class="fab fa-cc-discover" style="font-size: 2.5rem; color: #ff6000;"></i></div>
                <div class="partner-item"><i class="fab fa-cc-diners-club" style="font-size: 2.5rem; color: #004a97;"></i></div>
                <div class="partner-item"><i class="fab fa-cc-jcb" style="font-size: 2.5rem; color: #003184;"></i></div>
            </div>
        </div>
    </section>

    <!-- Download Section -->
    <section style="padding: 100px 0; background: linear-gradient(to bottom, #0b0e11, #161a1e);">
        <div class="container">
            <div class="download-grid" style="display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;">
                <div style="flex: 1.2; min-width: 300px;">
                    <h2 class="section-title-small" style="font-size: 3rem; font-weight: 800; margin-bottom: 25px; background: linear-gradient(135deg, #fff 0%, #848e9c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2;">Trade Anywhere, Anytime</h2>
                    <p style="color: var(--text-muted); font-size: 1.2rem; line-height: 1.8; margin-bottom: 40px;">Stay connected to the markets with the NovaEx mobile app. Experience professional trading features in the palm of your hand.</p>
                    
                    <div class="features-mini-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px;">
                        <div style="display: flex; gap: 15px; align-items: flex-start;">
                            <div style="width: 44px; height: 44px; border-radius: 14px; background: rgba(79, 172, 254, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color); flex-shrink: 0;">
                                <i class="fas fa-bolt" style="font-size: 18px;"></i>
                            </div>
                            <div>
                                <h4 style="margin: 0 0 5px; font-weight: 700; font-size: 1.1rem; color: white;">Fast & Secure</h4>
                                <p style="font-size: 0.95rem; color: #848e9c; margin: 0; line-height: 1.4;">Military-grade encryption for all your data.</p>
                            </div>
                        </div>
                        <div style="display: flex; gap: 15px; align-items: flex-start;">
                            <div style="width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 192, 135, 0.1); display: flex; align-items: center; justify-content: center; color: #00c087; flex-shrink: 0;">
                                <i class="fas fa-chart-line" style="font-size: 18px;"></i>
                            </div>
                            <div>
                                <h4 style="margin: 0 0 5px; font-weight: 700; font-size: 1.1rem; color: white;">Real-time</h4>
                                <p style="font-size: 0.95rem; color: #848e9c; margin: 0; line-height: 1.4;">Low-latency updates and market depth.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 320px;">
                    <a href="app.php" style="text-decoration: none;">
                        <div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 20px; transition: all 0.3s ease;">
                            <div style="width: 60px; height: 60px; background: #000; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                                <i class="fab fa-apple" style="color: white;"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 0.85rem; color: #848e9c;">Download on the</div>
                                <div style="font-size: 1.3rem; font-weight: 800; color: white;">App Store</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #848e9c;"></i>
                        </div>
                    </a>
                    
                    <a href="app.php" style="text-decoration: none;">
                        <div class="download-card-new" style="background: rgba(255,255,255,0.03); padding: 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 20px; transition: all 0.3s ease;">
                            <div style="width: 60px; height: 60px; background: #000; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;">
                                <i class="fab fa-google-play" style="color: #3DDC84;"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 0.85rem; color: #848e9c;">Get it on</div>
                                <div style="font-size: 1.3rem; font-weight: 800; color: white;">Google Play</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #848e9c;"></i>
                        </div>
                    </a>

                    <div style="display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); padding: 20px; border-radius: 20px; border: 1px solid rgba(79, 172, 254, 0.2);">
                        <div style="background: white; padding: 12px; border-radius: 14px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);">
                            <i class="fas fa-qrcode" style="font-size: 2.5rem; color: #000;"></i>
                        </div>
                        <div>
                            <div style="font-weight: 800; color: white; font-size: 1.1rem; margin-bottom: 4px;">Scan to Download</div>
                            <div style="font-size: 0.9rem; color: #848e9c;">Support for iOS & Android</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    .carousel-dot.active { opacity: 1 !important; width: 35px !important; border-radius: 8px !important; background: var(--primary-color) !important; }
    .partner-item { padding: 30px 20px; background: rgba(255,255,255,0.02); border-radius: 20px; transition: 0.3s; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.03); }
    .partner-item:hover { background: rgba(255,255,255,0.05); transform: translateY(-5px); border-color: rgba(255,255,255,0.1); }
    
    .download-card-new:hover { background: rgba(255,255,255,0.06) !important; border-color: var(--primary-color) !important; transform: translateX(5px); }
    .choose-card:hover { transform: translateY(-15px); border-color: var(--primary-color) !important; background: rgba(79, 172, 254, 0.05) !important; }

    @media (max-width: 992px) {
        .carousel-container { height: 400px !important; border-radius: 0 !important; }
        .carousel-title { font-size: 2.2rem !important; }
        .carousel-desc { font-size: 1rem !important; margin-bottom: 25px !important; }
        .partners-grid-custom { grid-template-columns: repeat(3, 1fr) !important; }
        .grid-3 { grid-template-columns: 1fr !important; }
        .section-title-home { font-size: 2.2rem !important; }
    }

    @media (max-width: 576px) {
        .carousel-container { height: 350px !important; }
        .carousel-title { font-size: 1.8rem !important; }
        .section-title-home { font-size: 1.8rem !important; }
        .partners-grid-custom { grid-template-columns: repeat(2, 1fr) !important; }
        .desktop-only-cell { display: none; }
        .features-mini-grid { grid-template-columns: 1fr !important; }
        .download-grid { gap: 40px !important; }
        .section-title-small { font-size: 2.2rem !important; }
    }
</style>

<script>
    // Carousel Logic
    let currentSlide = 0;
    const track = document.getElementById('carouselTrack');
    const dots = document.querySelectorAll('.carousel-dot');
    
    function updateCarousel() {
        if (!track) return;
        track.style.transform = `translateX(-${currentSlide * 100}%)`;
        dots.forEach((dot, i) => {
            dot.classList.toggle('active', i === currentSlide);
        });
    }
    
    function goToSlide(n) {
        currentSlide = n;
        updateCarousel();
    }
    
    function nextSlide() {
        currentSlide = (currentSlide + 1) % 3;
        updateCarousel();
    }
    
    setInterval(nextSlide, 6000);

    const trendingPairs = <?php echo json_encode($trending_pairs); ?>;
    const homeWs = new WebSocket('wss://stream.binance.com:9443/ws/' + trendingPairs.map(p => p.toLowerCase() + '@ticker').join('/'));
    const homeMarketData = {};

    homeWs.onmessage = (event) => {
        const data = JSON.parse(event.data);
        homeMarketData[data.s] = data;
        renderHomeMarket();
    };

    function renderHomeMarket() {
        const tbody = document.getElementById('home-market-list');
        if (!tbody) return;
        let html = '';
        trendingPairs.forEach(p => {
            const d = homeMarketData[p] || {c: 0, P: 0, q: 0};
            const color = d.P >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
            const name = p.replace('USDT', '');
            html += `
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                    <td style="padding: 20px 25px; display: flex; align-items: center; gap: 15px;">
                        <img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="32" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                        <div>
                            <div style="font-weight: 700; font-size: 1.1rem; color: white;">${name}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">USDT</div>
                        </div>
                    </td>
                    <td style="padding: 20px 25px; font-weight: 600; font-size: 1.1rem; color: #EAECEF;">$ ${parseFloat(d.c).toLocaleString()}</td>
                    <td style="padding: 20px 25px; color: ${color}; font-weight: 700; font-size: 1.1rem;">${d.P >= 0 ? '+' : ''}${d.P}%</td>
                    <td class="desktop-only-cell" style="padding: 20px 25px; color: var(--text-muted); font-size: 1rem;">$ ${(parseFloat(d.q) / 1000000).toFixed(2)}M</td>
                </tr>
            `;
        });
        tbody.innerHTML = html;
    }
</script>

<?php include 'footer.php'; ?>