<!DOCTYPE html>
<html lang="es">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Import Poppins font from Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;/* Cambiar Tipografía */
        }
        .testimonial-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Oculta las tarjetas adicionales */
            position: relative;
        }

        .testimonial-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .testimonial-card {
            border: 1px solid #ccc;
            border-radius: 20px;
            flex: 0 0 100%; /* Tamaño para mostrar una tarjeta a la vez por defecto */
            max-width: 250px;
            margin: 0 10px; /* Espacio entre las tarjetas */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        @media (min-width: 600px) {
            .testimonial-card {
                flex: 0 0 50%; /* Mostrar 2 tarjetas en tabletas */
            }
        }

        @media (min-width: 900px) {
            .testimonial-card {
                flex: 0 0 33.33%; /* Mostrar 3 tarjetas en escritorio */
            }
        }

        .testimonial-card img {
            border-radius: 50%;
            width: 100%;
            max-width: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .testimonial-text {
            text-align: center;
            margin: 0px 0px;
        }

        .google-review-logo {
            max-width: 30%;
        }

        .star-rating {
            font-size: 15px;
            color: #df1783;
        }

        .arrow {
            font-size: 20px;
            cursor: pointer;
            color: #F70392;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        #prev {
            left: 10px;
        }

        #next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="testimonial-container">
        <div class="arrow" id="prev">&#9664;</div>
        <div class="testimonial-wrapper">

			<!-- Editar testimonio 1 -->
			<div class="testimonial-card">
                <img src="https://bucket.mlcdn.com/a/3336/3336910/images/752ae8e41c44846170b28344078f4c5226af1a99.png" alt="Cliente 1">
                <div class="testimonial-text">
                    <p><strong>Cliente Satisfecho 1</strong></p>
                    <p>¡Este producto cambió mi vida! Lo recomiendo altamente.</p>
                    <img class="google-review-logo" src="https://bucket.mlcdn.com/a/3336/3336910/images/6de4a44773864ff5ed39dd27a64183d5bd6d21a2.png" alt="Google Review">
                    <div class="star-rating">★★★★★</div> <p></p>
                </div>
            </div>

			<!-- Editar testimonio 2 -->
            <div class="testimonial-card">
                <img src="https://bucket.mlcdn.com/a/3336/3336910/images/b97670e8028ad6418380fdfefd150700029cbdc0.png" alt="Cliente 2">
                <div class="testimonial-text">
                    <p><strong>Cliente Satisfecho 2</strong></p>
                    <p>Nunca había experimentado algo tan sorprendente. ¡Gracias!</p>
                    <img class="google-review-logo" src="https://bucket.mlcdn.com/a/3336/3336910/images/6de4a44773864ff5ed39dd27a64183d5bd6d21a2.png" alt="Google Review">
                    <div class="star-rating">★★★★★</div> <p></p>
                </div>
            </div>

			<!-- Editar testimonio 2 -->
            <div class="testimonial-card">
                <img src="https://bucket.mlcdn.com/a/3336/3336910/images/752ae8e41c44846170b28344078f4c5226af1a99.png" alt="Cliente 3">
                <div class="testimonial-text">
                    <p><strong>Cliente Satisfecho 3</strong></p>
                    <p>Increíble producto, lo uso todos los días. Lo recomiendo 100%.</p>
                    <img class="google-review-logo" src="https://bucket.mlcdn.com/a/3336/3336910/images/6de4a44773864ff5ed39dd27a64183d5bd6d21a2.png" alt="Google Review">
                    <div class="star-rating">★★★★★</
                    div>
                     <p></p>
                </div>
            </div>

            <!-- Agrega más testimonios aquí -->

        </div>
        <div class="arrow" id="next">&#9654;</div>
    </div>

    <script>
        const testimonialWrapper = document.querySelector('.testimonial-wrapper');
        const testimonialCards = document.querySelectorAll('.testimonial-card');
        const prevArrow = document.getElementById('prev');
        const nextArrow = document.getElementById('next');

        let currentIndex = 0;

        function updateCardVisibility() {
            const visibleCards = window.innerWidth >= 900 ? 3 : (window.innerWidth >= 600 ? 2 : 1);
            const translateX = currentIndex * -(testimonialCards[0].offsetWidth + 20); // 20 es el margen
            testimonialWrapper.style.transform = `translateX(${translateX}px)`;
            prevArrow.style.display = currentIndex === 0 ? 'none' : 'block';
            nextArrow.style.display = currentIndex >= testimonialCards.length - visibleCards ? 'none' : 'block';
        }

        nextArrow.addEventListener('click', function() {
            const visibleCards = window.innerWidth >= 900 ? 3 : (window.innerWidth >= 600 ? 2 : 1);
            currentIndex = Math.min(currentIndex + 1, testimonialCards.length - visibleCards);
            updateCardVisibility();
        });

        prevArrow.addEventListener('click', function() {
            currentIndex = Math.max(currentIndex - 1, 0);
            updateCardVisibility();
        });

        window.addEventListener('resize', updateCardVisibility);

        // Inicializar visibilidad de las tarjetas
        updateCardVisibility();
    </script>
</body>
</html>