@extends('layout.front.master')

@section('title', !empty(config('site.tagline')) ? config('site.name') . ' | ' . config('site.tagline') : config('site.name') . ' | ' . __('Abogados y Socios en el Noroeste Argentino'))
@section('description', !empty(config('site.seo.description')) ? config('site.seo.description') : (!empty(config('site.description')) ? config('site.description') : __('Colombres Garmendia & Asoc. brinda soluciones legales confiables en el Noroeste Argentino desde 1965, basadas en lealtad, idoneidad y confidencialidad.')))
@section('keywords', !empty(config('site.seo.keywords')) ? config('site.seo.keywords') : __('abogados, estudio juridico, Colombres Garmendia, defensa legal, abogado Tucuman, asesoramiento legal'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' | ' . __('Estudio Jurídico'))
@section('og_description', !empty(config('site.og.description')) ? config('site.og.description') : (!empty(config('site.description')) ? config('site.description') : __('Soluciones legales confiables en el Noroeste Argentino desde 1965, basadas en lealtad, idoneidad y confidencialidad.')))
@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') . ' | ' . __('Estudio Jurídico'))
@section('twitter_description', !empty(config('site.twitter.description')) ? config('site.twitter.description') : (!empty(config('site.description')) ? config('site.description') : __('Soluciones legales de excelencia basadas en lealtad, idoneidad y confidencialidad.')))
@section('twitter_image', brand_twitter_image())

@php
    $sameAsLinks = [];
    foreach (['facebook', 'instagram', 'linkedin', 'twitter'] as $socialNet) {
        $link = config("site.social_media.{$socialNet}.url");
        if (!empty($link)) {
            $sameAsLinks[] = $link;
        }
    }
@endphp

@push('extra_head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LegalService",
  "name": "{{ config('site.name') }}",
  "description": "{{ !empty(config('site.seo.description')) ? config('site.seo.description') : __('Colombres Garmendia & Asoc. brinda soluciones legales confiables en el Noroeste Argentino desde 1965, basadas en lealtad, idoneidad y confidencialidad.') }}",
  "url": "{{ url()->current() }}",
  "telephone": "{{ config('site.contact.phone') }}",
  "email": "{{ config('site.contact.email') }}",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "{{ config('site.contact.address', 'San Martín 631') }}",
    "addressLocality": "San Miguel de Tucumán",
    "addressRegion": "Tucumán",
    "addressCountry": "AR"
  },
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday"
    ],
    "opens": "09:00",
    "closes": "18:00"
  },
  "sameAs": {!! json_encode($sameAsLinks, JSON_UNESCAPED_SLASHES) !!}
}
</script>
@endpush

@section('content')

<div style="overflow: visible;">

    {{-- ============================================================
         1. HERO CAROUSEL (2 slides, 845px, centered text, CTA)
    ============================================================= --}}
    <div class="owl-carousel-wrapper" style="height: 845px;">
        <div class="owl-carousel dots-inside dots-horizontal-center show-dots-hover show-dots-xs show-dots-sm show-dots-md nav-style-1 nav-inside nav-inside-plus nav-light nav-lg nav-font-size-lg show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'dots': true, 'nav': false}, '479': {'items': 1, 'dots': true}, '768': {'items': 1, 'dots': true}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': false, 'dotsVerticalOffset': '-235px', 'nav': true, 'navVerticalOffset': '70px', 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 7000, 'autoplayHoverPause': true, 'rewind': true}">

            @forelse($carouselImages as $index => $image)
                <!-- Carousel Slide {{ $index + 1 }} -->
                <div class="position-relative overlay overlay-show overlay-op-6 overflow-hidden pt-4" data-dynamic-height="['845px','845px','845px','750px','750px']" style="height: 845px;">
                    <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url({{ $image->image_path }}); background-size: cover; background-position: center;"></div>
                    <div class="container position-relative z-index-3 pb-5 h-100">
                        <div class="row justify-content-center align-items-center pb-5 h-100">
                            <div class="col-lg-8 text-center pb-5 mb-5">
                                @if($index == 0)
                                    <h1 class="text-color-light font-weight-bold line-height-1 text-12 text-md-14 positive-ls-3 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.name') }}</h1>
                                    <h2 class="alternative-font-4 text-color-light font-weight-semibold line-height-3 text-5 positive-ls-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1300" data-plugin-options="{'minWindowWidth': 0}"><span class="text-color-primary">{{ config('site.welcome.hero_highlight', __('Attorneys At Law')) }}</span> <span class="opacity-9">{{ config('site.welcome.hero_subtitle', __('Located In Los Angeles, Ca')) }}</span></h2>
                                    <p class="text-color-light opacity-6 text-3-5 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 2200, 'minWindowWidth': 0}">{{ config('site.welcome.hero_text', __('More Than 50 Years Combined Experience Serving Businesses')) }}</p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-bold text-3-5 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3300">{{ __('CONTACTANOS') }}</a>
                                @else
                                    <h1 class="text-color-light font-weight-bold line-height-1 text-12 text-md-14 positive-ls-3 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.welcome.hero_slide2_title', __('SOLID EXPERIENCE')) }}</h1>
                                    <h2 class="alternative-font-4 text-color-light font-weight-semibold line-height-3 text-5 positive-ls-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1300" data-plugin-options="{'minWindowWidth': 0}"><span class="opacity-9">{{ config('site.welcome.hero_slide2_subtitle', __('Extensive Resources And Commitment To Client')) }}</span></h2>
                                    <p class="text-color-light opacity-6 text-3-5 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 2200, 'minWindowWidth': 0}">{{ config('site.welcome.hero_text', __('More Than 50 Years Combined Experience Serving Businesses')) }}</p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-bold text-3-5 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3300">{{ __('CONTACTANOS') }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <!-- Slide 1 (fallback) -->
                <div class="position-relative overlay overlay-show overlay-op-6 overflow-hidden pt-4" data-dynamic-height="['845px','845px','845px','750px','750px']" style="height: 845px;">
                    <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url({{ asset('cd-project/img/demos/law-firm-2/banner/banner-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="container position-relative z-index-3 pb-5 h-100">
                        <div class="row justify-content-center align-items-center pb-5 h-100">
                            <div class="col-lg-8 text-center pb-5 mb-5">
                                <h1 class="text-color-light font-weight-bold line-height-1 text-12 text-md-14 positive-ls-3 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.name', 'ESTUDIO JURÍDICO') }}</h1>
                                <h2 class="alternative-font-4 text-color-light font-weight-semibold line-height-3 text-5 positive-ls-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1300" data-plugin-options="{'minWindowWidth': 0}"><span class="text-color-primary">{{ config('site.welcome.hero_highlight', __('Attorneys At Law')) }}</span> <span class="opacity-9">{{ config('site.welcome.hero_subtitle', __('Located In Los Angeles, Ca')) }}</span></h2>
                                <p class="text-color-light opacity-6 text-3-5 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 2200, 'minWindowWidth': 0}">{{ config('site.welcome.hero_text', __('More Than 50 Years Combined Experience Serving Businesses')) }}</p>
                                <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-bold text-3-5 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3300">{{ __('CONTACTANOS') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slide 2 (fallback) -->
                <div class="position-relative overlay overlay-show overlay-op-6 overflow-hidden pt-4" data-dynamic-height="['845px','845px','845px','750px','750px']" style="height: 845px;">
                    <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url({{ asset('cd-project/img/demos/law-firm-2/banner/banner-2.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="container position-relative z-index-3 pb-5 h-100">
                        <div class="row justify-content-center align-items-center pb-5 h-100">
                            <div class="col-lg-8 text-center pb-5 mb-5">
                                <h1 class="text-color-light font-weight-bold line-height-1 text-12 text-md-14 positive-ls-3 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.welcome.hero_slide2_title', __('SOLID EXPERIENCE')) }}</h1>
                                <h2 class="alternative-font-4 text-color-light font-weight-semibold line-height-3 text-5 positive-ls-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1300" data-plugin-options="{'minWindowWidth': 0}"><span class="opacity-9">{{ config('site.welcome.hero_slide2_subtitle', __('Extensive Resources And Commitment To Client')) }}</span></h2>
                                <p class="text-color-light opacity-6 text-3-5 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 2200, 'minWindowWidth': 0}">{{ config('site.welcome.hero_text', __('More Than 50 Years Combined Experience Serving Businesses')) }}</p>
                                <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-bold text-3-5 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3300">{{ __('CONTACTANOS') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforelse

        </div>
    </div>

    {{-- ============================================================
         2. SERVICES / PRACTICE AREAS CAROUSEL (-222px overlap, owl)
    ============================================================= --}}
    @if(is_module_active('services'))
    <div class="owl-carousel-wrapper law-firm-services-carousel position-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000" style="margin-top: -222px; height: 470px;">
        <div class="owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 dots-dark mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}, '1440': {'items': 5}}, 'margin': 20, 'stagePadding': 20, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 7000}">

            @forelse($services as $service)
                <div class="py-5">
                    <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                        <div class="card custom-card-style-1 border-0 border-radius-0 custom-box-shadow-1">
                            <div class="card-body text-center px-4 py-5">
                                @php
                                    $defaultIcons = [
                                        'icon-group.svg',
                                        'icon-exchange.svg',
                                        'icon-magnific-dollar.svg',
                                        'icon-car-accident.svg',
                                        'icon-heart-hands.svg',
                                        'icon-court.svg',
                                    ];
                                    $iconFile = $service->icon ?? ($defaultIcons[$loop->index % count($defaultIcons)]);
                                    $iconPath = Str::startsWith($iconFile, 'cd-project/') ? $iconFile : 'cd-project/img/demos/law-firm-2/icons/' . $iconFile;

                                    // SVG class: some icons use stroke, others fill
                                    $strokeIcons = ['icon-exchange.svg', 'icon-magnific-dollar.svg', 'icon-heart-hands.svg'];
                                    $iconBasename = basename($iconPath);
                                    $svgClass = in_array($iconBasename, $strokeIcons) ? 'svg-stroke-color-primary' : 'svg-fill-color-primary';
                                    if ($iconBasename === 'icon-heart-hands.svg') {
                                        $svgClass .= ' custom-stroke-width-1';
                                    }
                                @endphp

                                <img width="60" height="60" src="{{ asset($iconPath) }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': '{{ $svgClass }} mt-2 mb-4 pb-3'}" />
                                <h2 class="card-title alternative-font-4 text-color-dark font-weight-semibold line-height-1 text-5 mb-3">{{ $service->title }}</h2>
                                <p class="font-weight-light text-color-dark line-height-7 mb-2">{{ Str::limit(strip_tags($service->description), 120) }}</p>
                                <span class="custom-read-more d-inline-flex justify-content-center align-items-center text-3 font-weight-medium svg-fill-color-primary">
                                    {{ __('LEER MÁS') }}
                                    <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                @php
                    $fallbackServices = [
                        ['title' => 'Family Law', 'icon' => 'icon-group.svg', 'class' => 'svg-fill-color-primary'],
                        ['title' => 'Capital Law', 'icon' => 'icon-exchange.svg', 'class' => 'svg-stroke-color-primary'],
                        ['title' => 'Business Law', 'icon' => 'icon-magnific-dollar.svg', 'class' => 'svg-stroke-color-primary'],
                        ['title' => 'Accident & Injury Law', 'icon' => 'icon-car-accident.svg', 'class' => 'svg-fill-color-primary'],
                        ['title' => 'Health Law', 'icon' => 'icon-heart-hands.svg', 'class' => 'svg-stroke-color-primary custom-stroke-width-1'],
                    ];
                @endphp
                @foreach($fallbackServices as $fs)
                    <div class="py-5">
                        <a href="#" class="text-decoration-none">
                            <div class="card custom-card-style-1 border-0 border-radius-0 custom-box-shadow-1">
                                <div class="card-body text-center px-4 py-5">
                                    <img width="60" height="60" src="{{ asset('cd-project/img/demos/law-firm-2/icons/' . $fs['icon']) }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': '{{ $fs['class'] }} mt-2 mb-4 pb-3'}" />
                                    <h2 class="card-title alternative-font-4 text-color-dark font-weight-semibold line-height-1 text-5 mb-3">{{ __($fs['title']) }}</h2>
                                    <p class="font-weight-light text-color-dark line-height-7 mb-2">{{ __('Cargá la descripción de este servicio desde el panel de administración.') }}</p>
                                    <span class="custom-read-more d-inline-flex justify-content-center align-items-center text-3 font-weight-medium svg-fill-color-primary">
                                        {{ __('LEER MÁS') }}
                                        <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            @endforelse

        </div>
    </div>
    @endif

    {{-- ============================================================
         3. ABOUT (CEO quote + image with shape overlay + signature)
    ============================================================= --}}
    <div class="container py-5 mt-3">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h2 class="text-color-dark font-weight-extra-bold text-10 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200"><em>{{ config('site.welcome.about_heading', __('Global Service Provided By Exceptional Attorneys')) }}</em></h2>
                <p class="font-weight-light text-color-dark mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{!! config('site.welcome.about_text', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur. Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum.')) !!}</p>
                <p class="positive-ls-3 text-color-grey mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ config('site.welcome.about_author', 'Dirección del Estudio') }}</p>
                {{-- <img src="{{ asset('cd-project/img/demos/law-firm-2/signature.png') }}" class="img-fluid appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700" alt="" /> --}}
            </div>
            <div class="col-md-9 col-lg-6 ps-lg-5">
                <div class="position-relative">
                    <div class="custom-shape-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1100">
                        <div class="position-absolute top-0 left-0 right-0 bottom-0 bg-primary" data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.1, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}"></div>
                    </div>
                    <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                        @php
                            $founderImageConfig = config('site.welcome.founder_image');
                            if (!empty($founderImageConfig)) {
                                $founderImage = filter_var($founderImageConfig, FILTER_VALIDATE_URL) ? $founderImageConfig : asset($founderImageConfig);
                                $founderAlt = config('site.name');
                            } else {
                                $founderMember = isset($teamMembers) && $teamMembers->count() > 0 ? ($teamMembers->firstWhere('position', 'Socio Fundador') ?? $teamMembers->first()) : null;
                                $founderImage = $founderMember && !empty($founderMember->image)
                                    ? (filter_var($founderMember->image, FILTER_VALIDATE_URL) ? $founderMember->image : asset($founderMember->image))
                                    : asset('cd-project/img/demos/law-firm-2/generic/generic-1.jpg');
                                $founderAlt = $founderMember ? ($founderMember->name ?? config('site.name')) : config('site.name');
                            }
                        @endphp
                        <img src="{{ $founderImage }}" class="img-fluid position-relative z-index-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="900" alt="{{ $founderAlt }}" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         4. CLIENT LOGOS (6 logos grid)
    ============================================================= --}}
    @if(isset($companyLogos) && $companyLogos->count() > 0)
        <hr class="my-5">
        <div class="container">
            <div class="row align-items-center text-center py-5 my-5">
                @foreach($companyLogos->take(6) as $index => $logo)
                    <div class="col-sm-4 col-xl-2 mb-5 {{ $index >= 4 ? 'mb-md-0' : 'mb-xl-0' }} {{ $index == 5 ? '' : '' }}">
                        @php
                            $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
                            $delay = $index < 3 ? (600 - $index * 200) : (($index - 3) * 200 + 200);
                            $animation = $index < 3 ? 'fadeInLeftShorterPlus' : 'fadeInRightShorterPlus';
                        @endphp
                        <img src="{{ $logoSrc }}" alt="{{ $logo->name ?? '' }}" class="img-fluid appear-animation" data-appear-animation="{{ $animation }}" data-appear-animation-delay="{{ $delay }}" data-plugin-options="{'accY': -250}" style="max-width: 140px;" />
                    </div>
                @endforeach
            </div>
        </div>
    @else
        <hr class="my-5">
        <div class="container">
            <div class="row align-items-center text-center py-5 my-5">
                <div class="col-sm-4 col-xl-2 mb-5 mb-xl-0">
                    <img src="{{ asset('cd-project/img/logos/logo-8.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="600" data-plugin-options="{'accY': -250}" style="max-width: 90px;" />
                </div>
                <div class="col-sm-4 col-xl-2 mb-5 mb-xl-0">
                    <img src="{{ asset('cd-project/img/logos/logo-9.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="400" data-plugin-options="{'accY': -250}" style="max-width: 140px;" />
                </div>
                <div class="col-sm-4 col-xl-2 mb-5 mb-xl-0">
                    <img src="{{ asset('cd-project/img/logos/logo-10.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="200" data-plugin-options="{'accY': -250}" style="max-width: 140px;" />
                </div>
                <div class="col-sm-4 col-xl-2 mb-5 mb-md-0">
                    <img src="{{ asset('cd-project/img/logos/logo-11.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="200" data-plugin-options="{'accY': -250}" style="max-width: 140px;" />
                </div>
                <div class="col-sm-4 col-xl-2 mb-5 mb-md-0">
                    <img src="{{ asset('cd-project/img/logos/logo-12.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="400" data-plugin-options="{'accY': -250}" style="max-width: 100px;" />
                </div>
                <div class="col-sm-4 col-xl-2">
                    <img src="{{ asset('cd-project/img/logos/logo-13.png') }}" alt="" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="600" data-plugin-options="{'accY': -250}" style="max-width: 100px;" />
                </div>
            </div>
        </div>
    @endif

    {{-- ============================================================
         5A. TESTIMONIALS (light background + minimal carousel)
    ============================================================= --}}
    <!-- @php
        // Usar testimonials del módulo si está activo; si no, references como fallback
        $testimonialItems = collect();
        if (is_module_active('testimonials') && isset($testimonials) && $testimonials->count() > 0) {
            $testimonialItems = $testimonials->map(fn($t) => (object) ['content' => $t->content, 'author' => $t->author, 'position' => $t->position ?? '']);
        } elseif (is_module_active('references') && isset($featuredReferences) && $featuredReferences->count() > 0) {
            $testimonialItems = $featuredReferences->filter(fn($r) => !empty($r->description))->map(fn($r) => (object) ['content' => $r->description ?? '', 'author' => $r->name, 'position' => $r->company ?? $r->position ?? '']);
        }
    @endphp

    @if($testimonialItems->count() > 0)
    <section class="section border-0 m-0 py-5 bg-light-neutral" style="background-color: #f8f7f5;">
        <div class="container pt-4 pb-3">
            <div class="row">
                <div class="col text-center">
                    <h2 class="alternative-font-4 text-color-secondary font-weight-semibold text-4 mb-2">{{ config('site.welcome.testimonials_badge', __('TESTIMONIOS')) }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-bold text-10 negative-ls-1 pb-2 mb-4">{{ config('site.welcome.testimonials_heading', __('Lo que dicen nuestros clientes')) }}</h3>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center px-lg-0">
                    <div class="owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 dots-dark mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 8000}">
                        @foreach($testimonialItems as $item)
                            <div class="px-4">
                                <span class="testimonial-quote-mark">“</span>
                                <p class="text-color-dark text-5-5 testimonial-text line-height-5 pb-2 mb-0">
                                    {{ $item->content }}
                                </p>
                                <div class="divider divider-primary divider-small mt-2 mb-4 pb-2">
                                    <hr class="my-3 mx-auto">
                                </div>
                                <strong class="d-block text-color-dark testimonial-author text-3 mb-4">- {{ $item->author }}{{ $item->position ? ', ' . $item->position : '' }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif -->

    {{-- ============================================================
         5B. LEGADO Y VALORES INSTITUCIONALES (Dark Navy Premium)
    ============================================================= --}}
    <section class="section section-kpi-counters border-0 m-0 py-5">
        <div class="container py-4">
            <div class="row justify-content-center text-center mb-4">
                <div class="col-lg-10">
                    <h2 class="alternative-font-4 text-color-primary font-weight-semibold text-4 mb-2 text-uppercase letter-spacing-1">{{ !empty(config('site.welcome.commitment_title')) ? config('site.welcome.commitment_title') : __('NUESTRO COMPROMISO') }}</h2>
                    <h3 class="text-transform-none text-color-light font-weight-bold text-7-5 mb-4" style="font-family: 'Lora', Georgia, serif;">
                        <em>{{ !empty(config('site.welcome.commitment_text')) ? config('site.welcome.commitment_text') : 'Desde 1965, Colombres Garmendia & Asoc. brinda soluciones legales confiables en el Noroeste Argentino.' }}</em>
                    </h3>
                    <p class="text-color-light opacity-8 text-4 mb-0">
                        {{ !empty(config('site.welcome.commitment_desc')) ? config('site.welcome.commitment_desc') : 'Nuestra práctica profesional se cimenta sobre pilares inquebrantables que garantizan la excelencia, la lealtad y la idoneidad profesional.' }}
                    </p>
                </div>
            </div>
            <div class="row justify-content-center mt-5">
                <div class="col-md-4 mb-4 mb-md-0 text-center px-lg-4">
                    <div class="p-4 style-pilar-card h-100">
                        <span class="d-inline-block text-color-primary font-weight-extra-bold text-7 mb-2">I</span>
                        <h4 class="text-color-light font-weight-bold text-4 text-uppercase mb-3">{{ !empty(config('site.welcome.pilar1_title')) ? config('site.welcome.pilar1_title') : __('Lealtad') }}</h4>
                        <p class="text-color-light opacity-7 text-3 mb-0">
                            {{ !empty(config('site.welcome.pilar1_desc')) ? config('site.welcome.pilar1_desc') : 'Compromiso absoluto con los intereses y la defensa de nuestros clientes, asumiendo cada caso con total entrega.' }}
                        </p>
                    </div>
                </div>
                <div class="col-md-4 mb-4 mb-md-0 text-center px-lg-4">
                    <div class="p-4 style-pilar-card h-100">
                        <span class="d-inline-block text-color-primary font-weight-extra-bold text-7 mb-2">II</span>
                        <h4 class="text-color-light font-weight-bold text-4 text-uppercase mb-3">{{ !empty(config('site.welcome.pilar2_title')) ? config('site.welcome.pilar2_title') : __('Idoneidad') }}</h4>
                        <p class="text-color-light opacity-7 text-3 mb-0">
                            {{ !empty(config('site.welcome.pilar2_desc')) ? config('site.welcome.pilar2_desc') : 'Excelencia técnica, rigor académico y vasta experiencia práctica aplicada a la resolución de conflictos legales.' }}
                        </p>
                    </div>
                </div>
                <div class="col-md-4 text-center px-lg-4">
                    <div class="p-4 style-pilar-card h-100">
                        <span class="d-inline-block text-color-primary font-weight-extra-bold text-7 mb-2">III</span>
                        <h4 class="text-color-light font-weight-bold text-4 text-uppercase mb-3">{{ !empty(config('site.welcome.pilar3_title')) ? config('site.welcome.pilar3_title') : __('Confidencialidad') }}</h4>
                        <p class="text-color-light opacity-7 text-3 mb-0">
                            {{ !empty(config('site.welcome.pilar3_desc')) ? config('site.welcome.pilar3_desc') : 'El resguardo ético más estricto del secreto profesional en todas las consultas y trámites encomendados.' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- ============================================================
         7. TEAM CAROUSEL (background overlay + carousel, -225px overlap)
    ============================================================= --}}
    @if(is_module_active('team'))
    <section class="section overlay overlay-show overlay-op-6 border-0 m-0" style="background-image: url({{ !empty(config('site.welcome.team_bg_image')) ? (filter_var(config('site.welcome.team_bg_image'), FILTER_VALIDATE_URL) ? config('site.welcome.team_bg_image') : asset(config('site.welcome.team_bg_image'))) : asset('cd-project/img/demos/law-firm-2/backgrounds/background-2.jpg') }}); background-size: cover; background-position: center;">
        <div class="container py-5 mb-5">
            <div class="row pb-5 mb-4">
                <div class="col text-center">
                    <h3 class="alternative-font-4 text-color-secondary font-weight-semibold text-4 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.welcome.team_badge', __('ABOGADOS Y SOCIOS')) }}</h3>
                    <h2 class="text-transform-none text-color-light font-weight-bold text-10 negative-ls-1 mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.team_heading', __('Nuestro Equipo Legal')) }}</h2>
                </div>
            </div>
        </div>
    </section>
    <style>
        .law-firm-team-carousel .owl-stage { display: flex; align-items: stretch; }
        .law-firm-team-carousel .owl-item { display: flex; }
        .law-firm-team-carousel .owl-item > .py-5 { display: flex; width: 100%; }
        .law-firm-team-carousel .owl-item > .py-5 > a { display: flex; width: 100%; }
        .law-firm-team-carousel .card.custom-card-style-1 { width: 100%; height: 100%; min-height: 510px; display: flex; flex-direction: column; }
        .law-firm-team-carousel .card.custom-card-style-1 .card-img-top { height: 230px; width: 100%; object-fit: cover; }
        .law-firm-team-carousel .card.custom-card-style-1 .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
        .law-firm-services-carousel .owl-stage { display: flex; align-items: stretch; }
        .law-firm-services-carousel .owl-item { display: flex; }
        .law-firm-services-carousel .owl-item > .py-5 { display: flex; width: 100%; }
        .law-firm-services-carousel .owl-item > .py-5 > a { display: flex; width: 100%; }
        .law-firm-services-carousel .card.custom-card-style-1 { width: 100%; height: 100%; }
    </style>
    <div class="owl-carousel-wrapper law-firm-team-carousel position-relative z-index-3 pb-4 mb-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600" style="margin-top: -225px;">
        <div class="owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 dots-dark mb-0" data-plugin-options="{'responsive': {'576': {'items': 2}, '768': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}, '1440': {'items': 5}}, 'margin': 20, 'stagePadding': 20, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 7000}">

            @forelse($teamMembers as $member)
                <div class="py-5">
                    <a href="{{ route('frontend.team.profile', $member->slug) }}" class="text-decoration-none">
                        <div class="card custom-card-style-1 border-0 border-radius-0 custom-box-shadow-1">
                            @php
                                $memberImg = !empty($member->image)
                                    ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                                    : asset('cd-project/img/defaults/team/team-' . (($loop->index % 6) + 1) . '.jpg');
                            @endphp
                            <img src="{{ $memberImg }}" class="card-img-top border-radius-0" alt="{{ $member->name }} Image" />
                            <div class="card-body text-center px-4 py-5">
                                <h2 class="card-title alternative-font-4 text-color-dark font-weight-semibold line-height-1 text-5 mb-1">{{ $member->name }}</h2>
                                <p class="text-color-grey positive-ls-3 mb-3">{{ strtoupper($member->position ?? '') }}</p>
                                <p class="font-weight-light text-color-dark line-height-7 mb-2">{{ Str::limit(strip_tags($member->description), 100) }}</p>
                                <span class="custom-read-more d-inline-flex justify-content-center align-items-center text-3 font-weight-medium svg-fill-color-primary">
                                    {{ __('VER PERFIL') }}
                                    <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                @php
                    $fallbackTeam = [
                        ['name' => 'Dirección del Estudio', 'role' => 'SOCIO FUNDADOR', 'img' => 'team-1.jpg'],
                        ['name' => 'Equipo Senior', 'role' => 'ABOGADO/A SENIOR', 'img' => 'team-2.jpg'],
                        ['name' => 'Especialista en Familia', 'role' => 'DERECHO DE FAMILIA', 'img' => 'team-3.jpg'],
                        ['name' => 'Especialista en Empresas', 'role' => 'DERECHO COMERCIAL', 'img' => 'team-4.jpg'],
                        ['name' => 'Equipo Asociado', 'role' => 'ABOGADO/A ASOCIADO/A', 'img' => 'team-5.jpg'],
                    ];
                @endphp
                @foreach($fallbackTeam as $ft)
                    <div class="py-5">
                        <a href="#" class="text-decoration-none">
                            <div class="card custom-card-style-1 border-0 border-radius-0 custom-box-shadow-1">
                                <img src="{{ asset('cd-project/img/demos/law-firm-2/team/' . $ft['img']) }}" class="card-img-top border-radius-0" alt="{{ __($ft['name']) }} Image" />
                                <div class="card-body text-center px-4 py-5">
                                    <h2 class="card-title alternative-font-4 text-color-dark font-weight-semibold line-height-1 text-5 mb-1">{{ __($ft['name']) }}</h2>
                                    <p class="text-color-grey positive-ls-3 mb-3">{{ __($ft['role']) }}</p>
                                    <p class="font-weight-light text-color-dark line-height-7 mb-2">{{ __('Cargá la biografía de este integrante desde el panel de administración.') }}</p>
                                    <span class="custom-read-more d-inline-flex justify-content-center align-items-center text-3 font-weight-medium svg-fill-color-primary">
                                        {{ __('VER PERFIL') }}
                                        <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            @endforelse

        </div>
    </div>
    @endif
    {{-- ============================================================
         6. FAQ (accordion + consultation form side by side)
    ============================================================= --}}
    <div class="container py-5 my-3">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="card bg-primary border-0 border-radius-0">
                    <div class="card-body p-5">
                        <h3 class="d-block alternative-font-4 text-color-light font-weight-medium opacity-8 text-4 mb-0">{{ config('site.welcome.faq_badge', __('ANY QUESTIONS?')) }}</h3>
                        <h2 class="text-color-light font-weight-bold text-9 pb-2 mb-4">{{ config('site.welcome.faq_heading', __('Frequent Asked Questions')) }}</h2>
                        <div class="custom-seemore-overlay mb-4" style="max-height: 400px;">
                            @if(is_module_active('faqs') && isset($featuredFaqs) && $featuredFaqs->count() > 0)
                                <div class="custom-accordion-style-1 accordion accordion-modern" id="FAQAccordion">
                                    @foreach($featuredFaqs as $faqIndex => $faq)
                                        <div class="card card-default">
                                            <div class="card-header">
                                                <h4 class="card-title m-0">
                                                    <a class="accordion-toggle text-color-dark font-weight-semibold text-2-5 collapsed" data-bs-toggle="collapse" href="#collapseFAQ{{ $faqIndex }}">
                                                        {{ ($faqIndex + 1) }}- {{ $faq->question }}
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseFAQ{{ $faqIndex }}" class="collapse" data-bs-parent="#FAQAccordion">
                                                <div class="card-body ps-4 pt-2">
                                                    <p class="mb-0">{!! $faq->answer !!}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="custom-accordion-style-1 accordion accordion-modern" id="FAQAccordion">
                                    @php
                                        $fallbackFaqs = [
                                            ['q' => __('¿Por qué elegir nuestro estudio?'), 'a' => __('Combinamos experiencia, dedicación y una mirada moderna del derecho. Cada cliente recibe atención personalizada y estrategias adaptadas a su caso.')],
                                            ['q' => 'Why do I need an attorney?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                            ['q' => 'Cras a elit sit amet leo accumsan volutpa?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                            ['q' => 'Integer aliquet ullamcorper dolor?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                            ['q' => 'Efficitur felis ultrices non?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                            ['q' => 'Efficitur sit a met non?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                            ['q' => 'Efficitur felis ultrices non dolor sit?', 'a' => 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.'],
                                        ];
                                    @endphp
                                    @foreach($fallbackFaqs as $fi => $ff)
                                        <div class="card card-default">
                                            <div class="card-header">
                                                <h4 class="card-title m-0">
                                                    <a class="accordion-toggle text-color-dark font-weight-semibold text-2-5 collapsed" data-bs-toggle="collapse" href="#collapseFAQ{{ $fi }}">
                                                        {{ ($fi + 1) }}- {{ __($ff['q']) }}
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseFAQ{{ $fi }}" class="collapse" data-bs-parent="#FAQAccordion">
                                                <div class="card-body ps-4 pt-2">
                                                    <p class="mb-0">{{ __($ff['a']) }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            <a href="#" class="custom-seemore-overlay-button text-color-light text-5"><i class="fas fa-chevron-down position-relative z-index-1"></i></a>
                        </div>
                        <a href="{{ route('front.contact') }}" class="btn custom-btn-primary-darken font-weight-bold btn-px-5 btn-py-3">{{ __('CONTACTANOS') }}</a>
                    </div>
                </div>
            </div>
            <div id="requestConsultation" class="col-lg-6 col-xl-5 offset-xl-1">
                <h3 class="d-block alternative-font-4 text-color-primary font-weight-medium text-4 text-lg-end mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.form_badge', __("LET'S TALK")) }}</h3>
                <h2 class="text-color-dark font-weight-bold text-9 text-lg-end pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">{{ config('site.welcome.form_heading', __('Request Consultation')) }}</h2>
                <form class="contact-form js-recaptcha-form custom-form-style-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" data-recaptcha-action="contact" action="{{ route('front.contact') }}" method="POST">
                    @csrf
                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('Success!') }}</strong> {{ __('Your request has been sent to us.') }}
                    </div>
                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your request.') }}
                        <span class="mail-error-message text-1 d-block"></span>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3">
                            <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control border-radius-0" name="name" id="name" required placeholder="{{ __('Name') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3">
                            <input type="email" value="" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control border-radius-0" name="email" id="email" required placeholder="{{ __('E-mail') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3">
                            <input type="text" value="" data-msg-required="{{ __('Please enter your phone number.') }}" maxlength="100" class="form-control border-radius-0" name="phone" id="phone" required placeholder="{{ __('Phone') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-4">
                            <textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="9" class="form-control border-radius-0" name="message" id="message" required placeholder="{{ __('Message') }} *"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col text-lg-end mb-0">
                            <button type="submit" class="btn btn-primary font-weight-bold btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="350" data-loading-text="Loading...">{{ __('SOLICITAR CONSULTA') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>



    {{-- ============================================================
         8. EXTENDED SERVICES (checklist + circular icon carousel)
    ============================================================= --}}
    <hr class="my-0">
    <div class="container pb-4 mb-5">
        <div class="row py-5 my-4">
            <div class="col text-center">
                <h2 class="text-color-dark text-12 font-weight-medium mb-0"><em>{{ config('site.welcome.extended_heading', __('Extensive Resources and Commitment')) }}</em></h2>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-7 mb-5 mb-lg-0">
                <p class="font-weight-light mb-0">{{ config('site.welcome.extended_text', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur. Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero.')) }}</p>
                <div class="row py-4 my-2">
                    <div class="col-sm-6 col-xl-4">
                        <ul class="list list-icons list-icons-style-2 list-icons-lg mb-0">
                            <li class="font-weight-semibold text-color-dark">
                                <i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i>
                                {{ config('site.welcome.checklist_1', __('Professional Ethics')) }}
                            </li>
                            <li class="font-weight-semibold text-color-dark">
                                <i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i>
                                {{ config('site.welcome.checklist_2', __('Client Commitment')) }}
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-xl-4">
                        <ul class="list list-icons list-icons-style-2 list-icons-lg mb-0">
                            <li class="font-weight-semibold text-color-dark">
                                <i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i>
                                {{ config('site.welcome.checklist_3', __('Absolute Confidentiality')) }}
                            </li>
                            <li class="font-weight-semibold text-color-dark">
                                <i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i>
                                {{ config('site.welcome.checklist_4', __('Proven Experience')) }}
                            </li>
                        </ul>
                    </div>
                    <div class="col-xl-4">
                        <ul class="list list-icons list-icons-style-2 list-icons-lg mb-0">
                            <li class="font-weight-semibold text-color-dark">
                                <i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i>
                                {{ config('site.welcome.checklist_5', __('Tangible Results')) }}
                            </li>
                        </ul>
                    </div>
                </div>
                <a href="{{ route('front.contact') }}" class="custom-read-more-link d-flex align-items-center btn btn-link text-color-primary text-decoration-none svg-fill-color-primary svg-stroke-color-primary font-weight-semibold text-3 line-height-1 p-0">
                    {{ __('CONOCER MÁS') }}
                    <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                    </svg>
                </a>
            </div>
            <div class="col-md-6 col-lg-4 text-center mx-auto">
                <div class="owl-carousel-wrapper" style="height: 285px;">
                    <div class="owl-carousel owl-theme custom-carousel-style-1 dots-horizontal-center custom-dots-style-1 dots-dark mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'autoplaySpeed': 500, 'dotsSpeed': 500}">
                        @if(is_module_active('services') && isset($services) && $services->count() > 0)
                            @foreach($services->take(3) as $carouselService)
                                <div data-dynamic-height="['255px','255px','255px','750px','255px']" style="height: 255px;">
                                    @php
                                        $iconFile = $carouselService->icon ?? 'icon-court.svg';
                                        $iconPath = Str::startsWith($iconFile, 'cd-project/') ? $iconFile : 'cd-project/img/demos/law-firm-2/icons/' . $iconFile;
                                    @endphp
                                    <div class="custom-carousel-style-1-icon-wrapper mb-3">
                                        <img width="50" height="50" src="{{ asset($iconPath) }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                    </div>
                                    <h4 class="alternative-font-4 text-color-dark font-weight-bold pb-1 mb-2">{{ $carouselService->title }}</h4>
                                    <p class="font-weight-light text-color-dark mb-4">{{ Str::limit(strip_tags($carouselService->description), 80) }}</p>
                                </div>
                            @endforeach
                        @else
                            @for($i = 0; $i < 3; $i++)
                                <div data-dynamic-height="['255px','255px','255px','750px','255px']" style="height: 255px;">
                                    <div class="custom-carousel-style-1-icon-wrapper mb-3">
                                        <img width="50" height="50" src="{{ asset('cd-project/img/demos/law-firm-2/icons/icon-court.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                    </div>
                                    <h4 class="alternative-font-4 text-color-dark font-weight-bold pb-1 mb-2">{{ __('Sumá tus áreas de actuación') }}</h4>
                                    <p class="font-weight-light text-color-dark mb-4">{{ __('Cargá los servicios que ofrece tu estudio desde /admin/services para que aparezcan en esta sección.') }}</p>
                                </div>
                            @endfor
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         9. CTA (primary-darken bg, contact info + "Experienced Attorneys?" + button)
    ============================================================= --}}
    <section class="section section-height-3 bg-primary-darken border-0 m-0 appear-animation" data-appear-animation="fadeIn">
        <div class="container py-3">
            <div class="row align-items-center justify-content-between">
                <div class="col-xl-3 text-center text-xl-start mb-5 mb-xl-0">
                    <ul class="list list-unstyled d-lg-flex d-xl-block align-items-center justify-content-lg-center mb-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1600">
                        <li class="mb-lg-0 mb-xl-3">
                            <i class="icons icon-phone text-color-secondary text-5-5 position-relative top-2 me-2"></i>
                            <a href="tel:{{ config('site.contact.phone', '(800) 123-4567') }}" class="text-color-light font-weight-bold text-decoration-none text-5 hover-effect-2">{{ config('site.contact.phone', '(800) 123-4567') }}</a>
                        </li>
                        <li class="mx-lg-5 mx-xl-0 mb-3 mb-lg-0 mb-xl-3">
                            <i class="icons icon-envelope text-color-secondary text-6 position-relative top-6 me-2"></i>
                            <a href="mailto:{{ config('site.contact.email', 'info@example.com') }}" class="text-color-light text-decoration-none text-4 hover-effect-2">{{ config('site.contact.email', 'info@example.com') }}</a>
                        </li>
                        <li class="text-color-light text-4 mb-0">
                            <i class="icons icon-calendar text-color-secondary text-5 position-relative top-3 me-2"></i>
                            {{ config('site.welcome.cta_schedule', config('site.contact.schedule', 'Lunes a Viernes 9 a 18hs')) }}
                        </li>
                    </ul>
                </div>
                <div class="col-xl-5 text-center mb-5 mb-xl-0">
                    <div class="appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500">
                        <h3 class="alternative-font-4 text-color-light font-weight-semibold text-4 opacity-9 mb-1">{{ config('site.welcome.cta_badge', __('ARE YOU LOOKING FOR')) }}</h3>
                    </div>
                    <h2 class="text-transform-none text-color-light font-weight-bold text-10 negative-ls-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="750">{{ config('site.welcome.cta_heading', __('Experienced Attorneys?')) }}</h2>
                    <div class="appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="950">
                        <p class="text-color-light text-3-5 opacity-8 mb-0">{{ config('site.welcome.cta_text', __('Get a free initial consultation right now')) }}</p>
                    </div>
                </div>
                <div class="col-xl-3 text-center text-xl-end">
                    <a href="{{ route('front.contact') }}" data-hash data-hash-offset="0" data-hash-offset-lg="100" class="btn btn-primary font-weight-bold btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1600">{{ __('SOLICITAR CONSULTA') }}</a>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         9b. SUCCESS STORIES CAROUSEL (references/case studies)
    ============================================================= --}}
    {{-- @if(is_module_active('references'))
    <div class="container py-5 my-5">
        <div class="row pb-2 mb-4">
            <div class="col text-center">
                <h3 class="alternative-font-4 text-color-primary font-weight-semibold text-4 mb-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.cases_badge', __('RECENT CASES')) }}</h3>
                <h2 class="text-transform-none text-color-dark font-weight-bold text-10 negative-ls-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">{{ config('site.welcome.cases_heading', __('Success Stories')) }}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800">
                <div class="custom-carousel-style-2 owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 dots-dark mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 2}, '1200': {'items': 2}}, 'loop': true, 'nav': false, 'dots': true, 'margin': 25, 'stagePadding': 25, 'autoplay': false, 'autoplayTimeout': 7000}">

                    @forelse($featuredReferences as $reference)
                        <div class="pb-5">
                            <a href="#" class="text-decoration-none">
                                <div class="card custom-card-style-2 border-0 border-radius-0">
                                    <div class="card-img-top">
                                        @php
                                            $refImg = !empty($reference->image)
                                                ? (filter_var($reference->image, FILTER_VALIDATE_URL) ? $reference->image : asset($reference->image))
                                                : asset('cd-project/img/demos/law-firm-2/cases/case-' . (($loop->index % 2) + 1) . '.jpg');
                                        @endphp
                                        <img src="{{ $refImg }}" class="img-fluid" alt="{{ $reference->name ?? '' }}" />
                                    </div>
                                    <div class="card-body">
                                        <span class="d-block text-color-grey positive-ls-2 mb-0">{{ strtoupper($reference->type ?? '') }}</span>
                                        <h4 class="text-color-dark font-weight-medium text-5-5 mb-2"><em>{{ $reference->name }}</em></h4>
                                        <span class="custom-read-more font-weight-medium d-inline-flex justify-content-center align-items-center svg-fill-color-primary svg-stroke-color-primary">
                                            {{ __('VER DETALLES') }}
                                            <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                            </svg>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @empty
                        @php
                            $fallbackCases = [
                                ['type' => 'FAMILY LAW', 'title' => 'Family Law Success Case Example', 'img' => 'case-1.jpg'],
                                ['type' => 'BUSINESS LAW', 'title' => 'Business Law Success Case Example', 'img' => 'case-2.jpg'],
                            ];
                        @endphp
                        @foreach($fallbackCases as $fc)
                            <div class="pb-5">
                                <a href="#" class="text-decoration-none">
                                    <div class="card custom-card-style-2 border-0 border-radius-0">
                                        <div class="card-img-top">
                                            <img src="{{ asset('cd-project/img/demos/law-firm-2/cases/' . $fc['img']) }}" class="img-fluid" alt="" />
                                        </div>
                                        <div class="card-body">
                                            <span class="d-block text-color-grey positive-ls-2 mb-0">{{ __($fc['type']) }}</span>
                                            <h4 class="text-color-dark font-weight-medium text-5-5 mb-2"><em>{{ __($fc['title']) }}</em></h4>
                                            <span class="custom-read-more font-weight-medium d-inline-flex justify-content-center align-items-center svg-fill-color-primary svg-stroke-color-primary">
                                                {{ __('VER DETALLES') }}
                                                <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endforelse

                </div>
            </div>
        </div>
    </div>
    @endif --}}

    {{-- ============================================================
         PARALLAX QUOTE
    ============================================================= --}}
    <section class="section parallax bg-transparent border-0 py-0 m-0" data-plugin-parallax data-image-src="{{ !empty(config('site.welcome.parallax_image')) ? (filter_var(config('site.welcome.parallax_image'), FILTER_VALIDATE_URL) ? config('site.welcome.parallax_image') : asset(config('site.welcome.parallax_image'))) : asset('cd-project/img/demos/law-firm-2/backgrounds/background-3.jpg') }}" data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 8, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}">
        <div class="d-flex justify-content-center">
            <div class="scrollable-parallax-wrapper overflow-hidden">
                <div class="container custom-container-style-1 custom-container-position-1 py-5 my-5 mx-0">
                    <div class="row justify-content-center py-4">
                        <div class="col-lg-9 text-center">
                            <p class="custom-font-secondary text-9 text-color-light line-height-3 opacity-9 mb-0">"{{ config('site.welcome.parallax_quote', __('Happiness is the meaning and the purpose of life, the whole aim and end of human existence.')) }}"</p>
                            <div class="d-inline-block divider divider-primary divider-small my-4">
                                <hr class="my-0">
                            </div>
                            <strong class="d-block text-color-light line-height-1 text-4">- {{ config('site.welcome.parallax_author', 'Aristotle') }}</strong>
                            <p class="text-color-light opacity-3 text-2 mb-0">({{ config('site.welcome.parallax_author_title', __('Greek Philosopher')) }})</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================
         10. BLOG (posts section)
    ============================================================= --}}
    @if(is_module_active('blog'))
    <div class="container py-5 my-5">
        <div class="row mb-5">
            <div class="col text-center">
                <h3 class="alternative-font-4 text-color-primary font-weight-semibold text-4 mb-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.welcome.blog_badge', __('OUR BLOG')) }}</h3>
                <h2 class="text-transform-none text-color-dark font-weight-bold text-10 negative-ls-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.blog_heading', __('News & Articles')) }}</h2>
            </div>
        </div>
        <div class="row row-gutter-sm pb-2 mb-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">

            @forelse($featuredPosts->take(2) as $post)
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <article>
                        <div class="card border-0 border-radius-0 custom-box-shadow-1">
                            <div class="card-img-top">
                                <a href="{{ route('blog.post', $post->slug) }}">
                                    @php
                                        $headerSrc = $post->header ?? $post->image ?? null;
                                        $postImg = !empty($headerSrc)
                                            ? (filter_var($headerSrc, FILTER_VALIDATE_URL) ? $headerSrc : asset($headerSrc))
                                            : asset('cd-project/img/defaults/blog/blog-' . ((($loop->iteration - 1) % 3) + 1) . '.jpg');
                                    @endphp
                                    <img class="card-img-top border-radius-0 hover-effect-2" src="{{ $postImg }}" alt="{{ $post->title }}">
                                </a>
                            </div>
                            <div class="card-body bg-light p-4 z-index-1">
                                <p class="text-uppercase text-color-default text-1 mb-1 pt-1">
                                    <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}">{{ $post->created_at->format('d M Y') }}</time>
                                    @if($post->user)
                                        <span class="opacity-3 d-inline-block px-2">|</span>
                                        {{ $post->user->name }}
                                    @endif
                                </p>
                                <div class="card-body p-0">
                                    <h4 class="card-title alternative-font-4 font-weight-semibold text-5 mb-3"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3" href="{{ route('blog.post', $post->slug) }}">{{ $post->title }}</a></h4>
                                    <p class="card-text mb-2">{{ Str::limit(strip_tags($post->content), 120) }}</p>
                                    <a href="{{ route('blog.post', $post->slug) }}" class="custom-read-more-link d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none svg-fill-color-primary svg-stroke-color-primary ps-0">
                                        {{ __('LEER MÁS') }}
                                        <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            @empty
                @for($i = 1; $i <= 2; $i++)
                    <div class="col-lg-6 mb-4 mb-lg-0">
                        <article>
                            <div class="card border-0 border-radius-0 custom-box-shadow-1">
                                <div class="card-img-top">
                                    <a href="#">
                                        <img class="card-img-top border-radius-0 hover-effect-2" src="{{ asset('cd-project/img/demos/law-firm-2/blog/blog-' . $i . '.jpg') }}" alt="Card Image">
                                    </a>
                                </div>
                                <div class="card-body bg-light p-4 z-index-1">
                                    <p class="text-uppercase text-color-default text-1 mb-1 pt-1">
                                        <time pubdate datetime="{{ now()->format('Y-m-d') }}">{{ now()->translatedFormat('d M Y') }}</time>
                                        <span class="opacity-3 d-inline-block px-2">|</span>
                                        {{ __('Equipo Editorial') }}
                                    </p>
                                    <div class="card-body p-0">
                                        <h4 class="card-title alternative-font-4 font-weight-semibold text-5 mb-3"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3" href="#">{{ __('Próximamente: novedades del estudio') }}</a></h4>
                                        <p class="card-text mb-2">{{ __('Próximamente compartiremos artículos sobre actualidad jurídica, jurisprudencia relevante y guías prácticas.') }}</p>
                                        <a href="#" class="custom-read-more-link d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none svg-fill-color-primary svg-stroke-color-primary ps-0">
                                            {{ __('LEER MÁS') }}
                                            <svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <polygon stroke="#777" stroke-width="0.1" fill="#777" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                @endfor
            @endforelse

        </div>
        <div class="row">
            <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" data-plugin-options="{'accY': -250}">
                <a href="{{ route('blog.index') }}" class="btn btn-primary font-weight-bold px-5 btn-py-3">{{ __('VER BLOG') }}</a>
            </div>
        </div>
    </div>
    @endif

</div>

@endsection