<?php
require_once __DIR__ . '/db/config.php';

// Smart Download Redirection Logic
if (isset($_GET['action']) && $_GET['action'] === 'download') {
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    $isIos = (strpos($ua, 'iphone') !== false || strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false);
    $isAndroid = (strpos($ua, 'android') !== false);

    if ($isIos) {
        $url = getSetting('ios_download_url', '#');
    } elseif ($isAndroid) {
        $url = getSetting('apk_download_url', getSetting('android_download_url', '#'));
    } else {
        $url = getSetting('android_download_url', '#');
    }
    
    if ($url && $url !== '#') {
        header("Location: $url");
        exit;
    } else {
        // Fallback to page if no URL set
        header("Location: /app.php");
        exit;
    }
}

require_once __DIR__ . '/includes/lang.php';
require_once __DIR__ . '/includes/header.php';
?>
<main class="app-page-wrapper">
    <!-- Hero Section -->
    <section class="app-hero py-5 position-relative overflow-hidden">
        <!-- Background decorative elements -->
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-dark z-0"></div>
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        
        <div class="container py-lg-5 position-relative z-1">
            <div class="row align-items-center g-5">
                <div class="col-lg-6 text-center text-lg-start animate__animated animate__fadeInLeft">
                    <h1 class="display-3 fw-bold text-white mb-4 line-height-1-2">
                        <span class="text-gradient-primary-light"><?= __('support_anywhere') ?></span>
                    </h1>
                    <p class="lead text-white mb-5 fs-5 opacity-75">
                        <?= __('app_mockup_desc') ?>
                    </p>
                    
                    <div class="download-section mb-5">
                        <div class="row g-3 justify-content-center justify-content-lg-start">
                            <div class="col-12 mb-2 d-lg-none">
                                <a href="?action=download" class="download-btn-modern smart-download w-100 shadow-primary">
                                    <i class="bi bi-download text-white"></i>
                                    <div class="text">
                                        <span class="text-white-50"><?= __('get_started') ?></span>
                                        <div class="store text-white"><?= __('app_download') ?></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-6 col-md-4">
                                <a href="<?= getSetting('ios_download_url', '#') ?>" class="download-btn-modern ios">
                                    <i class="bi bi-apple text-white"></i>
                                    <div class="text">
                                        <span class="text-white-50"><?= __('download_on') ?></span>
                                        <div class="store text-white"><?= __('app_store') ?></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-6 col-md-4">
                                <a href="<?= getSetting('android_download_url', '#') ?>" class="download-btn-modern android">
                                    <i class="bi bi-google-play text-info"></i>
                                    <div class="text">
                                        <span class="text-white-50"><?= __('get_it_on') ?></span>
                                        <div class="store text-white"><?= __('google_play') ?></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-12 col-md-4">
                                <a href="<?= getSetting('apk_download_url', '#') ?>" class="download-btn-modern apk">
                                    <i class="bi bi-android2 text-success"></i>
                                    <div class="text">
                                        <span class="text-white-50"><?= __('download_on') ?></span>
                                        <div class="store text-white"><?= __('android_apk') ?></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="qr-container-modern d-inline-flex align-items-center p-1 rounded-5 bg-glass border border-white border-opacity-10 shadow-lg animate__animated animate__zoomIn">
                        <div class="qr-code-wrapper p-3 bg-white rounded-5 shadow-inner">
                            <?php 
                            $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
                            $download_url = $protocol . '://' . $_SERVER['HTTP_HOST'] . '/app.php?action=download';
                            ?>
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=<?= urlencode($download_url) ?>" alt="QR" class="qr-img">
                        </div>
                        <div class="px-4 py-2 text-start">
                            <h5 class="text-white fw-bold mb-1 fs-6"><?= __('scan_download') ?></h5>
                            <p class="text-white-50 x-small mb-0"><?= __('scan_qr_to_download') ?></p>
                            <div class="mt-2 d-flex gap-1">
                                <div class="dot bg-primary"></div>
                                <div class="dot bg-success"></div>
                                <div class="dot bg-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 text-center position-relative animate__animated animate__fadeInRight">
                    <div class="mockup-container-modern">
                        <!-- CSS Based Mockup for better performance and reliability -->
                        <div class="iphone-mockup-modern">
                            <div class="screen-modern">
                                <iframe src="/binary.php?symbol=BTC" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
                            </div>
                            <div class="home-bar-modern"></div>
                            <div class="notch-modern"></div>
                        </div>
                        <!-- Floating elements for depth -->
                        <div class="floating-element element-1"><div class="glass-card"><i class="bi bi-currency-bitcoin text-warning"></i><span>BTC/USDT</span></div></div>
                        <div class="floating-element element-2"><div class="glass-card"><i class="bi bi-shield-check text-success"></i><span>Secure</span></div></div>
                        <div class="floating-element element-3"><div class="glass-card"><i class="bi bi-lightning-charge-fill text-info"></i><span>Fast</span></div></div>
                        
                        <!-- Background Glow -->
                        <div class="mockup-glow"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Guide -->
    <section class="py-5 position-relative overflow-hidden" style="background: #080a0c;">
        <div class="container position-relative z-1">
            <div class="text-center mb-5">
                <h2 class="text-white fw-bold display-6 mb-3"><?= __('kyc_steps') ?></h2>
                <p class="text-white-50 lead mx-auto" style="max-width: 600px;"><?= __('recharge_steps') ?></p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
                        <div class="step-badge mb-4">01</div>
                        <h4 class="text-white mb-3"><?= __('scan_download') ?></h4>
                        <p class="text-white-50 mb-0"><?= __('app_guide_step1') ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
                        <div class="step-badge mb-4">02</div>
                        <h4 class="text-white mb-3"><?= __('app_install_auth') ?></h4>
                        <p class="text-white-50 mb-0"><?= __('app_guide_step2') ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="guide-card-modern p-4 rounded-5 bg-glass-dark border border-white border-opacity-5 h-100">
                        <div class="step-badge mb-4">03</div>
                        <h4 class="text-white mb-3"><?= __('app_experience_now') ?></h4>
                        <p class="text-white-50 mb-0"><?= __('app_guide_step3') ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="py-5 bg-gradient-dark-reverse border-top border-white border-opacity-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-item-modern p-4 text-center">
                        <div class="icon-box bg-gradient-primary text-white mb-4 shadow-primary">
                            <i class="bi bi-graph-up-arrow fs-2"></i>
                        </div>
                        <h4 class="text-white fw-bold mb-3"><?= __('real_time_alerts') ?></h4>
                        <p class="text-white-50"><?= __('full_trading_features') ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item-modern p-4 text-center">
                        <div class="icon-box bg-gradient-success text-white mb-4 shadow-success">
                            <i class="bi bi-safe2 fs-2"></i>
                        </div>
                        <h4 class="text-white fw-bold mb-3"><?= __('two_fa_security') ?></h4>
                        <p class="text-white-50"><?= __('inst_security_desc') ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-item-modern p-4 text-center">
                        <div class="icon-box bg-gradient-info text-white mb-4 shadow-info">
                            <i class="bi bi-chat-dots fs-2"></i>
                        </div>
                        <h4 class="text-white fw-bold mb-3"><?= __('live_chat_247') ?></h4>
                        <p class="text-white-50"><?= __('support_247') ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ua = navigator.userAgent.toLowerCase();
    const isIos = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);
    
    if (isIos) {
        document.querySelector('.download-btn-modern.ios').classList.add('highlight-pulse');
    } else if (isAndroid) {
        document.querySelector('.download-btn-modern.android').classList.add('highlight-pulse');
    }
});
</script>

<style>
:root {
    --primary: #0062ff;
    --primary-light: #4c9aff;
    --success: #02c076;
    --info: #00d2ff;
    --warning: #f0b90b;
    --surface: #1e2329;
    --glass: rgba(255, 255, 255, 0.05);
}

.app-page-wrapper {
    background: #080a0c;
    overflow-x: hidden;
    color: #fff;
}

.bg-gradient-dark {
    background: radial-gradient(circle at 0% 0%, rgba(0, 98, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(2, 192, 118, 0.05) 0%, transparent 50%);
}

.bg-gradient-dark-reverse {
    background: radial-gradient(circle at 100% 0%, rgba(0, 210, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 0% 100%, rgba(0, 98, 255, 0.05) 0%, transparent 50%);
}

.text-gradient-primary-light {
    background: linear-gradient(135deg, #fff 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Blobs for background decoration */
.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--primary);
    filter: blur(150px);
    opacity: 0.1;
    border-radius: 50%;
    z-index: 0;
}
.blob-1 { top: -100px; right: -100px; }
.blob-2 { bottom: -100px; left: -100px; background: var(--success); }

/* Buttons */
.download-btn-modern {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}
.download-btn-modern:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.download-btn-modern i {
    font-size: 28px;
    margin-right: 15px;
}
.download-btn-modern .text .store {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.download-btn-modern .text span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 2px;
}

.smart-download {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* QR Code */
.qr-container-modern {
    margin-top: 20px;
}
.qr-img {
    border-radius: 12px;
}
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.x-small { font-size: 11px; }

/* Mockup */
.mockup-container-modern {
    position: relative;
    padding: 40px;
    display: inline-block;
}
.iphone-mockup-modern {
    width: 280px;
    height: 580px;
    background: #111;
    border-radius: 45px;
    border: 10px solid #222;
    position: relative;
    z-index: 2;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}
.screen-modern {
    width: 100%;
    height: 100%;
    border-radius: 35px;
    overflow: hidden;
    background: #000;
}
.notch-modern {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 25px;
    background: #222;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    z-index: 10;
}
.home-bar-modern {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    z-index: 10;
}

.mockup-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 110%;
    background: radial-gradient(circle, rgba(0, 98, 255, 0.15) 0%, transparent 70%);
    z-index: 1;
}

.floating-element {
    position: absolute;
    z-index: 3;
    animation: float 5s ease-in-out infinite;
}
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.glass-card i { font-size: 20px; }
.glass-card span { font-size: 12px; font-weight: 600; color: #fff; }

.element-1 { top: 15%; right: -20px; animation-delay: 0s; }
.element-2 { bottom: 25%; left: -30px; animation-delay: 1.5s; }
.element-3 { top: 45%; left: -50px; animation-delay: 0.7s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* Guide Cards */
.guide-card-modern {
    transition: all 0.4s ease;
}
.guide-card-modern:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-light) !important;
    transform: translateY(-8px);
}
.step-badge {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--info));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(0, 98, 255, 0.3);
}

/* Feature Items */
.icon-box {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.bg-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.bg-gradient-success { background: linear-gradient(135deg, var(--success), #3ae39f); }
.bg-gradient-info { background: linear-gradient(135deg, var(--info), #5de4ff); }

.shadow-primary { box-shadow: 0 15px 30px rgba(0, 98, 255, 0.25); }
.shadow-success { box-shadow: 0 15px 30px rgba(2, 192, 118, 0.25); }
.shadow-info { box-shadow: 0 15px 30px rgba(0, 210, 255, 0.25); }

@media (max-width: 991px) {
    .iphone-mockup-modern {
        width: 240px;
        height: 500px;
    }
    .display-3 { font-size: 2.5rem; }
    .element-1, .element-2, .element-3 { display: none; }
}
</style>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

