@extends('layout.front.master')

@section('title', config('site.about.page_title', __('About Us')) . ' | ' . config('site.name'))
@section('description', !empty(config('site.seo.description')) ? config('site.seo.description') : __('Desde 1965, Colombres Garmendia & Asoc. ofrece asesoramiento legal de excelencia en el Noroeste Argentino. Conozca nuestra misión, visión y pilares.'))
@section('keywords', !empty(config('site.seo.keywords')) ? config('site.seo.keywords') : __('abogados, trayectoria, mision, vision, valores, estudio juridico Tucuman'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.about.page_title', __('About Us')) . ' | ' . config('site.name'))
@section('og_description', !empty(config('site.seo.description')) ? config('site.seo.description') : __('Conozca la trayectoria e historia de Colombres Garmendia & Asoc., brindando soluciones legales de excelencia desde 1965.'))
@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', __('About Us')) . ' | ' . config('site.name'))
@section('twitter_description', !empty(config('site.seo.description')) ? config('site.seo.description') : __('Conozca la trayectoria de Colombres Garmendia & Asoc., brindando soluciones legales de excelencia.'))
@section('twitter_image', brand_twitter_image())

@push('extra_head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "{{ __('Inicio') }}",
      "item": "{{ front_homepage_url() }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ config('site.about.page_title', __('About Us')) }}",
      "item": "{{ url()->current() }}"
    }
  ]
}
</script>
@endpush

@section('content')

    {{-- Page Header --}}
    @include('layout.front.partials.page-header-law-firm-2', [
        'pageTitle' => config('site.about.page_title', __('About Us')),
        'pageBreadcrumb' => [
            ['label' => __('Home'), 'url' => front_homepage_url()],
            ['label' => config('site.about.page_title', __('About Us')), 'url' => null],
        ],
    ])

    {{-- The Difference Section --}}
    <div class="container py-5 my-4">
        <div class="row py-2">
            <div class="col text-center text-lg-start">
                <h2 class="text-color-dark font-weight-bold text-10 mb-4">
                    <em>{{ config('site.about.main_title', __('Excelencia, Confianza y Compromiso')) }}</em>
                </h2>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12">
                <p class="text-4 line-height-4 mb-0">
                   {{ config('site.about.description_1', __('Desde 1965, nuestro estudio se destaca por ofrecer asesoramiento jurídico integral, priorizando la lealtad hacia nuestros clientes, la idoneidad profesional y la confidencialidad.')) }}
                </p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light-scale-1 p-4 h-100 custom-card-style-1 custom-box-shadow-2" style="border-top: 3px solid var(--accent-gold) !important;">
                    <div class="card-body p-0">
                        <h3 class="font-weight-bold text-4 mb-3 text-uppercase text-color-dark">{{ __('Nuestra Misión') }}</h3>
                        <p class="text-3-5 text-color-grey mb-0 line-height-5">
                            {{ config('site.about.mission', __('Brindar soluciones legales personalizadas, con enfoque ético y profesional, para garantizar el éxito y la tranquilidad de nuestros clientes.')) }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light-scale-1 p-4 h-100 custom-card-style-1 custom-box-shadow-2" style="border-top: 3px solid var(--accent-gold) !important;">
                    <div class="card-body p-0">
                        <h3 class="font-weight-bold text-4 mb-3 text-uppercase text-color-dark">{{ __('Nuestra Visión') }}</h3>
                        <p class="text-3-5 text-color-grey mb-0 line-height-5">
                            {{ config('site.about.vision', __('Ser referentes en asesoramiento jurídico en el Noroeste Argentino, marcando la diferencia con un servicio cercano, eficiente y confiable.')) }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light-scale-1 p-4 h-100 custom-card-style-1 custom-box-shadow-2" style="border-top: 3px solid var(--accent-gold) !important;">
                    <div class="card-body p-0">
                        <h3 class="font-weight-bold text-4 mb-3 text-uppercase text-color-dark">{{ __('Nuestros Valores') }}</h3>
                        <p class="text-3-5 text-color-grey mb-0 line-height-5">
                            {{ config('site.about.values', __('Ética, compromiso, confidencialidad y excelencia son los pilares que guían nuestro trabajo y nos permiten construir relaciones duraderas con nuestros clientes.')) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="my-0">

    {{-- Global Service / Signature Section --}}
    <div class="container py-5 mt-3 mb-4">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h2 class="text-color-dark font-weight-extra-bold text-10 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <em>{{ config('site.about.global_title', __('Global Service Provided By Exceptional Attorneys')) }}</em>
                </h2>
                <p class="font-weight-light text-color-dark mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ config('site.about.global_description', __('Texto de ejemplo. Reemplazá este contenido desde el panel de administración con la descripción de tu estudio. In nibh ipsum.')) }}</p>
                <p class="positive-ls-3 text-color-grey mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ config('site.about.signature_name', '') }}</p>
            </div>
            <div class="col-md-9 col-lg-6 ps-lg-5">
                <div class="position-relative">
                    <div class="custom-shape-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1100">
                        <div class="position-absolute top-0 left-0 right-0 bottom-0 bg-primary" data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.1, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}"></div>
                    </div>
                    <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                        @php
                            // Cadena de fallback unificada (idéntica en admin /site-data):
                            //   1) setting site.about.founder_image (subido inline)
                            //   2) team member con position LIKE '%fundador%' (case-insensitive)
                            //   3) primer team member activo por sort_order
                            //   4) imagen genérica del demo
                            $founderImageOverride = config('site.about.founder_image');
                            $founderMember = null;
                            try {
                                $founderMember = \App\Modules\TeamMembers\Models\TeamMember::where('is_active', true)
                                    ->whereRaw('LOWER(position) LIKE ?', ['%fundador%'])
                                    ->orderBy('sort_order')
                                    ->first()
                                    ?? \App\Modules\TeamMembers\Models\TeamMember::where('is_active', true)
                                        ->orderBy('sort_order')
                                        ->first();
                            } catch (\Throwable $e) { /* módulo team puede estar desactivado */ }

                            if (!empty($founderImageOverride)) {
                                $founderImage = $founderImageOverride;
                            } elseif ($founderMember && !empty($founderMember->image)) {
                                $founderImage = filter_var($founderMember->image, FILTER_VALIDATE_URL) ? $founderMember->image : asset($founderMember->image);
                            } else {
                                $founderImage = asset('cd-project/img/demos/law-firm-2/generic/generic-1.jpg');
                            }
                        @endphp
                        <img src="{{ $founderImage }}" class="img-fluid position-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="900" alt="{{ $founderMember->name ?? config('site.name') }}" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Practice Areas Call-to-Action Section --}}
    <section class="section section-kpi-counters border-0 m-0 py-5">
        <div class="container py-3">
            <div class="row align-items-center">
                <div class="col-lg-9 text-center text-lg-start mb-4 mb-lg-0">
                    <h2 class="text-color-light font-weight-bold text-8 mb-2">
                        {{ config('site.about.details_title', __('Conocé nuestras áreas de práctica jurídica')) }}
                    </h2>
                    <p class="font-weight-light text-color-light text-4 opacity-8 mb-0">
                        {{ config('site.about.details_description', __('Nuestro equipo está altamente capacitado para brindarle el mejor asesoramiento legal en diversas especialidades.')) }}
                    </p>
                </div>
                <div class="col-lg-3 text-center text-lg-end">
                    <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-bold text-3 text-uppercase py-3 px-5">
                        {{ __('Contáctenos') }}
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- Gallery Section ─ prioridad: 1) settings inline (about.gallery_image_*)
                                      2) módulo Gallery (aboutGalleryImages)
                                      3) imágenes genéricas del demo                     --}}
    @php
        $aboutGallerySlots = [
            config('site.about.gallery_image_1'),
            config('site.about.gallery_image_2'),
            config('site.about.gallery_image_3'),
        ];
        $hasInlineGallery = collect($aboutGallerySlots)->filter()->isNotEmpty();
        $hasModuleGallery = isset($aboutGalleryImages) && $aboutGalleryImages->count() > 0;
        $fallbackImages = [
            asset('cd-project/img/demos/law-firm-2/generic/generic-2.jpg'),
            asset('cd-project/img/demos/law-firm-2/generic/generic-3.jpg'),
            asset('cd-project/img/demos/law-firm-2/generic/generic-4.jpg'),
        ];
    @endphp
    <section class="section section-height-3 bg-primary-darken border-0 m-0">
        <div class="container">
            <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 row-gutter-sm">
                    @for($i = 0; $i < 3; $i++)
                        @php
                            // Cadena de fallback: inline → módulo → genérico
                            if (!empty($aboutGallerySlots[$i])) {
                                $img = $aboutGallerySlots[$i];
                            } elseif ($hasModuleGallery && isset($aboutGalleryImages[$i])) {
                                $g = $aboutGalleryImages[$i];
                                $img = filter_var($g->img, FILTER_VALIDATE_URL) ? $g->img : asset($g->img);
                            } else {
                                $img = $fallbackImages[$i];
                            }
                            $delay = ($i + 1) * 200;
                        @endphp
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="{{ $delay }}">
                            <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0 w-100" href="{{ $img }}">
                                <img src="{{ $img }}" class="img-fluid rounded-0 w-100" alt="{{ config('site.name') }}" style="height: 270px; object-fit: cover;" />
                            </a>
                        </div>
                    @endfor
                </div>
            </div>
        </div>
    </section>

    {{-- Team Section --}}
    @if(is_module_active('team'))
    <div class="container py-5 my-5">
        <div class="row pb-5 mb-2">
            <div class="col text-center">
                <h2 class="font-weight-medium text-12 mb-0">
                    <em>{{ config('site.about.team_title', __('A History To Be Proud Of')) }}</em>
                </h2>
            </div>
        </div>
        <div class="row">
            @forelse($teamMembers ?? collect() as $index => $member)
            <div class="col-lg-4 mb-4 d-flex">
                <div class="card border-0 border-radius-0 custom-box-shadow-1 w-100">
                    <div class="card-body text-center p-4 py-5 d-flex flex-column h-100">
                        @php
                            $photoSrc = !empty($member->image)
                                ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                                : asset('cd-project/img/defaults/team/team-' . (($index % 6) + 1) . '.jpg');
                        @endphp
                        <img src="{{ $photoSrc }}" class="img-fluid rounded-circle mb-3 mx-auto" alt="{{ $member->name }}" style="width: 120px; height: 120px; object-fit: cover;" />
                        <p class="custom-font-secondary font-weight-bold text-color-dark text-4 mb-1">{{ $member->name }}</p>
                        @if($member->position)
                        <strong class="d-block text-color-primary text-3 mb-3">{{ $member->position }}</strong>
                        @endif
                        @if($member->description)
                        <p class="mb-0 text-3 text-color-grey">{{ Str::limit($member->description, 150) }}</p>
                        @endif
                        
                        @if($member->linkedin || $member->email)
                        <div class="d-flex justify-content-center gap-3 mt-auto pt-3">
                            @if($member->linkedin)
                                <a href="{{ $member->linkedin }}" target="_blank" class="text-color-dark text-color-hover-primary text-4" title="LinkedIn">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                            @endif
                            @if($member->email)
                                <a href="mailto:{{ $member->email }}" class="text-color-dark text-color-hover-primary text-4" title="Email">
                                    <i class="fas fa-envelope"></i>
                                </a>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            {{-- No team members loaded --}}
            @endforelse
        </div>
    </div>
    @endif

    {{-- Featured References Section --}}
    @if(is_module_active('references') && isset($featuredReferences) && $featuredReferences->isNotEmpty())
    <section class="section border-0 m-0 py-5 bg-light">
        <div class="container">
            <div class="row pb-4">
                <div class="col text-center">
                    <h2 class="alternative-font-4 text-color-secondary font-weight-bold text-4 positive-ls-3 mb-2 text-uppercase">{{ __('REFERENCIAS') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-bold text-10 negative-ls-1 mb-0">{{ __('Empresas que confían en nosotros') }}</h3>
                </div>
            </div>
            <div class="row align-items-center justify-content-center text-center">
                @php
                    $logoReferences = $featuredReferences->filter(fn($r) => !empty($r->logo));
                @endphp
                @forelse($logoReferences as $index => $reference)
                    <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4 d-flex justify-content-center align-items-center">
                        @php
                            $refLogoSrc = filter_var($reference->logo, FILTER_VALIDATE_URL) ? $reference->logo : asset($reference->logo);
                            $delay = $index < 3 ? (600 - $index * 200) : (($index - 3) * 200 + 200);
                            $animation = $index < 3 ? 'fadeInLeftShorterPlus' : 'fadeInRightShorterPlus';
                        @endphp
                        <div class="p-2 bg-white rounded shadow-sm d-flex justify-content-center align-items-center appear-animation" data-appear-animation="{{ $animation }}" data-appear-animation-delay="{{ $delay }}" style="width: 150px; height: 80px; border: 1px solid #eee;">
                            <img src="{{ $refLogoSrc }}" alt="{{ $reference->name }}" class="img-fluid" style="max-height: 100%; max-width: 100%; object-fit: contain;" />
                        </div>
                    </div>
                @empty
                    <div class="col text-center">
                        <p class="text-color-grey text-3-5 mb-0">{{ __('No hay logos de referencias destacadas disponibles.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
    @endif

    {{-- Company Logos Marquee --}}
    @if(isset($companyLogos) && $companyLogos->count() > 0)
    <div class="appear-animation my-5" data-appear-animation="fadeIn" data-appear-animation-delay="350">
        <div class="marquee custom-marquee-1 pt-4 d-flex" data-duration="40000" data-gap="10" data-duplicated="false" data-startVisible="true">
            <span class="d-flex align-items-center" data-clone-element="2">
                @foreach($companyLogos as $logo)
                @php
                    $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL)
                        ? $logo->image_path
                        : asset($logo->image_path);
                @endphp
                <div class="px-5 py-1">
                    <img src="{{ $logoSrc }}" alt="{{ $logo->name }}" class="img-fluid" style="max-width: 180px;">
                </div>
                @endforeach
            </span>
        </div>
    </div>
    @endif

@endsection