@extends('layout.front.master')

@section('title', __('Sobre nosotros'))
@section('description', config('site.about.main_subtitle', 'Espacios diseñados para vivir mejor.') . ' | ' . config('site.name'))
@section('keywords', config('site.seo.keywords') . ', nosotros, equipo, estudio, diseño')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Sobre nosotros'))
@section('og_description', config('site.about.main_subtitle', 'Espacios diseñados para vivir mejor.'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Sobre nosotros'))
@section('twitter_description', config('site.about.main_subtitle', 'Espacios diseñados para vivir mejor.'))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main">
    {{-- Page Header --}}
    @include('layout.front.partials.page-header-architecture-2', [
        'pageTitle' => __('Nosotros'),
        'pageBreadcrumb' => [
            ['label' => __('Inicio'), 'url' => front_homepage_url()],
            ['label' => __('Sobre nosotros'), 'url' => null],
        ],
    ])

    {{-- Background Decoration --}}
    <div class="position-relative">
        <img src="{{ asset('cd-project/img/demos/architecture-2/backgrounds/arch-plan-1.jpg') }}" class="img-fluid position-absolute top-0 right-0" alt="" />
    </div>

    <div class="custom-page-wrapper pt-5">
        <div class="container container-xl-custom pt-5 mt-5">
            {{-- Hero Text Section --}}
            <div class="row pt-5">
                <div class="col position-relative">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="2000" style="top: 100px; left: -80px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-1 font-weight-black opacity-1 mb-0">{{ config('site.about.stroke_text', 'YOUR PLACE') }}</h2>
                    </div>
                    <div class="overflow-hidden mb-2">
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1500">{{ config('site.about.main_label', "WE'RE HERE TO HELP") }}</h2>
                    </div>
                    <div class="overflow-hidden mb-3">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1700">{{ config('site.about.main_subtitle', 'Espacios diseñados para vivir mejor.') }}</h3>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1900">
                        <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4" alt="" />
                    </div>
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2100">{{ config('site.about.paragraph_1', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur.') }}</p>
                    <p class="text-3-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300">{{ config('site.about.paragraph_2', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.') }}</p>
                    <p class="text-3-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2500">{{ config('site.about.paragraph_3', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.') }}</p>
                </div>
            </div>

            {{-- Image Gallery --}}
            <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                <div class="row pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2700" data-plugin-options="{'accY': 200}">
                    @php
                        $galleryImages = [
                            asset('cd-project/img/demos/architecture-2/generic/generic-11.jpg'),
                            asset('cd-project/img/demos/architecture-2/generic/generic-12.jpg'),
                            asset('cd-project/img/demos/architecture-2/generic/generic-13.jpg'),
                        ];
                    @endphp
                    @foreach($galleryImages as $index => $imgSrc)
                        <div class="col-md-4 {{ $index < 2 ? 'mb-4 mb-md-0' : '' }}">
                            <a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="{{ $galleryImages[0] }}">
                                <img src="{{ $imgSrc }}" class="img-fluid rounded-0" alt="" />
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Additional Text Paragraphs --}}
            <div class="row pb-5 mb-5">
                <div class="col">
                    <p class="text-3-5 mb-4">{{ config('site.about.paragraph_4', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.') }}</p>
                    <p class="text-3-5 mb-0">{{ config('site.about.paragraph_5', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.') }}</p>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <hr class="my-0">
                </div>
            </div>

            {{-- Team Carousel Section --}}
            <div class="row py-5 my-5">
                <div class="col-lg-6 col-xl-7 mx-auto mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500">
                    <div class="owl-carousel owl-theme nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 1}, '1200': {'items': 2}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20}">
                        @if(is_module_active('team') && ($teamMembers ?? collect())->count() > 0)
                            @foreach(($teamMembers ?? collect()) as $index => $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset($member->photo ?? 'cd-project/img/demos/architecture-2/authors/author-' . (($index % 2) + 1) . '.jpg') }}" alt="{{ $member->name }}" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member->name }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member->position ?? __('ARCHITECT') }}</h3>
                                            <p class="card-text font-weight-light">{{ Str::limit($member->bio ?? '', 100) }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            @php
                                $defaultTeam = [
                                    ['name' => __('Nombre Apellido'), 'position' => __('CEO & FUNDADOR'), 'img' => 1],
                                    ['name' => __('Nombre Apellido'), 'position' => __('ARQUITECTA'), 'img' => 2],
                                    ['name' => __('Nombre Apellido'), 'position' => __('DIRECTOR'), 'img' => 1],
                                ];
                            @endphp
                            @foreach($defaultTeam as $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset("cd-project/img/demos/architecture-2/authors/author-{$member['img']}.jpg") }}" alt="" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member['name'] }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member['position'] }}</h3>
                                            <p class="card-text font-weight-light">{{ __('Cargá la biografía de este integrante desde el panel de administración.') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4 text-end position-relative appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="250">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500" style="top: 102px; right: -50px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-3 font-weight-black opacity-1 mb-0">{{ config('site.about.team_stroke_text', 'ARCHLIFE') }}</h2>
                    </div>
                    <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ config('site.about.team_label', 'THE BEST PROFESSIONALS') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ config('site.about.team_title', 'Meet Our Team') }}</h3>
                    <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2" alt="" />
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ config('site.about.team_paragraph_1', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ config('site.about.team_paragraph_2', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 custom-btn-style-1-right font-weight-bold text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                </div>
            </div>
        </div>

        {{-- Testimonials Parallax Section --}}
        @if(is_module_active('references'))
        <section class="section parallax bg-transparent border-0 py-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 13, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}">
            <div class="d-flex justify-content-center">
                <div class="scrollable-parallax-wrapper bg-primary overflow-hidden">
                    <div class="container container-xl-custom custom-container-style-3 custom-container-position-1 py-5 my-5 mx-0">
                        <div class="row justify-content-center pt-3 mb-5">
                            <div class="col-sm-8 col-md-12 text-center">
                                <h2 class="text-color-light opacity-6 positive-ls-3 line-height-3 text-4 mb-3">{{ config('site.about.testimonials_label', 'HAPPY CLIENTS') }}</h2>
                                <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-10 negative-ls-1 mb-0">{{ config('site.about.testimonials_title', 'See What Clients Are Saying') }}</h3>
                            </div>
                        </div>
                        <div class="row justify-content-center pb-3">
                            <div class="col-lg-9">
                                <div class="owl-carousel owl-theme nav-style-1 nav-light nav-outside nav-font-size-lg custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1, 'nav': false, 'dots': true}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': false, 'nav': true, 'dots': false}">
                                    @forelse(($featuredReferences ?? collect()) as $reference)
                                        <div>
                                            <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                <blockquote>
                                                    <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ $reference->testimonial ?? $reference->description ?? '' }}</em></p>
                                                </blockquote>
                                                <div class="testimonial-author">
                                                    <p class="text-color-light font-weight-bold text-4 mb-0">{{ $reference->name ?? '' }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        @for($i = 0; $i < 2; $i++)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ __('Sumá testimonios de tus clientes desde /admin/references para que aparezcan en esta sección.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ __('Cliente Satisfecho') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        {{-- Client Logos Grid --}}
        <div class="container container-xl-custom pb-3">
            <div class="row align-items-center text-center py-5 my-5">
                @php
                    $defaultLogos = [
                        ['src' => asset('cd-project/img/logos/logo-8.png'), 'max_width' => '90px'],
                        ['src' => asset('cd-project/img/logos/logo-9.png'), 'max_width' => '140px'],
                        ['src' => asset('cd-project/img/logos/logo-10.png'), 'max_width' => '140px'],
                        ['src' => asset('cd-project/img/logos/logo-11.png'), 'max_width' => '140px'],
                        ['src' => asset('cd-project/img/logos/logo-12.png'), 'max_width' => '100px'],
                        ['src' => asset('cd-project/img/logos/logo-13.png'), 'max_width' => '100px'],
                    ];
                    $logos = (isset($companyLogos) && $companyLogos->count() > 0) ? $companyLogos : $defaultLogos;
                @endphp
                @foreach($logos as $index => $logo)
                    @php
                        if ($logo instanceof \App\Modules\CdBase\CompanyLogos\Models\CompanyLogo) {
                            $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
                            $logoAlt = $logo->name ?? '';
                            $logoMaxWidth = '140px';
                        } else {
                            $logoSrc = $logo['src'] ?? asset('cd-project/img/logos/logo-' . ($index + 8) . '.png');
                            $logoAlt = '';
                            $logoMaxWidth = $logo['max_width'] ?? '140px';
                        }
                    @endphp
                    <div class="col-sm-4 col-xl-2 {{ $index < 3 ? 'mb-5 mb-xl-0' : ($index < 5 ? 'mb-5 mb-lg-0' : '') }}">
                        <img src="{{ $logoSrc }}" alt="{{ $logoAlt }}" class="img-fluid" style="max-width: {{ $logoMaxWidth }};" />
                    </div>
                @endforeach
            </div>

            {{-- Bottom Text --}}
            <div class="row">
                <div class="col">
                    <p class="text-3-5 mb-4">{{ config('site.about.bottom_paragraph_1', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ config('site.about.bottom_paragraph_2', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection