@extends('layouts.app')

@section('content')
    <x-menu></x-menu>
    <!-- Start Masthead -->
    <section class="masthead js-masthead-height pb-0">
        <div class="masthead__style-overlay"></div>
        <div class="masthead__style-watter">
            <div class="container-fluid pt-4 px-2 px-md-5">
                <div class="owl-carousel js-owl-masthead">
                        @foreach($mastheads as $masthead)
                            <x-masthead :title="$masthead->title"
                                        :description="$masthead->description"
                                        :image="$masthead->image"
                                        :btn1-url="$masthead->btn_1_url"
                                        :btn1-icon="$masthead->btn_1_icon"
                                        :btn1-text="$masthead->btn_1_text"
                                        :btn1-color="$masthead->btn_1_color"
                                        :btn2-url="$masthead->btn_2_url"
                                        :btn2-icon="$masthead->btn_2_icon"
                                        :btn2-text="$masthead->btn_2_text"
                                        :btn2-color="$masthead->btn_2_color"
                                        :btn1-show="$masthead->btn_1_show"
                                        :btn2-show="$masthead->btn_2_show">

                            </x-masthead>
                        @endforeach
                </div>
            </div>
        </div>
    </section>

    <!-- Start Section -->
    <section class="section pb-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <h2 class="section__heading section__heading-center">Características de Nuestro Servicio</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center mb-40">
                    <p>
                        Ponemos a tu disposición lo último en tecnología para que tu negocio funcione como lo hacen las
                        grandes marcas.
                    </p>
                </div>
            </div>
            <div class="row">
                @foreach($features as $feature)
                    <x-feature-normal :title="$feature->title"
                                      :shortDescription="$feature->short_description"
                                      :url="$feature->url"
                                      :icon="$feature->icon">
                    </x-feature-normal>
                @endforeach
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <a href="{{ route('features') }}" class="btn btn-primary btn-rounded">Ver más funcionalidades</a>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <div class="section__divider section__divider-right d-none d-lg-block"></div>

    @foreach($featuresFull as $key => $featureFull)
        <x-feature-full :title="$featureFull->title"
                        :shortDescription="$featureFull->short_description"
                        :longDescription="$featureFull->long_description"
                        :url="$featureFull->url"
                        :image="$featureFull->image"
                        :imagePosition="$key % 2 == 0 ? 'left' : 'right'"
                        :icon="$featureFull->icon"
                        :fin="$key != count($featuresFull) - 1">
        </x-feature-full>
    @endforeach

    <x-banner></x-banner>

    <!-- Start Section -->
    <section class="section section__gray">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section__heading section__heading-center">Testimonios</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel js-owl-testimoni-2">
                        @foreach($testimonials as $testimonial)
                            <x-testimonial :name="$testimonial->name"
                                           :text="$testimonial->text"
                                           :image="$testimonial->image">

                            </x-testimonial>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section__heading section__heading-center">Marcas que lo utilizan</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="owl-active-nav">
                        <div class="owl-carousel js-owl-clients">
                            <x-client></x-client>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{--<x-last-post></x-last-post>--}}

    <!-- Start Section -->
    {{--<section class="section section__cta pb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-4">
                    <div class="column__boxed">
                        <span class="icon icon-help column__boxed-icon"></span>
                        <h5 class="column__boxed-title">Get Support</h5>
                        <p>
                            Homero sapientem per id, id sonet veniam commune vis, ei nam non
                        </p>
                        <a href="#" class="btn-link">Go to support</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-4">
                    <div class="column__boxed">
                        <span class="icon icon-users column__boxed-icon"></span>
                        <h5 class="column__boxed-title">Our comumnity</h5>
                        <p>
                            Homero sapientem per id, id sonet veniam commune vis, ei nam non
                        </p>
                        <a href="#" class="btn-link">Go to comumnity</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-4">
                    <div class="column__boxed">
                        <span class="icon icon-question column__boxed-icon"></span>
                        <h5 class="column__boxed-title">F.A.Q</h5>
                        <p>
                            Homero sapientem per id, id sonet veniam commune vis, ei nam non
                        </p>
                        <a href="#" class="btn-link">Go to FAQ</a>
                    </div>
                </div>
            </div>
        </div>
    </section>--}}
    <!-- End Section -->

@endsection