
<?php
require_once __DIR__ . '/../includes/bootstrap.php';

$products = [];
$productError = false;

try {
    $stmt = db()->query(
        "SELECT * FROM products
         WHERE is_active = 1
         ORDER BY id DESC"
    );
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $e) {
    error_log('ViralNexa products: ' . $e->getMessage());
    $productError = true;
}

app_header('Shop');
?>



<div class="vn-home">

    <section class="vn-banner" aria-label="Fresh groceries delivery">
        <div class="vn-banner-copy">
            <div class="vn-eyebrow">Your Neighbourhood Grocery Store</div>
            <h1><span class="vn-red">Fresh Groceries.</span><br><span class="vn-green">Everyday Convenience.</span></h1>
            <p>Fresh fruits, vegetables, dairy and daily essentials from your local sellers — everything you need, all in one place.</p>
            <div class="vn-actions">
                <a class="vn-btn" href="#vn-products">Shop Groceries →</a>
                <a class="vn-btn vn-btn-secondary" href="https://viralnexa.online/seller/register.php">Become a Seller</a>
            </div>
            <div class="vn-benefits"><span>✓ Local Sellers</span><span>✓ Easy Shopping</span><span>✓ Secure Checkout</span></div>
        </div>
        <div class="vn-banner-art" aria-label="ViralNexa shopping benefits">
            <div class="vn-float vn-float-one"><span class="vn-float-icon">🥬</span><span>Fresh Products<small>Fresh every day</small></span></div>
            <div class="vn-float vn-float-two"><span class="vn-float-icon">🛒</span><span>Daily Essentials<small>All your basics</small></span></div>
            <div class="vn-float vn-float-three"><span class="vn-float-icon">🚚</span><span>Fast Delivery<small>To your doorstep</small></span></div>
            <div class="vn-float vn-float-four"><span class="vn-float-icon">🏷️</span><span>Best Prices<small>Value for money</small></span></div>
            <div class="vn-float vn-float-five"><span class="vn-float-icon">🔒</span><span>Secure Checkout<small>Shop with confidence</small></span></div>
            <div class="vn-float vn-float-six"><span class="vn-float-icon">🏪</span><span>Local Sellers<small>Support your area</small></span></div>
            <img class="vn-character" src="<?= e(url('ad/character.png')) ?>" alt="ViralNexa grocery delivery champion holding fresh vegetables" fetchpriority="high">
        </div>
    </section>

    <section class="vn-section" aria-label="Product categories">
        <div class="vn-category-row">
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🥦</span>
                <span>Fruits &amp;<br>Vegetables</span>
            </a>
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🛒</span>
                <span>Grocery</span>
            </a>
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🥛</span>
                <span>Dairy &amp;<br>Bakery</span>
            </a>
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🧴</span>
                <span>Personal<br>Care</span>
            </a>
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🧼</span>
                <span>Household</span>
            </a>
            <a class="vn-category" href="#vn-products">
                <span class="vn-category-icon">🥤</span>
                <span>Beverages</span>
            </a>
        </div>
    </section>

    <section class="vn-photo-picks" aria-label="Fresh grocery photo picks">
        <div class="vn-photo-picks-head">
            <div>
                <h2>Fresh Picks for Your Home</h2>
                <p>Everyday grocery essentials, shown with product photos.</p>
            </div>
            <a class="vn-muted" href="<?= e(url('customer/search.php')) ?>">Explore All →</a>
        </div>

        <div class="vn-photo-grid">
            <article class="vn-photo-card">
                <a class="vn-photo-img tomatoes" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse fresh tomatoes"></a>
                <div class="vn-photo-info"><h3>Fresh Tomatoes</h3><p>Fresh vegetables</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
            <article class="vn-photo-card">
                <a class="vn-photo-img bananas" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse fresh bananas"></a>
                <div class="vn-photo-info"><h3>Fresh Bananas</h3><p>Daily fruit essentials</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
            <article class="vn-photo-card">
                <a class="vn-photo-img milk" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse milk and dairy"></a>
                <div class="vn-photo-info"><h3>Milk &amp; Dairy</h3><p>Everyday dairy</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
            <article class="vn-photo-card">
                <a class="vn-photo-img noodles" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse instant noodles"></a>
                <div class="vn-photo-info"><h3>Instant Noodles</h3><p>Quick pantry snacks</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
            <article class="vn-photo-card">
                <a class="vn-photo-img bread" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse bread and bakery"></a>
                <div class="vn-photo-info"><h3>Fresh Bread</h3><p>Bakery essentials</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
            <article class="vn-photo-card">
                <a class="vn-photo-img oil" href="<?= e(url('customer/search.php')) ?>" aria-label="Browse cooking oil"></a>
                <div class="vn-photo-info"><h3>Cooking Oil</h3><p>Kitchen essentials</p><a class="vn-photo-link" href="<?= e(url('customer/search.php')) ?>">Browse</a></div>
            </article>
        </div>
    </section>

    <section class="vn-section" id="vn-products">
        <div class="vn-section-title">
            <h2>Popular Products</h2>
            <a class="vn-muted" href="<?= e(url('customer/search.php')) ?>">
                View All →
            </a>
        </div>

        <?php if ($productError): ?>
            <div class="vn-empty">
                <h3>Products are temporarily unavailable</h3>
                <p>Please try again later.</p>
            </div>

        <?php elseif (!$products): ?>
            <div class="vn-empty">
                <h3>No products available yet</h3>
                <p>Please check back soon.</p>
            </div>

        <?php else: ?>
            <div class="vn-product-grid">
                <?php foreach ($products as $p): ?>
                    <?php
                    $id = (int) ($p['id'] ?? 0);
                    $name = (string) ($p['name'] ?? 'Product');
                    $emoji = (string) ($p['emoji'] ?? '🛍️');
                    $category = (string) ($p['category'] ?? 'Everyday essentials');
                    $price = (float) ($p['price'] ?? 0);
                    $oldPrice = (float) ($p['old_price'] ?? 0);
                    $productUrl = url('customer/product.php?id=' . $id);
                    $hasDiscount = $oldPrice > $price && $oldPrice > 0;
                    $discount = $hasDiscount
                        ? (int) round((($oldPrice - $price) / $oldPrice) * 100)
                        : 0;
                    ?>

                    <article class="vn-product">
                        <a class="vn-product-image"
                           href="<?= e($productUrl) ?>"
                           aria-label="<?= e($name) ?>">
                            <?php if ($hasDiscount): ?>
                                <span class="vn-discount">
                                    <?= $discount ?>% OFF
                                </span>
                            <?php endif; ?>
                            <?= e($emoji) ?>
                        </a>

                        <h3>
                            <a href="<?= e($productUrl) ?>">
                                <?= e($name) ?>
                            </a>
                        </h3>

                        <div class="vn-product-category">
                            <?= e($category) ?>
                        </div>

                        <div class="vn-price-row">
                            <span class="vn-price"><?= money($price) ?></span>
                            <?php if ($hasDiscount): ?>
                                <span class="vn-old-price">
                                    <?= money($oldPrice) ?>
                                </span>
                            <?php endif; ?>
                        </div>

                        <a class="vn-btn" href="<?= e($productUrl) ?>">
                            Add
                        </a>
                    </article>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </section>

</div>

<?php app_footer(); ?>
