import { useState, useEffect } from 'react';
import Image from 'next/image';
import TestimonialVideos from '@/components/landing/TestimonialVideos';

const TESTIMONIOS = [
    {
        id: 1,
        type: 'testimonio',
        nombre: 'Camila Botero',
        empresa: 'CASTELIER',
        imagen: '@/assets/img/08/camila.webp',
        contenido: 'Sempreg Technology me ha acompañado desde el proceso de creación de empresa, implementando un modelo financiero que se adapte totalmente al funcionamiento de mi negocio, tienen un servicio integral que satisface a nivel contable y financiero todas nuestras necesidades.',
    },
    {
        id: 2,
        type: 'testimonio',
        nombre: 'Evelio Ocampo',
        empresa: 'TAE LTDA',
        imagen: '@/assets/img/08/evelio.webp',
        contenido: 'Nuestra empresa ha maximizado sus beneficios, a través del servicio de revisoría fiscal ofrecido por Sempreg Technology, dado que hemos recibo orientación para realizar una planeación tributaria y financiera eficiente , a la vez que blindar el cumplimiento legal.',
    },
    {
        id: 3,
        type: 'testimonio',
        nombre: 'María Angelica silva',
        empresa: 'Guru inmobiliaria',
        imagen: '@/assets/img/08/maria.webp',
        contenido: 'Desde el bello Departamento de Boyacá, recomendamos a la empresa SEMPREG TECHNOLOGY S.A.S, por las siguientes razones: Son excelentes en lo que hacen por su profesionalismo, trasmiten seguridad en todos sus procesos, excelente disposición para atender a sus clientes.',
    },
    {
        id: 4,
        type: 'testimonio',
        nombre: 'Carlos manrique',
        empresa: 'areas y espacios',
        imagen: '@/assets/img/08/carlos.webp',
        contenido: 'Con la convicción y satisfacción de recibir una excelente asesoría contable y financiera de parte de Sempreg y todo su equipo de trabajo, aportando innovación y herramientas tecnológicas para el desarrollo contable, financiero y tributario.',
    },
    {
        id: 5,
        type: 'testimonio',
        nombre: 'Eduardo Bonet',
        empresa: 'Revenga Ingenieros',
        imagen: '@/assets/img/08/eduardo.webp',
        contenido: 'Hemos contado con Sempreg, para el asesoramiento contable , financiero tributario y administrativo para nuestras operaciones en Colombia. Han desarrollado un equipo de trabajo que se adapta a nuestra organización multinacional con sede en España.',
    },
    {
        id: 6,
        type: 'testimonio',
        nombre: 'Diego Orozco',
        empresa: 'Inmobiliaria Orozco & La Verde',
        imagen: '@/assets/img/08/diego.webp',
        contenido: 'Nuestra empresa ha contado con el acompañamiento profesional en Normas Internacionales de Información Financiera por parte de Sempreg Technology. Gracias a este apoyo profesional, hemos podido desarrollar un sitema de información multipropósito eficiente.',
    },
    {
        id: 7,
        type: 'testimonio',
        nombre: 'Alberto Gutierrez',
        empresa: 'Biotech col s.a.s',
        imagen: '@/assets/img/08/Alberto.webp',
        contenido: 'Sempreg Techonology, ha desarrollado en nuestra empresa un sistema de información acorde para nuestra actividad de producción, que nos permite tomar decisiones acertadas sobre nuestro precio de ventas.',
    },
    {
        id: 8,
        type: 'testimonio',
        nombre: 'Gabriel Mejía',
        empresa: 'Inversiones en finca raíz la universal',
        imagen: '@/assets/img/08/gabrie.webp',
        contenido: 'Desde hace 3 años Sempreg Technology SAS, se ha encargado de asesorarnos contable y financieramente. Sus procesos estructurados y organizados, nos permiten contar oportunamente con información confiable y veraz.',
    },
];

export default function Testimonios({ darkMode = false }) {
    const [indiceActual, setIndiceActual] = useState(0);
    const [autoPlay, setAutoPlay] = useState(true);
    const [imageError, setImageError] = useState({});

    useEffect(() => {
        if (!autoPlay) return;
        const intervalo = setInterval(() => {
            setIndiceActual((prev) => (prev + 1) % TESTIMONIOS.length);
        }, 5000);
        return () => clearInterval(intervalo);
    }, [autoPlay]);

    const testimonio = TESTIMONIOS[indiceActual];

    const siguiente = () => {
        setIndiceActual((prev) => (prev + 1) % TESTIMONIOS.length);
        setAutoPlay(false);
    };

    const anterior = () => {
        setIndiceActual((prev) => (prev - 1 + TESTIMONIOS.length) % TESTIMONIOS.length);
        setAutoPlay(false);
    };

    const handleImageError = (id) => {
        setImageError(prev => ({ ...prev, [id]: true }));
    };

    return (
        <div className={`min-h-screen py-16 px-4 transition-colors ${darkMode ? 'bg-gray-900' : 'bg-gray-50'
            }`}>
            <div className="max-w-6xl mx-auto">
                {/* Encabezado */}
                <div className="text-center mb-16">
                    <h1 className={`text-4xl md:text-5xl font-bold mb-4 ${darkMode ? 'text-white' : 'text-gray-900'
                        }`}>
                        Lo que nuestros clientes dicen
                    </h1>
                    <div className="w-16 h-1 bg-gradient-to-r from-blue-600 to-blue-400 mx-auto mb-6"></div>
                    <p className={`text-lg ${darkMode ? 'text-gray-400' : 'text-gray-600'
                        } max-w-2xl mx-auto`}>
                        Descubre cómo hemos transformado los negocios de nuestros clientes con soluciones contables y financieras innovadoras
                    </p>
                </div>
                
                {/* Videos Testimoniales */}
                <TestimonialVideos darkMode={darkMode} />

                {/* Carrusel de Testimonios */}
                <div>
                    <h2 className={`text-3xl font-bold text-center mb-12 ${darkMode ? 'text-white' : 'text-gray-900'
                        }`}>
                        Testimonios de Clientes
                    </h2>

                    <div className={`rounded-2xl p-8 md:p-12 shadow-lg transition-all ${darkMode
                            ? 'bg-gray-800 border border-gray-700'
                            : 'bg-white border border-gray-200'
                        }`}>
                        <div className="grid md:grid-cols-2 gap-8 items-center">
                            <div className="flex justify-center">
                                <div className="relative w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden shadow-lg">
                                    {!imageError[testimonio.id] ? (
                                        <Image
                                            src={testimonio.imagen}
                                            alt={testimonio.nombre}
                                            fill
                                            sizes="(max-width: 768px) 192px, 256px"
                                            className="object-contain"
                                            onError={() => handleImageError(testimonio.id)}
                                            priority
                                        />
                                    ) : (
                                        <div className={`w-full h-full flex items-center justify-center ${darkMode ? 'bg-gray-700' : 'bg-gray-300'
                                            }`}>
                                            <svg className="w-16 h-16 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                                            </svg>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="space-y-6">
                                <div>
                                    <svg className={`w-12 h-12 mb-4 ${darkMode ? 'text-blue-400' : 'text-blue-600'
                                        }`} fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <p className={`text-lg leading-relaxed ${darkMode ? 'text-gray-300' : 'text-gray-700'
                                        }`}>
                                        {testimonio.contenido}
                                    </p>
                                </div>

                                <div className="border-t pt-6" style={{
                                    borderColor: darkMode ? '#374151' : '#e5e7eb'
                                }}>
                                    <h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'
                                        }`}>
                                        {testimonio.nombre}
                                    </h3>
                                    <p className="text-blue-600 font-medium mt-1">
                                        {testimonio.empresa}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Controles Carrusel */}
                    <div className="flex justify-between items-center mt-12">
                        <button
                            onClick={anterior}
                            className="p-3 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-colors shadow-lg"
                            aria-label="Anterior"
                        >
                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                        </button>

                        <div className="flex gap-3 flex-wrap justify-center max-w-md">
                            {TESTIMONIOS.map((_, idx) => (
                                <button
                                    key={idx}
                                    onClick={() => {
                                        setIndiceActual(idx);
                                        setAutoPlay(false);
                                    }}
                                    className={`w-3 h-3 rounded-full transition-all ${idx === indiceActual
                                            ? 'bg-blue-600 w-8'
                                            : darkMode
                                                ? 'bg-gray-600 hover:bg-gray-500'
                                                : 'bg-gray-300 hover:bg-gray-400'
                                        }`}
                                    aria-label={`Ir al testimonio ${idx + 1}`}
                                />
                            ))}
                        </div>

                        <button
                            onClick={siguiente}
                            className="p-3 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-colors shadow-lg"
                            aria-label="Siguiente"
                        >
                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                    </div>

                    <div className="text-center mt-8">
                        <button
                            onClick={() => setAutoPlay(!autoPlay)}
                            className={`px-6 py-2 rounded-lg text-sm font-medium transition-colors ${autoPlay
                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
                                    : darkMode
                                        ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                                }`}
                        >
                            {autoPlay ? 'Pausar reproducción' : 'Reanudar reproducción'}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}