@extends('layout.front.master')

@section('title', config('site.about.page_title', __('About Us')))
@section('description', config('site.seo.description', config('site.description', '')))
@section('keywords', config('site.seo.keywords', ''))
@section('og_title', config('site.about.page_title', __('About Us')))
@section('og_description', config('site.about.main_subtitle', config('site.description', '')))

@section('content')

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

    {{-- About Content --}}
    <div style="background: var(--secondary);">
        <div class="container container-xl-custom py-5">
            <div class="row py-4">
                <div class="col-xl-7 py-4 py-xl-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
                    @php $aboutImg = asset('cd-project/img/demos/digital-agency-2/about-us/about-us-1.jpg'); @endphp
                    <img class="img-fluid" src="{{ $aboutImg }}" alt="{{ config('site.name') }}">
                </div>
                <div class="col-xl-5 d-flex flex-column justify-content-center">
                    <p class="custom-text-5 font-weight-bold mb-3 text-color-primary">
                        {{ config('site.about.badge', config('site.name')) }}
                    </p>
                    <h3 class="custom-text-9 text-color-light font-weight-bold mb-4">
                        {{ config('site.about.main_title', __('Solutions that work for you')) }}
                    </h3>
                    <p class="custom-text-4 mb-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400" style="color: var(--grey-900);">
                        {{ config('site.about.main_subtitle', config('site.description', '')) }}
                    </p>
                    @if(config('site.about.description_1'))
                    <p class="custom-text-4 mb-0 font-weight-medium appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600" style="color: var(--grey-800);">
                        {{ config('site.about.description_1') }}
                    </p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Counter Stats --}}
    @php
        $counters = config('site.about.counters', []);
        if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
    @endphp
    @if(!empty($counters))
    <section style="background: var(--secondary-100);">
        <div class="container container-xl-custom py-5">
            <div class="row counters py-4">
                @foreach($counters as $index => $counter)
                <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
                    <div class="counter counter-light" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="{{ 200 + ($index * 200) }}">
                        <strong data-to="{{ $counter['value'] ?? 0 }}" data-append="{{ $counter['append'] ?? '' }}" class="mb-3">0</strong>
                        <label class="custom-font-tertiary text-color-light custom-text-8 opacity-7 font-weight-normal">{{ $counter['label'] ?? '' }}</label>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Mission / Values --}}
    <section class="py-5" style="background: var(--secondary);">
        <div class="container container-xl-custom py-4">
            <div class="row align-items-center">
                <div class="col-xl-4 pb-5 pb-xl-0 text-center text-xl-start">
                    <img src="{{ site_asset_url('loader_logo', 'cd-project/img/logo.png') }}" alt="{{ config('site.name') }}" style="max-width: 160px; width: 100%; height: auto;">
                </div>
                <div class="col-xl-8 d-flex flex-column justify-content-center align-items-start ps-xl-5">
                    @if(config('site.about.description_2'))
                    <p class="custom-font-tertiary custom-text-6 line-height-6 font-weight-medium text-color-light appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
                        {{ config('site.about.description_2') }}
                    </p>
                    @endif
                    @if(config('site.about.secondary_text'))
                    <p class="custom-text-3 mb-5 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400" style="color: var(--grey-900);">
                        {{ config('site.about.secondary_text') }}
                    </p>
                    @endif
                    @if(is_module_active('services') && isset($services) && $services->count() > 0)
                    <ul class="custom-list list-unstyled my-3">
                        @foreach($services->take(3) as $index => $service)
                        <li class="font-weight-medium custom-text-4 mb-4 text-color-light appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="{{ 200 + ($index * 150) }}">{{ $service->title }}</li>
                        @endforeach
                    </ul>
                    @endif
                    <a href="{{ route('front.contact') }}" class="btn btn-outline custom-btn-outline btn-primary rounded-0 text-color-light custom-text-4 bg-color-hover-primary font-weight-semibold custom-btn-with-arrow px-4 py-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600">{{ config('site.about.cta_label', __('Contact Us')) }}</a>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="get-in-touch bg-color-after-secondary overlay overlay-color-primary overlay-show p-relative overflow-hidden cta-gradient">
        <span class="custom-circle custom-circle-1 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
        <span class="custom-circle custom-circle-2 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
        <div class="container container-xl-custom">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <p class="mb-2 text-color-tertiary custom-text-7 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">{{ config('site.welcome.cta_badge', __('Hablemos')) }}</p>
                    <h4 class="text-color-light font-weight-bold custom-text-10 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                        {{ config('site.about.cta_title', config('site.welcome.cta_title', __('Estamos listos para ayudarte'))) }}
                    </h4>
                </div>
                <div class="col-lg-4 d-flex align-items-center justify-content-start justify-content-lg-end mt-5 mt-lg-0">
                    <a href="{{ route('front.contact') }}" class="btn btn-outline custom-btn-outline btn-light border-white rounded-0 px-4 py-3 text-color-light text-color-hover-dark bg-color-hover-light custom-text-6 line-height-6 font-weight-semibold custom-btn-with-arrow appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">{{ config('site.about.cta_label', __('Contact Us')) }}</a>
                </div>
            </div>
        </div>
    </section>
@endsection