@extends('layout.front.master')

@php
    $radocModels = \App\Modules\Products\Models\Product::whereNotNull('landing_slug')
        ->get()->keyBy('landing_slug');
    $mImg = fn($slug, $field, $fallback) => ($radocModels[$slug] ?? null)?->$field
        ? (filter_var(($radocModels[$slug])->$field, FILTER_VALIDATE_URL)
            ? ($radocModels[$slug])->$field
            : asset(($radocModels[$slug])->$field))
        : asset($fallback);
    $mStr = fn($slug, $field, $fallback) => (($radocModels[$slug] ?? null)?->$field) ?: $fallback;
@endphp

@section('title', __('Inicio'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

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

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

@section('header_classes', 'header-transparent')

@push('styles')
<style>
/* Parallax: imagen distinta en móvil (ciclista Radoc en campo) */
@media (max-width: 991px) {
	.parallax-product-landing .parallax-background {
		background-image: url('{{ asset('cd-project/img/parallax/parallax-5-mobile.jpg') }}') !important;
	}
}
</style>
@endpush

@section('content')

{{-- Hero Section - Video background (poster mientras carga, luego video en play) estilo Amflow --}}
@php
    $heroPosterUrl = isset($carouselImages) && $carouselImages->count() > 0
        ? (filter_var($carouselImages->first()->image_path, FILTER_VALIDATE_URL) ? $carouselImages->first()->image_path : asset($carouselImages->first()->image_path))
        : site_asset_url('hero_background', 'cd-project/img/demos/product-landing/backgrounds/background-1.jpg');
    $heroVideoPath    = $heroVideoPath ?? '';
    $heroVideoEnabled = ($heroVideoEnabled ?? false) && $heroVideoPath !== '';
    $heroVideoUrl     = $heroVideoPath;
@endphp
<section class="hero-video-section position-relative overflow-hidden m-0" style="height: 100vh;">
    {{-- Poster: imagen de fondo visible siempre (mientras carga el video, o si video está desactivado) --}}
    <div class="hero-video-poster position-absolute top-0 left-0 w-100 h-100" style="background-image: url({{ $heroPosterUrl }}); background-size: cover; background-position: center; z-index: 0;"></div>
    @if($heroVideoEnabled)
    {{-- Video: se muestra y reproduce cuando está listo --}}
    <video class="hero-video position-absolute top-0 left-0 w-100 h-100" style="object-fit: cover; z-index: 1; opacity: 0; transition: opacity 0.8s ease;" playsinline muted loop preload="auto" data-hero-video>
        <source src="{{ $heroVideoUrl }}" type="video/mp4">
    </video>
    @endif
    {{-- Overlay oscuro --}}
    <div class="position-absolute top-0 left-0 w-100 h-100 overlay overlay-show overlay-color-dark overlay-op-5" style="z-index: 2;"></div>
    {{-- Contenido --}}
    <div class="container position-relative z-index-3 h-100">
        <div class="row align-items-center h-100">
            <div class="col-lg-6">
                <div class="hero-content">
                    <h2 class="text-color-light text-4 font-weight-normal mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        {{ config('site.welcome.subtitle', __('Descubre nuestros productos de alta calidad')) }}
                    </h2>
                    <h1 class="text-color-light font-weight-extra-bold text-8 line-height-1 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        {{ config('site.name') }} <span class="text-color-primary">{{ config('site.welcome.highlight', 'ONE') }}</span>
                    </h1>
                    <div class="product-features mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                        <p class="text-color-light text-3 font-weight-light mb-2">
                            {{ config('site.welcome.features', __('Tecnología avanzada | Calidad superior | Diseño innovador')) }}
                        </p>
                        @if(config('site.welcome.disclaimer'))
                            <p class="text-color-light text-2 opacity-7 mb-0">* {{ config('site.welcome.disclaimer') }}</p>
                        @endif
                    </div>
                    <div class="hero-buttons d-flex flex-column flex-md-row gap-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                        <a href="#specifications" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">{{ __('Ver Modelos') }}</a>
                        <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-modern font-weight-bold text-3 px-5 py-3">{{ __('Consultar') }}</a>
                    </div>
                </div>
            </div>
        </div>
        <a href="#main" class="slider-scroll-button slider-scroll-button-light position-absolute bottom-10 left-50pct transform3dx-n50" data-hash data-hash-offset="0" data-hash-offset-lg="80">{{ __('Deslizar Abajo') }}</a>
    </div>
</section>

<div class="" id="main">
    {{-- Sección de Productos --}}
    <section class="section bg-dark section-height-3 border-0 m-0" id="specifications">
        <div class="container">
            {{-- Encabezado de la sección --}}
            <div class="row mb-5">
                <div class="col-lg-6">
                    <h2 class="text-color-light font-weight-bold text-8 mb-3">{{ __('Conoce Nuestra') }} <span class="text-color-primary">{{ __('Serie') }}</span></h2>
                </div>
                <div class="col-lg-6">
                    <p class="text-4 text-color-light opacity-7 mb-0">
                        {{ config('site.welcome.products_description', __('Nuestros productos ofrecen diferentes modelos diseñados para diferentes necesidades. Cada modelo combina tecnología avanzada con componentes de alta calidad.')) }}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="carousel-half-full-width-wrapper carousel-half-full-width-right">
                        <div class="owl-carousel owl-theme carousel-half-full-width-right nav-bottom nav-bottom-align-left nav-style-1 nav-dark nav-font-size-lg dots-light show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '768': {'items': 2.5}, '992': {'items': 3}, '1200': {'items': 3}}, 'loop': false, 'nav': true, 'dots': true, 'margin': 30}">
                            {{-- Productos estáticos de Radoc Bikes - Siempre mostrar estos productos --}}
                            <div class="product-card h-100 d-flex flex-column anim-hover-translate-top-10px transition-3ms">
                                @if(Route::has('front.one-select'))
                                <a href="{{ route('front.one-select') }}" class="product-image bg-dark mb-3 text-decoration-none d-block" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('select', 'card_image', 'cd-project/img/products/select/radoc-select.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Select" style="max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(1); transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" />
                                </a>
                                @else
                                <div class="product-image bg-dark mb-3" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('select', 'card_image', 'cd-project/img/products/select/radoc-select.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Select" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
                                </div>
                                @endif
                                <div class="product-info bg-dark border-0 text-start d-flex flex-column flex-grow-1">
                                    <h3 class="product-title text-color-light font-weight-bold text-5 mb-2">
                                        @if(Route::has('front.one-select'))
                                        <a href="{{ route('front.one-select') }}" class="text-color-light text-decoration-none text-color-hover-primary">{{ __('RADOC ONE') }} <span class="text-color-primary">Select</span></a>
                                        @else
                                        {{ __('RADOC ONE') }} <span class="text-color-primary">Select</span>
                                        @endif
                                    </h3>
                                    <p class="product-specs text-color-light opacity-7 text-3 mb-3">{{ $mStr('select', 'card_specs', 'Rock Shox Domain 180mm | SRAM NX 12v | MAGURA MT5 | Batería LG 48V/15Ah') }}</p>
                                    <div class="product-buttons d-flex gap-1 justify-content-start mt-auto">
                                        @if(Route::has('front.one-select'))
                                            <a href="{{ route('front.one-select') }}" class="btn btn-primary btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Conocer Más') }}</a>
                                        @endif
                                        <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Consultar') }}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card h-100 d-flex flex-column anim-hover-translate-top-10px transition-3ms">
                                @if(Route::has('front.one-ultra'))
                                <a href="{{ route('front.one-ultra') }}" class="product-image bg-dark mb-3 text-decoration-none d-block" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('ultra', 'card_image', 'cd-project/img/products/ultra/radoc-ultra.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Ultra" style="max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(1); transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" />
                                </a>
                                @else
                                <div class="product-image bg-dark mb-3" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('ultra', 'card_image', 'cd-project/img/products/ultra/radoc-ultra.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Ultra" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
                                </div>
                                @endif
                                <div class="product-info bg-dark border-0 text-start d-flex flex-column flex-grow-1">
                                    <h3 class="product-title text-color-light font-weight-bold text-5 mb-2">
                                        @if(Route::has('front.one-ultra'))
                                        <a href="{{ route('front.one-ultra') }}" class="text-color-light text-decoration-none text-color-hover-primary">{{ __('RADOC ONE') }} <span class="text-color-primary">Ultra</span></a>
                                        @else
                                        {{ __('RADOC ONE') }} <span class="text-color-primary">Ultra</span>
                                        @endif
                                    </h3>
                                    <p class="product-specs text-color-light opacity-7 text-3 mb-3">{{ $mStr('ultra', 'card_specs', 'Rock Shox ZEB 180mm | SRAM UDH66 12v | MAGURA MT7 | Batería LG 48V/15Ah') }}</p>
                                    <div class="product-buttons d-flex gap-1 justify-content-start mt-auto">
                                        @if(Route::has('front.one-ultra'))
                                            <a href="{{ route('front.one-ultra') }}" class="btn btn-primary btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Conocer Más') }}</a>
                                        @endif
                                        <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Consultar') }}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card h-100 d-flex flex-column anim-hover-translate-top-10px transition-3ms">
                                @if(Route::has('front.one-factory'))
                                <a href="{{ route('front.one-factory') }}" class="product-image bg-dark mb-3 text-decoration-none d-block" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('factory', 'card_image', 'cd-project/img/products/factory/radoc-factory.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Factory" style="max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(1); transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" />
                                </a>
                                @else
                                <div class="product-image bg-dark mb-3" style="height: 450px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <img src="{{ $mImg('factory', 'card_image', 'cd-project/img/products/factory/radoc-factory.jpg') }}" class="img-fluid transition-3ms" alt="RADOC ONE Factory" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
                                </div>
                                @endif
                                <div class="product-info bg-dark border-0 text-start d-flex flex-column flex-grow-1">
                                    <h3 class="product-title text-color-light font-weight-bold text-5 mb-2">
                                        @if(Route::has('front.one-factory'))
                                        <a href="{{ route('front.one-factory') }}" class="text-color-light text-decoration-none text-color-hover-primary">{{ __('RADOC ONE') }} <span class="text-color-primary">Factory</span></a>
                                        @else
                                        {{ __('RADOC ONE') }} <span class="text-color-primary">Factory</span>
                                        @endif
                                    </h3>
                                    <p class="product-specs text-color-light opacity-7 text-3 mb-3">{{ $mStr('factory', 'card_specs', 'FOX 38 170mm | SRAM GX EAGLE Electrónica | MAGURA MT7 | Batería LG 48V/15Ah') }}</p>
                                    <div class="product-buttons d-flex gap-1 justify-content-start mt-auto">
                                        @if(Route::has('front.one-factory'))
                                            <a href="{{ route('front.one-factory') }}" class="btn btn-primary btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Conocer Más') }}</a>
                                        @endif
                                        <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-modern font-weight-bold text-1 px-2 py-1 d-inline-block" style="font-size: 0.8rem; width: auto;">{{ __('Consultar') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Sección Parallax --}}
    <section class="parallax section section-text-light section-parallax section-center py-0 my-0 bg-dark overlay overlay-show overlay-color-dark overlay-op-3 parallax-product-landing" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 10, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}" data-image-src="{{ asset('cd-project/img/parallax/parallax-4.jpg') }}" data-image-src-mobile="{{ asset('cd-project/img/parallax/parallax-5-mobile.jpg') }}">
        <div class="d-flex justify-content-center">
            <div class="scrollable-parallax-wrapper">
                <div class="container py-5 my-5">
                    <div class="row justify-content-center py-5 my-5">
                        <div class="col-lg-9 py-5 my-5 parallax-content">
                            <h4 class="mb-3">{{ config('site.welcome.parallax_title', __('Experiencia Radoc en Tafí del Valle')) }}</h4>
                            <p class="mb-0">{{ config('site.welcome.parallax_text', __('Sumérgete en la aventura que solo Radoc Bikes puede ofrecer. Desde las montañas de Tafí del Valle hasta los senderos más desafiantes, cada ruta es una oportunidad para descubrir la potencia y precisión de nuestras bicicletas. La tecnología avanzada se encuentra con la naturaleza en su máxima expresión.')) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Sección de Testimonios --}}
    @if(is_module_active('references') && isset($featuredReferences) && $featuredReferences->count() > 0)
        <section class="section bg-light section-height-3 border-0 m-0 d-none d-lg-block" id="testimonials">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12 col-xl-12 mb-lg-4">
                        <div class="overflow-hidden mb-1">
                            <div class="appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="500" style="animation-delay: 500ms;">
                                <span class="d-block text-color-dark custom-letter-spacing-1 text-3-5 opacity-5 mb-0">{{ __('LO QUE DICEN') }}</span>
                            </div>
                        </div>
                        <h2 class="text-color-dark font-weight-bold ls-0 text-9 mb-4">{{ __('Los') }} <span class="text-color-primary">{{ __('Expertos') }}</span> {{ __('Opinan') }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="owl-carousel carousel-center-active-item-2 nav-style-4 mb-4 pb-3 testimonial-carousel" data-plugin-options="{'items': 1, 'loop': true, 'nav': true, 'dots': false}">
                            @foreach($featuredReferences->take(3) as $reference)
                                <div>
                                    <div class="row align-items-center">
                                        <div class="col-lg-6">
                                            <div class="testimonial-content p-4">
                                                <div class="testimonial-header mb-4">
                                                    <h3 class="text-color-dark font-weight-bold text-6 mb-2">{{ $reference->name }}</h3>
                                                    <p class="text-color-dark opacity-7 text-3 mb-0">{{ $reference->position ?? $reference->company ?? '' }}</p>
                                                </div>
                                                <blockquote class="testimonial-quote">
                                                    <p class="text-color-dark text-4 line-height-6 mb-0">"{{ $reference->testimonial }}"</p>
                                                </blockquote>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="testimonial-image">
                                                <img src="{{ asset($reference->image ?? 'cd-project/img/demos/product-landing/client-' . ($loop->index + 1) . '.jpg') }}" class="img-fluid rounded" alt="{{ $reference->name }}" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @else
        {{-- Sección de Testimonios Estática (Radoc Bikes) --}}
        <section class="section bg-light section-height-3 border-0 m-0 d-none d-lg-block" id="testimonials">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12 col-xl-12 mb-lg-4">
                        <div class="overflow-hidden mb-1">
                            <div class="appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="500" style="animation-delay: 500ms;">
                                <span class="d-block text-color-dark custom-letter-spacing-1 text-3-5 opacity-5 mb-0">{{ __('LO QUE DICEN') }}</span>
                            </div>
                        </div>
                        <h2 class="text-color-dark font-weight-bold ls-0 text-9 mb-4">{{ __('Los') }} <span class="text-color-primary">{{ __('Expertos') }}</span> {{ __('Opinan') }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="owl-carousel carousel-center-active-item-2 nav-style-4 mb-4 pb-3 testimonial-carousel" data-plugin-options="{'items': 1, 'loop': true, 'nav': true, 'dots': false}">
                            {{-- Testimonial 1: E-MOUNTAINBIKE Magazine --}}
                            <div>
                                <div class="row align-items-center">
                                    <div class="col-lg-6">
                                        <div class="testimonial-content p-4">
                                            <div class="testimonial-header mb-4">
                                                <h3 class="text-color-dark font-weight-bold text-6 mb-2">E-MOUNTAINBIKE Magazine</h3>
                                                <p class="text-color-dark opacity-7 text-3 mb-0">{{ __('La revista líder mundial en eMTB') }}</p>
                                            </div>
                                            <blockquote class="testimonial-quote">
                                                <p class="text-color-dark text-4 line-height-6 mb-0">"{{ __('Radoc Bikes representa la evolución perfecta entre tecnología avanzada y diseño innovador. Una marca que está redefiniendo el futuro del mountain biking en Sudamérica.') }}"</p>
                                            </blockquote>
                                            {{-- <div class="testimonial-footer mt-4">
                                                <div class="d-flex align-items-center">
                                                    <div class="logo-container">
                                                        <img src="{{ asset('cd-project/img/testimonials/emtb-logo.png') }}" alt="E-MOUNTAINBIKE" class="img-fluid" style="max-height: 40px;">
                                                    </div>
                                                    <div class="ms-3">
                                                        <p class="text-color-dark font-weight-bold text-3 mb-0">{{ __('Representante Monster Energy') }}</p>
                                                    </div>
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="testimonial-image">
                                            <img src="{{ asset('cd-project/img/testimonials/1.jpg') }}" class="img-fluid rounded" alt="E-Mountain Bike Rider" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Testimonial 2: Rob Rides EMTB --}}
                            <div>
                                <div class="row align-items-center">
                                    <div class="col-lg-6">
                                        <div class="testimonial-content p-4">
                                            <div class="testimonial-header mb-4">
                                                <h3 class="text-color-dark font-weight-bold text-6 mb-2">Rob Rides EMTB</h3>
                                                <p class="text-color-dark opacity-7 text-3 mb-0">{{ __('Rider de eBike. YouTuber') }}</p>
                                            </div>
                                            <blockquote class="testimonial-quote">
                                                <p class="text-color-dark text-4 line-height-6 mb-0">"{{ __('Radoc Bikes está revolucionando el mercado con su enfoque en calidad premium y tecnología de punta. Una marca que definitivamente está marcando la diferencia en el sector.') }}"</p>
                                            </blockquote>
                                            {{-- <div class="testimonial-footer mt-4">
                                                <div class="d-flex align-items-center">
                                                    <div class="logo-container">
                                                        <img src="{{ asset('cd-project/img/testimonials/youtube-logo.png') }}" alt="YouTube" class="img-fluid" style="max-height: 40px;">
                                                    </div>
                                                    <div class="ms-3">
                                                        <p class="text-color-dark font-weight-bold text-3 mb-0">{{ __('CANAL DE YOUTUBE') }}</p>
                                                    </div>
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="testimonial-image">
                                            <img src="{{ asset('cd-project/img/testimonials/2.jpg') }}" class="img-fluid rounded" alt="Rob Rides EMTB" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Testimonial 3: The Loam Wolf --}}
                            <div>
                                <div class="row align-items-center">
                                    <div class="col-lg-6">
                                        <div class="testimonial-content p-4">
                                            <div class="testimonial-header mb-4">
                                                <h3 class="text-color-dark font-weight-bold text-6 mb-2">The Loam Wolf</h3>
                                                <p class="text-color-dark opacity-7 text-3 mb-0">{{ __('Medios de mountain bike') }}</p>
                                            </div>
                                            <blockquote class="testimonial-quote">
                                                <p class="text-color-dark text-4 line-height-6 mb-0">"{{ __('Radoc Bikes demuestra que la innovación no conoce fronteras. Con su enfoque en la excelencia técnica y el diseño, están estableciendo nuevos estándares en la industria del mountain biking.') }}"</p>
                                            </blockquote>
                                            {{-- <div class="testimonial-footer mt-4">
                                                <div class="d-flex align-items-center">
                                                    <div class="logo-container">
                                                        <img src="{{ asset('cd-project/img/testimonials/loam-wolf-logo.png') }}" alt="The Loam Wolf" class="img-fluid" style="max-height: 40px;">
                                                    </div>
                                                    <div class="ms-3">
                                                        <p class="text-color-dark font-weight-bold text-3 mb-0">{{ __('MEDIOS DE MOUNTAIN BIKE') }}</p>
                                                    </div>
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="testimonial-image">
                                            <img src="{{ asset('cd-project/img/testimonials/3.jpg') }}" class="img-fluid rounded" alt="The Loam Wolf Rider" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    {{-- Sección de Blog dinámica (posts destacados o recientes) --}}
    <section class="section bg-dark section-height-3 border-0 m-0">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12 col-xl-12 mb-lg-4">
                    <div class="overflow-hidden mb-1">
                        <div class="appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="500" style="animation-delay: 500ms;">
                            <span class="d-block text-color-light custom-letter-spacing-1 text-3-5 opacity-5 mb-0">{{ __('CONECTA CON') }}</span>
                        </div>
                    </div>
                    <h2 class="text-color-light font-weight-bold ls-0 text-9 mb-4">{{ config('site.blog.sidebar_title', __('Radoc Hub')) }} - <span class="text-color-primary">{{ __('Blog del Rider') }}</span></h2>
                </div>
            </div>
            <div class="row pb-5">
                @forelse(isset($featuredPosts) ? $featuredPosts->take(3) : [] as $post)
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <article class="post">
                            <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms">
                                <div class="p-relative rounded-3 overflow-hidden">
                                    <div class="post-date p-absolute top-20 left-20">
                                        <span class="day py-1 text-4 font-weight-bold text-secondary">{{ $post->created_at->format('d') }}</span>
                                        <span class="month bg-secondary">{{ $post->created_at->format('M') }}</span>
                                    </div>
                                    <div class="p-absolute right-10 top-10">
                                        <i class="fa-regular fa-message text-color-light text-4 p-absolute right-10 top-20"></i>
                                        <span class="badge badge-comments-count bg-secondary text-color-light rounded-pill p-0 p-relative z-index-1">0</span>
                                    </div>
                                    @php
                                        $postImage = null;
                                        if ($post->header) {
                                            if (filter_var($post->header, FILTER_VALIDATE_URL)) {
                                                $postImage = $post->header;
                                            } elseif (file_exists(public_path($post->header))) {
                                                $postImage = asset($post->header);
                                            }
                                        }
                                        if (!$postImage) {
                                            $postImage = asset('cd-project/img/blog/' . (($loop->iteration - 1) % 3 + 1) . '.jpeg');
                                        }
                                    @endphp
                                    @if(Route::has('blog.post'))
                                        <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                    @endif
                                        <img class="card-img-top" src="{{ $postImage }}" loading="lazy" alt="{{ $post->title }}">
                                    @if(Route::has('blog.post'))
                                        </a>
                                    @endif
                                    <div class="card-body bg-light p-4">
                                        @if($post->category)
                                            <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-1">{{ $post->category->name }}</span>
                                        @endif
                                        <h4 class="my-2">
                                            @if(Route::has('blog.post'))
                                                <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none text-dark text-color-hover-primary">{{ $post->title }}</a>
                                            @else
                                                <span class="text-dark">{{ $post->title }}</span>
                                            @endif
                                        </h4>
                                        <p class="card-text text-3-5 mb-1">{{ Str::limit($post->description ?? $post->excerpt ?? '', 120) }}</p>
                                        @if(Route::has('blog.post'))
                                            <a href="{{ route('blog.post', $post->slug) }}" class="read-more text-color-secondary font-weight-semibold text-2">{{ __('Read More') }} <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                @empty
                    {{-- Placeholders si no hay posts (solo para demo product-landing) --}}
                    @foreach([1, 2, 3] as $i)
                        <div class="col-lg-4 mb-4 mb-lg-0">
                            <article class="post">
                                <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms">
                                    <div class="p-relative rounded-3 overflow-hidden">
                                        <div class="post-date p-absolute top-20 left-20">
                                            <span class="day py-1 text-4 font-weight-bold text-secondary">15</span>
                                            <span class="month bg-secondary">Jan</span>
                                        </div>
                                        <img class="card-img-top" src="{{ asset('cd-project/img/blog/' . $i . '.jpeg') }}" loading="lazy" alt="">
                                        <div class="card-body bg-light p-4">
                                            <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-1">{{ __('blog') }}</span>
                                            <h4 class="my-2"><span class="text-dark">{{ __('Sin publicaciones destacadas') }}</span></h4>
                                            <p class="card-text text-3-5 mb-1">{{ __('Activa el módulo blog y marca posts como destacados, o publica entradas.') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @endforeach
                @endforelse
            </div>
        </div>
    </section>

    {{-- Call to Action --}}
    <section class="call-to-action with-borders button-centered bg-primary">
        <div class="container">
            <div class="col-12">
                <div class="call-to-action-content">
                    <h3 class="text-color-light">{{ config('site.name') }} {{ __('es') }} <strong class="font-weight-extra-bold">{{ __('todo') }}</strong> {{ __('lo que necesitas!') }}</h3>
                    <p class="mb-0 text-color-light opacity-7">{{ config('site.seo.description') }}</p>
                </div>
            </div>
            <div class="col-12">
                <div class="call-to-action-btn">
                    <a href="{{ route('front.contact') }}" class="btn btn-modern text-2 btn-light">{{ __('¡Contáctanos!') }}</a>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection

@section('scripts')
@if($heroVideoEnabled)
<script>
(function() {
    var video = document.querySelector('[data-hero-video]');
    if (!video) return;
    function playWhenReady() {
        video.style.opacity = '1';
        video.play().catch(function() {});
    }
    if (video.readyState >= 3) {
        playWhenReady();
    } else {
        video.addEventListener('canplay', playWhenReady, { once: true });
    }
})();
</script>
@endif
@endsection