@extends('layout.front.master')

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

{{-- Open Graph Meta Tags --}}
@section('og_title', ($seoData['og_title'] ?? config('site.name')))
@section('og_description', ($seoData['og_description'] ?? config('site.og.description') ?? config('site.description', '')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', ($seoData['twitter_title'] ?? config('site.name')))
@section('twitter_description', ($seoData['twitter_description'] ?? config('site.twitter.description')))
@section('twitter_image', brand_twitter_image())

@section('content')

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 1: Hero Carousel (2 slides, 700px, kenBurnsToRight)
     ═══════════════════════════════════════════════════════════════ --}}
@if(isset($carouselImages) && $carouselImages->count() > 0)
    <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-style-diamond nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplay': false, 'autoplayTimeout': 7000}" data-dynamic-height="['700px','700px','600px','500px','410px']" style="height: 700px;">
        <div class="owl-stage-outer">
            <div class="owl-stage">
                @foreach($carouselImages as $index => $slide)
                    @if($index === 0)
                        {{-- Slide 1: BUILDING DREAMS with engineer overlay --}}
                        <div class="owl-item position-relative">
                            <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToRight" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url({{ $slide->image_path }}); background-size: cover; background-position: center;"></div>
                            <div class="container position-relative z-index-1 h-100">
                                <div class="row align-items-center h-100">
                                    <div class="col-lg-9 col-xl-8 position-relative mx-auto mt-5 pt-5">
                                        <h1 class="position-relative text-color-light font-weight-bold custom-big-text-style-1 text-start text-lg-end pt-4 mt-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                                            <span class="position-absolute bottom-100 left-0 transform3dy-p50 w-100 pt-4 ms-0">
                                                <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1300">{{ config('site.welcome.hero_outline_top', 'BUILDING') }}</span>
                                            </span>
                                            {{ config('site.welcome.hero_title_line1', 'BUILDING') }}<br> {{ config('site.welcome.hero_title_line2', 'DREAMS') }}
                                            <span class="position-absolute top-100 left-0 transform3dy-n50 w-100 pt-4 ms-0">
                                                <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1300">{{ config('site.welcome.hero_outline_bottom', 'DREAMS') }}</span>
                                            </span>
                                        </h1>
                                    </div>
                                </div>
                                <div class="position-absolute left-100pct bottom-0 transform3dx-n50 w-75 ms-5">
                                    <img src="{{ asset('cd-project/img/demos/construction/slides/slide-1-engineer.png') }}" class="img-fluid mw-100 w-auto appear-animation" alt="{{ config('site.name') }}" data-appear-animation="fadeIn" data-appear-animation-delay="100" />
                                </div>
                                <p class="position-absolute bottom-15 right-0 text-color-light font-weight-bold text-5-5 line-height-3 text-end pb-0 pb-lg-5 mb-0 d-none d-sm-block">
                                    <span class="d-block position-relative z-index-1 pb-5 ps-lg-3 mb-5-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1900">{{ config('site.welcome.hero_badge', '#1 Fastest-Growing Company') }}</span>
                                    <span class="custom-svg-position-1">
                                        <svg class="svg-fill-color-primary mt-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                            <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                                        </svg>
                                    </span>
                                </p>
                            </div>
                        </div>
                    @elseif($index === 1)
                        {{-- Slide 2: MODERNITY --}}
                        <div class="owl-item position-relative" style="background-image: url({{ $slide->image_path }}); background-size: cover; background-position: center;">
                            <div class="container position-relative z-index-1 h-100">
                                <div class="row align-items-center h-100 pt-5">
                                    <div class="col-xl-8 position-relative ms-auto mt-5 pt-5">
                                        <h2 class="position-relative text-color-light font-weight-bold custom-big-text-style-1 custom-big-text-style-1-variation text-center text-lg-end pt-4 mt-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1000">
                                            <span class="d-block position-absolute bottom-100 left-0 transform3dy-p50 w-100 pt-5 ps-5">
                                                <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShortePlus" data-appear-animation-delay="2000">
                                                    <span class="d-block pt-5">{{ config('site.welcome.hero_slide2_title', 'MODERNITY') }}</span></span>
                                            </span>
                                            {{ config('site.welcome.hero_slide2_title', 'MODERNITY') }}
                                        </h2>
                                    </div>
                                </div>
                                <p class="position-absolute bottom-15 right-0 text-color-light font-weight-bold text-5-5 line-height-3 text-end pb-0 pb-lg-5 mb-0 d-none d-sm-block">
                                    <span class="d-block line-height-1 position-relative z-index-1 pb-5 ps-lg-3 mb-5-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.hero_slide2_badge', 'Modern Building Design') }}</span>
                                    <span class="custom-svg-position-1">
                                        <svg class="svg-fill-color-dark appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                            <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                                        </svg>
                                    </span>
                                </p>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="owl-nav mt-5">
            <button type="button" role="presentation" class="owl-prev" aria-label="{{ __('Previous') }}"></button>
            <button type="button" role="presentation" class="owl-next" aria-label="{{ __('Next') }}"></button>
        </div>
    </div>
@else
    {{-- Fallback: Static hero with default images --}}
    <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-style-diamond nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplay': false, 'autoplayTimeout': 7000}" data-dynamic-height="['700px','700px','600px','500px','410px']" style="height: 700px;">
        <div class="owl-stage-outer">
            <div class="owl-stage">
                {{-- Fallback Slide 1 --}}
                <div class="owl-item position-relative">
                    <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToRight" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url({{ asset('cd-project/img/demos/construction/slides/slide-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="container position-relative z-index-1 h-100">
                        <div class="row align-items-center h-100">
                            <div class="col-lg-9 col-xl-8 position-relative mx-auto mt-5 pt-5">
                                <h1 class="position-relative text-color-light font-weight-bold custom-big-text-style-1 text-start text-lg-end pt-4 mt-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                                    <span class="position-absolute bottom-100 left-0 transform3dy-p50 w-100 pt-4 ms-0">
                                        <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1300">{{ config('site.welcome.hero_outline_top', 'BUILDING') }}</span>
                                    </span>
                                    {{ config('site.welcome.hero_title_line1', 'BUILDING') }}<br> {{ config('site.welcome.hero_title_line2', 'DREAMS') }}
                                    <span class="position-absolute top-100 left-0 transform3dy-n50 w-100 pt-4 ms-0">
                                        <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1300">{{ config('site.welcome.hero_outline_bottom', 'DREAMS') }}</span>
                                    </span>
                                </h1>
                            </div>
                        </div>
                        <div class="position-absolute left-100pct bottom-0 transform3dx-n50 w-75 ms-5">
                            <img src="{{ asset('cd-project/img/demos/construction/slides/slide-1-engineer.png') }}" class="img-fluid mw-100 w-auto appear-animation" alt="{{ config('site.name') }}" data-appear-animation="fadeIn" data-appear-animation-delay="100" />
                        </div>
                        <p class="position-absolute bottom-15 right-0 text-color-light font-weight-bold text-5-5 line-height-3 text-end pb-0 pb-lg-5 mb-0 d-none d-sm-block">
                            <span class="d-block position-relative z-index-1 pb-5 ps-lg-3 mb-5-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1900">{{ config('site.welcome.hero_badge', '#1 Fastest-Growing Company') }}</span>
                            <span class="custom-svg-position-1">
                                <svg class="svg-fill-color-primary mt-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                    <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                                </svg>
                            </span>
                        </p>
                    </div>
                </div>
                {{-- Fallback Slide 2 --}}
                <div class="owl-item position-relative" style="background-image: url({{ asset('cd-project/img/demos/construction/slides/slide-2.jpg') }}); background-size: cover; background-position: center;">
                    <div class="container position-relative z-index-1 h-100">
                        <div class="row align-items-center h-100 pt-5">
                            <div class="col-xl-8 position-relative ms-auto mt-5 pt-5">
                                <h2 class="position-relative text-color-light font-weight-bold custom-big-text-style-1 custom-big-text-style-1-variation text-center text-lg-end pt-4 mt-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1000">
                                    <span class="d-block position-absolute bottom-100 left-0 transform3dy-p50 w-100 pt-5 ps-5">
                                        <span class="d-inline-flex custom-outline-text-style-1 text-2 text-center appear-animation" data-appear-animation="fadeInRightShortePlus" data-appear-animation-delay="2000">
                                            <span class="d-block pt-5">{{ config('site.welcome.hero_slide2_title', 'MODERNITY') }}</span></span>
                                    </span>
                                    {{ config('site.welcome.hero_slide2_title', 'MODERNITY') }}
                                </h2>
                            </div>
                        </div>
                        <p class="position-absolute bottom-15 right-0 text-color-light font-weight-bold text-5-5 line-height-3 text-end pb-0 pb-lg-5 mb-0 d-none d-sm-block">
                            <span class="d-block line-height-1 position-relative z-index-1 pb-5 ps-lg-3 mb-5-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.hero_slide2_badge', 'Modern Building Design') }}</span>
                            <span class="custom-svg-position-1">
                                <svg class="svg-fill-color-dark appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                    <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                                </svg>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="owl-nav mt-5">
            <button type="button" role="presentation" class="owl-prev" aria-label="{{ __('Previous') }}"></button>
            <button type="button" role="presentation" class="owl-next" aria-label="{{ __('Next') }}"></button>
        </div>
    </div>
@endif

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 2: Who We Are (heading + description + SVG customLineDividerAnim)
     ═══════════════════════════════════════════════════════════════ --}}
<div class="container py-5 my-3">
    <div class="row justify-content-between align-items-center flex-lg-nowrap gy-3">
        <div class="col-lg-4">
            <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ config('site.welcome.who_we_are_title', __('Who We Are')) }}</h2>
            <p class="text-4 font-weight-light mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.who_we_are_text', config('site.description', '')) }}</p>
        </div>
        <div class="col-auto d-none d-lg-block">
            <svg width="145" height="147" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 145.42 147.12" xml:space="preserve" stroke-miter-limit="10" stroke-dasharray="7" data-appear-animation-svg="true">
                <line stroke="#a2a2a2" stroke-dasharray="8" x1="14.75" y1="132.9" x2="133.81" y2="12.05" class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="2400" data-appear-animation-duration="100ms" />
                <line stroke="#FFF" stroke-dasharray="8" stroke-width="2" x1="14.75" y1="132.9" x2="133.81" y2="12.05" class="appear-animation" data-appear-animation="customLineDividerAnim" data-appear-animation-delay="2400" data-appear-animation-duration="2.2s" />
            </svg>
        </div>
        <div class="col-lg-6">
            <p class="font-weight-medium text-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3200">{{ config('site.welcome.who_we_are_description', '') }} @if(config('site.welcome.who_we_are_highlight'))<span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="4000" data-plugin-options="{'flagClassOnly': true}">{{ config('site.welcome.who_we_are_highlight') }}</span>@endif</p>
            <a href="{{ route('front.about') }}" class="custom-view-more d-inline-flex font-weight-medium text-color-primary text-decoration-none appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3400">
                {{ __('Conocé más') }}
                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary ms-2'}" />
            </a>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 3: Services (4 items with SVG stroke-animated icons + decorative squares)
     ═══════════════════════════════════════════════════════════════ --}}
@if(is_module_active('services'))
<section class="section position-relative overflow-hidden border-0 m-0">
    <div class="container pt-5-5 pb-5 mb-3">
        <div class="row mb-5-5">
            <div class="col">
                <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">{{ config('site.welcome.services_heading', __('Services')) }}</h2>
                <p class="text-4 font-weight-light appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500">{{ config('site.welcome.services_subtitle', '') }}</p>
            </div>
        </div>
        <div class="row">
            @forelse($services->take(4) as $index => $service)
                @php
                    $delays = [550, 750, 950, 1150];
                    $iconDelays = [300, 600, 900, 1200];
                    $defaultIcons = [
                        'cd-project/img/demos/construction/icons/faucet.svg',
                        'cd-project/img/demos/construction/icons/winch.svg',
                        'cd-project/img/demos/construction/icons/paint-brush.svg',
                        'cd-project/img/demos/construction/icons/pushcart.svg',
                    ];
                    $iconWidths = [60, 70, 60, 60];
                    $iconHeights = [60, 70, 60, 60];
                    $paddings = ['ps-4', 'ps-3', 'ps-4', 'ps-4'];
                    $mbClass = ($index < 2) ? 'mb-5' : (($index === 2) ? 'mb-5 mb-md-0' : '');
                @endphp
                <div class="col-md-6 {{ $mbClass }} appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="{{ $delays[$index] ?? 550 }}">
                    <div class="d-flex">
                        @if($service->icon && Str::startsWith($service->icon, 'cd-project/'))
                            <img class="flex-0-0-auto" width="{{ $iconWidths[$index] ?? 60 }}" height="{{ $iconHeights[$index] ?? 60 }}" src="{{ asset($service->icon) }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'animated': true, 'delay': {{ $iconDelays[$index] ?? 300 }}, 'accY': 400, 'strokeBased': true, 'extraClass': 'svg-stroke-color-dark'}" />
                        @elseif($service->image)
                            <img class="flex-0-0-auto" width="{{ $iconWidths[$index] ?? 60 }}" height="{{ $iconHeights[$index] ?? 60 }}" src="{{ filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image) }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'animated': true, 'delay': {{ $iconDelays[$index] ?? 300 }}, 'accY': 400, 'strokeBased': true, 'extraClass': 'svg-stroke-color-dark'}" />
                        @else
                            <img class="flex-0-0-auto" width="{{ $iconWidths[$index] ?? 60 }}" height="{{ $iconHeights[$index] ?? 60 }}" src="{{ asset($defaultIcons[$index] ?? $defaultIcons[0]) }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'animated': true, 'delay': {{ $iconDelays[$index] ?? 300 }}, 'accY': 400, 'strokeBased': true, 'extraClass': 'svg-stroke-color-dark'}" />
                        @endif
                        <div class="{{ $paddings[$index] ?? 'ps-4' }}">
                            <h3 class="text-color-dark font-weight-bold text-transform-none text-5 mb-2">{{ $service->title }}</h3>
                            <p class="font-weight-light text-3-5 mb-3-5">{{ Str::limit(strip_tags($service->description), 120, '...') }}</p>
                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="custom-view-more d-inline-flex font-weight-medium text-color-primary text-decoration-none">
                                {{ __('Conocé más') }}
                                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary ms-2'}" />
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                {{-- No services available --}}
            @endforelse
        </div>
    </div>
    {{-- Decorative rotated squares --}}
    <div class="position-absolute transform3dy-n50 right-0 pe-5 me-4">
        <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1700" data-appear-animation-duration="750ms">
            <div class="custom-square-1 bg-primary mb-5"></div>
        </div>
    </div>
    <div class="position-absolute transform3dy-n50 right-15 pe-5 me-5">
        <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="750ms">
            <div class="custom-square-1 bg-dark pe-5 me-5 mt-4 mb-5"></div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 4: Projects (diamond-shaped masonry grid + SVG customDiamondsLineAnim)
     ═══════════════════════════════════════════════════════════════ --}}
@if(is_module_active('projects'))
<div class="container py-5 my-5-5">
    <div class="row">
        <div class="col">
            <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5">{{ config('site.welcome.projects_heading', __('Projects')) }}</h2>
            <p class="text-4 font-weight-light">{{ config('site.welcome.projects_subtitle', '') }}</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="position-relative">
                {{-- SVG Diamonds connecting line --}}
                <svg class="diamonds-svg-line position-absolute bottom-0 left-15 mb-4 ms-5 d-none d-xl-block" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1145.86 508.13" xml:space="preserve" data-appear-animation-svg="true">
                    <g>
                        <path d="M13.87,32.36c1.07,0.55,2.37-0.28,2.4-1.49c0.04-1.58,0.27-2.87,0.5-3.82c0.56-2.35,1.48-4.1,2.65-6.33
                            c1.7-3.25,1.95-2.85,2.46-4.35c1.47-4.3-0.36-8.19-0.47-8.41c-0.36-0.74-1.54-3.15-4.06-4.44c-3.71-1.9-8.87-0.94-11.91,2.46
                            c-2.64,2.95-3.08,7.05-2.08,9.92c0.25,0.71,1.6,2.01,3.64,4.75c3.62,4.87,3.42,4.53,4.11,6.02c1.3,2.83,1.07,4.78,2.74,5.67
                            C13.85,32.35,13.86,32.36,13.87,32.36z"/>
                        <circle fill="#FFF" cx="12.65" cy="12.54" r="6.34"/>
                        <circle cx="12.65" cy="12.54" r="4.29"/>
                        <circle fill="#FFF" cx="12.65" cy="12.54" r="2.44"/>
                    </g>
                    <g>
                        <path d="M1121.72,505.34c0.44,1.12,1.97,1.35,2.79,0.47c1.08-1.16,2.1-1.98,2.9-2.54c1.98-1.4,3.82-2.11,6.17-3.01 c3.43-1.32,3.35-0.86,4.71-1.64c3.94-2.26,5.13-6.39,5.19-6.63c0.22-0.79,0.92-3.38-0.12-6.02c-1.53-3.87-6.04-6.56-10.57-6.01 c-3.93,0.47-6.97,3.27-8.11,6.08c-0.28,0.69-0.12,2.56-0.4,5.97c-0.49,6.05-0.42,5.66-0.89,7.24c-0.89,2.98-2.35,4.3-1.68,6.07
                        C1121.71,505.32,1121.71,505.33,1121.72,505.34z" />
                        <circle fill="#FFF" cx="1133.88" cy="489.64" r="6.34"/>
                        <circle cx="1133.88" cy="489.64" r="4.29"/>
                        <circle fill="#FFF" cx="1133.88" cy="489.64" r="2.44"/>
                    </g>
                    <g>
                        <g>
                            <path class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" data-appear-animation-duration="100ms" fill="none" stroke="#bfbfbf" stroke-miter-limit="10" stroke-dasharray="8.9374,8.9374" d="M22.48,46.84c12.43,19.8,37.11,58.25,65.34,90.46c6.24,7.12,38.23,43.11,89.76,77.67
                                c27.53,18.47,93.42,58.51,184.44,74.83c63.3,11.35,123.7,8.54,152.88,7.18c18.43-0.86,20.79-1.63,44.6-2.65
                                c25.38-1.08,74.44-3.04,134.17,1.51c27.49,2.09,68.09,5.34,120,16.82c38.84,8.59,89.79,20.21,149.48,50.83
                                c17.94,9.21,51.96,27.97,87.87,57.83c28.32,23.54,43.15,41.79,52.16,54.24c5.04,6.97,9.21,13.45,12.57,19.04"/>
                            <path class="appear-animation" data-appear-animation="customDiamondsLineAnim" data-appear-animation-delay="300" data-appear-animation-duration="10s" fill="none" stroke="#FFF" stroke-width="2" stroke-miter-limit="10" stroke-dasharray="8.9374,8.9374" d="M22.48,46.84c12.43,19.8,37.11,58.25,65.34,90.46c6.24,7.12,38.23,43.11,89.76,77.67
                                c27.53,18.47,93.42,58.51,184.44,74.83c63.3,11.35,123.7,8.54,152.88,7.18c18.43-0.86,20.79-1.63,44.6-2.65
                                c25.38-1.08,74.44-3.04,134.17,1.51c27.49,2.09,68.09,5.34,120,16.82c38.84,8.59,89.79,20.21,149.48,50.83
                                c17.94,9.21,51.96,27.97,87.87,57.83c28.32,23.54,43.15,41.79,52.16,54.24c5.04,6.97,9.21,13.45,12.57,19.04"/>
                        </g>
                    </g>
                </svg>
                {{-- Diamond grid with project images --}}
                <div class="diamonds-wrapper">
                    <ul class="diamonds mb-0">
                        @forelse($featuredProjects->take(7) as $index => $project)
                            @php
                                $isSmall = in_array($index, [3, 5, 6]);
                                $diamondClass = $isSmall ? 'diamond diamond-sm' : 'diamond';
                                $projectImage = $project->image
                                    ? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
                                    : asset('cd-project/img/demos/construction/generic/generic-' . ($index + 1) . '.jpg');
                            @endphp
                            <li>
                                <a href="{{ route('frontend.projects.show', $project->slug) }}" class="{{ $diamondClass }}">
                                    <div class="content">
                                        <img src="{{ $projectImage }}" class="img-fluid" alt="{{ $project->title }}" />
                                    </div>
                                </a>
                            </li>
                        @empty
                            {{-- Fallback: static diamond images when no projects --}}
                            <li>
                                <a href="#" class="diamond">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-1.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-2.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-4.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond diamond-sm">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-5-small.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-3.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond diamond-sm">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-6-small.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="diamond diamond-sm">
                                    <div class="content">
                                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-7-small.jpg') }}" class="img-fluid" alt="" />
                                    </div>
                                </a>
                            </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-lg-6">
            <p class="text-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">{{ config('site.welcome.projects_description', '') }} @if(config('site.welcome.projects_highlight'))<span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="1100" data-plugin-options="{'flagClassOnly': true}">{{ config('site.welcome.projects_highlight') }}</span>@endif</p>
            <a href="{{ route('frontend.projects.index') }}" class="custom-view-more d-inline-flex align-items-center btn btn-primary font-weight-semibold rounded-0 text-3-5 btn-px-4 btn-py-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800">
                {{ __('Ver proyectos') }}
                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
            </a>
        </div>
    </div>
</div>
@endif

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 5: Testimonials (parallax bg, typeWriter effect, testimonial quote)
     ═══════════════════════════════════════════════════════════════ --}}
@if(isset($featuredReferences) && $featuredReferences->count() > 0)
<section class="section parallax border-0 pt-5 py-0 m-0" data-plugin-parallax data-plugin-options="{'spped': '1.5', 'parallaxHeight': '125%', 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/construction/backgrounds/background-1.jpg') }}">
    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6 text-center order-2 order-lg-1">
                @if($featuredReferences->first()->image)
                    <img src="{{ filter_var($featuredReferences->first()->image, FILTER_VALIDATE_URL) ? $featuredReferences->first()->image : asset($featuredReferences->first()->image) }}" class="img-fluid" alt="{{ $featuredReferences->first()->name }}" />
                @else
                    <img src="{{ asset('cd-project/img/demos/construction/authors/author-1-big.png') }}" class="img-fluid" alt="{{ $featuredReferences->first()->name }}" />
                @endif
            </div>
            <div class="col-lg-6 align-self-center pb-lg-5 order-1 order-lg-2 ps-5 ps-lg-0">
                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote testimonial-quotes-dark custom-testimonial-quote-position-1 mb-0">
                    <blockquote>
                        <p class="alternative-font-4 font-weight-medium text-start text-4 px-2 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationName': 'typeWriter', 'animationSpeed': 25}">{{ $featuredReferences->first()->description ?? config('site.welcome.testimonial_text', '') }}</p>
                    </blockquote>
                    <div class="testimonial-author text-start ps-3 ms-1">
                        <strong class="text-4-5 negative-ls-1">{{ $featuredReferences->first()->name }}</strong>
                        <p class="text-color-default text-start mb-0">{{ $featuredReferences->first()->company ?? '' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@elseif(config('site.welcome.testimonial_text'))
{{-- Fallback: static testimonial from config --}}
<section class="section parallax border-0 pt-5 py-0 m-0" data-plugin-parallax data-plugin-options="{'spped': '1.5', 'parallaxHeight': '125%', 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/construction/backgrounds/background-1.jpg') }}">
    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6 text-center order-2 order-lg-1">
                <img src="{{ asset('cd-project/img/demos/construction/authors/author-1-big.png') }}" class="img-fluid" alt="{{ config('site.welcome.testimonial_author', '') }}" />
            </div>
            <div class="col-lg-6 align-self-center pb-lg-5 order-1 order-lg-2 ps-5 ps-lg-0">
                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote testimonial-quotes-dark custom-testimonial-quote-position-1 mb-0">
                    <blockquote>
                        <p class="alternative-font-4 font-weight-medium text-start text-4 px-2 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationName': 'typeWriter', 'animationSpeed': 25}">{{ config('site.welcome.testimonial_text') }}</p>
                    </blockquote>
                    <div class="testimonial-author text-start ps-3 ms-1">
                        <strong class="text-4-5 negative-ls-1">{{ config('site.welcome.testimonial_author', '') }}</strong>
                        <p class="text-color-default text-start mb-0">{{ config('site.welcome.testimonial_company', '') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 6: Client Logos (6 logos grid)
     ═══════════════════════════════════════════════════════════════ --}}
@if(isset($companyLogos) && $companyLogos->count() > 0)
<div class="container">
    <div class="row align-items-center text-center py-5 my-3">
        @forelse($companyLogos->take(6) as $index => $logo)
            @php
                $colClass = 'col-sm-4 col-xl-2';
                if ($index < 3) {
                    $colClass .= ' mb-5 mb-xl-0';
                } elseif ($index < 5) {
                    $colClass .= ' mb-5 mb-lg-0';
                }
                $maxWidths = ['90px', '140px', '140px', '140px', '100px', '100px'];
                $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
            @endphp
            <div class="{{ $colClass }}">
                <img src="{{ $logoSrc }}" alt="{{ $logo->name ?? '' }}" class="img-fluid" style="max-width: {{ $maxWidths[$index] ?? '140px' }};" />
            </div>
        @empty
            {{-- No logos available --}}
        @endforelse
    </div>
</div>
@endif

<div class="container-fluid">
    <div class="row">
        <div class="col px-0">
            <hr class="my-0">
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     SECTION 7: Blog (3 cards with date badge overlay on image)
     ═══════════════════════════════════════════════════════════════ --}}
@if(is_module_active('blog') && isset($featuredPosts) && $featuredPosts->count() > 0)
<div class="container mt-5 pt-4 mb-5 mb-lg-4 mb-xl-0 pb-3 pb-xl-0">
    <div class="row">
        <div class="col">
            <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.welcome.blog_heading', __('Blog')) }}</h2>
            <p class="text-4 font-weight-light mb-5-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.blog_subtitle', '') }}</p>
        </div>
    </div>
    <div class="row row-gutter-sm justify-content-center mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
        @forelse($featuredPosts->take(3) as $index => $post)
            <div class="col-sm-9 col-md-6 col-lg-4 {{ $index < 2 ? 'mb-4 mb-lg-0' : '' }}">
                <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card border-0">
                        <div class="card-img-top position-relative overlay">
                            <div class="position-absolute bottom-10 right-0 d-flex justify-content-end w-100 py-3 px-4 z-index-3">
                                <span class="text-center bg-primary text-color-light font-weight-semibold text-5-5 line-height-2 px-3 py-2">
                                    <span class="position-relative z-index-2">
                                        {{ $post->created_at->format('d') }}
                                        <span class="d-block custom-font-size-1 positive-ls-2 px-1">{{ strtoupper($post->created_at->format('M')) }}</span>
                                    </span>
                                </span>
                            </div>
                            @if($post->header)
                                <img src="{{ filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header) }}" class="img-fluid" alt="{{ $post->title }}" />
                            @else
                                <img src="{{ asset('cd-project/img/demos/construction/blog/blog-thumb-' . (($index % 3) + 1) . '.jpg') }}" class="img-fluid" alt="{{ $post->title }}" />
                            @endif
                        </div>
                        <div class="card-body py-4 px-0">
                            <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">{{ __('BY') }} {{ strtoupper($post->user->name ?? 'ADMIN') }}</span>
                            <h3 class="text-transform-none font-weight-bold text-5 text-color-hover-primary mb-2">{{ $post->title }}</h3>
                            <p class="mb-2">{{ \Illuminate\Support\Str::limit($post->description ?? strip_tags($post->content), 100, '...') }}</p>
                            <span class="custom-view-more d-inline-flex font-weight-medium text-color-primary">
                                {{ __('Conocé más') }}
                                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary ms-2'}" style="width: 27px;" />
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        @empty
            {{-- No blog posts available --}}
        @endforelse
    </div>
</div>
{{-- Decorative square (bottom-left) --}}
<div class="position-relative pb-5 d-sm-none d-xl-block">
    <div class="position-absolute transform3dy-n50 left-0">
        <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="1500ms">
            <div class="custom-square-1 bg-primary mt-0 mb-5"></div>
        </div>
    </div>
</div>
@endif

@endsection