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

<div class="container">
    <div class="row align-items-center mb-5 mt-5">
        <div class="col-lg-7">
            <h1 class="display-4 fw-bold mb-3"><?php echo __('hero_title'); ?></h1>
            <p class="lead text-muted mb-4"><?php echo __('hero_subtitle'); ?></p>
            
            <div class="d-flex gap-2">
                <a href="#latest" class="btn btn-success btn-lg px-4 rounded-pill"><?php echo __('explore_apps'); ?></a>
                <a href="/register" class="btn btn-outline-dark btn-lg px-4 rounded-pill border-1"><?php echo __('join_referral'); ?></a>
            </div>
        </div>
        <div class="col-lg-5 d-none d-lg-block text-center">
            <div class="position-relative">
                <!-- Dynamic Hero Circle -->
                <div class="position-absolute rounded-circle" style="width: 400px; height: 400px; top: -50px; right: -50px; z-index: -1; filter: blur(60px); opacity: 0.15; animation: color-cycle 20s infinite, floating 10s infinite ease-in-out;"></div>
                <img src="https://img.icons8.com/color/512/android-os.png" class="img-fluid floating-animation" alt="Android APKs" style="max-height: 350px;">
            </div>
        </div>
    </div>

    <section id="latest" class="mb-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold mb-0">
                <?php if (!empty($_GET['search'])): ?>
                    <?php echo __('search_results_for', 'Search results for'); ?>: "<?php echo htmlspecialchars($_GET['search']); ?>"
                <?php else: ?>
                    <?php echo __('latest_apks'); ?>
                <?php endif; ?>
            </h2>
            <div class="dropdown">
                <button class="btn btn-white shadow-sm border rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <?php echo __('categories'); ?> <i class="bi bi-chevron-down ms-1 small"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                    <li><a class="dropdown-item" href="/"><?php echo __('all_categories'); ?></a></li>
                    <?php 
                    $db = db();
                    $categories = $db->query("SELECT * FROM categories")->fetchAll();
                    foreach ($categories as $cat): ?>
                        <li><a class="dropdown-item" href="/?category=<?php echo $cat['slug']; ?>"><?php echo $cat['name']; ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
        
        <?php if (empty($apks) && !empty($_GET['search'])): ?>
            <div class="text-center py-5">
                <i class="bi bi-search display-1 text-muted opacity-25 mb-4"></i>
                <h3 class="fw-bold"><?php echo __('no_apks_found', 'No APKs found'); ?></h3>
                <p class="text-muted"><?php echo __('try_another_search', 'Try another search term or browse categories.'); ?></p>
                <a href="/" class="btn btn-outline-success rounded-pill px-4 mt-2"><?php echo __('view_all_apks', 'View All APKs'); ?></a>
            </div>
        <?php else: ?>
            <div class="row g-3 g-md-4">
                <?php foreach ($apks as $apk): ?>
                    <div class="col-4 col-md-4">
                        <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                            <div class="card-body p-2 p-md-4 text-center text-md-start">
                                <div class="d-md-flex align-items-center mb-2 mb-md-3">
                                    <?php 
                                        $icon = !empty($apk['icon_path']) ? '/'.$apk['icon_path'] : $apk['image_url'];
                                    ?>
                                    <div class="mx-auto mx-md-0 mb-2 mb-md-0" style="width: 50px; height: 50px;">
                                        <img src="<?php echo $icon; ?>" class="rounded-3" width="50" height="50" alt="<?php echo $apk['title']; ?>" style="object-fit: cover; width: 50px; height: 50px;">
                                    </div>
                                    <div class="ms-md-3 flex-grow-1 overflow-hidden">
                                        <h6 class="card-title fw-bold mb-0 text-truncate"><?php echo $apk['title']; ?></h6>
                                        <span class="badge bg-light text-dark fw-normal d-none d-md-inline-block">v<?php echo $apk['version']; ?></span>
                                    </div>
                                </div>
                                <p class="card-text text-muted small mb-3 line-clamp-2 d-none d-md-block"><?php echo $apk['description']; ?></p>
                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
                                    <span class="text-muted small d-none d-md-inline-block"><i class="fas fa-download me-1"></i> <?php echo number_format($apk['total_downloads']); ?></span>
                                    <a href="/apk/<?php echo $apk['slug']; ?>" class="btn btn-success rounded-pill px-3 btn-sm fw-medium w-100 w-md-auto"><?php echo __('details'); ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </section>

    <div class="bg-dark text-white p-5 rounded-5 mt-5 mb-5 shadow-lg position-relative overflow-hidden">
        <!-- Subtle dark mode blob -->
        <div class="position-absolute bg-success opacity-10 rounded-circle" style="width: 300px; height: 300px; bottom: -100px; left: -100px; filter: blur(50px);"></div>
        
        <div class="row align-items-center text-center text-lg-start position-relative">
            <div class="col-lg-8">
                <h2 class="fw-bold mb-3"><?php echo __('referral_journey_title'); ?></h2>
                <p class="mb-0 text-white-50"><?php echo __('referral_journey_text'); ?></p>
            </div>
            <div class="col-lg-4 text-center text-lg-end mt-4 mt-lg-0">
                <a href="/register" class="btn btn-success btn-lg px-5 rounded-pill"><?php echo __('get_started'); ?></a>
            </div>
        </div>
    </div>
</div>

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