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

<!-- =====================================inner banner============================== -->
<section class="inner-banner" role="region" aria-label="Page banner">
    <div class="inner-banner__overlay"></div>
    <div class="container">
        <div class="inner-banner__content">
            <h3>Products Details</h3>
            <img src="images/banner-4.jpg" alt="">
        </div>
    </div>
</section>

<!-- =====================================about us============================== -->

<section class="about-us product-details" data-aos="fade-up">
    <div class="container">
        <div class="row">
            <div class="productPageImgContainer col-md-6">
                <div class="productPageImagesBar">
                    <div class="image selected">
                        <img src="images/pro-1.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-2.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-3.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-4.jpg" alt="">
                    </div>
                </div>
                <div class="productPageFullImage">
                    <img src="images/pro-1.jpg" alt="">
                </div>
                <div class="imgDots">
                    <i class="fa-solid fa-circle selected"></i>
                    <i class="fa-solid fa-circle"></i>
                    <i class="fa-solid fa-circle"></i>
                    <i class="fa-solid fa-circle"></i>
                </div>
            </div>

            <div class="productPageInfoContainer col-md-6">
                <div class="productPageInfo">
                    <h3>Namkeen Shefali Nasta</h3>
                    <hr>
                    <!-- <div class="productPagePrice">
                        <span class="priceBefore">Rs. 2590/-</span>
                        <span class="priceAfter">Rs. 3899/-</span>
                    </div> -->
                    <!-- <div class="rating-box">
                        <span class="stars">
                            ★★★★★
                        </span>
                        <span class="rating-number">(5.0)</span>
                    </div> -->
                    <div class="price-box">
                        <div class="price">
                            ₹ 4.00 - 5.00 <span>/ piece</span>
                        </div>
                        <div class="moq">
                            20 Carton <span>(MOQ)</span>
                        </div>
                    </div>
                    <div class="productPageDescription">
                        <div class="add-read-more show-less-content">
                            <p>Namkeen Shefali Nasta is a deliciously crunchy and flavourful traditional Indian snack
                                that
                                brings together the authentic taste of spices with the perfect crispiness in every bite.
                                Specially crafted using premium quality ingredients, this tasty mixture is ideal for
                                everyday munching, tea-time snacks, or serving guests during festive occasions.</p>
                            <p>Prepared under hygienic conditions, Shefali Nasta delivers a balanced blend of savoury
                                flavours and satisfying crunch that makes it a favourite among all age groups. Its light
                                texture and rich seasoning offer a delightful snacking experience without feeling too
                                heavy
                                on the stomach.</p>
                        </div>
                    </div>

                    <table class="product-table">
                        <tr>
                            <td>Business Type</td>
                            <td>
                                <span class="pst-badge pst-badge-saffron">
                                    <span class="pst-badge-dot"></span>Manufacturer
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>Type</td>
                            <td>Tomato Chips</td>
                        </tr>
                        <tr>
                            <td>Application</td>
                            <td>Eating</td>
                        </tr>
                        <tr>
                            <td>Brand Name</td>
                            <td>
                                <span class="pst-badge pst-badge-red">
                                    <span class="pst-badge-dot"></span>Naughty Tongue
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>Features</td>
                            <td>
                                <span class="pst-badge pst-badge-green">
                                    <span class="pst-badge-dot"></span>No Preservatives Added
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>Country of Origin</td>
                            <td>🇮🇳 &nbsp;India</td>
                        </tr>
                        <tr>
                            <td>Style</td>
                            <td>Slice</td>
                        </tr>
                        <tr>
                            <td>Cultivation Type</td>
                            <td>Common</td>
                        </tr>
                    </table>

                    <div class="ing-footer">
                        <span class="ing-footer-icon">🌱</span>
                        <p class="ing-footer-text">
                            <strong>Ingridents -- </strong>Rosted Peanut, Black Salt.. Golmorich Powder.. Aadha Shoot.. Chat Masala
                        </p>
                    </div>

                    <div class="productPageQuantity">
                        <!-- <span class="subTitles">quantity</span> -->
                        <div class="btn-flex">
                            <!-- <div class="number-input">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                <input class="quantity" min="1" max="" name="quantity" value="1" type="number">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                    class="plus"></button>
                            </div> -->
                            <div class="productPageButton">
                                <button class="btn-gradient" onclick="racOpen()">
                                    <a href="javascript:void(0)">
                                        <div class="wave"></div>
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.64A2 2 0 012 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
                                        </svg>
                                        <span>Request a Call</span>
                                    </a>
                                </button>
                                <button class="button" id="enquiryBtn">Enquiry Now</button>
                            </div>
                        </div>
                        <!-- <div class="oq-wishlist-wrapper">
                            <a href="#" class="oq-wishlist-btn">
                                <span class="oq-wishlist-icon">&#9825;</span>
                                <span class="oq-wishlist-text">Add to wishlist</span>
                            </a>
                        </div> -->
                    </div>
                    <!-- <div class="productPageSize">
                        <span class="subTitles">size</span>
                        <div class="productSizes">
                            <span>XS</span>
                            <span>S</span>
                            <span>M</span>
                            <span>L</span>
                            <span>XL</span>
                        </div>
                    </div> -->
                    <!-- <div class="productPageColor">
                        <span class="subTitles">color</span>
                        <div class="colorsAvailable">
                            <span style="background-color: white;"></span>
                            <span style="background-color: black;"></span>
                            <span style="background-color: red;"></span>
                            <span style="background-color: blue;"></span>
                        </div>
                    </div> -->

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

<!-- =====================================Product List============================== -->
<section class="product-list">
    <div class="container">
        <div class="all-heading">
            <img src="images/heading.png" alt="">
            <h3 class="ml10">
                <span class="text-wrapper">
                    <span class="letters">Related Products</span>
                </span>
            </h3>
            <div class="line-png">
                <img src="images/heading-2.png" alt="">
            </div>
            <p class="ml12">Designed to elevate your outdoor lifestyle</p>
        </div>
        <div class="slider responsive">
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <!-- <span class="discount-badge">-10%</span> -->

                            <img src="images/pro-1.jpg" alt="Green Mator Natural Spicy">

                            <!-- <div class="hover-actions">
                                <i class="fas fa-heart action-btn"></i>
                                <i class="fas fa-shopping-cart action-btn"></i>
                            </div> -->

                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-2.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-3.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-4.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-5.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-6.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
            <div>
                <a href="product-details.php">
                    <div class="furniture-card">
                        <div class="furniture-image">
                            <img src="images/pro-7.jpg" alt="Green Mator Natural Spicy Bangali Aana">
                        </div>

                        <div class="furniture-details">
                            <h3>Green Mator Natural Spicy Bangali Aana</h3>
                        </div>
                        <button class="buy-now-btn">View More</button>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>




<!-- ── Modal ── -->
<div class="rac-overlay" id="racOverlay" onclick="racHandleOverlay(event)">
    <div class="rac-modal">

        <button class="rac-close" onclick="racClose()" aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
        </button>

        <!-- Form view -->
        <div id="racFormView">
            <div class="rac-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                    stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.64A2 2 0 012 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
                </svg>
            </div>
            <h2 class="rac-title">Request a Call</h2>
            <p class="rac-subtitle">Fill in your details and we'll call you back shortly.</p>

            <div class="rac-field">
                <label class="rac-label" for="racFirstName">Your Name</label>
                <input class="rac-input" type="text" id="racFirstName" placeholder="Enter Your Name" />
            </div>

            <div class="rac-field">
                <label class="rac-label" for="racPhone">Phone Number</label>
                <input class="rac-input" type="number" id="racPhone" placeholder="Enter Your Number" />
            </div>
            <!-- 
            <div class="rac-field">
                <label class="rac-label" for="racMessage">
                    Message <span class="rac-optional">(optional)</span>
                </label>
                <textarea class="rac-textarea" id="racMessage" placeholder="Briefly describe what you'd like to discuss…"></textarea>
            </div> -->

            <button class="rac-submit" onclick="racSubmit()">Request My Call →</button>
        </div>

        <!-- Success view -->
        <div class="rac-success" id="racSuccessView">
            <div class="rac-success-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                    stroke="#fff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                </svg>
            </div>
            <h3 class="rac-success-title">We'll be in touch!</h3>
            <p class="rac-success-text">Thanks for reaching out.<br>Our team will call you at your preferred time.</p>
        </div>

    </div>
</div>

<script>
    function racOpen() {
        document.getElementById('racOverlay').classList.add('rac-active');
        document.body.style.overflow = 'hidden';
    }

    function racClose() {
        document.getElementById('racOverlay').classList.remove('rac-active');
        document.body.style.overflow = '';
        setTimeout(() => {
            document.getElementById('racFormView').style.display = '';
            document.getElementById('racSuccessView').style.display = '';
        }, 350);
    }

    function racHandleOverlay(e) {
        if (e.target === document.getElementById('racOverlay')) racClose();
    }

    function racSubmit() {
        const phone = document.getElementById('racPhone').value.trim();
        const firstName = document.getElementById('racFirstName').value.trim();
        if (!firstName || !phone) {
            document.getElementById(firstName ? 'racPhone' : 'racFirstName').focus();
            return;
        }
        document.getElementById('racFormView').style.display = 'none';
        document.getElementById('racSuccessView').style.display = 'flex';
        setTimeout(racClose, 2800);
    }
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') racClose();
    });
</script>
<?php
include 'include/footer.php';
?>