import React from 'react';
import SectionWrapper from './SectionWrapper';
import { motion } from 'framer-motion';
import { GraduationCap, Network, Microscope, FileText } from 'lucide-react';
import { SectionProps } from '../types';

const Science: React.FC<SectionProps> = ({ onOpenModal }) => {
  
  const handleOpenProgram = (e: React.MouseEvent) => {
    e.stopPropagation(); 
    if (onOpenModal) {
      onOpenModal({
        title: 'Научно-образовательная программа',
        type: 'article',
        theme: 'dark',
        content: {
          text: `В рамках Евразийского НОЦ разворачивается масштабная программа по подготовке кадров новой формации.

          1. **Кафедра прикладного ИИ**
          Создание специализированных магистерских программ, ориентированных на решение задач госуправления. Студенты будут проходить практику на реальных обезличенных данных ведомств.

          2. **Лаборатория NLP**
          Фокус на обработке естественного языка для автоматизации документооборота. Разработка собственных языковых моделей, дообученных на массивах нормативно-правовых актов РФ и РБ.

          3. **Грантовая поддержка**
          Выделение грантов молодым ученым, работающим над алгоритмами оптимизации городских процессов и предиктивной аналитикой социальных рисков.

          Цель: Полностью закрыть потребность региона в специалистах по Data Science и Machine Learning за счет внутренних ресурсов к 2027 году.`
        }
      });
    }
  };

  return (
    <SectionWrapper id="science" transparent={false} transitionEffect="warp">
      <div className="max-w-7xl mx-auto px-6 md:px-12 w-full h-full flex flex-col justify-center z-10 relative">
        
        {/* Left Aligned Text Block */}
        <motion.div 
          className="w-full max-w-4xl flex flex-col items-start text-left mb-12 relative z-20"
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: [0.645, 0.045, 0.355, 1.000], delay: 0.5 }}
        >
          <div className="flex items-center gap-2 mb-4">
              <div className="w-2 h-2 bg-[#ff4b4b]"></div>
              <span className="text-[#ff4b4b] font-mono text-xs tracking-widest">02. НАУКА</span>
          </div>
          <h3 className="text-4xl md:text-6xl lg:text-7xl font-black text-theme-main mb-6 tracking-tighter leading-none">
             ЦЕНТР ИИ <br/><span className="text-theme-muted">В ЕВРАЗИЙСКОМ НОЦ</span>
          </h3>
          <p className="text-theme-muted text-base md:text-lg font-light leading-relaxed mb-8 max-w-lg">
            Фундаментальная научно-исследовательская работа, в тесной интеграции с Евразийским НОЦ мирового уровня, объединяя усилия ведущих вузов Уфы, дополняя экосистему Евразийского НОЦ.
          </p>
           
          <div className="flex flex-wrap items-center gap-6 relative z-50 pointer-events-auto">
            <button 
                onClick={handleOpenProgram}
                className="group flex items-center gap-3 px-6 py-3 bg-theme-card border border-theme text-theme-main hover:border-[#ff4b4b] hover:text-[#ff4b4b] transition-all duration-300 font-mono text-xs uppercase cursor-pointer shadow-lg active:scale-95"
            >
                <FileText className="w-4 h-4 group-hover:scale-110 transition-transform" />
                Читать программу
            </button>

             <div className="inline-block p-4 border border-[#20e3b2]/30 bg-[#20e3b2]/5 rounded-sm font-mono text-xs text-[#20e3b2] max-w-xs break-words">
                &gt; Соединение с базой данных... <span className="animate-pulse">_</span>
            </div>
          </div>

        </motion.div>

        {/* 3-Column Grid */}
        <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 content-start max-w-6xl relative z-10">
            {[
              { 
                icon: GraduationCap, 
                title: "Академическая База", 
                text: "Важно, чтобы Кампус стал полигоном, где изучение ИИ напрямую влияет на сектор экономики и управления."
              },
              { 
                icon: Network, 
                title: "Центр Компетенций", 
                text: "Компетенции разработки и обучения закрепятся за уфимской научной школой, а не останутся у вендора."
              },
              { 
                icon: Microscope, 
                title: "НИОКР Формат", 
                text: "Используем надежную технологию обучения нейросетей. Это исключает ошибки и сделает работу системы предсказуемой."
              }
            ].map((card, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.7 + i * 0.1, duration: 0.6, ease: [0.645, 0.045, 0.355, 1.000] }}
                whileHover={{ y: -10 }}
                className="flex flex-col items-start text-left p-6 md:p-8 border border-theme bg-theme-card/80 backdrop-blur-sm relative overflow-hidden group hover:border-[#20e3b2] transition-colors duration-300 h-full cursor-default"
              >
                <div className="mb-4 p-3 bg-theme-main/50 rounded-full group-hover:bg-[#20e3b2]/10 transition-colors duration-300">
                     <card.icon className="w-8 h-8 text-[#20e3b2]" />
                </div>
                
                <h4 className="text-lg md:text-xl font-bold text-theme-main font-mono uppercase mb-3">{card.title}</h4>
                <p className="text-theme-muted leading-relaxed text-sm">{card.text}</p>
              </motion.div>
            ))}
        </div>
        
      </div>
    </SectionWrapper>
  );
};

export default Science;