@extends('layout.front.master')

@section('content')

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

    {{-- Hero Section --}}
    <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>{{ __('Marketing') }}</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">{{ __('Let\'s Go') }}</span>
                                <p class="p-0 d-inline-block text-4">{{ __('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">{{ __('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">{{ __('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">{{ __('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">{{ __('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">
                        <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>

    {{-- Marquee Section --}}
    <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">{{ __('Planning') }}   •   {{ __('Positioning') }}   •   {{ __('Market Research') }}   •   {{ __('Optimization') }}   •   {{ __('Analysis') }}   •   {{ __('Strategy') }}   •   </span></p>
        </div>
    </div>

    {{-- Client Logos --}}
    <div class="container pt-5 pt-lg-4">
        <div class="row align-items-center text-center py-5 my-3">
            @if(isset($clientLogos) && count($clientLogos) > 0)
                @foreach($clientLogos as $index => $logo)
                    <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 }}">
                            <img src="{{ asset($logo) }}" alt="" class="img-fluid">
                        </div>
                    </div>
                @endforeach
            @else
                {{-- Logos por defecto (logo-3, logo-4, logo-5, logo-6, logo-7, logo-1) --}}
                @php
                    $logoNumbers = [3, 4, 5, 6, 7, 1];
                @endphp
                @foreach($logoNumbers as $index => $logoNum)
                    <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 }}">
                            <img src="{{ asset("cd-project/img/logos/logo-{$logoNum}.png") }}" alt="" class="img-fluid">
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Empowering Brands Section --}}
    <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">{{ __('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">{{ __('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="{{ route('front.contact') }}">
                                        <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="{{ asset('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="{{ asset('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">{{ __('Unlock your brand\'s potential with tailored marketing strategies that connect, engage, and drive measurable results.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Impact Numbers Section --}}
    <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">{{ __('Impact Numbers') }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <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="0">
                                    <strong class="custom-highlight-text-1" data-to="10" data-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">{{ __('Years of Growth') }}</h3>
                                <p class="text-3-5 text-grey mb-4 pe-4">{{ __('Over a decade of driving consistent growth, delivering impactful results, and empowering brands to achieve their fullest potential') }}</p>
                            </div>
                        </div>
                        <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="200">
                                    <strong class="custom-highlight-text-1" data-to="5" data-append="M+" 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">{{ __('Revenue Generated') }}</h3>
                                <p class="text-3-5 text-grey mb-4 pe-4">{{ __('Millions in revenue generated through strategic campaigns, helping our clients achieve remarkable financial success and sustainable growth.') }}</p>
                            </div>
                        </div>
                        <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="400">
                                    <strong class="custom-highlight-text-1" data-to="100" data-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">{{ __('Business Served') }}</h3>
                                <p class="text-3-5 text-grey mb-4 pe-4">{{ __('Partnered with hundreds of businesses across diverse industries, delivering tailored marketing solutions that drive results and foster long-term success.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- What We Do Section --}}
    <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">{{ __('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="{{ asset('cd-project/img/demos/marketing-1/generic/generic-1.png') }}" width="500" alt="">
                                        <img id="img2" class="img-fluid position-absolute transform3dx-n50 left-50pct" src="{{ asset('cd-project/img/demos/marketing-1/generic/generic-2.png') }}" width="400" alt="">
                                        <img id="img3" class="img-fluid position-absolute transform3dx-n50 left-50pct" src="{{ asset('cd-project/img/demos/marketing-1/generic/generic-3.png') }}" width="493" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-7 col-lg-6 pb-4 gsap-content-text">
                            <div class="py-5 my-5">
                                {{-- Strategy --}}
                                <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>{{ __('Strategy') }}</strong>
                                        </div>
                                    </div>
                                    <div class="p-relative z-index-1">
                                        <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ __('Strategy') }}</h2>
                                        <ul class="list-unstyled custom-list-services-1">
                                            <li>{{ __('Market Research & Analysis') }}</li>
                                            <li>{{ __('Brand Strategy') }}</li>
                                            <li>{{ __('Digital Marketing Strategy') }}</li>
                                            <li>{{ __('Content Strategy') }}</li>
                                            <li>{{ __('SEO & SEM Strategy') }}</li>
                                            <li>{{ __('Customer Journey Mapping') }}</li>
                                            <li>{{ __('Go-to-Market Strategy') }}</li>
                                            <li>{{ __('Social Media Strategy') }}</li>
                                            <li>{{ __('Pricing Strategy') }}</li>
                                            <li>{{ __('Partnership & Alliances Strategy') }}</li>
                                        </ul>
                                    </div>
                                </div>

                                {{-- Marketing --}}
                                <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>{{ __('Marketing') }}</strong>
                                        </div>
                                    </div>
                                    <div class="p-relative z-index-1">
                                        <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ __('Marketing') }}</h2>
                                        <ul class="list-unstyled custom-list-services-1 mb-0">
                                            <li>{{ __('Content Marketing') }}</li>
                                            <li>{{ __('Social Media Marketing') }}</li>
                                            <li>{{ __('Search Engine Optimization (SEO)') }}</li>
                                            <li>{{ __('Email Marketing') }}</li>
                                            <li>{{ __('Pay-Per-Click (PPC) Advertising') }}</li>
                                            <li>{{ __('Influencer Marketing') }}</li>
                                            <li>{{ __('Affiliate Marketing') }}</li>
                                            <li>{{ __('Brand Strategy') }}</li>
                                            <li>{{ __('Market Research and Analysis') }}</li>
                                            <li>{{ __('Public Relations and Media Outreach') }}</li>
                                        </ul>
                                    </div>
                                </div>

                                {{-- Design --}}
                                <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>{{ __('Design') }}</strong>
                                        </div>
                                    </div>
                                    <div class="p-relative z-index-1">
                                        <h2 class="mb-4 pb-2 text-10 font-weight-semibold ls-0">{{ __('Design') }}</h2>
                                        <ul class="list-unstyled custom-list-services-1 mb-0">
                                            <li>{{ __('Graphic Design') }}</li>
                                            <li>{{ __('Web Design') }}</li>
                                            <li>{{ __('Logo and Branding Design') }}</li>
                                            <li>{{ __('User Experience (UX) Design') }}</li>
                                            <li>{{ __('User Interface (UI) Design') }}</li>
                                            <li>{{ __('Print Design') }}</li>
                                            <li>{{ __('Packaging Design') }}</li>
                                            <li>{{ __('Motion Graphics and Animation') }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Empowering Brands Section 2 --}}
    <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">{{ __('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 Section --}}
    @if(is_module_active('projects'))
        <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">{{ __('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">
                            @forelse($featuredProjects ?? [] as $index => $project)
                                <li class="custom-project-list-item-1 {{ $loop->last ? 'border-bottom-0' : '' }}">
                                    <div class="row">
                                        <div class="col-lg-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-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>
                                                <span class="thumb-info-floating-element d-none">
                                                    <img src="{{ asset($project->featured_image ?? 'cd-project/img/demos/marketing-1/projects/project-' . ($index + 1) . '.png') }}" alt="" class="img-fluid">
                                                </span>
                                            </span>
                                        </div>
                                        <div class="col-lg-3 text-center text-lg-end">
                                            <span class="custom-project-list-item-type-1">{{ $project->categories->first()->name ?? __('Marketing') }}</span>
                                        </div>
                                    </div>
                                </li>
                            @empty
                                {{-- Proyectos por defecto si no hay módulo activo --}}
                                @for($i = 1; $i <= 5; $i++)
                                    <li class="custom-project-list-item-1 {{ $i == 5 ? 'border-bottom-0' : '' }}">
                                        <div class="row">
                                            <div class="col-lg-3 text-center text-lg-start"><span class="custom-project-list-item-num-1">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</span></div>
                                            <div class="col-lg-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.index') }}" class="text-12 font-weight-medium text-dark custom-project-list-item-title-1 transition-2ms">{{ __('Project') }} {{ $i }}</a>
                                                    </span>
                                                    <span class="thumb-info-floating-element d-none">
                                                        <img src="{{ asset("cd-project/img/demos/marketing-1/projects/project-{$i}.png") }}" alt="" class="img-fluid">
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="col-lg-3 text-center text-lg-end"><span class="custom-project-list-item-type-1">{{ __('Marketing') }}</span></div>
                                        </div>
                                    </li>
                                @endfor
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Parallax Section --}}
    <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="{{ asset('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 Section --}}
    @if(is_module_active('references'))
        <div class="bg-dark pb-5">
            <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">{{ __('Beyond Expectations') }}</p>
                                </div>
                                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                                    <h3 class="custom-font-2 mb-0">{{ __('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}">
                                        @forelse($featuredReferences ?? [] as $testimonial)
                                            <div>
                                                <div class="pe-5">
                                                    <p class="text-dark text-4-5 line-height-9">{{ $testimonial->testimonial ?? $testimonial->content }}</p>
                                                    <strong class="text-color-primary text-uppercase font-weight-medium">{{ $testimonial->name ?? $testimonial->author }}{!! isset($testimonial->company) ? ', ' . $testimonial->company : '' !!}</strong>
                                                </div>
                                            </div>
                                        @empty
                                            {{-- Testimonios por defecto --}}
                                            <div>
                                                <div class="pe-5">
                                                    <p class="text-dark text-4-5 line-height-9">{{ __('Beyond expectations with their innovative marketing strategies. They took the time to understand our brand, delivering targeted campaigns that significantly boosted.') }}</p>
                                                    <strong class="text-color-primary text-uppercase font-weight-medium">{{ __('John Doe, Porto Theme') }}</strong>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="pe-5">
                                                    <p class="text-dark text-4-5 line-height-9">{{ __('Outstanding social media management! Our engagement doubled, and our brand presence has never been stronger. Highly recommend their services.') }}</p>
                                                    <strong class="text-color-primary text-uppercase font-weight-medium">{{ __('Robert Doe, Porto Theme') }}</strong>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="pe-5">
                                                    <p class="text-dark text-4-5 line-height-9">{{ __('Their market research was incredibly thorough. It provided valuable insights that shaped our entire marketing strategy. Couldn\'t be happier with the outcome!') }}</p>
                                                    <strong class="text-color-primary text-uppercase font-weight-medium">{{ __('Monica Doe, Porto Theme') }}</strong>
                                                </div>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <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">{{ __('Planning') }}   •   {{ __('Positioning') }}   •   {{ __('Market Research') }}   •   {{ __('Optimization') }}   •   {{ __('Analysis') }}   •   {{ __('Strategy') }}   •   </span></p>
                </div>
            </div>
        </div>
    @endif

</div>

@endsection