@extends('layouts.welcome')
@section('content')
        <section class="hero-section" id="home">
    <div id="heroCarousel"
         class="carousel slide carousel-fade hero-carousel"
         data-bs-ride="carousel"
         data-bs-interval="5000"
         data-bs-pause="false"
         data-bs-touch="true">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Hair Making"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Wigs and Hair"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Bags"></button>
                </div>

                <div class="carousel-inner">

                    <div class="carousel-item active">
                        <div class="hero-slide">
                            <div class="hero-bg" style="background:
                                linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.42)),
                                url('{{ asset('assets/images/hair.png') }}') center center / cover no-repeat;">
                            </div>
                            <div class="hero-overlay"></div>

                            <div class="hero-content">
                                <div class="hero-inner">
                                    <div class="hero-kicker">Hair Making</div>

                                    <h1 class="hero-title">
                                        Luxury Hair<br>Styling Experience
                                    </h1>

                                    <p class="hero-subtitle">
                                        From flawless braids and neat frontal installations to revamps, styling, and custom looks,
                                        we create premium hair experiences that help you feel confident, elegant, and seen.
                                    </p>

                                    <div class="hero-actions">
                                        <a href="{{ route('booking.policies') }}" class="hero-btn hero-btn-primary">Book Appointment</a>
                                        <a href="#categories" class="hero-btn hero-btn-outline">View Services</a>
                                    </div>

                                    <div class="hero-mini-points">
                                        <span>Braids & Cornrows</span>
                                        <span>Wig Installation</span>
                                        <span>Hair Revamp</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <div class="hero-slide">
                           <div class="hero-bg" style="background:
    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>
                            <div class="hero-overlay"></div>

                            <div class="hero-content">
                                <div class="hero-inner">
                                    <div class="hero-kicker">Wigs & Hair</div>

                                    <h1 class="hero-title">
                                        Premium Wigs<br>& Hair Collections
                                    </h1>

                                    <p class="hero-subtitle">
                                        Shop carefully selected wigs, bundles, closures, frontals, and luxury hair pieces designed
                                        for women who want beauty, quality, durability, and everyday confidence.
                                    </p>

                                    <div class="hero-actions">
                                        <a href="{{ route('wigs.shop') }}" class="hero-btn hero-btn-primary">Shop Now</a>
                                        <a href="#" class="hero-btn hero-btn-outline">Browse Collection</a>
                                    </div>

                                    <div class="hero-mini-points">
                                        <span>Raw & Premium Hair</span>
                                        <span>Ready-to-Wear Wigs</span>
                                        <span>Custom Orders</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <div class="hero-slide">
                            <div class="hero-bg" style="background:
                                linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.42)),
                                url('{{ asset('assets/images/bag.png') }}') center center / cover no-repeat;">
                            </div>
                            <div class="hero-overlay"></div>

                            <div class="hero-content">
                                <div class="hero-inner">
                                    <div class="hero-kicker">Fashion Bags</div>

                                    <h1 class="hero-title">
                                        Stylish Bags<br>For Every Occasion
                                    </h1>

                                    <p class="hero-subtitle">
                                        Discover elegant handbags, statement pieces, and practical fashion bags that complete your
                                        look perfectly, whether you are dressing for work, outings, or special events.
                                    </p>

                                    <div class="hero-actions">
                                        <a href="{{ route('bag.shop') }}" class="hero-btn hero-btn-primary">Shop Bags</a>
                                        <a href="#" class="hero-btn hero-btn-outline">See Collection</a>
                                    </div>

                                    <div class="hero-mini-points">
                                        <span>Luxury Handbags</span>
                                        <span>Trendy Pieces</span>
                                        <span>Everyday Essentials</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

               
            </div>
        </section>

        <section class="section-block section-soft" id="categories">
            <div class="container">
                <div class="section-title-wrap">
                    <div class="section-kicker">What We Offer</div>
                    <h2 class="section-title">Three Beautiful Categories, One Luxury Brand</h2>
                    <p class="section-desc">
                        We bring beauty and fashion together in one premium space. Whether you want a fresh hairstyle,
                        a high-quality wig, or the perfect bag to finish your look, Radiance Hair Studio is designed to serve style with class.
                    </p>
                </div>

                <div class="row g-3">
                    <div class="col-lg-4 col-md-6">
                        <div class="category-card">
                            <div class="category-number">01</div>
                            <h3 class="category-title">Hair Making</h3>
                            <p class="category-text">
                                Professional hair services created for women who want neat finishing, modern styling,
                                and a salon experience that feels soft, premium, and worth every visit.
                            </p>
                            <ul class="category-list">
                                <li>Braiding and all-back styles</li>
                                <li>Frontal, closure, and wig installation</li>
                                <li>Hair treatment and revamp sessions</li>
                                <li>Special occasion styling</li>
                            </ul>
                            <a href="#" class="text-link">Book This Service</a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="category-card">
                            <div class="category-number">02</div>
                            <h3 class="category-title">Wigs & Hair Sales</h3>
                            <p class="category-text">
                                Our collection is curated for quality-conscious buyers who want reliable, beautiful,
                                and long-lasting hair that can be styled with confidence.
                            </p>
                            <ul class="category-list">
                                <li>Human hair wigs</li>
                                <li>Bundles, closures, and frontals</li>
                                <li>Custom-made wig orders</li>
                                <li>Ready-to-wear premium units</li>
                            </ul>
                            <a href="#" class="text-link">Shop Hair Collection</a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="category-card">
                            <div class="category-number">03</div>
                            <h3 class="category-title">Bags Collection</h3>
                            <p class="category-text">
                                Chic, fashionable, and versatile bags that help our customers complete their look
                                with pieces that feel elegant, useful, and on-trend.
                            </p>
                            <ul class="category-list">
                                <li>Luxury handbags</li>
                                <li>Crossbody and shoulder bags</li>
                                <li>Classic work and casual styles</li>
                                <li>Statement fashion pieces</li>
                            </ul>
                            <a href="#" class="text-link">Explore Bag Collection</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-block" id="featured">
            <div class="container">
                <div class="section-title-wrap">
                    <div class="section-kicker">Featured Picks</div>
                    <h2 class="section-title">Best Sellers Your Customers Will Love</h2>
                    <p class="section-desc">
                        These featured items and services help you present your business like a premium brand from day one.
                        You can later connect each card to your Laravel products, bookings, or category pages.
                    </p>
                </div>

                <div class="row g-4">
                    <div class="col-lg-4 col-md-6">
                        <div class="product-card">
                            <div class="product-media">
                                <img src="{{ asset('assets/images/hair1.png')}}" alt="Luxury wig installation service">
                                <div class="product-badge">Top Service</div>
                            </div>
                            <div class="product-body">
                                <h3 class="product-title">Luxury Wig Installation</h3>
                                <p class="product-meta">
                                    Clean finishing, proper laying, natural look, and premium salon care for a polished result.
                                </p>
                                <div class="product-price">From ₦25,000</div>
                                <div class="product-actions">
                                    <a href="#" class="contact-btn">Book Now</a>
                                    <a href="#" class="btn-soft">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="product-card">
                            <div class="product-media">
                                <img src="{{ asset('assets/images/wave.png') }}" alt="Premium body wave wig">
                                <div class="product-badge">Best Seller</div>
                            </div>
                            <div class="product-body">
                                <h3 class="product-title">Premium Body Wave Wig</h3>
                                <p class="product-meta">
                                    Soft, full, elegant, and ready for everyday beauty or special occasions.
                                </p>
                                <div class="product-price">From ₦180,000</div>
                                <div class="product-actions">
                                    <a href="#" class="contact-btn">Shop Now</a>
                                    <a href="#" class="btn-soft">View Details</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="product-card">
                            <div class="product-media">
                                <img src="{{ asset('assets/images/bag1.png') }}" alt="Stylish luxury handbag">
                                <div class="product-badge">New Arrival</div>
                            </div>
                            <div class="product-body">
                                <h3 class="product-title">Signature Fashion Handbag</h3>
                                <p class="product-meta">
                                    A classy piece designed to elevate both everyday looks and special outfits.
                                </p>
                                <div class="product-price">From ₦65,000</div>
                                <div class="product-actions">
                                    <a href="#" class="contact-btn">Buy Now</a>
                                    <a href="#" class="btn-soft">See More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-block section-soft" id="about">
            <div class="container">
                <div class="why-wrap">
                    <div class="why-image"
    style="
        min-height: 520px;
        background:
            linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)),
            url('{{ asset('assets/images/why.png') }}') center/cover no-repeat;
    ">
</div>

                   <div class="why-card">
    <div class="section-kicker">Why Choose Us</div>
    <h2 class="section-title mb-3">
        A Beauty Brand Built on Luxury, Confidence, and Trust
    </h2>

    <p class="section-desc">
        Rozzy Beauty is more than a salon. It is a premium beauty destination where elegance meets convenience. 
        From expert hairstyling to luxury wigs and carefully selected fashion pieces, every detail is designed to help 
        you look polished and feel confident.
    </p>

    <ul class="why-list">
        <li>
            <strong>Luxury Experience</strong>
            <span>
                A clean, refined, and premium feel from your first interaction to your final look.
            </span>
        </li>

        <li>
            <strong>All-in-One Convenience</strong>
            <span>
                Hairstyling, wigs, and stylish bags available in one place to save time and elevate your style.
            </span>
        </li>
    </ul>
</div>
                </div>
            </div>
        </section>

        
        <section class="cta-section" style="background:
        linear-gradient(to right, rgba(26, 22, 18, .86), rgba(26, 22, 18, .72)),
        url('{{ asset('assets/images/cta.png') }}') center/cover no-repeat;">
            <div class="cta-inner">
                <div class="section-kicker text-white opacity-75">Let’s Work With You</div>
                <h2 class="cta-title">Ready to Book, Shop, or Build Your Signature Look?</h2>
                <p class="cta-text">
                    Whether your customer wants a hair appointment, a luxury wig, or the perfect statement bag,
                    this website is positioned to drive bookings, sales, and trust from the very first visit.
                </p>

                <div class="hero-actions">
                    <a href="#" class="hero-btn hero-btn-primary">Book Appointment</a>
                    <a href="#" class="hero-btn hero-btn-outline">Chat on WhatsApp</a>
                </div>
            </div>
        </section>
@endsection