@extends('layouts.web')

@section('head-js')
    <script src="{{ asset('js/web/pages/about.js') }}" defer></script>
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('css/web/pages/about.css') }}">
@endsection

@section('content')
    @include('web.components.layout.banner_pages', [
        'title' => 'Dra Mariane Rush',
        'subTittle' => 'Quem é a',
        'style' => 'background-image: url(' . asset('images/placeholder/web/banner-sobre.webp') . ')',
    ])

    @component('web.components.default.section', [
        'class' => 'team',
        'label' => 'Nossa equipe',
    ])
        <div class="col-lg-12 row justify-content-center">
            <div class="team row align-items-center">
                <div class="col-12 col-md-5 col-lg-5 text-start mb-3 mb-lg-0">
                    <figure class="team__image">
                        @component('web.components.default.medias.image', [
                            'media' => [
                                'path' => $data['team']['portrait']['path'],
                                'alt' => $data['team']['portrait']['alt'] ?? '',
                                'class' => 'w-100 h-auto',
                            ],
                        ])
                        @endcomponent
                    </figure>
                </div>

                <div
                    class="col-12 col-md-6 col-lg-5 offset-0 offset-md-1 d-flex flex-column justify-content-center team__content">
                    <div class="team__content__summary mb-4">
                        {!! $data['team']['summary'] ?? '' !!}

                    </div>
                    <div class="d-flex align-items-center gap-3 team__content__info">
                        <h2 class="mb-0">+1000</h2>
                        <p class="mb-0">Pacientes atendidos</p>
                    </div>
                </div>
            </div>
        </div>
    @endcomponent

    @component('web.components.default.section', [
        'class' => 'covenants mb-5',
        'label' => 'Convênios',
    ])
        @includeWhen($data['covenants']->count() > 0, 'web.components.pages.home.covenants.content', [
            'covenants' => $data['covenants'],
        ])
    @endcomponent

    @component('web.components.default.section', [
        'class' => 'depositions',
        'label' => 'Depoimentos',
    ])
        <h2 class="depositions__title title-center mb-5">
            O que os pacientes dizem
        </h2>
        @component('web.components.default.splide', [
            'id' => 'deposition',
            'class' => 'depositions-splide mb-5',
            'slides' => $data['depositions']->count(),
        ])
            @each('web.components.pages.about.deposition.slider_item', $data['depositions'], 'deposition')
        @endcomponent
    @endcomponent

    @component('web.components.default.section', [
        'class' => 'spaces mb-5',
        'label' => 'Nosso espaço',
    ])
        @includeWhen($data['spaces']->count() > 0, 'web.components.pages.about.spaces.content', [
            'spaces' => $data['spaces'],
        ])
    @endcomponent

    @include('web.components.layout.banner_middle')
@endsection