@extends('layout.front.master')

@section('title', config('site.modules.about.page_header.title', 'Empresa') . ' | ' . config('site.name'))
@section('description', config('site.about.meta_description', 'Acompañamiento digital en Tucumán. 5+ años ayudando a negocios a tener presencia web profesional. Equipo chico, obsesión por el detalle, 45+ proyectos entregados.'))

@section('content')

@include('layout.front.partials.page-header-accounting-1', [
    'pageTitle' => config('site.about.page_heading', 'Acompañamiento digital real, desde Tucumán'),
    'pageLabel' => config('site.modules.about.page_header.title', 'EMPRESA'),
    'pageBreadcrumb' => [
        ['label' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => 'Empresa', 'url' => null],
    ],
])

{{-- ====== STORY SECTION ====== --}}
<div style="background-color: var(--secondary); margin-top: 0; padding-top: 0; overflow: hidden;">
    <div class="container container-xl-custom">
        <div class="row py-5 my-0">
            <div class="col-lg-6">
                <p class="font-weight-medium text-8 line-height-4 negative-ls-1 p-relative bottom-10" style="color: var(--light);">
                    {!! config('site.about.story_1', 'Vimos demasiados negocios buenos con sitios web que no les hacían justicia. <strong>Por eso decidimos hacer las cosas diferente.</strong>') !!}
                </p>

                <p class="line-height-8 font-weight-medium text-4" style="color: var(--quaternary);">
                    {!! config('site.about.story_2', 'Empezamos en 2020 ayudando a negocios de Tucumán a tener presencia digital real. No queríamos ser una agencia más que entrega un sitio y desaparece — queríamos <span class="highlight highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="400" data-plugin-options="{\'flagClassOnly\': true}" style="color: var(--light); --highlight-bg: var(--primary); --highlight-opacity: 0.15;">acompañar de verdad.</span>') !!}
                </p>

                <p class="line-height-7 font-weight-medium text-4 my-4" style="color: var(--quaternary);">
                    {!! config('site.about.story_3', 'Somos un equipo chico. Chico por elección. Conocemos a cada cliente por su nombre. Nos tomamos el tiempo de entender qué vendés, a quién le hablás y qué necesitás que pase cuando alguien entra a tu sitio. <strong style="color: var(--light);">Recién ahí armamos algo.</strong>') !!}
                </p>

                @if(config('site.about.story_4'))
                <p class="line-height-7 font-weight-medium text-4 my-4" style="color: var(--quaternary);">
                    {!! config('site.about.story_4') !!}
                </p>
                @endif

                <div class="d-flex flex-row pt-3">
                    <div class="pt-2">
                        <img class="avatar rounded-circle" alt="{{ config('site.name') }}" width="50" src="{{ site_asset_url('loader_logo', 'cd-project/assets/logo-2.png') }}">
                    </div>
                    <div class="ps-3">
                        <h4 class="mt-2 mb-0 text-5 font-weight-semi-bold" style="color: var(--light);">{{ config('site.about.author_name', config('site.name')) }}</h4>
                        <p class="mb-2 font-weight-medium text-3" style="color: var(--primary);">{{ config('site.about.author_location', '') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div class="position-relative" style="height: 500px;">
                    @php
                        $aboutImg1 = config('site.about.image_1', 'cd-project/img/demos/accounting-1/about/about-1.jpg');
                        $aboutImg2 = config('site.about.image_2', 'cd-project/img/demos/accounting-1/about/about-2.jpg');
                        $aboutImg3 = config('site.about.image_3', 'cd-project/img/demos/accounting-1/about/about-3.jpg');
                        $aboutImgAlt = config('site.about.images_alt', config('site.name') . ' — ' . __('foto institucional'));
                        $resolveImg = fn($v) => filter_var($v, FILTER_VALIDATE_URL) ? $v : asset($v);
                    @endphp
                    <img src="{{ $resolveImg($aboutImg1) }}" class="appear-animation position-absolute" alt="{{ $aboutImgAlt }}" data-appear-animation="expandIn" data-appear-animation-duration="600ms" style="border-radius: 8px; width: 55%; top: 0; right: 5%; z-index: 1;" />
                    <img src="{{ $resolveImg($aboutImg2) }}" class="appear-animation position-absolute" alt="{{ $aboutImgAlt }}" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" style="border-radius: 8px; width: 50%; top: 35%; left: 0; z-index: 2; border: 3px solid var(--dark);" />
                    <img src="{{ $resolveImg($aboutImg3) }}" class="appear-animation position-absolute" alt="{{ $aboutImgAlt }}" data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" style="border-radius: 8px; width: 45%; bottom: 0; right: 10%; z-index: 3; border: 3px solid var(--dark);" />
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ====== NUMBERS SECTION ====== --}}
@php
    $aboutCounters = config('site.about.counters', [
        ['value' => '500', 'suffix' => '+', 'label' => __('Beneficiarios alcanzados'), 'subtitle' => __('Programas activos')],
        ['value' => '10', 'suffix' => '+', 'label' => __('Años de trayectoria'), 'subtitle' => __('Trabajando por la comunidad')],
        ['value' => '50', 'suffix' => '+', 'label' => __('Voluntarios activos'), 'subtitle' => __('Equipo comprometido')],
    ]);
@endphp
@if(!empty($aboutCounters) && is_array($aboutCounters))
<section class="section border-0 py-5 m-0" style="background-color: var(--dark);">
    <div class="container container-xl-custom py-4">
        <div class="row counters text-center justify-content-center">
            @foreach($aboutCounters as $i => $c)
                <div class="col-6 col-lg-4 {{ $i < 2 ? 'mb-4 mb-lg-0' : '' }}">
                    <div class="counter counter-light" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $i * 200 }}">
                        @if(is_numeric($c['value'] ?? null))
                            <strong data-to="{{ $c['value'] }}" data-append="{{ $c['suffix'] ?? '' }}" class="font-weight-extra-bold text-13" style="color: var(--primary);">0</strong>
                        @else
                            <strong class="font-weight-extra-bold text-13" style="color: var(--primary);">{{ $c['value'] ?? '' }}{{ $c['suffix'] ?? '' }}</strong>
                        @endif
                        <p class="font-weight-medium text-4 mb-0 mt-2" style="color: var(--light);">{{ $c['label'] ?? '' }}</p>
                        @if(!empty($c['subtitle']))
                            <p class="text-3 mb-0" style="color: var(--quaternary);">{{ $c['subtitle'] }}</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ====== APPROACH SECTION: Cómo trabajamos ====== --}}
<section class="border-0 py-5 m-0" style="background-color: var(--secondary);">
    <div class="container container-xl-custom py-4">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <p class="font-weight-semi-bold positive-ls-2 text-2 mb-2" style="color: var(--primary);">{{ config('site.about.approach_badge', 'ACOMPAÑAMIENTO DIGITAL') }}</p>
                <h2 class="font-weight-bold text-9 mb-3" style="color: var(--light);">{{ config('site.about.approach_heading', 'Cómo trabajamos') }}</h2>
                <p class="text-4 font-weight-medium" style="color: var(--quaternary);">
                    {{ config('site.about.approach_subtitle', 'No te entregamos un sitio y desaparecemos. Te guiamos en todo el proceso: qué información necesitás, cómo presentarla y qué funciona en tu industria.') }}
                </p>
            </div>
        </div>

        @php
            $approach = config('site.about.approach', []);
            if (is_string($approach)) { $approach = json_decode($approach, true) ?? []; }
            if (empty($approach)) {
                $approach = [
                    ['number' => '01', 'title' => 'Escuchamos', 'text' => 'Arrancamos por entender tu negocio, no por mostrarte plantillas. Qué vendés, a quién le hablás, qué necesitás que pase cuando alguien entra a tu sitio.'],
                    ['number' => '02', 'title' => 'Construimos', 'text' => 'Armamos tu sitio con exactamente lo que necesitás — servicios, galería, blog, lo que haga falta. En 2-3 semanas está listo.'],
                    ['number' => '03', 'title' => 'Acompañamos', 'text' => 'Te enseñamos a gestionar tu sitio vos mismo. Y después seguimos acá: actualizaciones, mejoras continuas, soporte real — un mensaje directo a quienes armaron tu sitio.'],
                ];
            }
        @endphp
        <div class="row d-flex">
            @foreach($approach as $index => $card)
            <div class="col-lg-4 {{ !$loop->last ? 'mb-4 mb-lg-0' : '' }} d-flex">
                <div class="appear-animation w-100" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $index * 200 }}">
                    <div class="card border-0 h-100" style="background-color: var(--dark); border-radius: 8px;">
                        <div class="card-body p-4 d-flex flex-column">
                            <span class="d-block font-weight-extra-bold text-13 mb-2" style="color: var(--primary);">{{ $card['number'] ?? str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                            <h4 class="font-weight-bold text-5 mb-3" style="color: var(--light);">{{ $card['title'] ?? '' }}</h4>
                            <p class="text-3-5 mb-0 flex-grow-1" style="color: var(--quaternary);">{{ $card['text'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Link a servicios --}}
        @if(is_module_active('services'))
        <div class="text-center mt-5">
            <a href="{{ route('frontend.services.index') }}" class="btn btn-outline btn-rounded font-weight-bold text-2" style="color: var(--primary); border-color: var(--primary);">
                {{ config('site.about.approach_cta', __('Conocé nuestros servicios')) }} <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
        @endif
    </div>
</section>

{{-- ====== CTA SECTION ====== --}}
<section class="border-0 py-5 m-0" style="background-color: var(--dark);">
    <div class="container container-xl-custom py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="font-weight-bold text-9 mb-3" style="color: var(--light);">{{ config('site.about.cta_heading', '¿Tiene sentido trabajar juntos?') }}</h2>
                <p class="text-4 font-weight-medium mb-5" style="color: var(--quaternary);">
                    {{ config('site.about.cta_subtitle', '30 minutos de conversación alcanzan para saberlo. Contanos sobre tu negocio y te decimos con honestidad si podemos ayudarte.') }}
                </p>
                <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
                    @if(config('site.booking_url'))
                    <a href="{{ config('site.booking_url') }}" target="_blank" rel="noopener" class="btn btn-rounded btn-primary font-weight-bold text-2 px-5 py-3">
                        <i class="fas fa-calendar-alt me-2"></i> {{ config('site.about.cta_button_label', __('Agendar reunión')) }}
                    </a>
                    @else
                    <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary font-weight-bold text-2 px-5 py-3">
                        <i class="fas fa-envelope me-2"></i> {{ config('site.about.cta_button_label', __('Quiero sumarme')) }}
                    </a>
                    @endif
                    @if(config('site.social_media.whatsapp.active'))
                    <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" rel="noopener" class="btn btn-outline btn-rounded font-weight-bold text-2 px-5 py-3" style="color: var(--primary); border-color: var(--primary);">
                        <i class="fab fa-whatsapp me-2"></i> {{ config('site.about.whatsapp_label', __('WhatsApp')) }}
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Forzar inicialización de counters si el theme no los detectó
    setTimeout(function() {
        $('.counters [data-to]').each(function() {
            var $this = $(this);
            if ($this.text() === '0' && $this.data('to')) {
                $({count: 0}).animate({count: $this.data('to')}, {
                    duration: 2000,
                    easing: 'swing',
                    step: function() {
                        $this.text(Math.floor(this.count));
                    },
                    complete: function() {
                        $this.text(this.count + ($this.data('append') || ''));
                    }
                });
            }
        });
    }, 500);
});
</script>
@endsection