@extends('layout.front.master')

@section('title', config('site.about.page_title', __('Nosotros')) . ' | ' . config('site.name'))
@section('description', config('site.about.main_subtitle', config('site.description', '')) . ' | ' . config('site.name'))
@section('keywords', config('site.seo.keywords') . ', empresa, historia, misión, visión, equipo')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.about.page_title', __('Nosotros')) . ' | ' . config('site.name'))
@section('og_description', config('site.about.main_subtitle', config('site.description', '')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.about.page_title', __('Nosotros')) . ' | ' . config('site.name'))
@section('twitter_description', config('site.about.main_subtitle', config('site.description', '')))
@section('twitter_image', brand_twitter_image())

@section('content')

<div>

    {{-- Page Header --}}
    @include('layout.front.partials.page-header-construction', [
        'pageTitle' => config('site.about.page_title', __('Nosotros')),
        'pageBreadcrumb' => [
            ['label' => __('Inicio'), 'url' => front_homepage_url()],
            ['label' => config('site.about.page_title', __('Nosotros')), 'url' => null],
        ],
        'backgroundImage' => asset('cd-project/img/demos/construction/backgrounds/background-2.jpg'),
    ])

    <div class="container custom-margin-1">
        <div class="row gy-5 gy-lg-0">
            <div class="col-lg-8 order-lg-2 mt-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">

                {{-- Who We Are --}}
                <div id="who-we-are" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">{{ config('site.about.who_we_are_title', __('Quiénes Somos')) }}</h2>
                        <img src="{{ asset('cd-project/img/demos/construction/about/about-1.jpg') }}" class="img-fluid mb-4" alt="{{ config('site.name') }}" />
                        <p class="font-weight-medium text-4">{!! config('site.about.intro_paragraph', 'Construimos espacios pensados para durar, con foco en la calidad, los plazos y el compromiso con cada cliente.') !!}</p>
                        <p class="font-weight-light text-3-5 mb-0">{{ config('site.about.intro_paragraph_2', 'Cada obra es la oportunidad de aplicar nuestra experiencia en proyectos residenciales, comerciales e industriales, sumando innovación y técnica para entregar resultados que superen expectativas.') }}</p>
                        <div class="row justify-content-center counters gy-4 gy-md-0 my-5-5">
                            <div class="col-md-auto mt-0">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="{{ config('site.about.counter_1_value', '10') }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">{{ config('site.about.counter_1_label', __('Años de experiencia')) }}</span>
                                </div>
                            </div>
                            <div class="col-md-auto px-xl-5 mx-md-5">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="{{ config('site.about.counter_2_value', '150') }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">{{ config('site.about.counter_2_label', __('Proyectos entregados')) }}</span>
                                </div>
                            </div>
                            <div class="col-md-auto">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="{{ config('site.about.counter_3_value', '50') }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">{{ config('site.about.counter_3_label', __('Clientes satisfechos')) }}</span>
                                </div>
                            </div>
                        </div>
                        <p class="font-weight-light text-3-5 pb-4-5 mb-5">{{ config('site.about.closing_paragraph', 'Una empresa familiar que crece con cada proyecto, sumando equipo, experiencia y tecnología para acompañar a nuestros clientes en obras cada vez más exigentes.') }}</p>
                    </div>
                </div>

                {{-- History --}}
                <div id="history" class="row pb-4-5 mb-5">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">{{ config('site.about.history_title', __('Historia')) }}</h2>
                        <div class="bg-color-grey p-5">
                            <div class="owl-carousel owl-theme dots-horizontal-center nav-style-diamond nav-with-transparency nav-dark nav-sm nav-font-size-sm mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': true, 'dots': false, 'autoplay': false, 'autoplayTimeout': 5000, 'autoHeight': true}">
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">{{ config('site.about.history_1_year', '2010') }}</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">{{ config('site.about.history_1_title', __('Fundación')) }}</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">{{ config('site.about.history_1_text', 'Iniciamos operaciones con un equipo reducido y la visión clara de construir con calidad y compromiso.') }}</p>
                                </div>
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">{{ config('site.about.history_2_year', '2015') }}</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">{{ config('site.about.history_2_title', __('Expansión')) }}</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">{{ config('site.about.history_2_text', 'Ampliamos el equipo e incorporamos nuevas tecnologías constructivas para abordar proyectos de mayor escala.') }}</p>
                                </div>
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">{{ config('site.about.history_3_year', '2020') }}</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">{{ config('site.about.history_3_title', __('Consolidación')) }}</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">{{ config('site.about.history_3_text', 'Nos consolidamos como referentes regionales con más de 100 obras entregadas y clientes que vuelven a confiar en nosotros.') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Mission & Vision --}}
                <div id="mission-vision" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">{{ __('Misión y Visión') }}</h2>
                        <div class="tabs tabs-bottom tabs-simple pb-2 mb-5">
                            <ul class="nav nav-tabs justify-content-start">
                                <li class="nav-item mb-3">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1 active" href="#tabsMissionVision1" data-bs-toggle="tab">{{ __('Manifiesto') }}</a>
                                </li>
                                <li class="nav-item mb-3 mx-4">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1" href="#tabsMissionVision2" data-bs-toggle="tab">{{ __('Visión') }}</a>
                                </li>
                                <li class="nav-item mb-3">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1" href="#tabsMissionVision3" data-bs-toggle="tab">{{ __('Misión') }}</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tabsMissionVision1">
                                    <p class="text-3-5 font-weight-light mb-0">{!! config('site.about.manifesto', 'Creemos que cada obra deja una marca en quienes la habitan. Construimos con materiales nobles, técnica precisa y una mirada que combina presente y futuro.') !!}</p>
                                </div>
                                <div class="tab-pane" id="tabsMissionVision2">
                                    <p class="text-3-5 font-weight-light mb-0">{{ config('site.about.vision', 'Ser la constructora de referencia en la región por la calidad de nuestras obras, el cumplimiento de plazos y la confianza que generamos en cada cliente.') }}</p>
                                </div>
                                <div class="tab-pane" id="tabsMissionVision3">
                                    <p class="text-3-5 font-weight-light mb-0">{{ config('site.about.mission', 'Entregar proyectos de construcción con los más altos estándares de calidad, seguridad y compromiso, acompañando a nuestros clientes en cada etapa.') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Leadership / Team --}}
                @if(is_module_active('team'))
                <div id="leadership" class="row mb-3">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">{{ config('site.about.leadership_title', __('Equipo de dirección')) }}</h2>
                        <div class="row g-3">
                            @forelse($teamMembers ?? collect() as $member)
                                <div class="col-md-6">
                                    <div class="card border-0 border-radius-0">
                                        @php
                                            $memberImg = !empty($member->image)
                                                ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                                                : asset('cd-project/img/defaults/team/team-' . (($loop->index % 6) + 1) . '.jpg');
                                        @endphp
                                        <img src="{{ $memberImg }}" class="card-img-top border-radius-0" alt="{{ $member->name }}" />
                                        <div class="card-body text-center px-4 py-5-5">
                                            <h2 class="card-title alternative-font-4 text-color-dark font-weight-bold line-height-1 text-5 mb-1">{{ $member->name }}</h2>
                                            <p class="text-color-grey text-2-5 mb-3">{{ strtoupper($member->position ?? '') }}</p>
                                            <p class="font-weight-light text-color-dark line-height-7 mb-3">{{ Str::limit($member->description ?? '', 150) }}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                {{-- Sin team members cargados — sección vacía o cliente edita desde admin --}}
                            @endforelse
                        </div>
                    </div>
                </div>
                @endif

                {{-- Partners --}}
                <div id="partners" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-5">{{ config('site.about.partners_title', __('Clientes y Aliados')) }}</h2>
                        @if(!empty($companyLogos) && count($companyLogos))
                            <div class="row align-items-center justify-content-between text-center my-3 g-5 g-md-0">
                                @foreach($companyLogos as $logo)
                                    @php
                                        $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
                                    @endphp
                                    <div class="col-sm-6 col-md-auto mt-0">
                                        <img src="{{ $logoSrc }}" alt="{{ $logo->name ?? $logo->title ?? '' }}" class="img-fluid" style="max-width: 140px;" />
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="row align-items-center justify-content-between text-center my-3 g-5 g-md-0">
                                <div class="col-sm-6 col-md-auto mt-0">
                                    <img src="{{ asset('cd-project/img/demos/construction/logos/logo-1.png') }}" alt="" class="img-fluid" style="max-width: 90px;" />
                                </div>
                                <div class="col-sm-6 col-md-auto mt-0">
                                    <img src="{{ asset('cd-project/img/demos/construction/logos/logo-2.png') }}" alt="" class="img-fluid" style="max-width: 140px;" />
                                </div>
                                <div class="col-sm-6 col-md-auto">
                                    <img src="{{ asset('cd-project/img/demos/construction/logos/logo-3.png') }}" alt="" class="img-fluid" style="max-width: 140px;" />
                                </div>
                                <div class="col-sm-6 col-md-auto">
                                    <img src="{{ asset('cd-project/img/demos/construction/logos/logo-4.png') }}" alt="" class="img-fluid" style="max-width: 140px;" />
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

            </div>

            <!-- Sidebar -->
            <div class="col-lg-4 order-lg-1 position-relative">
                <aside class="sidebar" id="sidebar" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
                    <ul class="nav list flex-column text-3-5 font-weight-medium mb-5-5">
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="d-inline-flex align-items-center nav-link text-color-dark text-color-hover-primary py-3 ps-0 active" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#who-we-are">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                {{ __('Quiénes Somos') }}
                            </a>
                        </li>
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#history">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                {{ __('Historia') }}
                            </a>
                        </li>
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#mission-vision">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                {{ __('Misión y Visión') }}
                            </a>
                        </li>
                        @if(is_module_active('team'))
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#leadership">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                {{ __('Equipo de dirección') }}
                            </a>
                        </li>
                        @endif
                        <li class="nav-item mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#partners">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                {{ __('Clientes y Aliados') }}
                            </a>
                        </li>
                    </ul>

                    <h3 class="text-color-dark font-weight-bold text-transform-none text-5-5 line-height-1 mb-3-5">{{ __('Contactanos') }}</h3>
                    <p class="text-2 line-height-9">{{ config('site.about.sidebar_contact_text', __('Escribinos un mensaje o llamanos para conocer cómo podemos acompañar tu próximo proyecto.')) }}</p>

                    <form class="contact-form js-recaptcha-form form-style-3" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST">
                        @csrf

                        @if(session('success'))
                            <div class="alert alert-success mt-4">
                                <strong>{{ __('Success!') }}</strong> {{ session('success') }}
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger mt-4">
                                <strong>{{ __('Error!') }}</strong> {{ session('error') }}
                            </div>
                        @endif

                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>{{ __('Listo!') }}</strong> {{ __('Tu mensaje fue enviado.') }}
                        </div>

                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>{{ __('Error!') }}</strong> {{ __('Hubo un error al enviar tu mensaje.') }}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>

                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="{{ __('Por favor ingresá tu nombre.') }}" maxlength="100" class="form-control text-2 h-auto py-2-5" name="name" placeholder="{{ __('Nombre') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="email" value="" data-msg-required="{{ __('Por favor ingresá tu email.') }}" data-msg-email="{{ __('Por favor ingresá un email válido.') }}" maxlength="100" class="form-control text-2 h-auto py-2-5" name="email" placeholder="{{ __('Email') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="{{ __('Por favor ingresá un asunto.') }}" maxlength="100" class="form-control text-2 h-auto py-2-5" name="subject" placeholder="{{ __('Asunto') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <textarea maxlength="5000" data-msg-required="{{ __('Por favor escribí tu mensaje.') }}" rows="4" class="form-control text-2 h-auto py-2-5" name="message" placeholder="{{ __('Mensaje') }}" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <button type="submit" class="custom-view-more d-inline-flex align-items-center btn btn-primary font-weight-semibold rounded-0 text-2 btn-px-4 btn-py-1" data-loading-text="{{ __('Enviando...') }}">
                                    {{ __('Enviar') }}
                                    <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
                                </button>
                            </div>
                        </div>
                    </form>
                </aside>
            </div>
        </div>
    </div>

</div>

@endsection