@extends('site.layout')
@section('content')

@section('styles')
    <style>
        .boxed_wrapper {
            background: #fff none repeat scroll 0 0 !important;
        }
    </style>
@endsection

<section class="about-area home2">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="about-image-holder wow fadeInLeft" data-wow-delay="900ms">
                    <img src="{{ asset('site_assets/images/clinica/missao.jpg') }}" alt="Dentista cuidando da boca do paciente">
                </div>
            </div>
            @foreach($clinica as $cli)
            <div class="col-xl-6">
                <div class="inner-content">
                    <div class="sec-title">
                        <h3>Sobre Nós</h3>
                        <h1>{{ $cli['titulo'] }}</h1>
                    </div>
                    <div class="about-text-holder">
                        {!! $cli['descricao'] !!}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!--End About Area-->

<!--Start Testimonial Sec style4-->
<section class="testimonial-sec style4" style="background-image: url({{ asset('site_assets/images//parallax-background/testimonials-bg.jpg')}});">
    <div class="container inner-content">
        <div class="sec-title max-width text-center">
            <h1>Durante todos esses anos, quatro princípios têm conduzido nossos atendimentos</h1>
        </div>
        <div class="row">
            <!--Start single mission vision box-->
            <div class="col-xl-6 col-lg-6">
                <div class="single-mission-vision-box text-center wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <h6>Empatia</h6>
                    <p>A empatia é indispensável em qualquer relação humana. Ela vai nos ajudar a entender o que você precisa, quais são seus sonhos e o que podemos fazer para torná-los reais.</p>
                </div>
            </div>
            <!--End single mission vision box-->
            <!--Start single mission vision box-->
            <div class="col-xl-6 col-lg-6">
                <div class="single-mission-vision-box text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <h6>Responsabilidade</h6>
                    <p>Ao descobrir quais são seus sonhos, vamos ser responsáveis e cuidar deles como se fossem os nossos sonhos.</p>
                </div>
            </div>
            <!--End single mission vision box-->
            <!--Start single mission vision box-->
            <div class="col-xl-6 col-lg-6">
                <div class="single-mission-vision-box text-center wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <h6>Transparência</h6>
                    <p>A transparência é o laço que mantém uma relação e que surge conforme somos verdadeiros um com o outro. Ela é quem constrói a confiança.</p>
                </div>
            </div>
            <!--End single mission vision box-->
            <!--Start single mission vision box-->
            <div class="col-xl-6 col-lg-6">
                <div class="single-mission-vision-box text-center wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <h6>Solidariedade</h6>
                    <p>Além de dividir nossas experiências com você, nós queremos conhecer as suas e somá-las às nossas para que ambos cresçam.</p>
                </div>
            </div>
            <!--End single mission vision box-->
        </div>
    </div>
    <div class="sec-title max-width text-center">
        <h3>É com empatia, responsabilidade, transparência e solidariedade que pretendemos deixar não só o seu sorriso radiante, mas todos os dias da sua vida.</h3>
    </div>
</section>
<!--End Testimonial Sec style4-->

<section class="about-area home2" style="margin-bottom: -150px;">
    <div class="container">
        @foreach($estrutura as $e)
        <div class="sec-title max-width text-center">
            <h3>A Clínina</h3>
            <h1>{{ $e['titulo'] }}</h1>
            {!! $e['descricao'] !!}
        </div>
        @endforeach
    </div>
</section>

<section  onLoad="auto()" class="about-area home2" style="position: relative;min-height: 100vh;padding-top: 0;padding-bottom:0">
    <div class="container" style="max-width:100vw;min-height: 100vh;position: relative;padding: 0;">
        <div class="gallery">
            <div class="gallery__prev"></div>
            <div class="gallery__next"></div>
            <div class="gallery__stream">
                @foreach($img_estrutura as $g)
                <div class="gallery__item" style="background-image: url('{{ url("storage/fotos_estrutura/{$g["imagem"]}") }}')"></div>
                @endforeach;
            </div>
        </div>
    </div>
</section>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var stream = document.querySelector('.gallery__stream');
        var items = document.querySelectorAll('.gallery__item');
        var prev = document.querySelector('.gallery__prev');
        var next = document.querySelector('.gallery__next');

        prev.addEventListener('click', function() {
            stream.insertBefore(items[items.length - 1], items[0]);
            items = document.querySelectorAll('.gallery__item');
        });

        next.addEventListener('click', function() {
            stream.appendChild(items[0]);
            items = document.querySelectorAll('.gallery__item');
        });
    });
</script>
@endsection

@endsection