@extends('layouts.app')

@section('content')
    @include('components.slider')

   
<section class="ss home_tailored_box_sec">
    <div class="container">
        <div class="feature-strip">
             @if(isset($homeSections['features']) && $homeSections['features']->isNotEmpty())
    @php
        // ✅ Take ONLY the first feature section (lowest sort_order)
        $featureSection = $homeSections['features']->first();

        // ✅ Take only first 3 icons from that section
        $featureItems = collect($featureSection->content['items'] ?? [])
                            ->take(3);
    @endphp

    <div class="row">
        @foreach($featureItems as $item)
            <div class="col-lg-4 col-sm-4 col-12">
                <div class="feature-item active">
                    <div class="icon_feat">
                    <i class="fa-solid fa-{{ $item['icon'] }} feature-icon"></i>
                    </div>
                    
                    <div class="featur_text">
                    <div class="feature-title">
                        {{ $item['title'] }}
                    </div>

                    <div class="feature-text">
                        {!! nl2br(e($item['subtitle'] ?? '')) !!}
                    </div>
                    </div>

                </div>
            </div>
        @endforeach
    </div>
@endif

        </div>
    </div>

</section>

@if(isset($homeSections['content']))
	    @php
        $section = $homeSections['content']->first();
    @endphp


    <section class="ptt-67 pbb-67 the_perfect_shade_sec">
    <div class="container custom-section">
        <div class="row align-items-center g-4">
            <!-- Left Content -->
            <div class="col-lg-6">
                <h2 class="custom-title">{{ $section->content['heading'] }}</h2>
                
                <div class="custom-paragraph text-justify">
                   {!! $section->content['text'] !!}

                </div>
			<a href="{{ $section->content['url'] }}" class="btn_default">
                {{ $section->content['cta_button_text'] }}
            </a>

            </div>

            <!-- Right Image -->
            <div class="col-lg-6 text-center">
			       <img src="{{ asset('storage/'.$section->content['image']) }}" alt="BlindsMarket Image" class="custom-img">

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

</section>
@endif




<section class="pt-67 pb-67 pbc sho_by_room_sec">
    <div class="container">
        <div class="wow fadeInUp">
            <h4 class="custom-title main_heading_default text-center">Shop By Room</h4>
        </div>
        <div class="hover-sw-nav  wow fadeInUp">
            <div dir="ltr" class="swiper tf-swiper wrap-sw-over" data-swiper='{
                        "slidesPerView": 1, 
                        "spaceBetween": 12,
                        "speed": 800,
                        "observer": true,
                        "observeParents": true,
                        "slidesPerGroup": 1,
                        "navigation": {
                            "clickable": true,
                            "nextEl": ".nav-next-seller",
                            "prevEl": ".nav-prev-seller"
                        },
                        "pagination": { "el": ".sw-pagination-seller", "clickable": true },
                        "breakpoints": {
                            "482": { "slidesPerView": 2, "spaceBetween": 12, "slidesPerGroup": 2 },
                            "1200": { "slidesPerView": 4, "spaceBetween": 24, "slidesPerGroup": 4 }
                        }
                    }'>

                <div class="swiper-wrapper">
				
                    
                </div>

                <div class="d-flex d-xl-none sw-dot-default sw-pagination-seller justify-content-center"></div>
            </div>
            <div class="d-none d-xl-flex swiper-button-next nav-swiper nav-next-seller"></div>
            <div class="d-none d-xl-flex swiper-button-prev nav-swiper nav-prev-seller"></div>
        </div>
    </div>
</section>






<!--section class="flat-spacing-3 ">

    <div class="container color-section">
        <h2 class="color-heading">Shop by Colour</h2>
        <div class="color-row">
	                    <div class="color-item">
                <div class="color-circle circle-" style="background-color:"></div>
                <span class="color-label"><?php// echo ucfirst($b->name); ?> Blinds</span>
            </div>
            
          
        </div>
    </div>
</section-->


@if(isset($homeSections['cta']))

	    @php
        $section = $homeSections['cta']->first();
    @endphp
<section class="pt-67 pb-67">
    <div class="container">
        <div class="promo-banner">
        <div class="row">
        <div class="col-xl-9 col-lg-9">
            <div class="promo-text">{!! $section->content['description'] ?? '' !!}</div>
        </div>
        <div class="col-xl-3 col-lg-3">
            <div class="promo-logo"><a href="{{ $section->content['button_link'] }}" class="promo-link">{{ $section->content['button_text'] }} →</a></div>
        </div>
        </div>
        </div>
    </div>

</section>
@endif

<section class="pt-67 bb pb-67 happy_customers_sec">
    <div class="container">
        <div class="wow fadeInUp">
            <h4 class="custom-title main_heading_default text-center">Happy Customers</h4>
        </div>

        <div dir="ltr" class="swiper tf-swiper" data-swiper='{
            "slidesPerView": 1,
            "spaceBetween": 12,
            "speed": 800,
            "observer": true,
            "observeParents": true,
            "slidesPerGroup": 2,
            "pagination": { "el": ".sw-pagination-tes", "clickable": true },
            "breakpoints": {
                "768": { "slidesPerView": 2, "spaceBetween": 24, "slidesPerGroup": 2 },
                "1200": { "slidesPerView": 3, "spaceBetween": 24, "slidesPerGroup": 3 }
            }
        }'>
            <div class="swiper-wrapper">

                
            </div>

            <span class="sw-dot-default sw-pagination-tes justify-content-center"></span>
        </div>
    </div>
</section>


<section class="unique-feature-section">
    <div class="container">
            @if(isset($homeSections['features']) && $homeSections['features']->isNotEmpty())
    @php
        // ✅ Take ONLY the first feature section (lowest sort_order)
        $featureSection = $homeSections['features']->last();

        // ✅ Take only 4 feature items from that section
        $featureItems = collect($featureSection->content['items'] ?? [])
                            ->take(4);
    @endphp

    <div class="row">
        @foreach($featureItems as $item)
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="unique-feature-card">

                    <div class="unique-feature-icon">
                        <i class="bi bi-{{ $item['icon'] }}"></i>
                    </div>

                    <h5 class="unique-feature-title">
                        {{ $item['title'] }}
                    </h5>

                    <p class="unique-feature-text">
                        {{ $item['subtitle'] ?? '' }}
                    </p>

                </div>
            </div>
        @endforeach
    </div>
@endif

    </div>
</section>



@endsection