<?php
/**
 * Homepage - PREMIUM VERSION
 * Digital Marketplace
 */

require_once __DIR__ . '/config/database.php';

$page_title = 'Premium Digital Products Marketplace';

// Get featured products
$featured_products = get_products(['featured' => true, 'limit' => 8]);

// Get bestseller products
$bestseller_products = get_products(['bestseller' => true, 'limit' => 4]);

// Get new arrivals
$new_arrivals = get_products(['limit' => 4]);

// Get categories with product counts
$categories = get_all_categories();

// Get testimonials
$testimonials = get_testimonials(6);

// Get stats
$stats = [
    'products' => $pdo->query("SELECT COUNT(*) FROM products WHERE status = 'active'")->fetchColumn(),
    'customers' => $pdo->query("SELECT COUNT(*) FROM users WHERE role = 'user'")->fetchColumn(),
    'orders' => $pdo->query("SELECT COUNT(*) FROM orders WHERE payment_status = 'paid'")->fetchColumn(),
    'downloads' => $pdo->query("SELECT SUM(download_count) FROM order_items oi JOIN orders o ON oi.order_id = o.id WHERE o.payment_status = 'paid'")->fetchColumn() ?: 0
];

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

<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <div class="hero-content">
                    <span class="hero-badge">
                        <i class="fas fa-sparkles"></i>
                        #1 Digital Products Marketplace
                    </span>
                    <h1 class="hero-title">
                        Discover Premium <span>Digital Products</span> for Your Success
                    </h1>
                    <p class="hero-subtitle">
                        Access thousands of high-quality digital products including website templates, 
                        scripts, plugins, and more. Instant downloads, secure payments, 24/7 support.
                    </p>
                    <div class="hero-buttons">
                        <a href="<?php echo BASE_URL; ?>/products.php" class="btn btn-primary btn-lg">
                            <i class="fas fa-shopping-bag me-2"></i>Browse Products
                        </a>
                        <a href="<?php echo BASE_URL; ?>/products.php?sort=bestseller" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-fire me-2"></i>Bestsellers
                        </a>
                    </div>
                    <div class="hero-stats">
                        <div class="hero-stat">
                            <div class="hero-stat-number"><?php echo number_format($stats['products']); ?>+</div>
                            <div class="hero-stat-label">Products</div>
                        </div>
                        <div class="hero-stat">
                            <div class="hero-stat-number"><?php echo number_format($stats['customers']); ?>+</div>
                            <div class="hero-stat-label">Customers</div>
                        </div>
                        <div class="hero-stat">
                            <div class="hero-stat-number"><?php echo number_format($stats['downloads']); ?>+</div>
                            <div class="hero-stat-label">Downloads</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block" data-aos="fade-left">
                <div class="hero-image-wrapper position-relative">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=500&fit=crop" 
                         alt="Digital Products Dashboard" 
                         class="hero-image img-fluid">
                    
                    <div class="hero-floating-card card-1">
                        <i class="fas fa-download"></i>
                        <div>
                            <strong>Instant</strong>
                            <small class="d-block text-muted">Download</small>
                        </div>
                    </div>
                    
                    <div class="hero-floating-card card-2">
                        <i class="fas fa-shield-alt"></i>
                        <div>
                            <strong>Secure</strong>
                            <small class="d-block text-muted">Payment</small>
                        </div>
                    </div>
                    
                    <div class="hero-floating-card card-3">
                        <i class="fas fa-headset"></i>
                        <div>
                            <strong>24/7</strong>
                            <small class="d-block text-muted">Support</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="section bg-dark-card">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Browse by Category</span>
            <h2 class="section-title">Explore Our Categories</h2>
            <p class="section-subtitle">Find exactly what you need from our diverse collection</p>
        </div>
        
        <div class="row g-4">
            <?php foreach (array_slice($categories, 0, 6) as $index => $category): ?>
            <div class="col-lg-2 col-md-4 col-6" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                <a href="<?php echo BASE_URL; ?>/products.php?category=<?php echo $category['slug']; ?>" class="category-card">
                    <div class="category-icon">
                        <i class="fas fa-<?php echo $category['icon'] ?? 'folder'; ?>"></i>
                    </div>
                    <h5 class="category-name"><?php echo sanitize($category['name']); ?></h5>
                    <span class="category-count"><?php echo number_format($category['product_count'] ?? 0); ?> products</span>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Featured Products Section -->
<section class="section">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Featured</span>
            <h2 class="section-title">Featured Products</h2>
            <p class="section-subtitle">Handpicked premium products by our experts</p>
        </div>
        
        <div class="row g-4">
            <?php foreach ($featured_products as $index => $product): ?>
            <div class="col-lg-3 col-md-4 col-sm-6" data-aos="fade-up" data-aos-delay="<?php echo ($index % 4) * 100; ?>">
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="<?php echo get_product_image_url($product); ?>" 
                             alt="<?php echo sanitize($product['name']); ?>"
                             onerror="this.src='<?php echo ASSETS_URL; ?>/images/no-image.jpg'">
                        
                        <div class="product-badges">
                            <?php if ($product['sale_price'] && $product['sale_price'] > 0): ?>
                                <span class="product-badge sale">-<?php echo calculate_discount($product['price'], $product['sale_price']); ?>%</span>
                            <?php endif; ?>
                            <?php if ($product['featured']): ?>
                                <span class="product-badge featured"><i class="fas fa-star"></i> Featured</span>
                            <?php endif; ?>
                        </div>
                        
                        <div class="product-overlay">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-primary">
                                <i class="fas fa-eye me-2"></i>View Details
                            </a>
                        </div>
                    </div>
                    
                    <div class="product-body">
                        <div class="product-category">
                            <i class="fas fa-tag me-1"></i><?php echo sanitize($product['category_name'] ?? 'Uncategorized'); ?>
                        </div>
                        <h5 class="product-title">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>">
                                <?php echo sanitize($product['name']); ?>
                            </a>
                        </h5>
                        <p class="product-description"><?php echo sanitize(truncate($product['short_description'], 80)); ?></p>
                        
                        <div class="product-meta">
                            <div class="product-rating">
                                <?php for ($i = 1; $i <= 5; $i++): ?>
                                    <i class="fas fa-star<?php echo $i > ($product['avg_rating'] ?? 5) ? '-half-alt' : ''; ?>"></i>
                                <?php endfor; ?>
                                <span class="reviews">(<?php echo $product['review_count'] ?? 0; ?>)</span>
                            </div>
                            <div class="product-sales">
                                <i class="fas fa-shopping-cart me-1"></i><?php echo number_format($product['times_sold'] ?? 0); ?> sales
                            </div>
                        </div>
                        
                        <div class="product-price">
                            <?php if ($product['sale_price'] && $product['sale_price'] > 0): ?>
                                <span class="price-current"><?php echo format_price($product['sale_price']); ?></span>
                                <span class="price-original"><?php echo format_price($product['price']); ?></span>
                            <?php else: ?>
                                <span class="price-current"><?php echo format_price($product['price']); ?></span>
                            <?php endif; ?>
                        </div>
                        
                        <div class="product-actions">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-primary">
                                <i class="fas fa-shopping-cart me-2"></i>Add to Cart
                            </a>
                            <?php if (is_user_logged_in()): ?>
                            <button class="wishlist-btn<?php echo is_in_wishlist($product['id']) ? ' active' : ''; ?>" data-product-id="<?php echo $product['id']; ?>">
                                <i class="<?php echo is_in_wishlist($product['id']) ? 'fas' : 'far'; ?> fa-heart"></i>
                            </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <div class="text-center mt-5" data-aos="fade-up">
            <a href="<?php echo BASE_URL; ?>/products.php" class="btn btn-outline-light btn-lg">
                View All Products <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section bg-dark-card">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Why Choose Us</span>
            <h2 class="section-title">The Digital Marketplace Advantage</h2>
            <p class="section-subtitle">Experience the best in digital product shopping</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h4>Instant Delivery</h4>
                    <p>Get your products immediately after purchase. No waiting, no delays.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4>Secure Payment</h4>
                    <p>Your transactions are protected with industry-standard encryption.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h4>24/7 Support</h4>
                    <p>Our team is always here to help you with any questions or issues.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-undo"></i>
                    </div>
                    <h4>Money Back Guarantee</h4>
                    <p>Not satisfied? Get a full refund within 30 days of purchase.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Bestsellers Section -->
<section class="section">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Popular</span>
            <h2 class="section-title">Bestselling Products</h2>
            <p class="section-subtitle">Our most popular products loved by customers</p>
        </div>
        
        <div class="row g-4">
            <?php foreach ($bestseller_products as $index => $product): ?>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="<?php echo get_product_image_url($product); ?>" 
                             alt="<?php echo sanitize($product['name']); ?>"
                             onerror="this.src='<?php echo ASSETS_URL; ?>/images/no-image.jpg'">
                        
                        <div class="product-badges">
                            <span class="product-badge featured"><i class="fas fa-fire"></i> Hot</span>
                        </div>
                    </div>
                    
                    <div class="product-body">
                        <div class="product-category">
                            <i class="fas fa-tag me-1"></i><?php echo sanitize($product['category_name'] ?? 'Uncategorized'); ?>
                        </div>
                        <h5 class="product-title">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>">
                                <?php echo sanitize($product['name']); ?>
                            </a>
                        </h5>
                        
                        <div class="product-meta">
                            <div class="product-sales">
                                <i class="fas fa-shopping-cart me-1"></i><?php echo number_format($product['times_sold'] ?? 0); ?> sales
                            </div>
                        </div>
                        
                        <div class="product-price">
                            <?php if ($product['sale_price'] && $product['sale_price'] > 0): ?>
                                <span class="price-current"><?php echo format_price($product['sale_price']); ?></span>
                            <?php else: ?>
                                <span class="price-current"><?php echo format_price($product['price']); ?></span>
                            <?php endif; ?>
                        </div>
                        
                        <div class="product-actions">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-primary w-100">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<?php if (!empty($testimonials)): ?>
<section class="section bg-dark-card">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Testimonials</span>
            <h2 class="section-title">What Our Customers Say</h2>
            <p class="section-subtitle">Real feedback from our satisfied customers</p>
        </div>
        
        <div class="row g-4">
            <?php foreach (array_slice($testimonials, 0, 3) as $index => $testimonial): ?>
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                <div class="testimonial-card">
                    <div class="testimonial-rating">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                            <i class="fas fa-star<?php echo $i > $testimonial['rating'] ? '-half-alt' : ''; ?>"></i>
                        <?php endfor; ?>
                    </div>
                    <p class="testimonial-text">"<?php echo sanitize($testimonial['content']); ?>"</p>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <?php if (!empty($testimonial['avatar'])): ?>
                                <img src="<?php echo UPLOAD_URL . '/' . $testimonial['avatar']; ?>" alt="<?php echo sanitize($testimonial['name']); ?>">
                            <?php else: ?>
                                <?php echo strtoupper(substr($testimonial['name'], 0, 1)); ?>
                            <?php endif; ?>
                        </div>
                        <div class="testimonial-info">
                            <h6><?php echo sanitize($testimonial['name']); ?></h6>
                            <span><?php echo sanitize($testimonial['position'] ?? 'Customer'); ?></span>
                            <?php if (!empty($testimonial['company'])): ?>
                                <span> at <?php echo sanitize($testimonial['company']); ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8" data-aos="fade-right">
                <h2>Ready to Get Started?</h2>
                <p>Join thousands of satisfied customers and discover premium digital products today. 
                   Start selling your own products and earn money!</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0" data-aos="fade-left">
                <a href="<?php echo BASE_URL; ?>/products.php" class="btn btn-light btn-lg me-3">
                    <i class="fas fa-shopping-bag me-2"></i>Start Shopping
                </a>
                <a href="<?php echo BASE_URL; ?>/register.php" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-user-plus me-2"></i>Become a Seller
                </a>
            </div>
        </div>
    </div>
</section>

<!-- New Arrivals Section -->
<section class="section">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">New</span>
            <h2 class="section-title">New Arrivals</h2>
            <p class="section-subtitle">Check out the latest additions to our marketplace</p>
        </div>
        
        <div class="row g-4">
            <?php foreach ($new_arrivals as $index => $product): ?>
            <div class="col-lg-3 col-md-4 col-sm-6" data-aos="fade-up" data-aos-delay="<?php echo ($index % 4) * 100; ?>">
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="<?php echo get_product_image_url($product); ?>" 
                             alt="<?php echo sanitize($product['name']); ?>"
                             onerror="this.src='<?php echo ASSETS_URL; ?>/images/no-image.jpg'">
                        
                        <div class="product-badges">
                            <span class="product-badge new"><i class="fas fa-sparkles"></i> New</span>
                        </div>
                    </div>
                    
                    <div class="product-body">
                        <div class="product-category">
                            <i class="fas fa-tag me-1"></i><?php echo sanitize($product['category_name'] ?? 'Uncategorized'); ?>
                        </div>
                        <h5 class="product-title">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>">
                                <?php echo sanitize($product['name']); ?>
                            </a>
                        </h5>
                        
                        <div class="product-price">
                            <?php if ($product['sale_price'] && $product['sale_price'] > 0): ?>
                                <span class="price-current"><?php echo format_price($product['sale_price']); ?></span>
                            <?php else: ?>
                                <span class="price-current"><?php echo format_price($product['price']); ?></span>
                            <?php endif; ?>
                        </div>
                        
                        <div class="product-actions">
                            <a href="<?php echo BASE_URL; ?>/product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-primary w-100">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Trust Badges Section -->
<section class="section-sm bg-dark-card">
    <div class="container">
        <div class="row align-items-center justify-content-center g-4">
            <div class="col-auto" data-aos="fade-up">
                <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-shield-alt fa-2x text-success"></i>
                    <div>
                        <strong class="d-block">Secure Payments</strong>
                        <small class="text-muted">256-bit SSL encryption</small>
                    </div>
                </div>
            </div>
            <div class="col-auto" data-aos="fade-up" data-aos-delay="100">
                <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-undo fa-2x text-info"></i>
                    <div>
                        <strong class="d-block">30-Day Refund</strong>
                        <small class="text-muted">Money back guarantee</small>
                    </div>
                </div>
            </div>
            <div class="col-auto" data-aos="fade-up" data-aos-delay="200">
                <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-headset fa-2x text-warning"></i>
                    <div>
                        <strong class="d-block">24/7 Support</strong>
                        <small class="text-muted">Always here to help</small>
                    </div>
                </div>
            </div>
            <div class="col-auto" data-aos="fade-up" data-aos-delay="300">
                <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-download fa-2x text-primary"></i>
                    <div>
                        <strong class="d-block">Instant Download</strong>
                        <small class="text-muted">Get products immediately</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Social Proof Popup -->
<div id="social-proof-popup" class="social-proof-popup">
    <div class="social-proof-content">
        <div class="social-proof-icon">
            <i class="fas fa-shopping-bag"></i>
        </div>
        <div class="social-proof-text">
            <p class="social-proof-message"></p>
            <small class="social-proof-time">Just now</small>
        </div>
    </div>
</div>

<style>
.social-proof-popup {
    position: fixed;
    bottom: 100px;
    left: 30px;
    background: var(--dark-card);
    border: 1px solid var(--dark-lighter);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transform: translateX(-400px);
    opacity: 0;
    transition: all 0.5s ease;
}

.social-proof-popup.show {
    transform: translateX(0);
    opacity: 1;
}

.social-proof-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-proof-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 50%;
    color: var(--white);
}

.social-proof-text {
    flex: 1;
}

.social-proof-message {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-300);
}

.social-proof-time {
    color: var(--gray-500);
}

@media (max-width: 767.98px) {
    .social-proof-popup {
        left: 10px;
        right: 10px;
        bottom: 80px;
    }
}
</style>

<script>
// Social Proof Popup
const socialProofData = [
    { name: 'Alex', country: 'United States', action: 'purchased', product: 'Premium WordPress Theme' },
    { name: 'Maria', country: 'Germany', action: 'downloaded', product: 'E-commerce Dashboard' },
    { name: 'Ahmed', country: 'UAE', action: 'purchased', product: 'React Admin Template' },
    { name: 'Sarah', country: 'Canada', action: 'purchased', product: 'Logo Design Bundle' },
    { name: 'David', country: 'Australia', action: 'downloaded', product: 'Mobile App UI Kit' },
    { name: 'Emma', country: 'UK', action: 'purchased', product: 'Social Media Pack' },
    { name: 'Carlos', country: 'Brazil', action: 'purchased', product: 'Landing Page Builder' },
    { name: 'Yuki', country: 'Japan', action: 'downloaded', product: 'Icon Set Pro' },
    { name: 'Pierre', country: 'France', action: 'purchased', product: 'Marketing Templates' },
    { name: 'Sofia', country: 'Italy', action: 'purchased', product: 'Portfolio Theme' }
];

function showSocialProof() {
    const popup = document.getElementById('social-proof-popup');
    if (!popup) return;
    
    const data = socialProofData[Math.floor(Math.random() * socialProofData.length)];
    const message = popup.querySelector('.social-proof-message');
    
    message.textContent = `${data.name} from ${data.country} just ${data.action} ${data.product}`;
    
    popup.classList.add('show');
    
    setTimeout(() => {
        popup.classList.remove('show');
    }, 5000);
}

// Show popup every 20-40 seconds
setInterval(showSocialProof, Math.random() * 20000 + 20000);
</script>

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