@extends('layouts.welcome')
@section('content')
      <section class="page-hero"
        style="
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .35)),
            linear-gradient(to bottom, rgba(0, 0, 0, .10), rgba(0, 0, 0, .42)),
            url('{{ asset('assets/images/wig.png') }}') center center / cover no-repeat;
    ">
            <div class="page-hero-content">
                <div class="page-hero-inner">
                    <div class="page-kicker">Wigs & Hair Collection</div>
                    <h1 class="page-title">Luxury Wigs With Premium Finish</h1>
                    <p class="page-subtitle">
                        Shop beautiful wigs, bundles, closures, and frontals made for women who want softness, fullness,
                        confidence, and long-lasting quality in every look.
                    </p>
                </div>
            </div>
        </section>

<section class="section-block">
    <div class="container">
        <div class="d-lg-none mb-4">
            <button class="sidebar-btn w-auto px-4"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#shopFilterCanvas">

                <i class="bi bi-sliders me-2"></i>
                Filter Products
            </button>
        </div>

        <div class="row g-3 align-items-start">
            <div class="col-lg-3 d-none d-lg-block">
                <aside class="sidebar-card">

                    <div class="filter-group">
                        <div class="filter-title">Search Product</div>

                        <div class="filter-search">
                            <input type="text"
                                class="form-control"
                                placeholder="Search wigs or hair...">
                        </div>
                    </div>

                    <div class="filter-group">
                        <div class="filter-title">Categories</div>

                        <div class="filter-list">
                            <label class="custom-check">
                                <input type="checkbox" checked>
                                <span>Ready-to-Wear Wigs</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Raw Human Hair</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Closures & Frontals</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Bundles</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Custom Wig Orders</span>
                            </label>
                        </div>
                    </div>

                    <div class="filter-group">
                        <div class="filter-title">Hair Texture</div>

                        <div class="filter-list">
                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Straight</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox" checked>
                                <span>Body Wave</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Deep Wave</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>Curly</span>
                            </label>
                        </div>
                    </div>

                    <div class="filter-group">
                        <div class="filter-title">Price Range</div>

                        <select class="form-select">
                            <option selected>All Prices</option>
                            <option>₦50,000 - ₦100,000</option>
                            <option>₦100,000 - ₦200,000</option>
                            <option>₦200,000 - ₦300,000</option>
                            <option>₦300,000 and Above</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <div class="filter-title">Length</div>

                        <div class="filter-list">
                            <label class="custom-check">
                                <input type="checkbox">
                                <span>10 - 14 Inches</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox" checked>
                                <span>16 - 20 Inches</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>22 - 26 Inches</span>
                            </label>

                            <label class="custom-check">
                                <input type="checkbox">
                                <span>28 Inches and Above</span>
                            </label>
                        </div>
                    </div>

                    <div class="d-grid gap-3">
                        <button class="sidebar-btn" type="button">
                            Apply Filters
                        </button>

                        <button class="sidebar-btn-outline" type="button">
                            Reset Filters
                        </button>
                    </div>

                </aside>
            </div>

            <div class="col-12 col-lg-9">

                <div class="shop-main-card">

                    <div class="shop-topbar">
                        <div class="shop-results">
                            <h2>Featured Wigs & Hair</h2>

                            <p>
                                Showing 6 luxury products curated for elegance,
                                softness, and durability.
                            </p>
                        </div>

                        <div class="shop-sort">
                            <span class="shop-sort-label">Sort By</span>

                            <select class="form-select">
                                <option selected>Most Popular</option>
                                <option>Newest Arrivals</option>
                                <option>Price: Low to High</option>
                                <option>Price: High to Low</option>
                            </select>
                        </div>
                    </div>

<div class="row g-3">

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wig1.webp') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Ready-to-Wear Wig</div>

                <h3 class="product-title">Luxury Body Wave Wig</h3>

                <div class="product-tags">
                    <span>18 Inches</span>
                    <span>Body Wave</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦180,000</div>
                        <div class="product-old-price">₦220,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wig2.webp') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Frontal Wig</div>

                <h3 class="product-title">Silky Straight Frontal Wig</h3>

                <div class="product-tags">
                    <span>20 Inches</span>
                    <span>Straight</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦220,000</div>
                        <div class="product-old-price">₦260,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wig3.webp') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Curly Wig</div>

                <h3 class="product-title">Signature Curly Lace Wig</h3>

                <div class="product-tags">
                    <span>16 Inches</span>
                    <span>Curly</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦165,000</div>
                        <div class="product-old-price">₦200,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wigs.jpg') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Raw Bundles</div>

                <h3 class="product-title">Premium Raw Hair Bundles</h3>

                <div class="product-tags">
                    <span>22 Inches</span>
                    <span>Raw Hair</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦145,000</div>
                        <div class="product-old-price">₦175,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wigs.jpg') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Closure</div>

                <h3 class="product-title">HD Lace Closure Piece</h3>

                <div class="product-tags">
                    <span>HD Lace</span>
                    <span>Soft Texture</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦55,000</div>
                        <div class="product-old-price">₦70,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <a href="#" class="product-card d-block text-decoration-none">
            <div class="product-media">
                <img src="{{ asset('assets/images/wigs.jpg') }}" alt="">
            </div>

            <div class="product-body">
                <div class="product-category">Custom Wig</div>

                <h3 class="product-title">Made-to-Order Premium Unit</h3>

                <div class="product-tags">
                    <span>Custom Made</span>
                    <span>Luxury Fit</span>
                </div>

                <div class="product-price-row">
                    <div>
                        <div class="product-price">₦250,000</div>
                        <div class="product-old-price">₦300,000</div>
                    </div>
                </div>

                <div class="product-actions">
                    <span class="btn-shop-primary">View Product</span>
                </div>
            </div>
        </a>
    </div>

</div>

                </div>

            </div>

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

<div class="offcanvas offcanvas-start"
    tabindex="-1"
    id="shopFilterCanvas">

    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Filter Products</h5>

        <button type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body">

        <aside>

            <div class="filter-group">
                <div class="filter-title">Search Product</div>

                <div class="filter-search">
                    <input type="text"
                        class="form-control"
                        placeholder="Search wigs or hair...">
                </div>
            </div>

            <div class="filter-group">
                <div class="filter-title">Categories</div>

                <div class="filter-list">
                    <label class="custom-check">
                        <input type="checkbox" checked>
                        <span>Ready-to-Wear Wigs</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Raw Human Hair</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Closures & Frontals</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Bundles</span>
                    </label>
                </div>
            </div>

            <div class="d-grid gap-3 mt-4">
                <button class="sidebar-btn" type="button">
                    Apply Filters
                </button>

                <button class="sidebar-btn-outline" type="button">
                    Reset Filters
                </button>
            </div>

        </aside>

    </div>
</div>
@endsection