import React, { useState } from 'react';

export default function TestimonialVideos({ darkMode }) {

    const videos = [
        {
            id: 'dcM66cwyE_Q',
            title: 'Transformación de Negocio',
            description: 'Conoce cómo nuestros clientes han transformado sus negocios con nuestras soluciones'
        },
        {
            id: 'XR6g0zH0N_w',
            title: 'Éxito Empresarial',
            description: 'Descubre los resultados que hemos logrado junto a nuestros clientes'
        }
    ];

    const getEmbedUrl = (videoId) => `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1;controls=0;`;

    return (
    <div className="mb-20">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {videos.map((video) => (
          <div key={video.id} className="flex flex-col">
            <div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-2xl">
              <iframe
                width="100%"
                height="100%"
                src={getEmbedUrl(video.id)}
                
                title={`Video Testimonial - ${video.title}`}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                className="absolute inset-0"
              />
            </div>
            <p className={`text-center mt-4 text-sm leading-relaxed ${
              darkMode ? 'text-gray-400' : 'text-gray-600'
            }`}>
              {video.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}