@props(['data' => null])

<section class="main-slider">
    <div class="main-slider-carousel owl-theme owl-carousel">
        @foreach ($data['carousel_slides'] as $slider)
            <div class="slide">
                <div class="pattern-layer"
                     style="background-image:url({{ Storage::url($slider["background_image"]) }})"></div>
                <div class="pattern-layer-two"
                     style="background-image:url({{ asset('images/resource/home-slider/pattern-2.png') }})">
                </div>
                <div class="auto-container">
                    <div class="content-column">
                        <div class="inner-column hero_carousel_main-text">
                            <div style="max-width: 620px;">  
                                {!! tiptap_converter()->asHTML(translate_data($slider['text_content'])) !!}
                            </div>

                            @if($slider['slide_button_wrapper'])
                                <div class="button-box">
                                    <x-redirect-link
                                        :item-data="$slider['slide_button_wrapper']['button_slide'] ?? []"
                                        class="btn-style-one theme-btn"
                                    >
                                        <span class="txt">
                                            {{   translate_label( $slider['slide_button_wrapper']['button_slide'], 'button_text' ) }}
                                            <i class="arrow fa fa-angle-right"></i>
                                        </span>

                                    </x-redirect-link>


                                </div>
                            @endif


                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>

<section class="service-section">
    <div class="auto-container">
        <div class="inner-container">
            <div class="row clearfix">
                @foreach($data['feature_boxes'] as $box)
                    <div class="service-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="shape-one"
                                 style="background-image:url({{asset('images/icons/shape-1.png')}})"></div>
                            <div class="shape-two"
                                 style="background-image:url({{asset('images/icons/shape-2.png')}})"></div>
                            <div class="image-layer"
                                 style="background-image:url({{asset('images/resource/service.jpg')}})"></div>
                            <div class="icon">
                                <img src="{{Storage::url($box["icon_image"])}}" alt="Image product textile" style="max-width: 90px">
                            </div>
                            <h3>
                                <a href="javascript:void(0);">
                                    {{  translate_label($box, 'title') }}
                                </a>
                            </h3>

                            @if($box['box_button_wrapper'])
                                <x-redirect-link
                                    :item-data="$box['box_button_wrapper']['button'] ?? []"
                                    class="read-more"
                                    :label="translate_label( $box['box_button_wrapper']['button'], 'button_text')"
                                />
                            @endif

                        </div>
                    </div>
                @endforeach

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