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

// Fetch site settings
$db = db();

// Fetch hot products (Popular Recommendations) - 8 items
$hot_products = $db->query("SELECT p.*, c.name as category_name FROM products p JOIN categories c ON p.category_id = c.id WHERE p.is_hot = 1 LIMIT 8")->fetchAll();

// Function to fetch products by category ID with limit
function getProductsByCategory($db, $cat_id, $limit) {
    $stmt = $db->prepare("SELECT p.*, c.name as category_name FROM products p JOIN categories c ON p.category_id = c.id WHERE p.category_id = :cat_id LIMIT :limit");
    $stmt->bindValue(':cat_id', $cat_id, PDO::PARAM_INT);
    $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
    $stmt->execute();
    return $stmt->fetchAll();
}

$social_accounts = getProductsByCategory($db, 1, 8);
$overseas_social = getProductsByCategory($db, 2, 8);
$ai_office = getProductsByCategory($db, 3, 4);
$email_tools = getProductsByCategory($db, 4, 4);

$categories = $db->query("SELECT * FROM categories")->fetchAll();
?>

<!-- Carousel Section -->
<div class="carousel-section mb-4 mb-lg-5">
    <div id="heroCarousel" class="carousel slide carousel-fade shadow-sm overflow-hidden border-0" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="3"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="4"></button>
        </div>
        <div class="carousel-inner h-100">
            <!-- Slide 1 -->
            <div class="carousel-item active h-100" data-bs-interval="2000">
                <div class="carousel-bg h-100" style="background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);">
                    <div class="position-absolute w-100 h-100" style="background: url('https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center/cover; opacity: 0.35;"></div>
                    <div class="text-center position-relative px-3" style="z-index: 10;">
                        <h2 class="display-4 carousel-title mb-3">专业软件账号中心</h2>
                        <div class="mb-4 pc-only">
                            <span class="carousel-subtitle">全球主流平台 · 即买即发 · 稳定质保</span>
                        </div>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="#market" class="btn btn-primary px-5 py-3 rounded-pill shadow-lg">立即探索</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide 2 -->
            <div class="carousel-item h-100" data-bs-interval="2000">
                <div class="carousel-bg h-100" style="background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);">
                    <div class="position-absolute w-100 h-100" style="background: url('https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center/cover; opacity: 0.35;"></div>
                    <div class="text-center position-relative px-3" style="z-index: 10;">
                        <h2 class="display-4 carousel-title mb-3">AI 办公提效神器</h2>
                        <div class="mb-4 pc-only">
                            <span class="carousel-subtitle" style="color: #006064 !important;">ChatGPT, Midjourney 独享权限</span>
                        </div>
                        <a href="category.php?id=3" class="btn btn-primary px-5 py-3 rounded-pill shadow-lg">立即升级</a>
                    </div>
                </div>
            </div>
            <!-- Slide 3 -->
            <div class="carousel-item h-100" data-bs-interval="2000">
                <div class="carousel-bg h-100" style="background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);">
                    <div class="position-absolute w-100 h-100" style="background: url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center/cover; opacity: 0.35;"></div>
                    <div class="text-center position-relative px-3" style="z-index: 10;">
                        <h2 class="display-4 carousel-title mb-3">全自动 24H 交付</h2>
                        <div class="mb-4 pc-only">
                            <span class="carousel-subtitle" style="color: #4a148c !important;">卡密信息实时到达订单中心</span>
                        </div>
                        <a href="orders.php" class="btn btn-primary px-5 py-3 rounded-pill shadow-lg">查询订单</a>
                    </div>
                </div>
            </div>
            <!-- Slide 4 -->
            <div class="carousel-item h-100" data-bs-interval="2000">
                <div class="carousel-bg h-100" style="background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);">
                    <div class="position-absolute w-100 h-100" style="background: url('https://images.pexels.com/photos/3760067/pexels-photo-3760067.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center/cover; opacity: 0.35;"></div>
                    <div class="text-center position-relative px-3" style="z-index: 10;">
                        <h2 class="display-4 carousel-title mb-3">多平台社交引流</h2>
                        <div class="mb-4 pc-only">
                            <span class="carousel-subtitle" style="color: #e65100 !important;">海外主流社媒，安全稳定不封号</span>
                        </div>
                        <a href="category.php?id=2" class="btn btn-primary px-5 py-3 rounded-pill shadow-lg">进入专区</a>
                    </div>
                </div>
            </div>
            <!-- Slide 5 -->
            <div class="carousel-item h-100" data-bs-interval="2000">
                <div class="carousel-bg h-100" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);">
                    <div class="position-absolute w-100 h-100" style="background: url('https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center/cover; opacity: 0.35;"></div>
                    <div class="text-center position-relative px-3" style="z-index: 10;">
                        <h2 class="display-4 carousel-title mb-3">安全加密 支付无忧</h2>
                        <div class="mb-4 pc-only">
                            <span class="carousel-subtitle" style="color: #1b5e20 !important;">支持 USDT 匿名支付，保护隐私</span>
                        </div>
                        <a href="faq.php" class="btn btn-primary px-5 py-3 rounded-pill shadow-lg">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Categories Quick Links (Improved Style) -->
<div class="row g-2 g-lg-4 mb-4 mb-lg-5 px-1">
    <?php foreach ($categories as $cat): ?>
    <div class="col-3 col-md">
        <a href="category.php?id=<?php echo $cat['id']; ?>" class="text-decoration-none category-item d-block">
            <div class="text-center">
                <div class="category-icon-wrapper">
                    <i class="bi <?php echo $cat['icon'] ?: 'bi-grid-fill'; ?>"></i>
                </div>
                <div class="category-name"><?php echo $cat['name']; ?></div>
            </div>
        </a>
    </div>
    <?php endforeach; ?>
</div>

<div id="market">
    <!-- Hot Products Section -->
    <div class="mb-4 mb-lg-5">
        <div class="d-flex justify-content-between align-items-center mb-3 mb-lg-4">
            <div>
                <h4 class="mb-0 fw-bold text-dark"><i class="bi bi-fire text-danger me-2"></i>热门推荐</h4>
            </div>
            <a href="search.php" class="text-primary text-decoration-none small">查看全部 <i class="bi bi-chevron-right"></i></a>
        </div>
        <div class="row g-2 g-lg-4">
            <?php foreach ($hot_products as $product): ?>
            <div class="col-6 col-lg-3">
                <?php include 'includes/product_card.php'; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- Social Accounts -->
    <div class="mb-4 mb-lg-5">
        <h5 class='text-dark mb-3 mb-lg-4 mt-4 d-flex align-items-center fw-bold'><span class='category-accent me-2 me-lg-3'></span> 社交账号展示区</h5>
        <div class="row g-2 g-lg-4">
            <?php foreach ($social_accounts as $product): ?>
            <div class="col-6 col-lg-3">
                <?php include 'includes/product_card.php'; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- AI Office -->
    <div class="mb-4 mb-lg-5">
        <h5 class='text-dark mb-3 mb-lg-4 mt-4 d-flex align-items-center fw-bold'><span class='category-accent me-2 me-lg-3'></span> AI 办公展示区</h5>
        <div class="row g-2 g-lg-4">
            <?php foreach ($ai_office as $product): ?>
            <div class="col-6 col-lg-3">
                <?php include 'includes/product_card.php'; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Trust Badges (Improved Contrast) -->
<div class="row g-2 g-lg-4 mt-4 mt-lg-5 pb-5">
    <div class="col-6 col-md-3">
        <div class="text-center p-3 p-lg-4 bg-white rounded-4 shadow-sm h-100 border border-light">
            <i class="bi bi-lightning-charge fs-2 text-primary mb-3 d-block"></i>
            <h6 class="text-dark fw-bold mb-2">秒速发货</h6>
            <p class="text-secondary small mb-0 d-none d-lg-block">系统自动处理，无需等待。</p>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="text-center p-3 p-lg-4 bg-white rounded-4 shadow-sm h-100 border border-light">
            <i class="bi bi-shield-check fs-2 text-success mb-3 d-block"></i>
            <h6 class="text-dark fw-bold mb-2">质量保障</h6>
            <p class="text-secondary small mb-0 d-none d-lg-block">所有账号通过质保测试。</p>
        </div>
    </div>
    <div class="col-6 col-md-3 mt-2 mt-md-0">
        <div class="text-center p-3 p-lg-4 bg-white rounded-4 shadow-sm h-100 border border-light">
            <i class="bi bi-headset fs-2 text-info mb-3 d-block"></i>
            <h6 class="text-dark fw-bold mb-2">优质售后</h6>
            <p class="text-secondary small mb-0 d-none d-lg-block">7x24小时专业客服团队。</p>
        </div>
    </div>
    <div class="col-6 col-md-3 mt-2 mt-md-0">
        <div class="text-center p-3 p-lg-4 bg-white rounded-4 shadow-sm h-100 border border-light">
            <i class="bi bi-currency-bitcoin fs-2 text-warning mb-3 d-block"></i>
            <h6 class="text-dark fw-bold mb-2">USDT 支付</h6>
            <p class="text-secondary small mb-0 d-none d-lg-block">隐私安全，交易无忧。</p>
        </div>
    </div>
</div>

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