@extends('layouts.app')

@section('content')

<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
:root{
    --gold:#1565C0;
    --dark:#1a1a1a;
    --cream:#f6f1ea;
    --text:#2b2b2b;
}

/* HERO WRAPPER */
.home-slider{
    position:relative;
    background:var(--cream);
}

/* SLIDE */
.home-slide{
    position:relative;
    height: 540px !important;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:linear-gradient(120deg,#f7f1e8 0%, #fff 60%, #f4ece2 100%);
}

/* IMAGE SIDE (RIGHT FOCUS LIKE DESIGN) */
.slide-bg{
    position:absolute;
    right:0;
    top:0;
    width:55%;
    height:100%;
    object-fit:cover;
    z-index:1;
    filter:contrast(1.05) saturate(1.05);
}

/* SOFT LEFT FADE (NO DARK OVERLAY) */
.home-slide::before{
    content:"";
    position:absolute;
    inset:0;
    /*background:linear-gradient(*/
    /*    90deg,*/
    /*    #f7f1e8 0%,*/
    /*    rgba(247,241,232,0.85) 40%,*/
    /*    rgba(247,241,232,0.2) 70%,*/
    /*    rgba(247,241,232,0) 100%*/
    /*);*/
    z-index:2;
}
img.slide-bg {
    object-fit: fill;
}
/* TEXT LAYER */
.banner-layer{
    position:relative;
    z-index:3;
    width:50%;
    padding-left:7%;
    animation:fadeUp 1s ease;
}

@keyframes fadeUp{
    from{opacity:0; transform:translateY(30px);}
    to{opacity:1; transform:translateY(0);}
}

/* SMALL TEXT */
.banner-layer h4{
    font-family:'Poppins', sans-serif;
    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:15px;
    position:relative;
}

.banner-layer h4::after{
    content:"";
    display:inline-block;
    width:60px;
    height:1px;
    background:var(--gold);
    margin-left:12px;
    vertical-align:middle;
}

/* MAIN TITLE */
.banner-layer h2{
    font-family:'Playfair Display', serif;
    font-size:64px;
    font-weight:800;
    line-height:1.05;
    color:var(--dark);
    margin:10px 0;
}

/* SUB TITLE */
.banner-layer h3{
    font-family:'Playfair Display', serif;
    font-size:26px;
    font-weight:500;
    color:#6b5a45;
    margin-bottom:25px;
}

/* DESCRIPTION */
.banner-layer p{
    font-family:'Poppins', sans-serif;
    font-size:15px;
    color:#666;
    max-width:420px;
    margin-bottom:30px;
}

/* BUTTON */
.btn-gold{
    display:inline-block;
    background: linear-gradient(135deg, #3f4ec1, #6bbeff);
    color:#111;
    padding:13px 34px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s ease;
    box-shadow:0 10px 25px rgba(0,0,0,0.12);
    font-family:'Poppins', sans-serif;
    letter-spacing:1px;
}

.btn-gold:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,0.18);
}
</style>
<style>
    /* ================= FEATURE SECTION ================= */
.lux-feature-section{
    padding:60px 0;
    background:linear-gradient(180deg,#f7f1e8 0%, #ffffff 100%);
}

/* FEATURE CARD */
.lux-feature-box{
    background:#fff;
    border:1px solid rgba(200,164,93,0.25);
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    transition:0.35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    position:relative;
    overflow:hidden;
}

/* GOLD TOP LINE */
.lux-feature-box::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:0%;
    height:3px;
    background:linear-gradient(135deg,#d4af37,#b88a2a);
    transition:0.4s ease;
}

.lux-feature-box:hover::before{
    width:100%;
}

.lux-feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,0.1);
}

/* ICON */
.lux-feature-box .icon{
    font-size:34px;
    margin-bottom:15px;
    color:#c8a45d;
}

/* TITLE */
.lux-feature-box h4{
    font-family:'Playfair Display', serif;
    font-size:22px;
    margin-bottom:10px;
    color:#1a1a1a;
    font-weight:700;
}

/* TEXT */
.lux-feature-box p{
    font-family:'Poppins', sans-serif;
    font-size:14px;
    color:#666;
    margin:0;
    line-height:1.6;
}
</style>
<style>
    .lux-category-section{
    padding:70px 0;
    background:#fff;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h2{
    font-family:'Playfair Display', serif;
    font-size:36px;
    color:#1a1a1a;
}

.section-title p{
    color:#777;
}

.lux-category-card{
    position:relative;
    display:block;
    border-radius:18px;
    overflow:hidden;
    height:280px;
    text-decoration:none;
}

.lux-category-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

.lux-category-card:hover img{
    transform:scale(1.1);
}

.lux-category-card .overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:15px;
    background:linear-gradient(transparent,rgba(0,0,0,0.7));
    color:#fff;
    font-weight:600;
    font-family:'Poppins', sans-serif;
}
</style>
<main class="main">

<div class="home-slider owl-carousel owl-theme">

@foreach($sliders as $slider)

    <div class="home-slide">

        <!-- RIGHT IMAGE -->
        <img class="slide-bg"
             src="{{ asset('storage/' .$slider->image) }}"
             alt="slider">

        <!-- LEFT CONTENT -->
        <div class="banner-layer">

            <h4>{{ $slider->title_small ?? 'Timeless Weaves' }}</h4>

            <h2>
                {{ $slider->title_main ?? 'Technology' }}<br>
                <span style="color:var(--gold)">{{ $slider->title_offer ?? 'That Improves' }}</span>
            </h2>


            <p>
                {{ $slider->price_text ?? 'Shop the latest electronics at PK Tech. Buy laptops, desktops, mobile phones, computer accessories, gaming products, etc.' }}
            </p>

            <a href="{{ url($slider->button_link) }}" class="btn-gold">
                {{ $slider->button_text ?? 'SHOP NOW' }}
            </a>

        </div>

    </div>

@endforeach

</div>
<!-- ================= FEATURE STRIP ================= -->
<section class="lux-feature-section">
    <div class="container">
        <div class="row g-4">

            <!-- FREE SHIPPING -->
            <div class="col-md-4">
                <div class="lux-feature-box">
                    <div class="icon">
                        🚚
                    </div>
                    <h4>Free Shipping</h4>
                    <p>On all orders above ₹999 with safe & fast delivery.</p>
                </div>
            </div>

            <!-- PREMIUM QUALITY -->
            <div class="col-md-4">
                <div class="lux-feature-box">
                    <div class="icon">
                        💎
                    </div>
                    <h4>Premium Quality</h4>
                    <p>Authentic handwoven sarees with luxury craftsmanship.</p>
                </div>
            </div>

            <!-- 24/7 SUPPORT -->
            <div class="col-md-4">
                <div class="lux-feature-box">
                    <div class="icon">
                        📞
                    </div>
                    <h4>24/7 Support</h4>
                    <p>We are always here to help you anytime, anywhere.</p>
                </div>
            </div>

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

<!-- ================= CATEGORY SECTION ================= -->
<section class="lux-category-section">
    <div class="container">
        <div class="section-title">
            <h2>Shop By Category</h2>
            <p>Explore timeless sarees crafted for every occasion</p>
        </div>

        <div class="row g-4">

            <div class="col-md-3 col-6">
                <a href="#" class="lux-category-card">
                    <img src="https://images.unsplash.com/photo-1610030469983-98e550d6193c" alt="">
                    <div class="overlay">Silk Sarees</div>
                </a>
            </div>

            <div class="col-md-3 col-6">
                <a href="#" class="lux-category-card">
                    <img src="https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf" alt="">
                    <div class="overlay">Banarasi</div>
                </a>
            </div>

            <div class="col-md-3 col-6">
                <a href="#" class="lux-category-card">
                    <img src="https://images.unsplash.com/photo-1617038220319-276d3cfab638" alt="">
                    <div class="overlay">Designer</div>
                </a>
            </div>

            <div class="col-md-3 col-6">
                <a href="#" class="lux-category-card">
                    <img src="https://images.unsplash.com/photo-1620219365994-3c3f9b9c2c2a" alt="">
                    <div class="overlay">Wedding Collection</div>
                </a>
            </div>

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

@endsection