@extends('layout.front.master')

@php
    $m = \App\Modules\Products\Models\Product::with('images')->where('landing_slug', 'ultra')->first();
    $img = fn($field, $fallback) => $m && $m->$field
        ? (filter_var($m->$field, FILTER_VALIDATE_URL) ? $m->$field : asset($m->$field))
        : asset($fallback);
    $str = fn($field, $fallback) => ($m && $m->$field) ? $m->$field : $fallback;
    $galleryImages = $m ? $m->images->pluck('image_path')->map(fn($p) => filter_var($p, FILTER_VALIDATE_URL) ? $p : asset($p))->toArray() : [];
@endphp

@section('title', 'RADOC ONE Ultra | ' . config('site.name'))
@section('description', 'La Radoc ONE Ultra combina componentes de gama alta con tecnología de vanguardia. Diseñada para riders experimentados.')
@section('keywords', 'radoc one ultra, bicicleta eléctrica, mountain bike, eMTB, Rock Shox ZEB, Magura MT7, SRAM UDH90')

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

@section('content')

{{-- Hero Section con video de fondo (estilo homepage) --}}
<section class="hero-video-section position-relative overflow-hidden m-0" style="height: 100vh;">
    {{-- Poster: imagen de fondo visible mientras carga el video --}}
    <div class="hero-video-poster position-absolute top-0 left-0 w-100 h-100" style="background-image: url('{{ $img('hero_poster', 'cd-project/img/banner/radoc-ultra-banner.jpg') }}'); background-size: cover; background-position: center; z-index: 0;"></div>
    {{-- Video de fondo --}}
    <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="{{ $img('hero_video_mov', 'cd-project/img/demos/product-landing/videos/vide-ultra.mov') }}" type="video/quicktime">
        <source src="{{ $img('hero_video_mp4', 'cd-project/img/demos/product-landing/videos/vide-ultra.mp4') }}" type="video/mp4">
    </video>
    {{-- 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">
                        La Serie ONE de Bicicletas Eléctricas de Montaña
                    </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">
                        RADOC ONE <span class="text-color-primary">ULTRA</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">
                            {{ $str('card_specs', 'Motor Mid-Drive M510-250W | Batería LG 48V/15Ah/720Wh | Marco de Carbono | Suspensión Rock Shox ZEB 180mm | Frenos Magura MT7') }}
                        </p>
                        <p class="text-color-light text-2 opacity-7 mb-0">
                            * Las imágenes mostradas en esta página son solo para fines ilustrativos. Tenga en cuenta que el producto real puede variar en apariencia.
                        </p>
                    </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 Especificaciones
                        </a>
                        <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-modern font-weight-bold text-3 px-5 py-3">
                            Consultar Disponibilidad
                        </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">
    {{-- Parallax alto con bici de fondo y textos flotando encima (misma estructura que one-factory) --}}
    <section class="section section-parallax overlay overlay-show overlay-color-dark overlay-op-6 border-0 m-0 position-relative appear-animation d-flex align-items-center" data-appear-animation="fadeIn" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '129%'}" data-image-src="{{ $img('parallax_image', 'cd-project/img/products/ultra/radoc-ultra-2.jpg') }}" style="min-height: 120vh; background-color: #030102;">
        <div class="container position-relative z-index-3 w-100 py-5">
            <div class="row text-center text-xl-start align-items-center">
                <div class="col-xl-8">
                    <div class="overflow-hidden">
                        <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                            <h3 class="text-color-light font-weight-bold text-6 mb-4">Tecnología <span class="text-color-primary">ULTRA</span> Avanzada</h3>
                        </div>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        <p class="text-color-light text-4 mb-4 opacity-9">
                            {{ $str('parallax_description', 'La Radoc ONE Ultra combina componentes de gama alta con tecnología de vanguardia. Diseñada para riders experimentados que buscan el máximo rendimiento en terrenos técnicos y aventuras extremas.') }}
                        </p>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        <a href="#specifications" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                            Ver Especificaciones Completas <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 pt-5 pt-xl-0">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="600">
                        <div class="card border-0 bg-primary box-shadow-10 p-4">
                            <div class="text-center">
                                <h4 class="text-color-light font-weight-bold mb-3">Componentes Ultra</h4>
                                <ul class="list-unstyled text-color-light">
                                    @foreach(($m->parallax_components ?? ['Rock Shox ZEB', 'Magura MT7 Frenos', 'SRAM UDH90 12 Speed', 'Marco de Carbono']) as $component)
                                    <li class="mb-2"><i class="fas fa-check text-color-light me-2"></i> {{ $component }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Sección de imágenes divididas -->
    <section class="section border-0 m-0 p-0 overflow-hidden" style="background-color: #030102; min-height: 100vh;">
        <div class="container-fluid p-0">
            <style>
                .image-grid-container {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: 1fr;
                    gap: 10px;
                    height: 100vh;
                    width: 100%;
                }
                .image-grid-container .right-column {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }
                @media (max-width: 991.98px) {
                    .image-grid-container {
                        grid-template-columns: 1fr;
                        grid-template-rows: auto;
                        height: auto;
                        min-height: 100vh;
                    }
                    .image-grid-container .image-item {
                        height: 33.333vh;
                        min-height: 300px;
                    }
                    .image-grid-container .right-column {
                        display: grid;
                        grid-template-columns: 1fr;
                        grid-template-rows: 1fr 1fr;
                    }
                }
            </style>
            <div class="image-grid-container">
                <!-- Columna izquierda - Imagen grande (50% del ancho) -->
                <div class="image-item h-100 w-100" style="background-image: url('{{ $img('grid_image_1', 'cd-project/img/products/ultra/radoc-ultra-3.jpg') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                </div>

                <!-- Columna derecha - Dividida en dos imágenes (50% del ancho) -->
                <div class="right-column h-100 w-100">
                    <!-- Imagen superior derecha (50% de la altura) -->
                    <div class="image-item w-100 flex-grow-1" style="background-image: url('{{ $img('grid_image_2', 'cd-project/img/products/ultra/radoc-ultra-4.jpg') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                    </div>

                    <!-- Imagen inferior derecha (50% de la altura) -->
                    <div class="image-item w-100 flex-grow-1" style="background-image: url('{{ $img('grid_image_3', 'cd-project/img/products/ultra/radoc-ultra-5.jpg') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Especificaciones Técnicas: mismo layout que one-factory (content-grid, 2 columnas) --}}
    <section id="specifications" class="section bg-light border-0 m-0 py-5">
        <div class="container py-4">
            <div class="row">
                <div class="col-lg-12 text-center mb-5">
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        <h2 class="text-color-dark font-weight-bold text-6 mb-3">Especificaciones <span class="text-color-primary">Técnicas</span></h2>
                        <p class="text-color-dark text-4 opacity-7 mb-0">Componentes de gama alta para riders expertos</p>
                    </div>
                </div>
            </div>
            @include('modules.cd-base.frontend.demos.demo-product-landing.partials._specs-grid', ['specsData' => $m->specs_data ?? null])
        </div>
    </section>
</div>

{{-- Galería de imágenes (slider con thumbs) --}}
@include('modules.cd-base.frontend.demos.demo-product-landing.partials._product-gallery', ['modelName' => 'Ultra', 'galleryImages' => $galleryImages])

<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">¿Listo para experimentar el <strong class="font-weight-extra-bold">Ultra</strong>?</h3>
                <p class="mb-0 text-color-light opacity-7">Tecnología avanzada para riders expertos</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>

@endsection

@section('scripts')
<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>
<script>
(function($) {
    $(function() {
        if ($('#portfolioSliderWithThumbs').length) {
            var $thumbGalleryDetail = $('#thumbGalleryDetail'),
                $thumbGalleryThumbs = $('#thumbGalleryThumbs'),
                flag = false,
                duration = 300;
            $thumbGalleryDetail.owlCarousel({
                items: 1,
                margin: 10,
                nav: true,
                dots: false,
                loop: false,
                navText: []
            }).on('changed.owl.carousel', function(e) {
                if (!flag) {
                    flag = true;
                    $thumbGalleryThumbs.trigger('to.owl.carousel', [e.item.index - 1, duration, true]);
                    $thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
                    $thumbGalleryThumbs.find('.owl-item').eq(e.item.index).addClass('active-thumb');
                    flag = false;
                }
            });
            $thumbGalleryThumbs.owlCarousel({
                margin: 15,
                items: 8,
                nav: false,
                center: false,
                dots: false,
                responsive: { 0: { items: 2 }, 300: { items: 3 }, 767: { items: 6 }, 991: { items: 7 }, 1200: { items: 8 } }
            }).on('click', '.owl-item', function() {
                $thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
                $thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
                $(this).addClass('active-thumb');
            });
            $thumbGalleryThumbs.find('.owl-item').eq(0).addClass('active-thumb');
        }
    });
})(jQuery);
</script>
@endsection