@extends('layout.front.master')

@section('title', config('site.about.page_title', __('Who We Are')) . ' | ' . config('site.name'))
@section('description', config('site.about.main_subtitle', config('site.description', '')))
@section('keywords', config('site.seo.keywords') ?? '')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.about.page_title', __('Who We Are')) . ' | ' . config('site.name'))
@section('og_description', config('site.about.main_subtitle', config('site.description', '')))
@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', __('Who We Are')) . ' | ' . config('site.name'))
@section('twitter_description', config('site.about.main_subtitle', config('site.description', '')))
@section('twitter_image', brand_twitter_image())

@section('content')

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

    {{-- ============================================================
         SECTION 1: PAGE HEADER — gradient dark, breadcrumb + title
    ============================================================= --}}
    <section class="page-header page-header-modern custom-bg-color-1 page-header-lg mb-0">
        <div class="container">
            <div class="row py-lg-5 text-center text-lg-start">
                <div class="col-lg-8 order-2 order-lg-1 align-self-center p-static">
                    <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'bottom', 'speed': 0.4, 'transition': true, 'transitionDuration': 1000}">
                        <h1 class="text-color-dark font-weight-semi-bold text-lg-12 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                            <mark class="bg-transparent d-inline-block p-0 mark mark-color mark-color-tertiary">{{ config('site.about.page_title', __('Who We Are')) }}</mark>
                        </h1>
                    </div>
                </div>
                <div class="col-lg-4 order-1 order-lg-2 align-self-center">
                    <ul class="breadcrumb d-flex justify-content-center justify-content-lg-end text-4-5">
                        <li><a href="{{ url('/') }}" class="text-color-dark text-color-hover-primary text-transform-none text-decoration-none">{{ config('site.about.breadcrumb_home', __('Home')) }}</a></li>
                        <li class="active text-color-primary text-transform-none">{{ config('site.about.breadcrumb_current', __('About')) }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SECTION 2: INTRO — large heading + description, 3D hover image
    ============================================================= --}}
    <div class="container py-5">
        <div class="row py-5 text-center text-xl-start align-items-center">
            <div class="col-xl-8">
                <div class="overflow-hidden">
                    <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                        <h3 class="custom-font-1">{{ config('site.about.main_title', __('Driving growth through innovative, results-focused marketing strategies and solutions')) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 pt-5 pt-xl-0">
                @php
                    $introImg1 = config('site.about.image_intro_pill', 'cd-project/img/demos/marketing-1/concept/concept-10.png');
                    $introImg2 = config('site.about.image_intro_icon', 'cd-project/img/demos/marketing-1/svg/generic-2.svg');
                    $introLink = config('site.about.intro_link', '#');
                @endphp
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800">
                    <div class="hover-effect-3d" data-plugin-hover-effect data-plugin-options="{'effect': '3d', 'selector': '.hover-effect-3d-wrapper', 'sensitivity': 20}">
                        <div class="hover-effect-3d-wrapper">
                            <a href="{{ $introLink }}">
                                <span class="bg-gradient text-light anim-hover-scale-1-2 transition-3ms d-inline-flex align-items-center text-3-5 rounded-pill px-4 py-1 font-weight-500 me-2 mb-4">
                                    <span><img src="{{ filter_var($introImg1, FILTER_VALIDATE_URL) ? $introImg1 : asset($introImg1) }}" alt="" class="rounded-pill img-fluid my-2 p-relative right-7 me-2"></span>
                                    <span class="rounded-circle bg-light d-inline-block"><img width="68" class="scale-1" src="{{ filter_var($introImg2, FILTER_VALIDATE_URL) ? $introImg2 : asset($introImg2) }}" alt="" /></span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1000">
                    <p class="text-4 mb-0">{{ config('site.about.main_subtitle', __('Unlock your brand\'s potential with tailored marketing strategies that connect, engage, and drive measurable results.')) }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         SECTION 3: PARALLAX — full-width background image
    ============================================================= --}}
    @php
        $parallaxImg = config('site.about.image_parallax', 'cd-project/img/demos/marketing-1/generic/generic-4.jpg');
    @endphp
    <section class="parallax section section-text-light section-parallax section-center py-0 my-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 10, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}" data-image-src="{{ filter_var($parallaxImg, FILTER_VALIDATE_URL) ? $parallaxImg : asset($parallaxImg) }}">
        <div class="d-flex justify-content-center">
            <div class="scrollable-parallax-wrapper py-5">
                <div class="container py-5 my-5">
                    <div class="row justify-content-center py-5 my-5">
                        <div class="col-lg-9 py-lg-5 my-lg-5"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         SECTION 4: GRADIENT — badge + heading + description
    ============================================================= --}}
    <div class="bg-gradient py-4">
        <div class="container py-5">
            <div class="row py-5 text-center text-xl-start align-items-center">
                <div class="col-lg-4">
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                        <h3 class="custom-font-1 text-light">{{ config('site.about.gradient_heading', __('Empowering Brands!')) }}</h3>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                        <span class="bg-light text-primary d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium me-2 mb-3">{{ config('site.about.gradient_badge', __('About Helping Businesses')) }}</span>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400">
                        <p class="text-light opacity-7 text-4-5 line-height-10">{{ config('site.about.gradient_description', __('We are passionate about helping businesses grow through strategic, innovative, and data-driven marketing solutions. Founded on the principles of creativity, integrity, and customer-centricity, our team of seasoned marketers is dedicated to delivering measurable results that drive success.')) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         SECTION 5: DARK COUNTERS — KPIs with value, suffix, label, description
    ============================================================= --}}
    @php
        $counters = config('site.about.counters', [
            [
                'value' => 10,
                'suffix' => '+',
                'label' => __('Years of Growth'),
                'description' => __('Over a decade of driving consistent growth, delivering impactful results, and empowering brands to achieve their fullest potential'),
            ],
            [
                'value' => 5,
                'suffix' => 'M+',
                'label' => __('Revenue Generated'),
                'description' => __('Millions in revenue generated through strategic campaigns, helping our clients achieve remarkable financial success and sustainable growth.'),
            ],
            [
                'value' => 100,
                'suffix' => '+',
                'label' => __('Business Served'),
                'description' => __('Partnered with hundreds of businesses across diverse industries, delivering tailored marketing solutions that drive results and foster long-term success.'),
            ],
        ]);
        $countersBadge = config('site.about.counters_badge', __('Impact Numbers'));
    @endphp
    <div class="bg-dark">
        <div class="container py-4 py-lg-5">
            <div class="row text-center text-lg-start py-lg-5">
                <div class="col pb-4 pt-4 mt-5">
                    <div class="overflow-hidden">
                        <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                            <span class="bg-quaternary text-secondary d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium me-2">{{ $countersBadge }}</span>
                        </div>
                    </div>
                    <div class="row">
                        @foreach($counters as $i => $counter)
                        <div class="col-lg-6 col-xl-4">
                            <div class="text-lg-start">
                                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $i * 200 }}">
                                    <strong class="custom-highlight-text-1" data-to="{{ $counter['value'] }}" data-append="{{ $counter['suffix'] }}" data-plugin-counter data-plugin-options="{'speed': 2000}">0</strong>
                                </div>
                            </div>
                            <div class="p-relative z-index-1">
                                <h3 class="text-light mb-3 text-8 ls-0 line-height-1">{{ $counter['label'] ?? '' }}</h3>
                                @if(!empty($counter['description']))
                                <p class="text-3-5 text-grey mb-4 pe-4">{{ $counter['description'] }}</p>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         SECTION 6: STICKY SCROLL — 2 images left, culture + values right
    ============================================================= --}}
    @php
        $stickyImg1 = config('site.about.image_culture', 'cd-project/img/demos/marketing-1/generic/generic-5.jpg');
        $stickyImg2 = config('site.about.image_values', 'cd-project/img/demos/marketing-1/generic/generic-6.jpg');
    @endphp
    <div class="container gsap-content-container">
        <div class="row">
            <div class="col pt-4">
                <div class="row">
                    <div class="col-5 col-lg-7 text-center p-relative z-index-1 gsap-content-images">
                        <div class="sticky-container h-100">
                            <div data-plugin-sticky data-plugin-options="{'minWidth': 0, 'containerSelector': '.sticky-container', 'padding': {'top': 0, 'bottom': 0}}">
                                <div class="vh-100 w-100 d-flex align-items-center text-center">
                                    <img id="img1" class="img-fluid position-absolute custom-border-radius-1 transform3dx-n50 left-50pct" src="{{ filter_var($stickyImg1, FILTER_VALIDATE_URL) ? $stickyImg1 : asset($stickyImg1) }}" width="500" alt="">
                                    <img id="img2" class="img-fluid position-absolute custom-border-radius-1 transform3dx-n50 left-50pct" src="{{ filter_var($stickyImg2, FILTER_VALIDATE_URL) ? $stickyImg2 : asset($stickyImg2) }}" width="500" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-7 col-lg-5 pb-4 gsap-content-text">
                        <div class="py-5 my-5">
                            {{-- Culture block --}}
                            <div class="gsap-content-marker" data-marker-content="img1">
                                <div class="custom-heading-1 custom-pos-12">
                                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                        <strong>{{ config('site.about.culture_watermark', __('Culture')) }}</strong>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1">
                                    <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ config('site.about.culture_title', __('Our Culture')) }}</h2>
                                    @php
                                        // Tolerante a string (newline-separated) o array
                                        $rawCulture = config('site.about.culture_paragraphs');
                                        if (is_string($rawCulture) && trim($rawCulture) !== '') {
                                            $cultureParagraphs = array_values(array_filter(array_map('trim', preg_split('/\r\n|\r|\n/', $rawCulture))));
                                        } elseif (is_array($rawCulture) && !empty($rawCulture)) {
                                            $cultureParagraphs = array_values(array_filter($rawCulture));
                                        } else {
                                            $cultureParagraphs = [
                                                __('Somos un equipo multidisciplinario que combina estrategia, diseño, tecnología y comunicación. Cada proyecto se aborda con la profundidad que requiere y con el cuidado de quien entiende el peso de una marca corporativa.'),
                                                __('Trabajamos cerca de cada cliente, generando vínculos de confianza a largo plazo. Creemos en proyectos de calidad, plazos cumplidos y resultados medibles.'),
                                            ];
                                        }
                                    @endphp
                                    @foreach($cultureParagraphs as $paragraph)
                                    <p class="text-4-5 text-dark">{!! $paragraph !!}</p>
                                    @endforeach
                                </div>
                            </div>

                            {{-- Values block --}}
                            <div class="gsap-content-marker pt-5" data-marker-content="img2">
                                <div class="custom-heading-1 custom-pos-12">
                                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                        <strong>{{ config('site.about.values_watermark', __('Values')) }}</strong>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1">
                                    <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ config('site.about.values_title', __('Our Values')) }}</h2>
                                    @php
                                        $rawValues = config('site.about.values_paragraphs');
                                        if (is_string($rawValues) && trim($rawValues) !== '') {
                                            $valuesParagraphs = array_values(array_filter(array_map('trim', preg_split('/\r\n|\r|\n/', $rawValues))));
                                        } elseif (is_array($rawValues) && !empty($rawValues)) {
                                            $valuesParagraphs = array_values(array_filter($rawValues));
                                        } else {
                                            $valuesParagraphs = [
                                                __('Compromiso, profesionalismo y escucha activa son la base de cómo trabajamos. Cada marca tiene una historia única y nuestro rol es contarla con coherencia, claridad y propósito.'),
                                                __('Defendemos el trabajo de calidad, los procesos transparentes y los resultados verificables. Acompañamos a cada cliente con honestidad y dedicación.'),
                                            ];
                                        }
                                    @endphp
                                    @foreach($valuesParagraphs as $paragraph)
                                    <p class="text-4-5 text-dark">{!! $paragraph !!}</p>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         SECTION 7: TESTIMONIALS — stars badge + carousel
    ============================================================= --}}
    @php
        $testimonials = config('site.about.testimonials', [
            [
                'text' => __('Superaron las expectativas con estrategias innovadoras. Se tomaron el tiempo para entender nuestra marca y entregaron campañas dirigidas que impulsaron significativamente los resultados.'),
                'author' => __('Cliente Satisfecho'),
                'company' => config('site.name'),
            ],
            [
                'text' => __('Excelente gestión. Nuestro engagement se duplicó y la presencia de marca nunca había sido tan fuerte. Recomendamos ampliamente sus servicios.'),
                'author' => __('Cliente Satisfecho'),
                'company' => config('site.name'),
            ],
            [
                'text' => __('Su investigación fue increíblemente exhaustiva. Aportó insights valiosos que dieron forma a toda nuestra estrategia. No podríamos estar más conformes con el resultado.'),
                'author' => __('Cliente Satisfecho'),
                'company' => config('site.name'),
            ],
        ]);
    @endphp
    @if(count($testimonials) > 0)
    <section class="section border-top-0 custom-bg-color-1 m-0">
        <div class="custom-el-2">
            <div class="container pt-4 pb-5 p-relative z-index-1">
                <div class="row text-center text-lg-start justify-content-between py-5">
                    <div class="col-lg-4 py-5 px-4 px-lg-0">
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                            <span class="bg-gradient text-light d-inline-block text-3 rounded-pill px-4 py-1 font-weight-medium me-2"><i class="fa-solid fa-star me-1"></i><i class="fa-solid fa-star me-1"></i><i class="fa-solid fa-star me-1"></i><i class="fa-solid fa-star me-1"></i><i class="fa-solid fa-star"></i></span>
                            <p class="p-0 d-inline-block text-3-5">{{ config('site.about.testimonials_stars_label', __('Beyond Expectations')) }}</p>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                            @php
                                $testimonialsHighlight = config('site.about.testimonials_highlight_word', __('saying'));
                                $testimonialsHeading = config('site.about.testimonials_heading', __('See what our clients are'));
                            @endphp
                            <h3 class="custom-font-2 mb-0">{!! $testimonialsHeading !!} <span class="custom-word-highlight-1 d-inline-block p-relative"><span class="p-relative z-index-2">{{ $testimonialsHighlight }}!</span><img width="100%" src="{{ asset('cd-project/img/demos/marketing-1/svg/generic-3.svg') }}" alt=""></span></h3>
                        </div>
                    </div>
                    <div class="col-lg-6 py-5">
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400">
                            <div class="owl-carousel custom-owl-carousel-1 owl-theme stage-margin rounded-nav nav-icon-1 nav-size-md nav-position-1" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'margin': 10, 'autoHeight': true, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 40}">
                                @foreach($testimonials as $testimonial)
                                <div>
                                    <div class="pe-5">
                                        <p class="text-dark text-4-5 line-height-9">{{ $testimonial['text'] }}</p>
                                        <strong class="text-color-primary text-uppercase font-weight-medium">{{ $testimonial['author'] }}, {{ $testimonial['company'] }}</strong>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

</div>

@endsection