<?php
include 'includes/header.php';
?>

<!-- Hero Section -->
<section class="hero-section text-white py-5 mt-4">
    <div class="container py-lg-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-7 text-center text-lg-start">
                <h1 class="display-3 fw-bold mb-4 slide-up"><?php echo mt('The World\'s Leading'); ?><br><span class="text-primary"><?php echo mt('Crypto Exchange'); ?></span></h1>
                <p class="lead mb-5 slide-up-delayed text-muted mx-auto mx-lg-0" style="max-width: 600px;"><?php echo mt('Trade Bitcoin, Ethereum, and hundreds of other cryptocurrencies with the lowest fees in the industry.'); ?></p>
                <div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 slide-up-more">
                    <a href="register.php" class="btn btn-primary btn-lg px-5 py-3 rounded-pill fw-bold shadow-lg"><?php echo mt('Get Started'); ?></a>
                    <a href="market.php" class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill fw-bold"><?php echo mt('View Markets'); ?></a>
                </div>
                
                <!-- Market Ticker Aligned with Hero -->
                <div class="mt-5 d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 slide-up-more" id="hero-market-ticker">
                    <!-- Loaded via JS -->
                    <div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
                    <div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
                    <div class="market-card-mini p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 skeleton" style="min-width: 140px; height: 80px;"></div>
                </div>
            </div>
            <div class="col-lg-5 slide-up-delayed d-none d-lg-block">
                <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
                    <div class="carousel-inner rounded-5 shadow-lg overflow-hidden border border-white border-opacity-10">
                        <div class="carousel-item active">
                            <div class="p-5 bg-gradient-dark h-100 d-flex flex-column justify-content-center align-items-center text-center">
                                <img src="assets/images/mobile-app-mockup.jpg" class="img-fluid rounded-4 mb-4 floating-app" style="max-height: 300px;" alt="App">
                                <h4 class="fw-bold"><?php echo mt('Trade Anywhere'); ?></h4>
                                <p class="text-muted small"><?php echo mt('Download BITCrypto mobile app for iOS and Android'); ?></p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="p-5 bg-gradient-blue h-100 d-flex flex-column justify-content-center align-items-center text-center">
                                <i class="fas fa-shield-halved fa-5x text-primary mb-4"></i>
                                <h4 class="fw-bold"><?php echo mt('Secure & Trusted'); ?></h4>
                                <p class="text-muted small"><?php echo mt('Your assets are protected by industry-leading security'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Market Trends -->
<section class="py-5 bg-dark border-top border-white border-opacity-10" id="market-section">
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h2 class="fw-bold text-white mb-2"><?php echo mt('Market Trends'); ?></h2>
                <p class="text-muted mb-0"><?php echo mt('Stay updated with real-time price changes'); ?></p>
            </div>
            <a href="market.php" class="text-primary text-decoration-none fw-bold"><?php echo mt('View All'); ?> <i class="fas fa-chevron-right ms-1"></i></a>
        </div>
        
        <div class="table-responsive rounded-4 border border-white border-opacity-10 bg-black bg-opacity-30">
            <table class="table table-dark table-hover mb-0 align-middle">
                <thead>
                    <tr class="text-muted small">
                        <th class="ps-4 py-3 border-0"><?php echo mt('Name'); ?></th>
                        <th class="py-3 border-0"><?php echo mt('Price'); ?></th>
                        <th class="py-3 border-0"><?php echo mt('24h Change'); ?></th>
                        <th class="py-3 border-0 text-end pe-4"><?php echo mt('Action'); ?></th>
                    </tr>
                </thead>
                <tbody id="market-trends">
                    <!-- Loaded via JS -->
                    <tr>
                        <td colspan="4" class="text-center py-5">
                            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-5">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-white"><?php echo mt('Why Choose BITCrypto?'); ?></h2>
            <p class="text-muted"><?php echo mt('Experience the most professional trading environment'); ?></p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
                    <div class="position-absolute top-0 end-0 p-4 opacity-10">
                        <i class="fas fa-shield-alt fa-6x"></i>
                    </div>
                    <div class="icon-box mb-4 bg-primary bg-opacity-20 text-primary rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="fas fa-lock fa-2x"></i>
                    </div>
                    <h4 class="text-white fw-bold mb-3"><?php echo mt('Safe & Secure'); ?></h4>
                    <p class="text-muted mb-0"><?php echo mt('Industry-leading encryption and multi-signature cold storage for your digital assets.'); ?></p>
                    <ul class="list-unstyled mt-4 text-muted small">
                        <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('Multi-sig Cold Storage'); ?></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('DDoS Protection'); ?></li>
                        <li><i class="fas fa-check-circle text-primary me-2"></i> <?php echo mt('2FA Security'); ?></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
                    <div class="position-absolute top-0 end-0 p-4 opacity-10">
                        <i class="fas fa-bolt fa-6x"></i>
                    </div>
                    <div class="icon-box mb-4 bg-success bg-opacity-20 text-success rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="fas fa-gauge-high fa-2x"></i>
                    </div>
                    <h4 class="text-white fw-bold mb-3"><?php echo mt('Instant Execution'); ?></h4>
                    <p class="text-muted mb-0"><?php echo mt('Advanced matching engine processing over 100,000 transactions per second.'); ?></p>
                    <ul class="list-unstyled mt-4 text-muted small">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('Ultra-low Latency'); ?></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('High Liquidity'); ?></li>
                        <li><i class="fas fa-check-circle text-success me-2"></i> <?php echo mt('Zero Slippage'); ?></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-5 rounded-5 bg-white bg-opacity-5 border border-white border-opacity-10 h-100 hover-lift position-relative overflow-hidden">
                    <div class="position-absolute top-0 end-0 p-4 opacity-10">
                        <i class="fas fa-headset fa-6x"></i>
                    </div>
                    <div class="icon-box mb-4 bg-info bg-opacity-20 text-info rounded-4 d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="fas fa-comments fa-2x"></i>
                    </div>
                    <h4 class="text-white fw-bold mb-3"><?php echo mt('24/7 Global Support'); ?></h4>
                    <p class="text-muted mb-0"><?php echo mt('Get help whenever you need it with our around-the-clock professional customer service.'); ?></p>
                    <ul class="list-unstyled mt-4 text-muted small">
                        <li class="mb-2"><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Multi-language Support'); ?></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Live Chat'); ?></li>
                        <li><i class="fas fa-check-circle text-info me-2"></i> <?php echo mt('Fast Response'); ?></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Partners Section -->
<section class="py-5 bg-black bg-opacity-20 border-top border-bottom border-white border-opacity-5">
    <div class="container py-4 text-center">
        <h2 class="fw-bold text-white mb-2"><?php echo mt('Our Global Partners'); ?></h2>
        <p class="text-muted mb-5"><?php echo mt('Trusted by industry leaders worldwide'); ?></p>
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-4 align-items-center">
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-apple fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">Apple Pay</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
                </div>
            </div>
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-google-pay fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">Google Pay</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
                </div>
            </div>
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-aws fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">AWS</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Infrastructure'); ?></p>
                </div>
            </div>
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-cc-visa fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">Visa</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Financial Partner'); ?></p>
                </div>
            </div>
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-cc-mastercard fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">Mastercard</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Financial Partner'); ?></p>
                </div>
            </div>
            <div class="col">
                <div class="partner-card p-4 rounded-4 hover-lift">
                    <i class="fab fa-paypal fa-3x text-white mb-3"></i>
                    <h6 class="text-white mb-0">PayPal</h6>
                    <p class="text-muted small mt-2"><?php echo mt('Payment Partner'); ?></p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Download Section -->
<section class="py-5 overflow-hidden">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h2 class="display-5 fw-bold text-white mb-4"><?php echo mt('Trade Anywhere, Anytime'); ?></h2>
                <p class="lead text-muted mb-5"><?php echo mt('Experience the full power of our exchange on your mobile device. Trade spot and futures with ease.'); ?></p>
                
                <div class="d-flex flex-wrap gap-3 mb-5">
                    <div class="download-btn-modern">
                        <i class="fab fa-apple fa-2x"></i>
                        <div>
                            <div class="small-text"><?php echo mt('Download on the'); ?></div>
                            <div class="bold-text">App Store</div>
                        </div>
                    </div>
                    <div class="download-btn-modern">
                        <i class="fab fa-google-play fa-2x"></i>
                        <div>
                            <div class="small-text"><?php echo mt('Get it on'); ?></div>
                            <div class="bold-text">Google Play</div>
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-4 p-4 bg-white bg-opacity-5 rounded-4 border border-white border-opacity-10 shadow-sm" style="backdrop-filter: blur(10px);">
                    <div class="bg-white p-2 rounded-3 shadow">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://bitcrypto.com/download&color=0046ff" alt="Download QR" width="100">
                    </div>
                    <div>
                        <h6 class="text-white fw-bold mb-1"><?php echo mt('Scan to download'); ?></h6>
                        <p class="text-muted small mb-0"><?php echo mt('Compatible with iOS and Android devices.'); ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center position-relative">
                <div class="position-absolute top-50 start-50 translate-middle z-n1" style="width: 500px; height: 500px; background: radial-gradient(circle, rgba(0,70,255,0.2) 0%, rgba(0,255,150,0.1) 30%, transparent 70%); filter: blur(40px);"></div>
                <img src="assets/images/mobile-app-mockup.jpg" alt="Mobile App" class="img-fluid floating-app rounded-5 shadow-lg border border-white border-opacity-10" style="max-width: 350px;">
            </div>
        </div>
    </div>
</section>

<style>
    .bg-gradient-dark { background: linear-gradient(135deg, #0b0e11 0%, #181a20 100%); }
    .bg-gradient-blue { background: linear-gradient(135deg, #001a4d 0%, #0046ff 100%); }
    
    .slide-up { animation: slideUp 0.8s ease-out; }
    .slide-up-delayed { animation: slideUp 0.8s ease-out 0.2s both; }
    .slide-up-more { animation: slideUp 0.8s ease-out 0.4s both; }
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .floating-app {
        animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
    .download-btn-modern {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        padding: 10px 20px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .download-btn-modern:hover {
        background: rgba(255,255,255,0.1);
        transform: translateY(-2px);
    }
    .download-btn-modern .small-text { font-size: 10px; opacity: 0.7; }
    .download-btn-modern .bold-text { font-size: 16px; font-weight: bold; }
    
    .hover-lift { transition: all 0.3s ease; }
    .hover-lift:hover { transform: translateY(-10px); background: rgba(255,255,255,0.08); }
    
    .partner-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        transition: all 0.3s ease;
    }
    
    .skeleton {
        background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
</style>

<script src="assets/js/main.js"></script>
<?php include 'includes/footer.php'; ?>
