@extends('layout.front.master')

@section('title', config('site.about.page_title', __('Nosotros')) . ' | ' . config('site.name'))
@section('description', config('site.about.main_subtitle', config('site.seo.description')))
@section('keywords', config('site.seo.keywords'))

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

@php
    $pageTitle = config('site.about.page_title', __('Nosotros'));
    $breadcrumbItems = [
        ['label' => __('Inicio'), 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
@endphp

@section('content')

<div role="main" class="main">

{{-- ═══════════════════════════════════════════════════════
    1. PAGE HEADER — Parallax (ya alineado con Schujman)
═══════════════════════════════════════════════════════ --}}
@include('layout.front.partials.page-header-real-estate', [
    'pageTitle' => $pageTitle,
    'pageLabel' => config('site.about.page_label', __('Sobre Nosotros')),
    'pageSubtitle' => config('site.about.main_title', __('Nuestra Empresa')),
    'pageBreadcrumb' => $breadcrumbItems,
])

{{-- ═══════════════════════════════════════════════════════
    2. COMMITMENT — Watermark + Badge + Título + Descripción
═══════════════════════════════════════════════════════ --}}
<div class="section">
    <div class="container container-xl-custom">
        <div class="row pt-5">
            <div class="col position-relative">
                {{-- Watermark background text --}}
                @if(config('site.about.watermark'))
                <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="2000" style="top: 30px; left: 15%;">
                    <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-1 font-weight-black opacity-5 mb-0">{{ config('site.about.watermark') }}</h2>
                </div>
                @endif

                <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="800">{{ config('site.about.commitment_badge', __('NUESTRO COMPROMISO')) }}</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="1200">{{ config('site.about.main_title', __('Nuestra Empresa')) }}</h3>
                </div>
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1250">
                    <img src="{{ asset('template/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4" alt="" />
                </div>

                <p class="text-4 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                    {{ config('site.about.main_subtitle', '') }}
                </p>

                {{-- Mission / Vision / Values --}}
                @php
                    $values = config('site.about.values', []);
                    if (is_string($values)) { $values = json_decode($values, true) ?? []; }
                @endphp
                @if(!empty($values))
                <div class="row mt-3 mb-5">
                    @foreach($values as $value)
                    <div class="col-md-4 appear-animation" data-appear-animation="{{ $loop->first ? 'fadeInLeftShorter' : ($loop->last ? 'fadeInRightShorter' : 'fadeIn') }}" data-appear-animation-delay="{{ $loop->first ? '900' : ($loop->last ? '900' : '660') }}">
                        <h3 class="font-weight-bold text-4 mb-2">{{ $value['title'] ?? '' }}</h3>
                        <p class="text-4">{{ $value['text'] ?? '' }}</p>
                    </div>
                    @endforeach
                </div>
                @else
                {{-- Fallback: usar secondary_text si no hay values configurados --}}
                @if(config('site.about.secondary_text'))
                <p class="text-4 line-height-4 mb-4">{{ config('site.about.secondary_text') }}</p>
                @endif
                @if(config('site.about.tertiary_text'))
                <p class="text-4 line-height-4 mb-4">{{ config('site.about.tertiary_text') }}</p>
                @endif
                @endif
            </div>
        </div>

        {{-- Lightbox images --}}
        <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}">
                <div class="col-md-4 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="{{ site_asset_url('about_image_1', 'cd-project/img/demos/real-estate/about/img-4.jpg') }}">
                        <img src="{{ site_asset_url('about_image_1', 'cd-project/img/demos/real-estate/about/img-4.jpg') }}" class="img-fluid rounded-0" alt="{{ config('site.name') }}" />
                    </a>
                </div>
                <div class="col-md-4 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="{{ site_asset_url('about_image_2', 'cd-project/img/demos/real-estate/about/img-2.jpg') }}">
                        <img src="{{ site_asset_url('about_image_2', 'cd-project/img/demos/real-estate/about/img-2.jpg') }}" class="img-fluid rounded-0" alt="{{ config('site.name') }}" />
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="{{ site_asset_url('about_image_3', 'cd-project/img/demos/real-estate/about/img-3.jpg') }}">
                        <img src="{{ site_asset_url('about_image_3', 'cd-project/img/demos/real-estate/about/img-3.jpg') }}" class="img-fluid rounded-0" alt="{{ config('site.name') }}" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
    3. COUNTERS — Números animados (feature del sistema)
═══════════════════════════════════════════════════════ --}}
@php
    $counters = config('site.about.counters', []);
    if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
@endphp
@if(!empty($counters))
<section class="section border-0 m-0 py-5" style="background: var(--primary);">
    <div class="container">
        <div class="row counters counters-sm text-center">
            @foreach($counters as $counter)
            <div class="col-sm-6 col-lg-{{ 12 / count($counters) }} mb-4 mb-lg-0">
                <div class="counter">
                    <strong class="text-color-light text-8" data-to="{{ $counter['value'] ?? 0 }}" data-append="{{ $counter['append'] ?? '' }}">0</strong>
                    <label class="text-color-light opacity-7 text-3 mt-2">{{ $counter['label'] ?? '' }}</label>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    4. TEAM — Con filtro isotope por categoría (como Schujman)
═══════════════════════════════════════════════════════ --}}
@php
    $aboutTeam = collect();
    $teamCategories = collect();
    if (is_module_active('team')) {
        $aboutTeam = \App\Modules\TeamMembers\Models\TeamMember::with('category')->where('is_active', true)->orderBy('name')->get();
        $teamCategories = \App\Modules\TeamMembers\Models\TeamCategory::orderBy('name')->get();
    }
@endphp

@if($aboutTeam->count() > 0)
<section class="section my-0 bg-light">
    <div class="container container-xl-custom py-4">
        <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="800">{{ __('CONOCENOS') }}</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="1200">{{ config('site.about.team_title', __('NUESTRO EQUIPO')) }}</h3>
        </div>

        {{-- Filtros por categoría --}}
        @if($teamCategories->count() > 1)
        <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center" data-sort-id="team" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
            <li class="nav-item active" data-option-value="*">
                <a class="nav-link text-2-5 text-uppercase font-weight-bold active" href="#">{{ __('Mostrar todos') }}</a>
            </li>
            @foreach($teamCategories as $category)
            <li class="nav-item" data-option-value=".{{ Str::slug($category->name) }}">
                <a class="nav-link text-2-5 text-uppercase font-weight-bold" href="#">{{ $category->name }}</a>
            </li>
            @endforeach
        </ul>
        @endif

        <div class="{{ $teamCategories->count() > 1 ? 'sort-destination-loader sort-destination-loader-showing' : '' }} mt-4 pt-2">
            <div class="row team-list {{ $teamCategories->count() > 1 ? 'sort-destination' : '' }}" {{ $teamCategories->count() > 1 ? 'data-sort-id=team' : '' }}>
                @foreach($aboutTeam as $member)
                <div class="col-12 col-sm-6 col-lg-3 {{ $teamCategories->count() > 1 ? 'isotope-item' : '' }} {{ Str::slug($member->category->name ?? 'otros') }}">
                    <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
                        <span class="thumb-info-wrapper">
                            @php
                                $memberImg = $member->image
                                    ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                                    : asset('cd-project/img/default-team-member.png');
                            @endphp
                            <img src="{{ $memberImg }}" class="img-fluid" alt="{{ $member->name }}">
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">{{ $member->name }}</span>
                                <span class="thumb-info-type">{{ $member->position ?? '' }}</span>
                            </span>
                        </span>
                        @if($member->description)
                        <span class="thumb-info-caption">
                            <span class="thumb-info-caption-text">{{ $member->description }}</span>
                        </span>
                        @endif
                    </span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    5. CTA — Fondo quaternary (como Schujman)
═══════════════════════════════════════════════════════ --}}
<section class="section section-height-2 bg-quaternary border-0 m-0">
    <div class="container container-xl-custom">
        <div class="row align-items-center">
            <div class="col-lg-9 text-center text-lg-start mb-4 mb-lg-0">
                <h2 class="mb-4 text-color-light mb-0">{{ config('site.contact.cta_title', __('¿Tenés un proyecto en mente?')) }}</h2>
                <p class="font-weight-semibold text-color-light text-4 opacity-7 mb-0">{{ config('site.about.cta_subtitle', __('Nuestro equipo está capacitado para encontrar el lugar que necesitas.')) }}</p>
            </div>
            <div class="col-lg-3">
                <div class="d-grid gap-2">
                    <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-semibold border-0 text-3 text-uppercase mt-4 btn-py-3">{{ __('Contactanos') }}
                        <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

</div>
@endsection