@extends('layouts.landinglayaout')

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

@section('content')
    <div class="container-fluid" style="padding-left: 0; padding-right: 0;">        
        <!-- <div class="row my-3">
            <div class="col">
                <h1>Pagina de inicio para Las Canastillas</h1>
            </div>
        </div> -->
        <!-- <style>
            .carousel-item img {
                height: 800px;
                object-fit: contain;
                background-color: transparent;    
            }
            .carousel-control-prev-icon,
            .carousel-control-next-icon, .carousel-indicators {
                filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(180deg);
            }
        </style> -->
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ asset('Home/Popusas.png') }}" class="d-block w-100" alt="Imagen 1">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('NosotrosMedia/Fachada.png') }}" class="d-block w-100" alt="Imagen 2">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('Home/bienvenidos.png') }}" class="d-block w-100" alt="Imagen 3">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('Home/food.png') }}" class="d-block w-100" alt="Imagen 4">
                </div>                
                <div class="carousel-item">
                    <img src="{{ asset('NosotrosMedia/Fin.png') }}" class="d-block w-100" alt="Imagen 5">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('MenuMedia/Delicious.jpg') }}" class="d-block w-100" alt="Imagen 6">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('ContactoMedia/Fondo.png') }}" class="d-block w-100" alt="Imagen 7">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Siguiente</span>
            </button>
        </div> 
        <style>
            .carousel-indicators [data-bs-target] {
    background-color: #FFA400; /* negro por defecto */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.5; /* más sutil */
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1; /* más visible cuando está activo */
}
.carousel {
    max-width: 1500px;
    margin: 40px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 85%;
}

.carousel-item img {
    height: 600px;
    object-fit: contain;
    width: 100%;
    transition: transform 0.5s ease;
}

.carousel-item:hover img {
    transform: scale(1.02);
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FFA400;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(70, 66, 66, 0.8);
    border-radius: 50%;
    padding: 10px;
    filter: none;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #FFA400;
}
</style>

        <style>
.video-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}
</style>

        <div class="row align-items-center">
    <div class="col-md-8 col-lg-8 col-xl-8 mb-4">
    <div class="video-container">
        <video id="player" playsinline controls src="{{ asset('Home/video.mp4') }}" type="video/mp4"></video>
    </div>
</div>


    <div class="col-md-4 col-lg-4 col-xl-4 mb-4">
        <img loading="lazy" decoding="async" src="{{ asset('Home/logo.gif') }}"
            style="height: auto; display: block; width: 100%; margin: 0 auto;" alt="">
    </div>
</div>

        <script>
  document.addEventListener('DOMContentLoaded', () => {
    const player = new Plyr('#player');
  });
</script>
        <!-- <div class="row text-center">
            <div class="col-12 d-flex justify-content-center">
                <a href="{{ route('nosotrosPage') }}"
                class="btn"
                style="background-color: #FFA400; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-family: sans-serif; font-size: 0.85rem; width: 70%; max-width: 350px;">
                Si quieres saber más de nosotros, ¡Pulsa acá! <i class="bi bi-search-heart"></i>
                </a>
            </div>
        </div> -->
        <div class="row text-center">
    <div class="col-12 d-flex justify-content-center">
        <a href="{{ route('nosotrosPage') }}"
           class="btn btn-custom">
           <span>Si quieres saber más de nosotros, ¡Pulsa acá!</span> <i class="bi bi-search-heart"></i>
        </a>
    </div>
</div>
<style>
.btn-custom {
    background: linear-gradient(135deg, #FFA400, #FF6F00);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 80%;
    max-width: 400px;
}

.btn-custom:hover {
    background: linear-gradient(135deg, #FF6F00, #FFA400);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}
</style>


        <br>






        <!-- <img src="{{ asset('Home/Popusas.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 100%;">
        <img src="{{ asset('Home/bienvenidos.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 60%; margin: 0 auto;">
        <img src="{{ asset('Home/welcome.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 100%;">
        <img src="{{ asset('Home/todo.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 60%; margin: 0 auto;">
        <img src="{{ asset('Home/food.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 100%;">
        <img src="{{ asset('Home/more.png') }}" alt="Descripción de la imagen" style="height: auto; display: block; width: 60%; margin: 0 auto;">
        <img loading="lazy" decoding="async" src="{{ asset('Home/logo.gif') }}" style="height: auto; display: block; width: 50%; margin: 0 auto;" class="attachment-full size-full wp-image-4403" alt=""> -->
                 
    </div>
@endsection