@extends('layouts.app')

@section('content')

<style>

/* =========================================================
   VARIABLES
========================================================= */

.product-page {

    --navy: #173a59;
    --navy-dark: #102c44;
    --gold: #b38a45;
    --gold-light: #d3b273;
    --cream: #f7f5ef;
    --white: #ffffff;
    --text: #243b53;
    --muted: #777c80;
    --border: #e7e2d9;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--white);

}


/* =========================================================
   GLOBAL
========================================================= */

.product-page *,
.product-page *::before,
.product-page *::after {

    box-sizing: border-box;

}

.product-page img {

    max-width: 100%;

    display: block;

}

.product-page button,
.product-page select {

    font-family: inherit;

}

.container {

    width: min(1180px, calc(100% - 80px));

    margin: auto;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.page-breadcrumb {

    height: 330px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    color: #fff;

}

.breadcrumb-image {

    position: absolute;

    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1800&q=90");

    background-size: cover;

    background-position: center 42%;

    transform: scale(1.02);

}

.breadcrumb-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 34, 53, .92),
            rgba(16, 43, 67, .66),
            rgba(16, 43, 67, .30)
        );

}

.breadcrumb-content {

    position: relative;

    z-index: 2;

}

.breadcrumb-label {

    font-size: 9px;

    letter-spacing: 4px;

    color: var(--gold-light);

    margin-bottom: 16px;

}

.breadcrumb-content h1 {

    margin: 0 0 22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1;

    font-weight: 400;

}

.breadcrumb-content h1 span {

    color: #d4af67;

}

.breadcrumb-path {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 11px;

    letter-spacing: .5px;

}

.breadcrumb-path a {

    color: #fff;

    text-decoration: none;

}

.breadcrumb-path span {

    color: #d5b875;

}

.breadcrumb-path i {

    font-size: 8px;

    opacity: .7;

}


/* =========================================================
   INTRO
========================================================= */

.products-section {

    padding: 105px 0 95px;

}

.products-intro {

    text-align: center;

    max-width: 680px;

    margin: 0 auto 60px;

}

.section-eyebrow {

    color: var(--gold);

    font-size: 8px;

    letter-spacing: 3px;

    font-weight: 600;

    margin-bottom: 15px;

}

.products-intro h2 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--navy);

    font-size: clamp(36px, 4vw, 52px);

    font-weight: 400;

    line-height: 1.05;

}

.products-intro h2 em {

    color: var(--gold);

    font-style: normal;

}

.products-intro p {

    margin: 22px auto 0;

    max-width: 570px;

    color: #73777b;

    font-size: 12px;

    line-height: 2;

}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.category-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 55px;

}

.category-btn {

    border: 1px solid var(--border);

    background: #fff;

    color: #5e6469;

    padding: 12px 18px;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition: .3s ease;

}

.category-btn:hover {

    border-color: var(--gold);

    color: var(--gold);

}

.category-btn.active {

    background: var(--navy);

    border-color: var(--navy);

    color: #fff;

}


/* =========================================================
   TOOLBAR
========================================================= */

.products-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    padding: 18px 0;

    margin-bottom: 28px;

}

.products-result {

    color: #888;

    font-size: 10px;

    letter-spacing: .7px;

}

.products-result span {

    color: var(--navy);

    font-weight: 600;

}

.toolbar-right {

    display: flex;

    align-items: center;

    gap: 25px;

}

.sort-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

}

.sort-wrapper label {

    color: #888;

    font-size: 10px;

}

.sort-wrapper select {

    border: 0;

    outline: none;

    background: transparent;

    color: var(--navy);

    font-size: 10px;

    cursor: pointer;

}

.mobile-filter-btn {

    display: none;

}


/* =========================================================
   PRODUCT GRID
========================================================= */

.products-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px 16px;

}

.product-card {

    min-width: 0;

    background: #fff;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.product-card:hover {

    transform: translateY(-5px);

}

.product-image {

    position: relative;

    aspect-ratio: 1 / 1.12;

    overflow: hidden;

    background: #f0eee9;

}

.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .7s cubic-bezier(.2,.6,.3,1);

}

.product-card:hover .product-image img {

    transform: scale(1.055);

}

.product-badge {

    position: absolute;

    top: 13px;

    left: 13px;

    background: var(--navy);

    color: #fff;

    padding: 6px 9px;

    font-size: 7px;

    letter-spacing: 1px;

    z-index: 2;

}

.product-badge.new {

    background: var(--gold);

}

.wishlist-btn {

    position: absolute;

    top: 11px;

    right: 11px;

    width: 34px;

    height: 34px;

    border: 0;

    background: rgba(255,255,255,.94);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 2;

    color: var(--navy);

    transition: .3s;

}

.wishlist-btn:hover {

    color: #a44141;

}

.wishlist-btn.active {

    color: #a44141;

}

.add-to-bag {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    padding: 13px;
    border: 1px solid var(--gold);
    background: rgba(16,44,68,.96);
    color: #fff;
    font-size: 8px;
    letter-spacing: 2px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: .35s ease;
}

.product-card:hover .add-to-bag {
    opacity: 1;
    transform: translateY(0);
}

.add-to-bag:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.add-to-bag i {
    margin-right: 7px;
}

/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {

    padding: 17px 2px 7px;

}

.product-category {

    font-size: 7px;

    color: var(--gold);

    letter-spacing: 2px;

    margin-bottom: 7px;

}

.product-info h3 {

    margin: 0 0 7px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    color: var(--navy);

    font-weight: 400;

}

.rating {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 12px;

}

.rating span {

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 1px;

}

.rating small {

    color: #999;

    font-size: 8px;

}

.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.price {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--navy);

    font-size: 15px;

}

.enquiry-product {

    width: 35px;

    height: 35px;

    border: 1px solid var(--border);

    background: #fff;

    color: var(--navy);

    cursor: pointer;

    transition: .3s;

}

.enquiry-product:hover {

    background: var(--navy);

    color: #fff;

    border-color: var(--navy);

}


/* =========================================================
   NO PRODUCTS
========================================================= */

.no-products {

    display: none;

    text-align: center;

    padding: 80px 20px;

}

.no-products.show {

    display: block;

}

.no-products i {

    font-size: 35px;

    color: var(--gold);

    margin-bottom: 20px;

}

.no-products h3 {

    font-family: Georgia, serif;

    color: var(--navy);

    font-size: 25px;

    font-weight: 400;

}

.no-products p {

    color: #888;

    font-size: 12px;

}


/* =========================================================
   PAGINATION
========================================================= */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 70px;

}

.pagination button {

    width: 38px;

    height: 38px;

    border: 1px solid var(--border);

    background: #fff;

    color: var(--navy);

    font-size: 9px;

    cursor: pointer;

    transition: .3s;

}

.pagination button:hover,
.pagination button.active {

    background: var(--navy);

    color: #fff;

    border-color: var(--navy);

}

.pagination button.disabled {

    opacity: .4;

    pointer-events: none;

}

.pagination span {

    color: #aaa;

    padding: 0 5px;

}


/* =========================================================
   COLLECTION BANNER
========================================================= */

.collection-banner {

    min-height: 440px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    color: #fff;

}

.collection-banner-image {

    position: absolute;

    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=1800&q=90");

    background-size: cover;

    background-position: center;

}

.collection-banner-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,29,46,.95),
            rgba(14,43,67,.80),
            rgba(14,43,67,.35)
        );

}

.collection-banner .container {

    position: relative;

    z-index: 2;

}

.collection-banner-content {

    max-width: 500px;

}

.collection-banner-content h2 {

    font-family: Georgia, serif;

    font-size: clamp(40px, 5vw, 62px);

    line-height: 1;

    font-weight: 400;

    margin: 0 0 20px;

}

.collection-banner-content h2 em {

    color: #d0aa62;

    font-style: normal;

}

.collection-banner-content p {

    color: rgba(255,255,255,.72);

    font-size: 11px;

    line-height: 2;

    max-width: 430px;

    margin-bottom: 25px;

}

.gold-button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

    background: #c49b58;

    color: #fff;

    padding: 14px 19px;

    font-size: 8px;

    letter-spacing: 1.5px;

    transition: .3s;

}

.gold-button:hover {

    background: #fff;

    color: var(--navy);

}


/* =========================================================
   ADD TO BAG
========================================================= */

.add-to-bag {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    padding: 13px;
    border: 1px solid var(--gold);
    background: rgba(16,44,68,.96);
    color: #fff;
    font-size: 8px;
    letter-spacing: 2px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: .35s ease;
}

.product-card:hover .add-to-bag {
    opacity: 1;
    transform: translateY(0);
}

.add-to-bag:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.add-to-bag i {
    margin-right: 7px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .products-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .container {

        width: min(100% - 50px, 1180px);

    }

}


@media (max-width: 700px) {

    .container {

        width: calc(100% - 30px);

    }

    .page-breadcrumb {

        height: 260px;

    }

    .breadcrumb-content h1 {

        font-size: 43px;

    }

    .products-section {

        padding: 70px 0;

    }

    .products-intro {

        margin-bottom: 40px;

    }

    .products-intro h2 {

        font-size: 38px;

    }

    .category-navigation {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 10px;

        margin-left: -15px;

        margin-right: -15px;

        padding-left: 15px;

        padding-right: 15px;

    }

    .category-btn {

        white-space: nowrap;

    }

    .products-toolbar {

        padding: 15px 0;

    }

    .mobile-filter-btn {

        display: flex;

        align-items: center;

        gap: 7px;

        border: 1px solid var(--border);

        background: #fff;

        padding: 10px 12px;

        color: var(--navy);

        font-size: 9px;

    }

    .sort-wrapper label {

        display: none;

    }

    .products-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 28px 10px;

    }

    .product-image {

        aspect-ratio: 1 / 1.18;

    }

    .product-info {

        padding-top: 12px;

    }

    .product-info h3 {

        font-size: 14px;

    }

    .price {

        font-size: 13px;

    }
.collection-banner {

        min-height: 410px;

    }

    .collection-banner-content {

        padding: 30px 0;

    }
}


@media (max-width: 420px) {

    .products-grid {

        grid-template-columns: 1fr 1fr;

    }

    .product-badge {

        font-size: 6px;

        padding: 5px 6px;

    }

    .wishlist-btn {

        width: 30px;

        height: 30px;

    }

    .product-category {

        font-size: 6px;

    }

    .product-info h3 {

        font-size: 13px;

    }

    .rating span {

        font-size: 8px;

    }

    .rating small {

        display: none;

    }

}


/* =========================================================
   SMALL SCREEN IMAGE OPTIMIZATION
========================================================= */

@media (max-width: 500px) {

    .breadcrumb-image {

        background-position: 65% center;

    }

    .collection-banner-image {

        background-position: 65% center;

    }

}



</style>

<!-- =========================================================
     JEWELL EXCEL - PRODUCT LIST PAGE
     Header / Footer / Hero intentionally excluded
========================================================= -->

<section class="product-page">

    <!-- =====================================================
         BREADCRUMB
    ====================================================== -->
    <section class="page-breadcrumb">

        <div class="breadcrumb-image"></div>

        <div class="breadcrumb-overlay"></div>

        <div class="container breadcrumb-content">

            <div class="breadcrumb-label">
                JEWELL EXCEL
            </div>

            <h1>
                Our <span>Collection</span>
            </h1>

            <div class="breadcrumb-path">
                <a href="/">Home</a>
                <i class="fa-solid fa-angle-right"></i>
                <span>Products</span>
            </div>

        </div>

    </section>


    <!-- =====================================================
         PRODUCT CONTENT
    ====================================================== -->
    <section class="products-section">

        <div class="container">


            <!-- =================================================
                 INTRO
            ================================================== -->
            <div class="products-intro">

                <div class="section-eyebrow">
                    THE JEWELL EXCEL COLLECTION
                </div>

                <h2>
                    Jewellery designed<br>
                    <em>to shine.</em>
                </h2>

                <p>
                    Discover timeless jewellery crafted with precision,
                    elegance and contemporary sophistication. Explore
                    refined pieces designed to celebrate every meaningful
                    moment.
                </p>

            </div>


            <!-- =================================================
                 CATEGORY NAVIGATION
            ================================================== -->
            <div class="category-navigation">

                <button class="category-btn active"
                        data-category="all">
                    All Jewellery
                </button>

                <button class="category-btn"
                        data-category="rings">
                    Rings
                </button>

                <button class="category-btn"
                        data-category="necklaces">
                    Necklaces
                </button>

                <button class="category-btn"
                        data-category="earrings">
                    Earrings
                </button>

                <button class="category-btn"
                        data-category="bracelets">
                    Bracelets
                </button>

                <button class="category-btn"
                        data-category="bangles">
                    Bangles
                </button>

                <button class="category-btn"
                        data-category="pendants">
                    Pendants
                </button>

                <button class="category-btn"
                        data-category="watches">
                    Diamond Watches
                </button>

            </div>


            <!-- =================================================
                 TOOLBAR
            ================================================== -->
            <div class="products-toolbar">

                <div class="products-result">
                    <span id="productCount">12</span>
                    pieces found
                </div>


                <div class="toolbar-right">

                    <button class="mobile-filter-btn"
                            id="filterBtn">

                        <i class="fa-solid fa-sliders"></i>

                        Filter

                    </button>


                    <div class="sort-wrapper">

                        <label for="sortProducts">
                            Sort by
                        </label>

                        <select id="sortProducts">

                            <option value="featured">
                                Featured
                            </option>

                            <option value="low">
                                Price: Low to High
                            </option>

                            <option value="high">
                                Price: High to Low
                            </option>

                            <option value="new">
                                Newest
                            </option>

                        </select>

                    </div>

                </div>

            </div>


            <!-- =================================================
                 PRODUCTS GRID
            ================================================== -->
            <div class="products-grid"
                 id="productsGrid">


                <!-- PRODUCT 01 -->
                <!-- PRODUCT 01 -->
                <article class="product-card"
                         data-category="rings"
                         data-price="148900"
                         data-new="4">
                
                    <div class="product-image">
                
                        <a href="{{ url('/product-details') }}"
                           class="product-link"
                           aria-label="View Classic Solitaire">
                
                            <img
                                src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=85"
                                alt="Classic Solitaire Ring"
                                loading="lazy">
                
                        </a>
                
                        <span class="product-badge">
                            BESTSELLER
                        </span>
                
                        <!--<button class="wishlist-btn"
                                aria-label="Add to wishlist">
                
                            <i class="fa-regular fa-heart"></i>
                
                        </button>-->
                
                        <button class="add-to-bag"
                                data-name="Classic Solitaire"
                                data-price="₹1,48,900">
                
                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG
                
                        </button>
                
                    </div>
                
                    <div class="product-info">
                
                        <div class="product-category">
                            RINGS
                        </div>
                
                        <h3>
                            <a href="{{ url('/product-details/1') }}"
                               class="product-title-link">
                                Classic Solitaire
                            </a>
                        </h3>
                
                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(24)</small>
                        </div>
                
                        <div class="product-bottom">
                
                            <div class="price">
                                ₹1,48,900
                            </div>
                
                            <button class="enquiry-product"
                                    data-product="Classic Solitaire">
                
                                <i class="fa-regular fa-message"></i>
                
                            </button>
                
                        </div>
                
                    </div>
                
                </article>


                <!-- PRODUCT 02 -->
                <article class="product-card"
                         data-category="necklaces"
                         data-price="72500"
                         data-new="6">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=900&q=85"
                            alt="Signature Gold Necklace"
                            loading="lazy">

                        <span class="product-badge new">
                            NEW
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Signature Gold"
                                data-price="₹72,500">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            NECKLACES
                        </div>

                        <h3>
                            Signature Gold
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(18)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹72,500
                            </div>

                            <button class="enquiry-product"
                                    data-product="Signature Gold">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 03 -->
                <article class="product-card"
                         data-category="earrings"
                         data-price="23900"
                         data-new="8">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1635767798638-3e25273a8236?auto=format&fit=crop&w=900&q=85"
                            alt="Pearl Drop Earrings"
                            loading="lazy">

                        <span class="product-badge">
                            POPULAR
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Pearl Drop"
                                data-price="₹23,900">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            EARRINGS
                        </div>

                        <h3>
                            Pearl Drop
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(31)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹23,900
                            </div>

                            <button class="enquiry-product"
                                    data-product="Pearl Drop">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 04 -->
                <article class="product-card"
                         data-category="bracelets"
                         data-price="58400"
                         data-new="7">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=900&q=85"
                            alt="Heritage Gold Bracelet"
                            loading="lazy">

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Heritage Gold"
                                data-price="₹58,400">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            BRACELETS
                        </div>

                        <h3>
                            Heritage Gold
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(12)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹58,400
                            </div>

                            <button class="enquiry-product"
                                    data-product="Heritage Gold">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 05 -->
                <article class="product-card"
                         data-category="rings"
                         data-price="92300"
                         data-new="3">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1627293509201-cd2c46f9b3b5?auto=format&fit=crop&w=900&q=85"
                            alt="Emerald Halo Ring"
                            loading="lazy">

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Emerald Halo"
                                data-price="₹92,300">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            RINGS
                        </div>

                        <h3>
                            Emerald Halo
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(17)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹92,300
                            </div>

                            <button class="enquiry-product"
                                    data-product="Emerald Halo">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 06 -->
                <article class="product-card"
                         data-category="pendants"
                         data-price="28700"
                         data-new="5">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&q=85"
                            alt="Minimal Pendant"
                            loading="lazy">

                        <span class="product-badge new">
                            NEW
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Minimal Pendant"
                                data-price="₹28,700">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            PENDANTS
                        </div>

                        <h3>
                            Minimal Pendant
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(29)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹28,700
                            </div>

                            <button class="enquiry-product"
                                    data-product="Minimal Pendant">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 07 -->
                <article class="product-card"
                         data-category="earrings"
                         data-price="29600"
                         data-new="2">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=85"
                            alt="Diamond Studs"
                            loading="lazy">

                        <span class="product-badge">
                            BESTSELLER
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Diamond Studs"
                                data-price="₹29,600">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            EARRINGS
                        </div>

                        <h3>
                            Diamond Studs
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(42)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹29,600
                            </div>

                            <button class="enquiry-product"
                                    data-product="Diamond Studs">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 08 -->
                <article class="product-card"
                         data-category="bracelets"
                         data-price="64900"
                         data-new="1">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=900&q=85"
                            alt="Classic Chain Bracelet"
                            loading="lazy">

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Classic Chain"
                                data-price="₹64,900">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            BRACELETS
                        </div>

                        <h3>
                            Classic Chain
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(21)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹64,900
                            </div>

                            <button class="enquiry-product"
                                    data-product="Classic Chain">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 09 -->
                <article class="product-card"
                         data-category="bangles"
                         data-price="48700"
                         data-new="9">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1619119069152-a2b331eb392a?auto=format&fit=crop&w=900&q=85"
                            alt="Contemporary Gold Bangle"
                            loading="lazy">

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Contemporary Bangle"
                                data-price="₹48,700">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            BANGL ES
                        </div>

                        <h3>
                            Contemporary Bangle
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(14)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹48,700
                            </div>

                            <button class="enquiry-product"
                                    data-product="Contemporary Bangle">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 10 -->
                <article class="product-card"
                         data-category="necklaces"
                         data-price="98500"
                         data-new="10">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1599643477877-530eb83abc8e?auto=format&fit=crop&w=900&q=85"
                            alt="Pearl Heritage Necklace"
                            loading="lazy">

                        <span class="product-badge">
                            PREMIUM
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Pearl Heritage"
                                data-price="₹98,500">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            NECKLACES
                        </div>

                        <h3>
                            Pearl Heritage
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(19)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹98,500
                            </div>

                            <button class="enquiry-product"
                                    data-product="Pearl Heritage">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 11 -->
                <article class="product-card"
                         data-category="rings"
                         data-price="125000"
                         data-new="11">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=900&q=85"
                            alt="Royal Diamond Ring"
                            loading="lazy">

                        <span class="product-badge new">
                            EXCLUSIVE
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Royal Diamond"
                                data-price="₹1,25,000">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            RINGS
                        </div>

                        <h3>
                            Royal Diamond
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(36)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹1,25,000
                            </div>

                            <button class="enquiry-product"
                                    data-product="Royal Diamond">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>


                <!-- PRODUCT 12 -->
                <article class="product-card"
                         data-category="watches"
                         data-price="189000"
                         data-new="12">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?auto=format&fit=crop&w=900&q=85"
                            alt="Luxury Diamond Watch"
                            loading="lazy">

                        <span class="product-badge">
                            LUXURY
                        </span>

                        <!--<button class="wishlist-btn">-->

                        <!--    <i class="fa-regular fa-heart"></i>-->

                        <!--</button>-->

                        <button class="add-to-bag"
                                data-name="Diamond Heritage Watch"
                                data-price="₹1,89,000">

                            <i class="fa-solid fa-bag-shopping"></i>
                            ADD TO BAG

                        </button>

                    </div>

                    <div class="product-info">

                        <div class="product-category">
                            DIAMOND WATCHES
                        </div>

                        <h3>
                            Diamond Heritage Watch
                        </h3>

                        <div class="rating">
                            <span>★★★★★</span>
                            <small>(9)</small>
                        </div>

                        <div class="product-bottom">

                            <div class="price">
                                ₹1,89,000
                            </div>

                            <button class="enquiry-product"
                                    data-product="Diamond Heritage Watch">

                                <i class="fa-regular fa-message"></i>

                            </button>

                        </div>

                    </div>

                </article>

            </div>


            <!-- =================================================
                 NO RESULTS
            ================================================== -->
            <div class="no-products"
                 id="noProducts">

                <i class="fa-regular fa-gem"></i>

                <h3>
                    No jewellery found
                </h3>

                <p>
                    Please try another category.
                </p>

            </div>


            <!-- =================================================
                 PAGINATION
            ================================================== -->
            <div class="pagination">

                <button class="pagination-arrow disabled">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>

                <button class="page-number active">
                    01
                </button>

                <button class="page-number">
                    02
                </button>

                <button class="page-number">
                    03
                </button>

                <span>
                    ...
                </span>

                <button class="page-number">
                    08
                </button>

                <button class="pagination-arrow">
                    <i class="fa-solid fa-arrow-right"></i>
                </button>

            </div>


        </div>

    </section>


    <!-- =====================================================
         COLLECTION CTA
    ====================================================== -->
    <section class="collection-banner">

        <div class="collection-banner-image"></div>

        <div class="collection-banner-overlay"></div>

        <div class="container">

            <div class="collection-banner-content">

                <div class="section-eyebrow">
                    DISCOVER THE COLLECTION
                </div>

                <h2>
                    Jewellery that tells<br>
                    <em>your story.</em>
                </h2>

                <p>
                    From understated elegance to statement pieces,
                    discover jewellery created to become part of
                    your most memorable moments.
                </p>

                <a href="#products"
                   class="gold-button">

                    EXPLORE COLLECTION

                    <i class="fa-solid fa-arrow-right"></i>

                </a>

            </div>

        </div>

    </section>

</section>

<script>

/* =========================================================
   PRODUCT LIST JAVASCRIPT
========================================================= */

document.addEventListener("DOMContentLoaded", function () {


    const productGrid =
        document.getElementById("productsGrid");

    const products =
        Array.from(
            document.querySelectorAll(".product-card")
        );

    const categoryButtons =
        document.querySelectorAll(".category-btn");

    const productCount =
        document.getElementById("productCount");

    const noProducts =
        document.getElementById("noProducts");

    const sortSelect =
        document.getElementById("sortProducts");

    /* Restore cart count from localStorage */
    const cartCount = document.getElementById("cartCount");
    if (cartCount) {
        try {
            const savedCart = JSON.parse(localStorage.getItem("jewellExcelCart") || "[]");
            const savedTotal = savedCart.reduce(function (total, item) {
                return total + (Number(item.quantity) || 1);
            }, 0);
            cartCount.textContent = savedTotal;
        } catch (error) {
            cartCount.textContent = "0";
        }
    }


    /* =====================================================
       CATEGORY FILTER
    ====================================================== */

    categoryButtons.forEach(function (button) {

        button.addEventListener("click", function () {

            categoryButtons.forEach(function (btn) {

                btn.classList.remove("active");

            });

            this.classList.add("active");

            const category =
                this.dataset.category;

            let visibleCount = 0;

            products.forEach(function (product) {

                const productCategory =
                    product.dataset.category;

                if (
                    category === "all" ||
                    productCategory === category
                ) {

                    product.style.display = "";

                    visibleCount++;

                } else {

                    product.style.display = "none";

                }

            });

            productCount.textContent =
                visibleCount;

            if (visibleCount === 0) {

                noProducts.classList.add("show");

            } else {

                noProducts.classList.remove("show");

            }

        });

    });


    /* =====================================================
       SORTING
    ====================================================== */

    sortSelect.addEventListener(
        "change",
        function () {

            const value = this.value;

            const sortedProducts =
                [...products];

            if (value === "low") {

                sortedProducts.sort(function (a, b) {

                    return (
                        Number(a.dataset.price) -
                        Number(b.dataset.price)
                    );

                });

            }

            else if (value === "high") {

                sortedProducts.sort(function (a, b) {

                    return (
                        Number(b.dataset.price) -
                        Number(a.dataset.price)
                    );

                });

            }

            else if (value === "new") {

                sortedProducts.sort(function (a, b) {

                    return (
                        Number(b.dataset.new) -
                        Number(a.dataset.new)
                    );

                });

            }

            else {

                sortedProducts.sort(function (a, b) {

                    return (
                        Number(a.dataset.new) -
                        Number(b.dataset.new)
                    );

                });

            }


            sortedProducts.forEach(function (product) {

                productGrid.appendChild(product);

            });

        }
    );


    /* =====================================================
       WISHLIST
    ====================================================== */
    /*
    document
        .querySelectorAll(".wishlist-btn")
        .forEach(function (button) {

            button.addEventListener(
                "click",
                function () {

                    const icon =
                        this.querySelector("i");

                    this.classList.toggle("active");

                    if (
                        this.classList.contains("active")
                    ) {

                        icon.classList.remove(
                            "fa-regular"
                        );

                        icon.classList.add(
                            "fa-solid"
                        );

                        showProductToast(
                            "Added to your wishlist"
                        );

                    } else {

                        icon.classList.remove(
                            "fa-solid"
                        );

                        icon.classList.add(
                            "fa-regular"
                        );

                    }

                }
            );

        });
    */

    /* =====================================================
       ADD TO BAG
    ====================================================== */

    document
        .querySelectorAll(".add-to-bag")
        .forEach(function (button) {

            button.addEventListener("click", function () {

                const productName = this.dataset.name || "Jewellery";
                const productPrice = this.dataset.price || "₹0";

                let cart = [];

                try {
                    cart = JSON.parse(localStorage.getItem("jewellExcelCart") || "[]");
                } catch (error) {
                    cart = [];
                }

                const existingItem = cart.find(function (item) {
                    return item.name === productName && item.price === productPrice;
                });

                if (existingItem) {
                    existingItem.quantity = (existingItem.quantity || 1) + 1;
                } else {
                    cart.push({
                        name: productName,
                        price: productPrice,
                        quantity: 1
                    });
                }

                localStorage.setItem("jewellExcelCart", JSON.stringify(cart));

                const cartCount = document.getElementById("cartCount");
                if (cartCount) {
                    const totalItems = cart.reduce(function (total, item) {
                        return total + (Number(item.quantity) || 1);
                    }, 0);

                    cartCount.textContent = totalItems;
                }

                const originalHtml = this.innerHTML;
                this.innerHTML = '<i class="fa-solid fa-check"></i> ADDED TO BAG';
                this.classList.add("added");

                showProductToast(productName + " added to your bag");

                const currentButton = this;
                setTimeout(function () {
                    currentButton.innerHTML = originalHtml;
                    currentButton.classList.remove("added");
                }, 1600);
            });
        });


    /* =====================================================
       ENQUIRY BUTTON
    ====================================================== */

    document
        .querySelectorAll(".enquiry-product")
        .forEach(function (button) {

            button.addEventListener(
                "click",
                function () {

                    const product =
                        this.dataset.product;

                    showProductToast(
                        "Enquiry selected for " +
                        product
                    );

                }
            );

        });


    /* =====================================================
       MOBILE FILTER
    ====================================================== */

    const filterBtn =
        document.getElementById(
            "filterBtn"
        );

    filterBtn.addEventListener(
        "click",
        function () {

            const category =
                document.querySelector(
                    ".category-navigation"
                );

            category.scrollIntoView({
                behavior: "smooth",
                block: "center"
            });

        }
    );


    /* =====================================================
       TOAST
    ====================================================== */

    function showProductToast(message) {

        let toast =
            document.getElementById(
                "productToast"
            );

        if (!toast) {

            toast =
                document.createElement(
                    "div"
                );

            toast.id =
                "productToast";

            toast.style.position =
                "fixed";

            toast.style.bottom =
                "25px";

            toast.style.left =
                "50%";

            toast.style.transform =
                "translateX(-50%)";

            toast.style.background =
                "#102c44";

            toast.style.color =
                "#fff";

            toast.style.padding =
                "13px 22px";

            toast.style.fontSize =
                "10px";

            toast.style.letterSpacing =
                "1px";

            toast.style.zIndex =
                "10000";

            toast.style.boxShadow =
                "0 10px 35px rgba(0,0,0,.2)";

            document.body.appendChild(
                toast
            );

        }

        toast.textContent =
            message;

        toast.style.opacity =
            "1";

        clearTimeout(
            window.productToastTimer
        );

        window.productToastTimer =
            setTimeout(function () {

                toast.style.opacity =
                    "0";

            }, 2500);

    }

});

</script>
@endsection