@extends('layouts.public')

@section('title', 'Seven Jets | Home')

@push('meta')
    <!-- OpenGraph (para redes sociales) -->
    <meta property="og:title" content="SevenJets | Global Aviation Services">
    <meta property="og:description" content="Premium trip support and fuel services for private and corporate aviation.">
    <meta property="og:image" content="{{ asset('img/home.jpg') }}">
    <!-- Canonical URL (evita contenido duplicado) -->
    <link rel="canonical" href="{{ url()->current() }}" />
@endpush

@push('styles')
    <style>
        /* Estilos mejorados para el scroll hijacking */
        .services-scroll-hijack {
            height: 100vh;
            display: flex;
            position: relative;
            overflow: hidden;
        }

        .services-sticky-left {
            flex: 1;
            background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            height: 100vh;
        }

        .services-scroll-right {
            flex: 1;
            overflow-y: auto;
            height: 100vh;
            scroll-snap-type: y mandatory;
        }

        .service-card-horizontal {
            display: flex;
            margin-bottom: 2rem;
            transition: transform 0.3s ease;
            scroll-snap-align: start;
            min-height: 100vh;
            align-items: center;
        }

        /* Mejoras para los iconos de servicios */
        .service-card-image {
            flex: 0 0 200px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .service-card-image img {
            width: 100%;
            height: auto;
            max-height: 120px;
            object-fit: contain;
        }

        /* Estilos mejorados para la sección de video */
        .video-cta-section {
            position: relative;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: cover;
            background-position: center;
        }

        .video-cta-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .video-cta-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 2rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Botón de reproducción mejorado */
        .play-btn-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }

        .play-btn {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(200, 16, 46, 0.9);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .play-btn:hover {
            background: rgba(230, 16, 46, 1);
            transform: scale(1.05);
        }

        .play-btn i {
            margin-left: 3px;
        }

        /* Animación de pulso más suave */
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                opacity: 0.8;
            }

            70% {
                transform: scale(1.1);
                opacity: 0.3;
            }

            100% {
                transform: scale(0.95);
                opacity: 0.8;
            }
        }

        .play-btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            animation: pulse 2s infinite;
            z-index: -1;
        }

        /* Modal mejorado */
        .video-modal .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }

        .video-modal .modal-content {
            background: transparent;
            border: none;
        }

        .video-modal .btn-close {
            position: absolute;
            right: -40px;
            top: -40px;
            background: white;
            opacity: 1;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            z-index: 10;
        }

        @media (max-width: 768px) {
            .services-scroll-hijack {
                flex-direction: column;
                height: auto;
            }

            .services-sticky-left {
                position: relative;
                height: auto;
                min-height: 50vh;
            }

            .services-scroll-right {
                height: auto;
                scroll-snap-type: none;
            }

            .service-card-horizontal {
                flex-direction: column;
                min-height: auto;
                padding: 2rem 0;
            }

            .video-modal .btn-close {
                right: 10px;
                top: 10px;
            }
        }

        #blog img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            border: 1px solid #ccc;
        }
    </style>
@endpush

@section('content')
    <!-- <section> begin ============================-->
    <section class="text-center overflow-hidden p-0 position-relative" data-zanim-timeline="{}" data-zanim-trigger="scroll">
        <div class="bg-holder overlay parallax">
            <video muted="" loop="" autoplay="" class="bg-video">
                <source src="templates/reing/assets/video/home.mp4" type="video/mp4">
            </video>
        </div>
        <!--/.bg-holder-->

        <div class="container-fluid h-100">
            <div class="header-overlay"></div>
            <div class="position-relative d-flex align-items-center justify-content-center min-vh-100">
                <div class="header-text">
                    <div class="overflow-hidden">
                        <h1 class="display-3 fs-4 text-bronze fw-lighter ls-5 text-capitalize"
                            data-zanim-xs='{"duration":2,"delay":0.3}'>
                            Your Trusted Partner for
                        </h1>
                    </div>
                    <div class="overflow-hidden">
                        <h1 class="display-3 fs-7 text-white fw-lighter ls-2" data-zanim-xs='{"duration":2,"delay":0.6}'>
                            Global Aviation Services
                        </h1>
                    </div>
                    <div data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"duration":2,"delay":0.9}'>
                        <a class="btn btn-sm btn-outline-light hvr-sweep-top mt-5 px-4" href="#services"
                            data-scroll-to="services">
                            Explore Our Services
                        </a>
                    </div>
                </div>
            </div>

            <!-- Header Indicator (Botón de bajar) -->
            <div class="header-indicator-down">
                <a class="indicator indicator-down opacity-75" href="#about-us" data-scroll-to="about-us">
                    <span class="indicator-arrow indicator-arrow-one"
                        data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"ease":"Back.easeOut","duration":2,"delay":1.5}'>
                    </span>
                </a>
            </div>
        </div>
    </section>
    <!-- <section> close ============================-->

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-6 pb-lg-8 text-center" style="scroll-margin-top:-25px" id="about-us">
        <div class="container">
            <div class="row mb-4" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                <div class="col">
                    <div class="overflow-hidden">
                        <h2 class="fs-md-4 mb-3" data-zanim-xs='{"duration":1.5,"delay":0}'>Worldwide Coordination<br>
                            From Ground Handling to Private Jet Charter
                        </h2>
                    </div>
                    <div class="overflow-hidden">
                        <p class="lead ls-1 mb-0" data-zanim-xs='{"duration":1.5,"delay":0.1}'>
                            Trusted by operators and elite travelers around the globe.
                        </p>
                    </div>
                    <div class="overflow-hidden">
                        <hr class="hr-short border-black" data-zanim-xs='{"duration":1.5,"delay":0.2}' />
                    </div>
                </div>
            </div>
            <div class="row align-items-center">

                <div class="col-md-12 text-md-center" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                    <p data-zanim-xs='{"delay":0.6}' style="text-align: justify;">Because in an industry where timing,
                        precision, and trust are everything, we deliver all three without compromise. We are not just
                        service providers; we are aviation coordinators. From permits and fuel uplifts to ground handling
                        and private charter, we act as your single point of contact, ensuring every flight is seamless,
                        compliant, and on time.
                        With a global network and a hands-on approach, Seven Jets is the trusted partner behind complex
                        missions, last-minute changes, and high-level travel, all executed with absolute discretion and
                        speed.
                    </p>

                </div>
            </div>
        </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    <!-- ============================================-->
    <section class="services-scroll-hijack" id="services">
        <!-- Columna Izquierda Sticky -->
        <div class="services-sticky-left">
            <div class="container">
                <div class="row h-100 align-items-center">
                    <div class="col text-white px-lg-5">
                        <div class="overflow-hidden">
                            <h2 class="fs-md-3 mb-4 text-white" data-zanim-xs='{"duration":1.5,"delay":0}'>
                                Seven Jets <br> offers for your private flights
                            </h2>
                        </div>
                        <div class="overflow-hidden">
                            <p class="lead mb-4 text-white opacity-75" data-zanim-xs='{"duration":1.5,"delay":0.1}'>
                                Comprehensive aviation services covering every aspect of your journey
                            </p>
                        </div>
                        <div class="overflow-hidden">
                            <p class="mb-4 text-white opacity-75" data-zanim-xs='{"duration":1.5,"delay":0.2}'>
                                From flight coordination to fuel and private charter, our specialized team ensures every
                                detail is perfectly coordinated for your peace of mind and success.
                            </p>
                        </div>
                        <div data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"duration":1.5,"delay":0.3}'
                            class="mb-4">
                            <a class="btn btn-outline-light hvr-sweep-top" href="{{ route('services') }}">
                                View All Services
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Columna Derecha con Scroll -->
        <div class="services-scroll-right" id="servicesScrollContainer">
            <div class="container py-5">
                <!-- Service Card 1 -->
                <div class="service-card-horizontal bg-white">
                    <div class="service-card-image">
                        <img src="{{ asset('templates/reing/assets/img/line-icons/technical-support.svg') }}"
                            alt="Trip Support" class="img-fluid">
                    </div>
                    <div class="service-card-body p-4">
                        <div>
                            <h5 class="fw-normal ls-3 mb-3">Trip Support</h5>
                            <p class="fw-normal mb-0">Flight coordination made simple: permits, ground handling, airport
                                slots, and crew logistics—handled globally with 24/7 precision.</p>
                        </div>
                    </div>
                </div>

                <!-- Service Card 2 -->
                <div class="service-card-horizontal bg-light">
                    <div class="service-card-image">
                        <img src="{{ asset('templates/reing/assets/img/line-icons/helicopter.svg') }}" alt="Aviation Fuel"
                            class="img-fluid">
                    </div>
                    <div class="service-card-body p-4">
                        <div>
                            <h5 class="fw-normal ls-3 mb-3">Aviation Fuel</h5>
                            <p class="fw-normal mb-0">Reliable, on-time fuel supply at competitive rates through our
                                extensive worldwide network of suppliers and trusted partners.</p>
                        </div>
                    </div>
                </div>

                <!-- Service Card 3 -->
                <div class="service-card-horizontal bg-white">
                    <div class="service-card-image">
                        <img src="{{ asset('templates/reing/assets/img/line-icons/parachute.svg') }}" alt="Aviation Fuel"
                            class="img-fluid">
                    </div>
                    <div class="service-card-body p-4">
                        <div>
                            <h5 class="fw-normal ls-3 mb-3">cargo & especial operations</h5>
                            <p class="fw-normal mb-0">Whether executive travel or urgent cargo, we coordinate charter
                                flights tailored to your specific mission—anytime, anywhere, with complete discretion.</p>
                        </div>
                    </div>
                </div>

                <!-- Service Card 4 -->
                <div class="service-card-horizontal bg-light">
                    <div class="service-card-image">
                        <img src="{{ asset('templates/reing/assets/img/line-icons/airplane.svg') }}" alt="Ground Handling"
                            class="img-fluid">
                    </div>
                    <div class="service-card-body p-4">
                        <div>
                            <h5 class="fw-normal ls-3 mb-3">Private Charter</h5>
                            <p class="fw-normal mb-0">Complete ground services including VIP assistance, specialized
                                catering, aircraft cleaning, and ramp services to the highest quality standards.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <section> close ============================-->
    <!-- ============================================-->

    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-3 pb-lg-5 text-center bg-light" style="scroll-margin-top:-25px">
        <div class="container" data-zanim-timeline="{}" data-zanim-trigger="scroll">
            <div class="row align-items-center justify-content-center">

                <div class="col-lg-5 col-md-8 text-sm-start">
                    <div class="ps-lg-4">
                        <h3 class="fs-md-3 mb-3" data-zanim-xs='{"delay":0.2}'>Global Network
                        </h3>
                        <div class="lead mb-4">
                            <p data-zanim-xs='{"delay":0.4}' style="text-align: justify">
                                At Seven Jets, we deliver tailored trip support and fuel
                                solutions through a network of
                                global offices and trusted local partners.
                            </p>
                            <p data-zanim-xs='{"delay":0.6}'>
                                <b>Coverage Areas:</b>
                            </p>
                            <ul class="style-check" data-zanim-xs='{"delay":0.8}' style="text-align: left">
                                <li>Latin America</li>
                                <li>Middle East, Europe & Africa</li>
                                <li>Asia Pacific</li>
                            </ul>
                        </div>
                    </div>
                    <div class="text-md-center">
                        <a class="btn btn-outline-dark" type="button" data-zanim-xs='{"duration":0.5,"delay":"1"}'
                            href="{{ route('location') }}">
                            Global Network Map
                        </a>
                    </div>
                </div>
                <div class="col-lg-7 col-md-8 mb-4 mb-md-5 mt-5 overflow-hidden opacity-75" data-zanim-xs='{"delay":0.1}'>
                    <img src="{{ asset('templates/reing/assets/img/home/network-map-sj.png') }}" class="w-100"
                        alt="network">
                </div>
            </div>
        </div>
    </section>
    <!-- <section> close ============================-->

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <!-- Sección de Video -->
    <section class="video-cta-section"
        style="background-image: url('{{ asset('templates/reing/assets/img/home/avion.jpg') }}');">
        <div class="video-cta-overlay"></div>
        <div class="container">
            <div class="video-cta-content">
                <h3 class="text-white mb-3">Experience Seven Jets</h3>
                <p class="text-white-75 mb-4">Discover how we deliver excellence in aviation services worldwide</p>
                <div class="play-btn-container">
                    <button class="play-btn" id="playVideoBtn" data-bs-toggle="modal" data-bs-target="#videoModal">
                        <i class="fas fa-play"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal de Video -->
    <div class="modal fade video-modal" id="videoModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                        class="fas fa-times"></i></button>
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <video id="modalVideo" controls>
                            <source src="templates/reing/assets/video/video-sevenjets.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-3 pb-lg-5 text-center" id="blog">
        <div class="container">
            <div class="row">
                <div class="col text-center mb-4" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                    <div class="overflow-hidden">
                        <h3 class="fs-md-3" data-zanim-xs='{"duration":1.5,"delay":0}'>Recent
                            News</h3>
                    </div>
                    <div class="overflow-hidden">
                        <p class="lead ls-1 mb-0" data-zanim-xs='{"duration":1.5,"delay":0.1}'>
                            Latest articles from the news</p>
                    </div>
                    <div class="overflow-hidden">
                        <hr class="hr-short bg-black" data-zanim-xs='{"duration":1.5,"delay":0.2}' />
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($posts as $post)
                    <div class="col-md-6 col-lg-4 h-100 mb-4">
                        <a href="{{ route('posts.show', $post) }}">
                            <img class="img-fluid rounded-top"
                                src="{{ $post->image_path && Storage::exists($post->image_path) ? Storage::url($post->image_path) : asset('img/no-image.jpg') }}"
                                alt="blog image" />
                        </a>
                        <div class="p-3 border rounded-bottom border-top-0">
                            <h5 class="font-base text-transform-none fw-medium lh-1"><a class="text-black"
                                    href="{{ route('posts.show', $post) }}">{{ $post->title }}</a>
                            </h5>
                            <p>{{ $post->excerpt }}</p><a class="text-dark fw-semi-bold"
                                href="{{ route('posts.show', $post) }}">Read more<span
                                    class="fas fa-angle-right ms-1 text-900" data-fa-transform="down-2"></span></a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const videoModal = document.getElementById('videoModal');
                const modalVideo = document.getElementById('modalVideo');
                const playBtn = document.getElementById('playVideoBtn');

                // Solo reproducir cuando se abre el modal
                if (videoModal && modalVideo) {
                    videoModal.addEventListener('shown.bs.modal', function() {
                        modalVideo.play().catch(error => {
                            console.error('Error al reproducir el video:', error);
                        });
                    });

                    // Pausar y reiniciar al cerrar
                    videoModal.addEventListener('hidden.bs.modal', function() {
                        modalVideo.pause();
                        modalVideo.currentTime = 0;
                    });

                    // Manejar clic en el botón de play
                    if (playBtn) {
                        playBtn.addEventListener('click', function() {
                            // El modal se abre automáticamente por data-bs-toggle
                        });
                    }
                }
            });
        </script>
    @endpush

@endsection