import { useRef } from 'react';
import Container from '../container';
import PrimaryButton from '../primary-button';
import { ArrowRightLeft, BookOpen, UsersRound } from 'lucide-react';

interface Props {
    researchersCount?: number;
    institutionsCount?: number;
}

export default function AICollaboration({ researchersCount = 0, institutionsCount = 0 }: Props) {
    const sectionRef = useRef<HTMLElement>(null);

    return (
        <section
            ref={sectionRef}
            id="collaboration"
            className="py-16 sm:py-20 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-slate-800 dark:to-slate-900 relative overflow-hidden"
        >
            {/* Background Effects */}
            <div className="absolute inset-0">
                <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-emerald-500/10 dark:bg-emerald-500/5 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 dark:bg-blue-500/5 rounded-full blur-3xl animate-pulse"></div>
            </div>

            <Container className="relative z-10">
                <div className="text-center space-y-8">
                    {/* Header */}
                    <div className="space-y-4">
                        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 dark:text-white">
                            Conecta y{' '}
                            <span className="text-emerald-600 dark:text-emerald-400">Colabora</span>
                        </h2>
                        <p className="text-lg sm:text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
                            Únete a una comunidad de investigadores que comparten experiencias,
                            metodologías y construyen conocimiento colectivo
                        </p>
                    </div>

                    {/* Collaboration Features */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                        {/* Red de Investigadores */}
                        <a href="https://drive.google.com/file/d/1hnK0wb4ne7D2fCk3nZgmqhGDqWDfunQ0/view?usp=sharing" target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:shadow-emerald-400/20 transition-all duration-300 hover:scale-105 border border-slate-200 dark:border-slate-700">
                            <div className="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-emerald-200 dark:group-hover:bg-emerald-800/50 transition-colors">
                                <UsersRound className="w-8 h-8 text-emerald-600 dark:text-emerald-400" />
                            </div>
                            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
                                Red de Investigadores
                            </h3>
                            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                                Conecta con investigadores de toda Colombia y encuentra colaboradores con intereses similares
                            </p>
                        </a>

                        {/* Intercambio de Metodologías */}
                        <a href="https://drive.google.com/file/d/1Nn9slikL4NtATITV5y5gcHcLRP6LT56c/view?usp=sharing" target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:shadow-blue-400/20 transition-all duration-300 hover:scale-105 border border-slate-200 dark:border-slate-700">
                            <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-200 dark:group-hover:bg-blue-800/50 transition-colors">
                                <ArrowRightLeft className="w-8 h-8 text-blue-600 dark:text-blue-400" />
                            </div>
                            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
                                Valorando y Compartiendo Metodologías
                            </h3>
                            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                                Comparte y adopta metodologías exitosas de otros proyectos educativos
                            </p>
                        </a>

                        {/* Aprendizaje Colectivo */}
                        <a href="https://youtu.be/emN-rThqybk?si=OpIhWf1saljrJDHe" target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:shadow-purple-400/20 transition-all duration-300 hover:scale-105 border border-slate-200 dark:border-slate-700">
                            <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-200 dark:group-hover:bg-purple-800/50 transition-colors">
                                <BookOpen className="w-8 h-8 text-purple-600 dark:text-purple-400" />
                            </div>
                            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
                                Metacognición institucional para el aprendizaje colectivo
                            </h3>
                            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                                Construye conocimiento desde la experiencia compartida y las lecciones aprendidas
                            </p>
                        </a>
                    </div>

                    {/* Call to Action */}
                    <div className="mt-12 pt-8">
                        <PrimaryButton
                            href="/register"
                            className="text-lg px-8 py-4 bg-gradient-to-r from-emerald-600 to-blue-600 hover:from-emerald-700 hover:to-blue-700 text-white font-bold rounded-2xl shadow-2xl hover:scale-105 transform transition-all duration-300 border-none"
                        >
                            Únete a la Comunidad
                        </PrimaryButton>
                    </div>

                    {/* Stats */}
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-16 pt-12 border-t border-slate-200 dark:border-slate-700">
                        <div className="text-center">
                            <div className="text-3xl sm:text-4xl font-bold text-emerald-600 dark:text-emerald-400">{researchersCount || 0}</div>
                            <div className="text-sm font-medium text-slate-600 dark:text-slate-400 mt-1">Investigadores Activos</div>
                        </div>
                        <div className="text-center">
                            <div className="text-3xl sm:text-4xl font-bold text-blue-600 dark:text-blue-400">{researchersCount || 0}</div>
                            <div className="text-sm font-medium text-slate-600 dark:text-slate-400 mt-1">Colaboraciones Exitosas</div>
                        </div>
                        <div className="text-center">
                            <div className="text-3xl sm:text-4xl font-bold text-purple-600 dark:text-purple-400">{institutionsCount || 0}</div>
                            <div className="text-sm font-medium text-slate-600 dark:text-slate-400 mt-1">Instituciones beneficiadas</div>
                        </div>
                    </div>
                </div>
            </Container>
        </section>
    );
}