<?php
require_once __DIR__ . '/functions.php';
$page_title = 'Home';
$db = db();

// Featured products
$featured = $db->query("
    SELECT p.*, 
           (SELECT image_path FROM product_images WHERE product_id = p.id AND is_primary = 1 LIMIT 1) as image,
           (SELECT ROUND(AVG(rating), 1) FROM reviews WHERE product_id = p.id AND is_approved = 1) as avg_rating,
           (SELECT COUNT(*) FROM reviews WHERE product_id = p.id AND is_approved = 1) as review_count
    FROM products p WHERE p.is_featured = 1 AND p.is_active = 1
    ORDER BY p.created_at DESC LIMIT 8
")->fetchAll();

// New products
$newProducts = $db->query("
    SELECT p.*, 
           (SELECT image_path FROM product_images WHERE product_id = p.id AND is_primary = 1 LIMIT 1) as image,
           (SELECT ROUND(AVG(rating), 1) FROM reviews WHERE product_id = p.id AND is_approved = 1) as avg_rating
    FROM products p WHERE p.is_active = 1
    ORDER BY p.created_at DESC LIMIT 8
")->fetchAll();

// Categories
$categories = $db->query("SELECT * FROM categories WHERE parent_id IS NULL AND is_active = 1 ORDER BY sort_order")->fetchAll();

// Banners
$banners = $db->query("SELECT * FROM banners WHERE is_active = 1 ORDER BY sort_order")->fetchAll();

// Settings for footer info
$settings = $db->query("SELECT `key`, `value` FROM settings")->fetchAll(PDO::FETCH_KEY_PAIR);

require_once __DIR__ . '/includes/header.php';
?>

<!-- Hero Carousel -->
<?php if (count($banners) > 0): ?>
<div x-data="{ current: 0, total: <?= count($banners) ?>, timer: null }" x-init="timer = setInterval(() => { current = (current + 1) % total }, 4000)" class="relative overflow-hidden">
    <div class="flex" :style="'transform: translateX(-' + (current * 100) + '%); transition: transform 700ms ease-in-out'">
        <?php foreach ($banners as $b): ?>
        <div class="w-full shrink-0 bg-gradient-to-r from-primary-600/90 to-primary-800/90 text-white" style="<?= $b['image'] ? "background-image: url('" . BASE_PATH . "/" . h($b['image']) . "'); background-size: cover; background-position: center; background-blend-mode: overlay;" : '' ?>">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
                <div class="max-w-2xl">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4"><?= h($b['title']) ?></h1>
                    <?php if ($b['subtitle']): ?>
                    <p class="text-xl text-primary-100 mb-6"><?= h($b['subtitle']) ?></p>
                    <?php endif; ?>
                    <?php if ($b['link']): ?>
                    <a href="<?= h($b['link']) ?>" class="inline-block bg-white text-primary-600 px-8 py-3 rounded-lg font-semibold hover:bg-primary-50 transition">
                        <?= h($b['btn_text'] ?: 'Shop Now') ?> <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php if (count($banners) > 1): ?>
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
        <?php foreach ($banners as $i => $b): ?>
        <button @click="clearInterval(timer); current = <?= $i ?>; timer = setInterval(() => { current = (current + 1) % total }, 4000)" class="w-3 h-3 rounded-full transition-all duration-300" :class="current === <?= $i ?> ? 'bg-white scale-110' : 'bg-white/50 hover:bg-white/70'"></button>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>
<?php endif; ?>

<!-- Categories -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">Shop by Category</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <?php foreach ($categories as $cat): ?>
        <a href="catalog.php?category=<?= h($cat['slug']) ?>" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center hover:shadow-md hover:border-primary-300 transition group">
            <div class="w-16 h-16 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary-100">
                <i class="fas fa-<?= $cat['slug'] === 'electronics' ? 'laptop' : ($cat['slug'] === 'clothing' ? 'tshirt' : ($cat['slug'] === 'home-kitchen' ? 'home' : ($cat['slug'] === 'books' ? 'book' : ($cat['slug'] === 'sports-fitness' ? 'running' : 'gem')))) ?> text-2xl text-primary-600"></i>
            </div>
            <h3 class="font-semibold text-gray-800"><?= h($cat['name']) ?></h3>
            <p class="text-xs text-gray-500 mt-1"><?= h($cat['description']) ?></p>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<!-- Featured Products -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Featured Products</h2>
        <a href="catalog.php" class="text-primary-600 hover:text-primary-700 font-medium text-sm">View All <i class="fas fa-arrow-right ml-1"></i></a>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <?php foreach ($featured as $product): ?>
        <a href="product.php?slug=<?= h($product['slug']) ?>" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition group">
            <div class="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden">
                <?php if ($product['image']): ?>
                <img src="<?= h($product['image']) ?>" alt="<?= h($product['name']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition">
                <?php else: ?>
                <i class="fas fa-box text-gray-300 text-5xl"></i>
                <?php endif; ?>
                <?php if ($product['compare_price'] > $product['price']): ?>
                <span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">-<?= round((1 - $product['price'] / $product['compare_price']) * 100) ?>%</span>
                <?php endif; ?>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 text-sm group-hover:text-primary-600"><?= h($product['name']) ?></h3>
                <div class="flex items-center gap-2 mt-2">
                    <span class="text-lg font-bold text-primary-600"><?= formatPrice($product['price']) ?></span>
                    <?php if ($product['compare_price'] > $product['price']): ?>
                    <span class="text-sm text-gray-400 line-through"><?= formatPrice($product['compare_price']) ?></span>
                    <?php endif; ?>
                </div>
                <?php if ($product['avg_rating']): ?>
                <div class="flex items-center gap-1 mt-1">
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                    <i class="fas fa-star text-xs <?= $i <= round($product['avg_rating']) ? 'text-yellow-400' : 'text-gray-200' ?>"></i>
                    <?php endfor; ?>
                    <span class="text-xs text-gray-500 ml-1">(<?= $product['review_count'] ?>)</span>
                </div>
                <?php endif; ?>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<!-- New Arrivals -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">New Arrivals</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <?php foreach ($newProducts as $product): ?>
        <a href="product.php?slug=<?= h($product['slug']) ?>" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition group">
            <div class="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden">
                <?php if ($product['image']): ?>
                <img src="<?= h($product['image']) ?>" alt="<?= h($product['name']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition">
                <?php else: ?>
                <i class="fas fa-box text-gray-300 text-5xl"></i>
                <?php endif; ?>
                <span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">New</span>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 text-sm group-hover:text-primary-600"><?= h($product['name']) ?></h3>
                <div class="flex items-center gap-2 mt-2">
                    <span class="text-lg font-bold text-primary-600"><?= formatPrice($product['price']) ?></span>
                    <?php if ($product['compare_price'] > $product['price']): ?>
                    <span class="text-sm text-gray-400 line-through"><?= formatPrice($product['compare_price']) ?></span>
                    <?php endif; ?>
                </div>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<!-- Features -->
<div class="bg-white border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-truck text-primary-600 text-xl"></i>
                </div>
                <h4 class="font-semibold text-gray-800">Free Shipping</h4>
                <p class="text-sm text-gray-500 mt-1">On orders above <?= formatPrice(SHIPPING_FREE_MIN_AMOUNT) ?></p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-undo text-primary-600 text-xl"></i>
                </div>
                <h4 class="font-semibold text-gray-800">Easy Returns</h4>
                <p class="text-sm text-gray-500 mt-1">7-day return policy</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-shield-alt text-primary-600 text-xl"></i>
                </div>
                <h4 class="font-semibold text-gray-800">Secure Payment</h4>
                <p class="text-sm text-gray-500 mt-1">100% secure checkout</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-headset text-primary-600 text-xl"></i>
                </div>
                <h4 class="font-semibold text-gray-800">24/7 Support</h4>
                <p class="text-sm text-gray-500 mt-1">Dedicated customer service</p>
            </div>
        </div>
    </div>
</div>

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