@extends('layouts.app')

@section('title', 'Jewel Excel')

@section('content')

<main>

    <!-- =========================
         HERO
    ========================== -->

    <section class="hero"
             id="home">

        <div class="container">

            <div class="hero-content">

                <div class="eyebrow">
                    The Fine Jewellery Collection
                </div>

                <h1>
                    Crafted for
                    <span>Every</span>
                    Moment.
                </h1>

                <p class="hero-description">
                    Discover refined jewellery designed with
                    precision, timeless proportions and a quiet
                    sense of luxury. Pieces made to become part
                    of your story.
                </p>

                <div class="hero-buttons">

                    <a href="#new-arrivals"
                       class="btn-primary">

                        Explore Collection

                    </a>

                    <!--<a href="#collections"-->
                    <!--   class="btn-outline">-->

                    <!--    View Categories-->

                    <!--</a>-->

                </div>

            </div>

        </div>


        <div class="hero-badge">

            <div>

                Since

                <strong>
                    1998
                </strong>

                <span>
                    Fine Craftsmanship
                </span>

            </div>

        </div>

    </section>


    <!-- =========================
         TRUST BAR
    ========================== -->

    <section class="trust-bar">

        <div class="container">

            <div class="trust-grid">

                <div class="trust-item">

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

                    <div>

                        <strong>
                            Certified Jewellery
                        </strong>

                        <small>
                            Authentic & verified
                        </small>

                    </div>

                </div>


                <div class="trust-item">

                    <i class="fa-solid fa-shield-halved"></i>

                    <div>

                        <strong>
                            Secure Payments
                        </strong>

                        <small>
                            100% protected checkout
                        </small>

                    </div>

                </div>


                <div class="trust-item">

                    <i class="fa-solid fa-truck-fast"></i>

                    <div>

                        <strong>
                            Insured Delivery
                        </strong>

                        <small>
                            Safe doorstep delivery
                        </small>

                    </div>

                </div>


                <div class="trust-item">

                    <i class="fa-solid fa-rotate-left"></i>

                    <div>

                        <strong>
                            Easy Returns
                        </strong>

                        <small>
                            Simple return process
                        </small>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================
         COLLECTIONS
    ========================== -->

    <section class="section"
             id="collections">

        <div class="container">

            <div class="section-header">

                <div class="section-label">
                    Explore the collection
                </div>

                <h2 class="section-title">
                    Jewellery,
                    beautifully considered.
                </h2>

                <p class="section-description">
                    From understated everyday pieces to
                    statement designs, discover collections
                    created to complement every occasion.
                </p>

            </div>


            <div class="category-grid">


                <!-- Necklace -->

                <article class="category-card large">

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

                    <div class="category-content">

                        <span>
                            Collection 01
                        </span>

                        <h3>
                            Necklaces
                        </h3>

                        <a href="#new-arrivals"
                           onclick="filterProducts('necklaces')">

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

                        </a>

                    </div>

                </article>


                <!-- Rings -->

                <article class="category-card">

                    <img
                        src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=85"
                        alt="Diamond ring">

                    <div class="category-content">

                        <span>
                            Collection 02
                        </span>

                        <h3>
                            Rings
                        </h3>

                        <a href="#new-arrivals"
                           onclick="filterProducts('rings')">

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

                        </a>

                    </div>

                </article>


                <!-- Earrings -->

                <article class="category-card">

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

                    <div class="category-content">

                        <span>
                            Collection 03
                        </span>

                        <h3>
                            Earrings
                        </h3>

                        <a href="#new-arrivals"
                           onclick="filterProducts('earrings')">

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

                        </a>

                    </div>

                </article>


                <!-- Bracelets -->

                <article class="category-card">

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

                    <div class="category-content">

                        <span>
                            Collection 04
                        </span>

                        <h3>
                            Bracelets
                        </h3>

                        <a href="#new-arrivals"
                           onclick="filterProducts('bracelets')">

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

                        </a>

                    </div>

                </article>

            </div>

        </div>

    </section>


    <!-- =========================
         PRODUCTS
    ========================== -->

    <section class="section section-light"
             id="new-arrivals">

        <div class="container">

            <div class="section-header">

                <div class="section-label">
                    Curated for you
                </div>

                <h2 class="section-title">
                    Signature Pieces
                </h2>

                <p class="section-description">
                    A selection of refined designs created
                    for modern wardrobes and timeless occasions.
                </p>

            </div>


            <div class="product-toolbar">

                <span class="product-count"
                      id="productCount">

                    Showing 8 pieces

                </span>


                <div class="filter-buttons">

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

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

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

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

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

                </div>

            </div>


            <div class="product-grid"
                 id="productGrid">


                <!-- Product 1 -->

                <article class="product-card"
                         data-category="rings">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=800&q=85"
                            alt="Classic Solitaire Ring">

                        <span class="product-tag">
                            Bestseller
                        </span>

                        <!--<button class="product-wishlist"-->
                        <!--        aria-label="Add to wishlist">-->

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Classic Solitaire
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹48,900
                        </div>

                    </div>

                </article>


                <!-- Product 2 -->

                <article class="product-card"
                         data-category="necklaces">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=85"
                            alt="Signature Gold Necklace">

                        <span class="product-tag">
                            New
                        </span>

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Signature Gold
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

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

                    </div>

                </article>


                <!-- Product 3 -->

                <article class="product-card"
                         data-category="earrings">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=800&q=85"
                            alt="Pearl Drop Earrings">

                        <span class="product-tag">
                            New
                        </span>

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Pearl Drop
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹31,800
                        </div>

                    </div>

                </article>


                <!-- Product 4 -->

                <article class="product-card"
                         data-category="bracelets">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=800&q=85"
                            alt="Heritage Gold Bracelet">

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Heritage Gold
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹56,400
                        </div>

                    </div>

                </article>


                <!-- Product 5 -->

                <article class="product-card"
                         data-category="rings">

                    <div class="product-image">

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

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Emerald Halo
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹62,900
                        </div>

                    </div>

                </article>


                <!-- Product 6 -->

                <article class="product-card"
                         data-category="necklaces">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=800&q=85"
                            alt="Minimal Gold Pendant">

                        <span class="product-tag">
                            New
                        </span>

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Minimal Pendant
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

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

                    </div>

                </article>


                <!-- Product 7 -->

                <article class="product-card"
                         data-category="earrings">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1635767798638-3e25273a8236?auto=format&fit=crop&w=800&q=85"
                            alt="Diamond Stud Earrings">

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Diamond Studs
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹39,500
                        </div>

                    </div>

                </article>


                <!-- Product 8 -->

                <article class="product-card"
                         data-category="bracelets">

                    <div class="product-image">

                        <img
                            src="https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=800&q=85"
                            alt="Classic Chain Bracelet">

                        <span class="product-tag">
                            Limited
                        </span>

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

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

                        <!--</button>-->

                    </div>

                    <div class="product-info">

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

                        <h3 class="product-name">
                            Classic Chain
                        </h3>

                        <!--<div class="product-rating">-->
                        <!--    ★★★★★-->
                        <!--</div>-->

                        <div class="product-price">
                            ₹44,900
                        </div>

                    </div>

                </article>

            </div>

        </div>

    </section>


    <!-- =========================
         STORY
    ========================== -->

    <section id="story">

        <div class="story">

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

            <div class="story-content">

                <div class="section-label">
                    Our philosophy
                </div>

                <h2>
                    Precision meets
                    timeless beauty.
                </h2>

                <p>
                    Every piece begins with an idea and is
                    brought to life through careful detailing,
                    considered materials and skilled
                    craftsmanship.
                </p>


                <div class="story-points">

                    <div class="story-point">

                        <strong>
                            25+
                        </strong>

                        <span>
                            Years of craftsmanship
                        </span>

                    </div>

                    <div class="story-point">

                        <strong>
                            100%
                        </strong>

                        <span>
                            Quality checked
                        </span>

                    </div>

                    <div class="story-point">

                        <strong>
                            4.9/5
                        </strong>

                        <span>
                            Customer rating
                        </span>

                    </div>

                    <div class="story-point">

                        <strong>
                            12K+
                        </strong>

                        <span>
                            Happy customers
                        </span>

                    </div>

                </div>


                <a href="{{ url('/about') }}"
                   class="btn-outline"
                   style="width:max-content;color:white;border-color:rgba(255,255,255,.5);">

                    Discover Our Story

                </a>

            </div>

        </div>

    </section>


    <!-- =========================
         COLLECTION BANNER
    ========================== -->

    <section class="section">

        <div class="container">

            <div class="collection-banner">

                <div class="collection-content">

                    <div class="section-label">
                        The latest chapter
                    </div>

                    <h2>
                        The Modern
                        Heirloom
                    </h2>

                    <p>
                        Sculptural silhouettes, refined
                        finishes and understated brilliance.
                        A collection designed for those who
                        appreciate quiet luxury.
                    </p>

                    <a href="#new-arrivals"
                       class="btn-outline">

                        Shop New Collection

                    </a>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================
         TESTIMONIALS
    ========================== -->

    <section class="section section-light">

        <div class="container">

            <div class="section-header">

                <div class="section-label">
                    Client stories
                </div>

                <h2 class="section-title">
                    Loved by those
                    who wear it.
                </h2>

            </div>


            <div class="testimonial-grid">

                <article class="testimonial">

                    <div class="testimonial-stars">
                        ★★★★★
                    </div>

                    <p>
                        “The finishing is exceptional.
                        It feels incredibly premium and
                        beautifully packaged.”
                    </p>

                    <strong>
                        — Ananya S.
                    </strong>

                </article>


                <article class="testimonial">

                    <div class="testimonial-stars">
                        ★★★★★
                    </div>

                    <p>
                        “I wanted something elegant but
                        not overly traditional. The piece
                        was absolutely perfect.”
                    </p>

                    <strong>
                        — Riya M.
                    </strong>

                </article>


                <article class="testimonial">

                    <div class="testimonial-stars">
                        ★★★★★
                    </div>

                    <p>
                        “Excellent service, secure delivery
                        and the jewellery looks even better
                        in person.”
                    </p>

                    <strong>
                        — Arjun K.
                    </strong>

                </article>

            </div>

        </div>

    </section>
    
</main>

@endsection