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

<!-- Aligned Hero Carousel -->
<section class="py-4 bg-primary-bg">
    <div class="container">
        <div id="mainHeroCarousel" class="carousel slide carousel-fade rounded-5 overflow-hidden shadow-lg" data-bs-ride="carousel" data-bs-interval="5000">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="2"></button>
                <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="3"></button>
                <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="4"></button>
            </div>
            <div class="carousel-inner">
                <?php 
                $hero_slides = [
                    ['title' => 'The World\'s Leading', 'subtitle' => 'Crypto Exchange', 'img' => 'hero_1.jpg'],
                    ['title' => 'Secure & Trusted', 'subtitle' => 'Institutional Grade', 'img' => 'hero_2.jpg'],
                    ['title' => 'Deep Liquidity', 'subtitle' => 'Global Access', 'img' => 'hero_3.jpg'],
                    ['title' => 'Perpetual Contracts', 'subtitle' => '100x Leverage', 'img' => 'hero_4.jpg'],
                    ['title' => 'Join the Elite', 'subtitle' => 'Trust BITCrypto', 'img' => 'hero_5.jpg']
                ];
                foreach ($hero_slides as $index => $slide): 
                ?>
                <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
                    <div class="carousel-image-container" style="height: 450px; background-image: linear-gradient(rgba(11, 14, 17, 0.6), rgba(11, 14, 17, 0.4)), url('assets/images/hero/<?php echo $slide['img']; ?>'); background-size: cover; background-position: center;">
                        <div class="container h-100">
                            <div class="row h-100 align-items-center">
                                <div class="col-lg-8 text-white ps-5 slide-content">
                                    <h1 class="display-4 fw-bold mb-3"><?php echo mt($slide['title']); ?><br><span class="text-primary"><?php echo mt($slide['subtitle']); ?></span></h1>
                                    <p class="lead mb-4 text-light opacity-75 d-none d-md-block" 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 gap-3">
                                        <a href="register.php" class="btn btn-primary btn-lg px-4 py-2 rounded-pill fw-bold shadow-lg"><?php echo mt('Get Started'); ?></a>
                                        <a href="market.php" class="btn btn-outline-light btn-lg px-4 py-2 rounded-pill fw-bold"><?php echo mt('View Markets'); ?></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </div>
</section>

<!-- Quick Market Ticker -->
<div class="market-ticker-bar bg-secondary-bg border-bottom border-white border-opacity-5 py-3">
    <div class="container">
        <div class="d-flex flex-wrap justify-content-center justify-content-lg-between gap-4" id="hero-market-ticker">
            <!-- Loaded via JS -->
            <div class="ticker-item skeleton" style="width: 150px; height: 40px;"></div>
            <div class="ticker-item skeleton d-none d-md-block" style="width: 150px; height: 40px;"></div>
            <div class="ticker-item skeleton d-none d-lg-block" style="width: 150px; height: 40px;"></div>
            <div class="ticker-item skeleton d-none d-xl-block" style="width: 150px; height: 40px;"></div>
        </div>
    </div>
</div>

<!-- Market Trends -->
<section class="py-5 bg-darker" id="market-section">
    <div class="container py-2">
        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h2 class="fw-bold text-white mb-2"><?php echo mt('Market Trends'); ?></h2>
                <p class="text-muted mb-0 small"><?php echo mt('Stay updated with real-time price changes'); ?></p>
            </div>
            <a href="market.php" class="text-primary text-decoration-none fw-bold small"><?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-20 shadow-lg">
            <table class="table table-dark table-hover mb-0 align-middle border-0">
                <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 - Aligned with Market Trends -->
<section class="py-5 bg-primary-bg">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="display-6 fw-bold text-white mb-3"><?php echo mt('Why Choose BITCrypto?'); ?></h2>
            <p class="text-muted mx-auto" style="max-width: 700px;"><?php echo mt('Experience the most professional trading environment with institutional-grade security and liquidity.'); ?></p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
                    <div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary" style="width: 50px; height: 50px;">
                        <i class="fas fa-shield-halved fa-lg"></i>
                    </div>
                    <h5 class="text-white fw-bold mb-3"><?php echo mt('Safe & Secure'); ?></h5>
                    <p class="text-muted small mb-4"><?php echo mt('Industry-leading encryption and multi-signature cold storage for your digital assets.'); ?></p>
                    <ul class="list-unstyled text-muted x-small mt-auto">
                        <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="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
                    <div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 text-success" style="width: 50px; height: 50px;">
                        <i class="fas fa-bolt-lightning fa-lg"></i>
                    </div>
                    <h5 class="text-white fw-bold mb-3"><?php echo mt('Instant Execution'); ?></h5>
                    <p class="text-muted small mb-4"><?php echo mt('Advanced matching engine processing over 100,000 transactions per second.'); ?></p>
                    <ul class="list-unstyled text-muted x-small mt-auto">
                        <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="feature-card p-4 h-100 border-0 shadow-sm rounded-4 bg-navy-gradient overflow-hidden position-relative">
                    <div class="feature-icon mb-4 rounded-4 d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 text-info" style="width: 50px; height: 50px;">
                        <i class="fas fa-headset fa-lg"></i>
                    </div>
                    <h5 class="text-white fw-bold mb-3"><?php echo mt('24/7 Global Support'); ?></h5>
                    <p class="text-muted small mb-4"><?php echo mt('Get help whenever you need it with our around-the-clock professional customer service.'); ?></p>
                    <ul class="list-unstyled text-muted x-small mt-auto">
                        <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>

<!-- Mobile App Section -->
<section class="py-5 bg-darker border-top border-white border-opacity-5">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h2 class="display-5 fw-bold text-white mb-4"><?php echo mt('Trade Anywhere, Anytime'); ?></h2>
                <p class="text-muted lead 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">
                    <a href="#" class="btn btn-dark btn-lg px-4 py-3 rounded-4 border border-white border-opacity-10 d-flex align-items-center">
                        <i class="fab fa-apple fa-2x me-3"></i>
                        <div class="text-start">
                            <div class="x-small text-muted opacity-75"><?php echo mt('Download on the'); ?></div>
                            <div class="fw-bold"><?php echo mt('App Store'); ?></div>
                        </div>
                    </a>
                    <a href="#" class="btn btn-dark btn-lg px-4 py-3 rounded-4 border border-white border-opacity-10 d-flex align-items-center">
                        <i class="fab fa-google-play fa-2x me-3"></i>
                        <div class="text-start">
                            <div class="x-small text-muted opacity-75"><?php echo mt('Get it on'); ?></div>
                            <div class="fw-bold"><?php echo mt('Google Play'); ?></div>
                        </div>
                    </a>
                </div>
                
                <div class="d-flex align-items-center gap-4">
                    <div class="bg-white p-2 rounded-3">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://bitcrypto.com/download" width="80" height="80">
                    </div>
                    <div class="text-muted small">
                        <div class="fw-bold text-white mb-1"><?php echo mt('Scan to download'); ?></div>
                        <?php echo mt('Compatible with iOS and Android devices.'); ?>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="position-relative d-inline-block">
                    <img src="assets/images/mobile-app-mockup.jpg" alt="Mobile App" class="img-fluid rounded-5 shadow-2xl border border-white border-opacity-10" style="max-height: 600px;">
                    <!-- Decorative Elements -->
                    <div class="position-absolute top-0 start-0 translate-middle p-3 bg-primary rounded-circle shadow-lg animate-bounce d-none d-md-block">
                        <i class="fas fa-bitcoin-sign text-white fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Partners Section -->
<section class="py-5 bg-primary-bg">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h5 class="text-primary fw-bold text-uppercase mb-3" style="letter-spacing: 2px;"><?php echo mt('Global Trust'); ?></h5>
            <h2 class="fw-bold text-white"><?php echo mt('Our Global Partners'); ?></h2>
        </div>
        <div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-5 align-items-center opacity-75">
            <div class="col text-center">
                <i class="fab fa-ethereum fa-3x text-white mb-3"></i>
                <div class="small text-muted"><?php echo mt('Smart Contracts'); ?></div>
            </div>
            <div class="col text-center">
                <i class="fab fa-bitcoin fa-3x text-white mb-3"></i>
                <div class="small text-muted"><?php echo mt('Primary Network'); ?></div>
            </div>
            <div class="col text-center">
                <i class="fas fa-shield-halved fa-3x text-white mb-3"></i>
                <div class="small text-muted"><?php echo mt('Security Audit'); ?></div>
            </div>
            <div class="col text-center">
                <i class="fas fa-building-columns fa-3x text-white mb-3"></i>
                <div class="small text-muted"><?php echo mt('Financial Partner'); ?></div>
            </div>
            <div class="col text-center">
                <i class="fas fa-globe-asia fa-3x text-white mb-3"></i>
                <div class="small text-muted"><?php echo mt('Strategic Advisor'); ?></div>
            </div>
        </div>
    </div>
</section>

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