@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
    $imgBase = 'cd-project/img/demos/urban-development';
    $pageTitle = config('site.about.page_title', __('Nosotros'));
    $breadcrumbItems = [
        ['label' => __('Inicio'), 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];

    $values = config('site.about.values', []);
    if (is_string($values)) { $values = json_decode($values, true) ?? []; }
    if (empty($values)) {
        $values = [
            ['icon' => 'fas fa-leaf', 'title' => __('Compromiso con el entorno'), 'description' => __('Cada desarrollo respeta y potencia el paisaje natural que lo rodea.')],
            ['icon' => 'fas fa-compass-drafting', 'title' => __('Calidad constructiva'), 'description' => __('Infraestructura premium y estándares que perduran en el tiempo.')],
            ['icon' => 'fas fa-people-roof', 'title' => __('Comunidad'), 'description' => __('Barrios pensados para que las familias crezcan y se encuentren.')],
        ];
    }

    $counters = config('site.about.counters', []);
    if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
    if (empty($counters)) {
        $counters = [
            ['number' => '15', 'label' => __('Años desarrollando')],
            ['number' => '6', 'label' => __('Barrios entregados')],
            ['number' => '1200', 'label' => __('Familias')],
            ['number' => '98', 'label' => __('Recomendación'), 'suffix' => '%'],
        ];
    }

    $aboutTeam = collect();
    if (is_module_active('team')) {
        $aboutTeam = \App\Modules\TeamMembers\Models\TeamMember::where('is_active', true)->orderBy('sort_order')->orderBy('name')->get();
    }
@endphp

@section('content')

@include('layout.front.partials.page-header-urban-development', [
    'pageTitle' => $pageTitle,
    'pageLabel' => config('site.about.page_label', __('La desarrolladora')),
    'pageSubtitle' => config('site.about.main_title', __('Construimos lugares para vivir')),
    'pageBreadcrumb' => $breadcrumbItems,
])

{{-- Intro --}}
<section class="ud-section">
    <div class="ud-container">
        <div class="ud-split ud-split--media-right ud-reveal">
            <div>
                <span class="ud-eyebrow">{{ config('site.about.page_label', __('Quiénes somos')) }}</span>
                <h2 class="ud-display">{{ config('site.about.main_title', __('Más que lotes: proyectos de vida')) }}</h2>
                <p class="ud-lead">{{ config('site.about.main_subtitle', __('Somos una desarrolladora con raíces en el norte argentino. Diseñamos barrios privados y urbanizaciones donde la naturaleza, la seguridad y la cercanía a la ciudad conviven en equilibrio.')) }}</p>
                @if(config('site.about.secondary_text'))
                <p class="ud-body">{{ config('site.about.secondary_text') }}</p>
                @endif
            </div>
            <div class="ud-figure ud-figure--frame ud-zoom">
                <img src="{{ site_asset_url('about_image_1', $imgBase.'/about/about-1.jpg') }}" alt="{{ config('site.name') }}">
            </div>
        </div>
    </div>
</section>

{{-- Valores --}}
<section class="ud-section ud-on-stone ud-section--tight" style="padding-top:var(--ud-gap); padding-bottom:var(--ud-gap);">
    <div class="ud-container">
        <div class="ud-section-head ud-section-head--center ud-reveal">
            <span class="ud-eyebrow ud-eyebrow--center">{{ __('Nuestra forma de hacer') }}</span>
            <h2 class="ud-display">{{ __('Lo que nos define') }}</h2>
        </div>
        <div class="ud-amenities ud-reveal">
            @foreach($values as $value)
            <div class="ud-amenity">
                <i class="ud-amenity__icon {{ $value['icon'] ?? 'fas fa-check' }}"></i>
                <h3 class="ud-amenity__title">{{ $value['title'] ?? '' }}</h3>
                <p class="ud-amenity__desc">{{ $value['description'] ?? $value['text'] ?? '' }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Stats --}}
@if(!empty($counters))
<section class="ud-section ud-on-green">
    <div class="ud-container">
        <div class="ud-stats ud-reveal" style="border-color:rgba(255,255,255,0.18);">
            @foreach($counters as $counter)
            @php $num = $counter['number'] ?? $counter['value'] ?? '0'; $suf = $counter['suffix'] ?? ''; @endphp
            <div class="ud-stat">
                <span class="ud-stat__num" data-count="{{ preg_replace('/[^0-9]/', '', $num) }}" data-suffix="{{ $suf }}">{{ $num }}{{ $suf }}</span>
                <span class="ud-stat__label">{{ $counter['label'] ?? $counter['title'] ?? '' }}</span>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Equipo --}}
@if($aboutTeam->count() > 0)
<section class="ud-section">
    <div class="ud-container">
        <div class="ud-section-head ud-section-head--center ud-reveal">
            <span class="ud-eyebrow ud-eyebrow--center">{{ config('site.about.team_title', __('El equipo')) }}</span>
            <h2 class="ud-display">{{ __('Personas detrás del proyecto') }}</h2>
        </div>
        <div class="ud-team ud-reveal">
            @foreach($aboutTeam as $member)
            @php
                $memberImg = $member->image
                    ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                    : asset($imgBase.'/services/'.(($loop->index % 6) + 1).'.jpg');
            @endphp
            <article class="ud-member">
                <div class="ud-member__media ud-zoom"><img src="{{ $memberImg }}" alt="{{ $member->name }}"></div>
                <h3 class="ud-member__name">{{ $member->name }}</h3>
                @if($member->position)<span class="ud-member__role">{{ $member->position }}</span>@endif
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- CTA --}}
<section class="ud-section ud-on-dark ud-cta" style="text-align:center;">
    <div class="ud-container ud-cta__inner ud-reveal">
        <span class="ud-eyebrow ud-eyebrow--center" style="color:var(--ud-gold);">{{ __('Conocenos') }}</span>
        <h2 class="ud-display ud-narrow" style="color:#fff;">{{ config('site.about.cta_subtitle', __('Visitá el barrio y proyectá tu futuro')) }}</h2>
        <div class="ud-hero__cta" style="justify-content:center;">
            <a href="{{ route('front.contact') }}" class="ud-btn ud-btn--gold">{{ __('Agendá tu visita') }} <i class="fas fa-arrow-right"></i></a>
            @if(is_module_active('projects'))<a href="{{ route('frontend.projects.index') }}" class="ud-btn ud-btn--light">{{ __('Ver desarrollos') }}</a>@endif
        </div>
    </div>
</section>

@endsection