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

// ================= FILTER LOGIC =================
$where = [];
$category_filter = $_GET['category'] ?? '';
$min_price = $_GET['min'] ?? '';
$max_price = $_GET['max'] ?? '';

// CATEGORY
if($category_filter){
    $where[] = "category_id = '".intval($category_filter)."'";
}

// PRICE
if($min_price){
    $where[] = "price >= '".intval($min_price)."'";
}
if($max_price){
    $where[] = "price <= '".intval($max_price)."'";
}

// FINAL QUERY
$whereSQL = count($where) ? "WHERE ".implode(" AND ", $where) : "";

// PRODUCTS
$result = $conn->query("
    SELECT p.*, 
    (SELECT image_name FROM product_images 
     WHERE product_id = p.id LIMIT 1) as hover_image
    FROM products p
    $whereSQL
    ORDER BY p.id DESC
");

// PRICE RANGE
$priceData = $conn->query("
    SELECT MIN(price) as min_price, MAX(price) as max_price FROM products
")->fetch_assoc();

// CATEGORY LIST
$categories = $conn->query("SELECT * FROM category");
?>
<!-- CATEGORY SLIDER -->
<div class="category-wrapper">
    <div class="category">
        <img src="https://mbmcrystals.com/cdn/shop/files/CitrineCluster.heic?v=1759473573&width=140" />
        <p>CITRINE</p>
    </div>

    <div class="category">
        <img src="https://mbmcrystals.com/cdn/shop/files/Rose-Quartz-rock.png?v=1759818834&width=140" />
        <p>ROSE QUARTZ</p>
    </div>

    <div class="category">
        <img src="https://mbmcrystals.com/cdn/shop/files/Amethyst.png?v=1759817383&width=140" />
        <p>AMETHYST</p>
    </div>

    <div class="category">
        <img src="https://mbmcrystals.com/cdn/shop/files/Pyrite.jpg?v=1755259753&width=140" />
        <p>PYRITE</p>
    </div>

    <div class="category">
        <img src="https://mbmcrystals.com/cdn/shop/files/a-symbol-signifying-zodiac-signs.png?v=1760092511&width=140" />
        <p>ZODIAC</p>
    </div>
</div>

<div class="hero">
    <video autoplay muted loop playsinline class="hero-video">
        <source src="banner.mp4" type="video/mp4" />
    </video>
    <!-- 
      <div class="hero-text">Feel the Shift</div> -->
</div>

<section class="promise-section">
    <h2>Our Promise to You</h2>

    <div class="promise-container">
        <div class="promise-box">
            <img src="https://mbmcrystals.com/cdn/shop/files/Authentic.png?v=1755604400&width=150" />
            <p>Authentic Crystals Guaranteed</p>
        </div>

        <div class="promise-box">
            <img src="https://mbmcrystals.com/cdn/shop/files/Shipping.png?v=1755604401&width=150" />
            <p>Free Shipping on all orders</p>
        </div>

        <div class="promise-box">
            <img src="https://mbmcrystals.com/cdn/shop/files/Handcrafted.png?v=1755604400&width=150" />
            <p>Handcrafted with Love</p>
        </div>

        <div class="promise-box">
            <img src="https://mbmcrystals.com/cdn/shop/files/Packaging.png?v=1755604401&width=150" />
            <p>Eco-friendly Packaging</p>
        </div>
    </div>
</section>

<section class="shop-category">
    <h2>Shop by Category</h2>

    <div class="category-grid">
        <div class="cat-card">
            <img
                src="https://mbmcrystals.com/cdn/shop/files/7_chakra_protection_Nazar_Bracelet.jpg?v=1755856547&width=400" />
            <h3>Bracelets</h3>
            <p>Browse →</p>
        </div>

        <div class="cat-card">
            <img src="https://mbmcrystals.com/cdn/shop/files/Red_Jasper_Pendant.jpg?v=1755254400&width=400" />
            <h3>Pendants</h3>
            <p>Browse →</p>
        </div>

        <div class="cat-card">
            <img src="https://mbmcrystals.com/cdn/shop/files/Citrine_Cluster.heic?v=1755856502&width=400" />
            <h3>For Home</h3>
            <p>Browse →</p>
        </div>

        <div class="cat-card">
            <img src="https://mbmcrystals.com/cdn/shop/files/mbm2.png?v=1737063211&width=400" />
            <h3>Books & Cards</h3>
            <p>Browse →</p>
        </div>
    </div>
</section>
<section class="testimonial-section text-center">
    <h2>15,000+ Happy Customers</h2>
    <div class="stars">★★★★★ <span>5.00 (17) ✔ Verified</span></div>

    <!-- TESTIMONIAL BOX -->
    <div class="testimonial-box" data-bs-toggle="modal" data-bs-target="#reviewModal">
        <p class="quote">“</p>
        <h4 id="reviewText">Hi, Neelam....</h4>
        <div class="stars green">★★★★★</div>
        <p id="reviewName">Anonymous</p>
        <a href="#">MBM Crystals</a>
    </div>
</section>

<!-- MODAL -->
<div class="modal fade" id="reviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content p-4">
            <div class="d-flex justify-content-between">
                <div class="stars green">★★★★★</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <h5 class="mt-3">paramita Bhattacharjee</h5>
            <small>11/29/2025</small>

            <h4 class="mt-3">Crystal</h4>
            <p>Very good product.. with a perfect price 😊..</p>

            <div class="bg-light p-3 mt-3">
                <a href="#">MBM Crystals</a>
            </div>
        </div>
    </div>
</div>
<section class="bestseller container py-5">
    <h2 class="mb-4">Our Bestsellers</h2>
    <div class="row g-4">

        <?php if($result && $result->num_rows > 0): ?>
        <?php while($row = $result->fetch_assoc()): ?>

        <div class="col-md-3 col-6">
            <div class="product-card">

                <div class="product-image-box">

                    <a href="product/<?= $row['slug'] ?>">
                        <!-- MAIN IMAGE -->
                        <?php if(!empty($row['pro_image']) && file_exists("assets/images/products/".$row['pro_image'])): ?>
                        <img src="assets/images/products/<?= $row['pro_image'] ?>" class="main-img">
                        <?php else: ?>
                        <img src="https://via.placeholder.com/300x300" class="main-img">
                        <?php endif; ?>

                        <!-- HOVER IMAGE -->
                        <?php if(!empty($row['hover_image']) && file_exists("assets/images/products/gallery/".$row['hover_image'])): ?>
                        <img src="assets/images/products/gallery/<?= $row['hover_image'] ?>" class="hover-img">
                        <?php endif; ?>

                        <!-- DISCOUNT -->
                        <?php if(!empty($row['sale_price']) && $row['price'] > $row['sale_price']): ?>
                        <div class="sale-badge">
                            Rs. <?= $row['price'] - $row['sale_price'] ?> off
                        </div>
                        <?php endif; ?>
                    </a>

                </div>
                <p class="mt-2">
                    <a href="product/<?= $row['slug'] ?>" style="text-decoration:none;color:black;">
                        <?= htmlspecialchars($row['pro_title']) ?>
                    </a>
                </p>
                <div>
                    <?php if(!empty($row['sale_price']) && $row['price'] > $row['sale_price']): ?>
                    <span class="old-price">Rs. <?= $row['price'] ?></span>
                    <span class="new-price"> Rs. <?= $row['sale_price'] ?></span>
                    <?php else: ?>
                    <span class="new-price">Rs. <?= $row['price'] ?></span>
                    <?php endif; ?>
                </div>

                <button class="cart-btn mt-2">Add to cart</button>

            </div>
        </div>

        <?php endwhile; ?>
        <?php else: ?>
        <div class="col-12 text-center">
            <p>No products found</p>
        </div>
        <?php endif; ?>

    </div>
</section>
<section class="intention-section">
    <div class="container">
        <h2>Choose Crystals Based on Your Intention</h2>

        <div class="row g-3 mt-4">
            <!-- ITEM 1 -->
            <div class="col-6 col-md-3">
                <div class="intent-card">
                    <img
                        src="https://mbmcrystals.com/cdn/shop/files/Relationship_d7848872-1b10-4ccc-87cd-07354cd8b1f3.png?v=1755604401&width=150" />
                    <h4>Love & Relationship</h4>
                    <p>Browse →</p>
                </div>
            </div>

            <!-- ITEM 2 -->
            <div class="col-6 col-md-3">
                <div class="intent-card">
                    <img src="https://mbmcrystals.com/cdn/shop/files/Prosperity.png?v=1755604401&width=150" />
                    <h4>Abundance & Prosperity</h4>
                    <p>Browse →</p>
                </div>
            </div>

            <!-- ITEM 3 -->
            <div class="col-6 col-md-3">
                <div class="intent-card">
                    <img src="https://mbmcrystals.com/cdn/shop/files/Healing.png?v=1755604400&width=150" />
                    <h4>Balance & Grounding</h4>
                    <p>Browse →</p>
                </div>
            </div>

            <!-- ITEM 4 -->
            <div class="col-6 col-md-3">
                <div class="intent-card">
                    <img src="https://mbmcrystals.com/cdn/shop/files/Protection.png?v=1755604400&width=150" />
                    <h4>Energy & Vitality</h4>
                    <p>Browse →</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="media-section">
    <div class="  text-center">
        <p class="top-text">Over 15,000+ Happy Customers</p>

        <!-- Single static image -->
        <img src="https://mbmcrystals.com/cdn/shop/files/Banner.png?v=1756284340&width=1500" alt="Happy Customers" class="fixed-image" />
    </div>
</section>

<section class="about-founder">
    <div class="container">
        <div class="row align-items-center position-relative">

            <!-- IMAGE -->
            <div class="col-md-4">
                <div class="img-wrap">
                    <img src="https://mbmcrystals.com/cdn/shop/files/WhatsApp_Image_2025-08-22_at_15.27.44.jpg?v=1755856911&width=900"
                        class="founder-img" />
                </div>
            </div>

            <!-- CONTENT (OVER IMAGE) -->
            <div class="col-md-8">
                <div class="content-box">
                    <h2>Meet Neelam, Your Healing Guide</h2>

                    <p>
                        Hi, I'm Neelam, founder of MBM Crystals. Today, I'm honored to
                        have provided
                        <b>tarot guidance to over 5,000 clients across 30+ countries</b>,
                        helping them find clarity and purpose.
                    </p>

                    <p>
                        This work, combining ancient crystal wisdom with intuitive tarot,
                        has been recognized by publications like The Times of India and
                        awarded "Spiritual Visionary".
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

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