@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@section('description', config('site.seo.description') ?? config('site.description', ''))
@section('keywords', config('site.seo.keywords') ?? '')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name'))
@section('og_description', config('site.og.description') ?? 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.name'))
@section('twitter_description', config('site.twitter.description') ?? config('site.description', ''))
@section('twitter_image', brand_twitter_image())

@section('content')

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

    {{-- ═══════════════════════════════════════════════════════════════
         HERO SECTION — Angled with floating concept images
    ═══════════════════════════════════════════════════════════════ --}}
    <section class="section section-angled overflow-visible section-angled-reverse border-top-0 hero mb-0">
        <div class="section-angled-layer-bottom bg-light"></div>
        <div class="section-angled-content">
            <div class="custom-heading-1">
                <strong>{{ config('site.name') }}</strong>
            </div>
            <div class="container py-3 py-lg-5 p-relative z-index-1">
                <div class="row py-5">
                    <div class="text-center text-lg-start col-lg-6 py-5">
                        <div class="overflow-hidden">
                            <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                                <span class="bg-gradient text-light d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium me-2">{{ config('site.welcome.hero_badge', "Let's Go") }}</span>
                                <p class="p-0 d-inline-block text-4">{{ config('site.tagline', 'Beyond Expectations') }}</p>
                            </div>
                        </div>
                        <div class="perspective-500">
                            <h2 class="custom-hero-font-1 appear-animation" data-appear-animation="textEntrance" data-appear-animation-delay="0">{!! config('site.welcome.hero_title', 'Crafting <strong class="custom-decoration-1 d-inline-block"><mark class="bg-transparent d-inline-block p-0 mark mark-color mark-color-tertiary">Success</mark></strong><br><mark class="bg-transparent d-inline-block p-0 mark mark-color mark-color-tertiary">Through</mark> <strong>Marketing</strong>') !!}</h2>
                        </div>
                        <div class="d-flex mb-4 justify-content-center justify-content-lg-start">
                            <div class="feature-box align-items-center me-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                <div class="feature-box-icon box-shadow-2 bg-light border custom-border-color-1">
                                    <i class="fa-solid fa-check-double text-secondary"></i>
                                </div>
                                <div class="feature-box-info line-height-2 ps-2">
                                    <span class="text-4 font-weight-medium text-dark negative-ls-05">{{ config('site.welcome.feature_1', 'Digital Marketing') }}</span>
                                </div>
                            </div>
                            <div class="feature-box align-items-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                <div class="feature-box-icon box-shadow-2 bg-light border custom-border-color-1">
                                    <i class="fa-solid fa-check-double text-secondary"></i>
                                </div>
                                <div class="feature-box-info line-height-2 ps-2">
                                    <span class="text-4 font-weight-medium text-dark negative-ls-05">{{ config('site.welcome.feature_2', 'Growth Agency') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                            <a href="{{ route('front.about') }}" class="btn btn-modern btn-effect-4 btn-rounded btn-dark text-transform-none text-3 font-weight-medium mt-2 mb-2">{{ config('site.welcome.cta_label', __('Learn More')) }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                        </div>
                    </div>
                    <div class="col text-lg-end mt-3 mt-lg-0 px-5 px-lg-0 custom-pos-2">
                        {{-- Floating image grid — 9 concept images, BewPro layout --}}
                        <div class="row align-items-center">
                            <div class="col-4">
                                <div class="p-relative z-index-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                    <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 0, 'startPos': 'top', 'speed': 1.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-3 d-inline-block p-relative bg-light custom-border-radius-1 border-0 p-2 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-1.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                                    <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 0, 'startPos': 'bottom', 'speed': 5.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-4 d-inline-block p-relative bg-light custom-border-radius-1 border-0 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-4.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                                    <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 0, 'startPos': 'bottom', 'speed': 3.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-5 d-inline-block p-relative bg-light custom-border-radius-1 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-9.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'top', 'speed': 7.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-6 d-inline-block p-relative bg-light custom-border-radius-1 border-0 p-2 p-lg-4 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-2.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'bottom', 'speed': 6.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-7 d-inline-block p-relative bg-light custom-border-radius-1 border-0 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-8.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-relative z-index-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'bottom', 'speed': 5.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-8 d-inline-block p-relative bg-light custom-border-radius-1 border-0 p-2 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-3.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'bottom', 'speed': 5.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-9 d-inline-block p-relative bg-light custom-border-radius-1 border-0 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-5.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'bottom', 'speed': 5.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-10 d-inline-block p-relative bg-light custom-border-radius-1 border-0 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-6.png') }}" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                                <div class="p-relative z-index-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                                    <div data-plugin-float-element data-plugin-options="{'minWidth': 0, 'startPos': 'bottom', 'speed': 5.0, 'transition': true, 'transitionDuration': 1000}">
                                        <div class="custom-box-1 p-relative custom-pos-11 d-inline-block p-relative bg-light custom-border-radius-1 border-0 text-center">
                                            <img src="{{ asset('cd-project/img/demos/marketing-1/concept/concept-7.png') }}" alt="" class="img-fluid m-2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ═══════════════════════════════════════════════════════════════
         FIRST MARQUEE — Scrolling text ticker
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="custom-pos-1">
        <div class="marquee py-3 custom-bg-gradient-1" data-duration="70000" data-gap="10" data-duplicated="true" data-startVisible="true">
            <p class="text-5-5 text-dark font-weight-medium m-0 d-block py-3 ws-nowrap custom-font-secondary"><span data-clone-element="5">{{ config('site.welcome.marquee_text', 'Planning   •   Positioning   •   Market Research   •   Optimization   •   Analysis   •   Strategy   •') }}   </span></p>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         CLIENT LOGOS / REFERENCES
    ═══════════════════════════════════════════════════════════════ --}}
    @if(is_module_active('references') && isset($featuredReferences) && $featuredReferences->count() > 0)
    <div class="container pt-5 pt-lg-4">
        <div class="row align-items-center text-center py-5 my-3">
            @foreach($featuredReferences->take(6) as $index => $ref)
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $index * 100 }}">
                    @if($ref->logo)
                        <img src="{{ filter_var($ref->logo, FILTER_VALIDATE_URL) ? $ref->logo : asset($ref->logo) }}" alt="{{ $ref->name }}" class="img-fluid">
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div class="container pt-5 pt-lg-4">
        <div class="row align-items-center text-center py-5 my-3">
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-3.png') }}" alt="" class="img-fluid">
                </div>
            </div>
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-4.png') }}" alt="" class="img-fluid">
                </div>
            </div>
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-5.png') }}" alt="" class="img-fluid">
                </div>
            </div>
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-6.png') }}" alt="" class="img-fluid">
                </div>
            </div>
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-7.png') }}" alt="" class="img-fluid">
                </div>
            </div>
            <div class="col-6 col-sm-4 col-xl-2 mb-5 mb-xl-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/logos/logo-1.png') }}" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ═══════════════════════════════════════════════════════════════
         CTA SECTION — "Empowering brands" with badge + description
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="gsap-section-scale custom-section-1">
        <div class="custom-section-1-box custom-bg-color-1 custom-border-radius-1 w-100 h-100 p-relative">
            <div class="container py-5">
                <div class="row 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.welcome.cta_heading', 'Empowering brands with innovative strategies to drive <span class="custom-word-highlight-1 d-inline-block p-relative"><span class="p-relative z-index-2">growth</span><img width="100%" src="' . asset('cd-project/img/demos/marketing-1/svg/generic-3.svg') . '" alt="" /></span> and success.') !!}</h3>
                            </div>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                            <a href="{{ route('front.about') }}" class="btn btn-modern btn-effect-4 btn-rounded btn-dark text-transform-none text-3 font-weight-medium mt-2 mb-2 z-index-2 p-relative">{{ config('site.welcome.cta_button_label', __('Learn More')) }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                        </div>
                    </div>
                    <div class="col-xl-4 pt-5 pt-xl-0">
                        <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="#">
                                        <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="{{ site_asset_url('welcome_badge_image', 'cd-project/img/demos/marketing-1/concept/concept-10.png') }}" 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="{{ site_asset_url('welcome_badge_icon', 'cd-project/img/demos/marketing-1/svg/generic-2.svg') }}" 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.welcome.feature_description', "Unlock your brand's potential with tailored marketing strategies that connect, engage, and drive measurable results.") }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         KPIs / IMPACT NUMBERS — Dark background with counters
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="bg-dark pt-5">
        <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">{{ config('site.welcome.kpi_badge', 'Impact Numbers') }}</span>
                        </div>
                    </div>

                    @php
                        $defaultKpis = [
                            ['value' => '10', 'append' => '+', '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', 'append' => 'M+', 'label' => 'Revenue Generated', 'description' => 'Millions in revenue generated through strategic campaigns, helping our clients achieve remarkable financial success and sustainable growth.'],
                            ['value' => '100', 'append' => '+', 'label' => 'Business Served', 'description' => 'Partnered with hundreds of businesses across diverse industries, delivering tailored marketing solutions that drive results and foster long-term success.'],
                        ];

                        $displayKpis = !empty($kpis) ? $kpis : [];
                        if (empty($displayKpis)) {
                            for ($i = 1; $i <= 3; $i++) {
                                $val = config("site.welcome.kpi_{$i}_value");
                                if ($val) {
                                    $displayKpis[] = [
                                        'value' => $val,
                                        'append' => config("site.welcome.kpi_{$i}_suffix", $defaultKpis[$i-1]['append']),
                                        'label' => config("site.welcome.kpi_{$i}_label", $defaultKpis[$i-1]['label']),
                                        'description' => config("site.welcome.kpi_{$i}_description", $defaultKpis[$i-1]['description']),
                                    ];
                                }
                            }
                        }
                        if (empty($displayKpis)) {
                            $displayKpis = $defaultKpis;
                        }
                    @endphp

                    <div class="row">
                        @foreach($displayKpis as $index => $kpi)
                        <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="{{ $index * 200 }}">
                                    <strong class="custom-highlight-text-1" data-to="{{ $kpi['value'] ?? 0 }}" data-append="{{ $kpi['append'] ?? '+' }}" 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">{{ $kpi['label'] ?? '' }}</h3>
                                @if(!empty($kpi['description']))
                                <p class="text-3-5 text-grey mb-4 pe-4">{{ $kpi['description'] }}</p>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         SERVICES — GSAP scroll-linked images + service blocks
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="custom-bg-color-1">
        <div class="container gsap-content-container">
            <div class="row">
                <div class="col">
                    <div class="overflow-hidden">
                        <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                            <span class="bg-tertiary text-secondary d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium me-2 custom-margin-top-1">{{ config('site.welcome.services_badge', __('What We Do')) }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-5 col-lg-6 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 transform3dx-n50 left-50pct" src="{{ site_asset_url('welcome_section_image_1', 'cd-project/img/demos/marketing-1/generic/generic-1.png') }}" width="500" alt="{{ config('site.name') }}">
                                        <img id="img2" class="img-fluid position-absolute transform3dx-n50 left-50pct" src="{{ site_asset_url('welcome_section_image_2', 'cd-project/img/demos/marketing-1/generic/generic-2.png') }}" width="400" alt="{{ config('site.name') }}">
                                        <img id="img3" class="img-fluid position-absolute transform3dx-n50 left-50pct" src="{{ site_asset_url('welcome_section_image_3', 'cd-project/img/demos/marketing-1/generic/generic-3.png') }}" width="493" alt="{{ config('site.name') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-7 col-lg-6 pb-4 gsap-content-text">
                            <div class="py-5 my-5">
                                @if(is_module_active('services') && isset($services) && $services->count() > 0)
                                    @php $scrollImages = ['img1', 'img2', 'img3']; @endphp
                                    @foreach($services->take(3) as $index => $service)
                                        <div class="gsap-content-marker {{ $index > 0 ? 'pt-5' : '' }}" data-marker-content="{{ $scrollImages[$index % 3] }}">
                                            <div class="custom-heading-1 custom-pos-12">
                                                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                                    <strong>{{ $service->title }}</strong>
                                                </div>
                                            </div>
                                            <div class="p-relative z-index-1">
                                                <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ $service->title }}</h2>
                                                <p class="text-3-5">{{ \Illuminate\Support\Str::limit($service->description ?? strip_tags($service->content), 300) }}</p>
                                                <a href="{{ route('frontend.services.detail', $service->slug) }}" class="btn btn-modern btn-effect-4 btn-rounded btn-dark text-transform-none text-3 font-weight-medium mt-2">{{ __('Conocé más') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    {{-- Static fallback: 3 service blocks por defecto --}}
                                    @php
                                        // Tolerante a string (newline-separated) o array (desde JSON)
                                        $normalizeItems = function($val, $defaults) {
                                            if (is_array($val)) return array_values(array_filter($val));
                                            if (is_string($val) && trim($val) !== '') {
                                                $list = preg_split('/\r\n|\r|\n/', $val);
                                                $list = array_values(array_filter(array_map('trim', $list)));
                                                if (!empty($list)) return $list;
                                            }
                                            return $defaults;
                                        };
                                        $service1Items = $normalizeItems(config('site.welcome.service_1_items'), ['Investigación de mercado', 'Estrategia de marca corporativa', 'Posicionamiento y propuesta de valor', 'Arquitectura de marca', 'Estrategia digital corporativa', 'Plan de comunicación 360°', 'Auditoría de marca', 'Estrategia de portafolio']);
                                        $service2Items = $normalizeItems(config('site.welcome.service_2_items'), ['Diseño de identidad visual corporativa', 'Manual de marca y guidelines', 'Sistema de aplicaciones', 'Naming y verbal identity', 'Rediseño de marcas existentes', 'Identidad para sub-marcas', 'Brand book digital interactivo', 'Brand assets para equipos']);
                                        $service3Items = $normalizeItems(config('site.welcome.service_3_items'), ['Sitio web corporativo', 'Memoria anual y reportes', 'Presentaciones institucionales', 'Material de venta B2B', 'Comunicación interna', 'Lanzamientos de productos', 'Eventos corporativos', 'Contenido para redes sociales']);
                                    @endphp
                                    <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.welcome.service_1_title', __('Estrategia')) }}</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.welcome.service_1_title', __('Estrategia')) }}</h2>
                                            <ul class="list-unstyled custom-list-services-1">
                                                @foreach($service1Items as $item)
                                                <li>{{ $item }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                    <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.welcome.service_2_title', __('Identidad')) }}</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.welcome.service_2_title', __('Identidad')) }}</h2>
                                            <ul class="list-unstyled custom-list-services-1 mb-0">
                                                @foreach($service2Items as $item)
                                                <li>{{ $item }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="gsap-content-marker pt-5" data-marker-content="img3">
                                        <div class="custom-heading-1 custom-pos-12">
                                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                                <strong>{{ config('site.welcome.service_3_title', __('Comunicación')) }}</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.welcome.service_3_title', __('Comunicación')) }}</h2>
                                            <ul class="list-unstyled custom-list-services-1 mb-0">
                                                @foreach($service3Items as $item)
                                                <li>{{ $item }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         SECOND "EMPOWERING BRANDS" — Centered text + rotating SVG
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="custom-bg-color-1">
        <div class="gsap-section-scale custom-section-1">
            <div class="custom-section-1-box bg-light custom-border-radius-1 w-100 h-100 p-relative">
                <div class="p-absolute d-inline-block rotate-animation opacity-7 custom-el-1">
                    <img src="{{ asset('cd-project/img/demos/marketing-1/svg/generic-4.svg') }}" alt="">
                </div>
                <div class="container py-5 z-index-1 p-relative">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 text-center">
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                <h3 class="custom-font-1 mb-0">{!! config('site.welcome.projects_heading', 'Empowering <strong class="text-primary">brands</strong> with innovative <strong class="text-secondary">strategies</strong> to drive growth and success.') !!}</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-relative z-index-1">
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                        <img src="{{ asset('cd-project/img/demos/marketing-1/svg/generic-5.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-secondary'}" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         FEATURED PROJECTS — List with floating images on hover
    ═══════════════════════════════════════════════════════════════ --}}
    @if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
    <div class="container py-5">
        <div class="row py-5">
            <div class="col text-center">
                <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">{{ config('site.welcome.projects_badge', __('Featured Projects')) }}</span>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="-0.5" data-scroll-offset="-50%">
                    <ul class="list-unstyled mt-5 pt-5">
                        @foreach($featuredProjects->take(5) as $index => $project)
                        <li class="custom-project-list-item-1{{ $loop->last ? ' border-bottom-0' : '' }}">
                            <div class="row">
                                <div class="col-lg-{{ $loop->last ? '4' : '3' }} text-center text-lg-start">
                                    <span class="custom-project-list-item-num-1">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                                </div>
                                <div class="col-lg-{{ $loop->last ? '4' : '6' }} text-center py-4 py-lg-0">
                                    <span class="thumb-info thumb-info-floating-element-wrapper thumb-info-hide-wrapper-bg d-block overflow-visible bg-transparent z-index-hover-1" data-offset="-200">
                                        <span class="thumb-info-wrapper bg-transparent overflow-visible">
                                            <a href="{{ route('frontend.projects.show', $project->slug) }}" class="text-12 font-weight-medium text-dark custom-project-list-item-title-1 transition-2ms">{{ $project->title }}</a>
                                        </span>
                                        @if($project->image)
                                        <span class="thumb-info-floating-element d-none">
                                            <img src="{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}" alt="{{ $project->title }}" class="img-fluid{{ $loop->last ? ' custom-border-radius-1' : '' }}">
                                        </span>
                                        @endif
                                    </span>
                                </div>
                                <div class="col-lg-3 text-center text-lg-end">
                                    <span class="custom-project-list-item-type-1">{{ $project->category->name ?? 'Project' }}</span>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ═══════════════════════════════════════════════════════════════
         PARALLAX SECTION — Scrollable width parallax image
    ═══════════════════════════════════════════════════════════════ --}}
    <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="{{ site_asset_url('welcome_parallax_image', 'cd-project/img/demos/marketing-1/generic/generic-7.jpg') }}">
        <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>

    {{-- ═══════════════════════════════════════════════════════════════
         TESTIMONIALS — Angled section with carousel inside bg-dark
    ═══════════════════════════════════════════════════════════════ --}}
    @php
        $homeTestimonials = config('site.welcome.testimonials', [
            ['text' => __('Superaron nuestras expectativas con estrategias de marketing 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 de redes sociales. 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 de mercado 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
    <div class="bg-dark pb-5">
        @if(count($homeTestimonials) > 0)
        <section class="section section-angled overflow-visible border-top-0 custom-bg-color-1 mb-0">
            <div class="section-angled-layer-bottom bg-dark"></div>
            <div class="section-angled-content 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.welcome.testimonials_stars', 'Beyond Expectations') }}</p>
                            </div>
                            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                                <h3 class="custom-font-2 mb-0">{!! config('site.welcome.testimonials_heading', 'See what our clients are <span class="custom-word-highlight-1 d-inline-block p-relative"><span class="p-relative z-index-2">saying!</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($homeTestimonials 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

        {{-- ═══════════════════════════════════════════════════════════════
             SECOND MARQUEE — Bottom ticker before footer (inside bg-dark)
        ═══════════════════════════════════════════════════════════════ --}}
        <div class="custom-pos-13">
            <div class="marquee py-3 custom-bg-gradient-1" data-duration="70000" data-gap="10" data-duplicated="true" data-startVisible="true">
                <p class="text-5-5 text-dark font-weight-medium m-0 d-block py-3 ws-nowrap custom-font-secondary"><span data-clone-element="5">{{ config('site.welcome.marquee_text_2', 'Planning   •   Positioning   •   Market Research   •   Optimization   •   Analysis   •   Strategy   •') }}   </span></p>
            </div>
        </div>
    </div>

</div>

@endsection

@section('scripts')
<script src="{{ asset('template/js/examples/examples.animations.js') }}"></script>
@endsection