import React from 'react';
import SectionWrapper from './SectionWrapper';
import { Server, ShieldCheck, Cpu, Info } from 'lucide-react';
import { motion } from 'framer-motion';
import { SectionProps } from '../types';

const Infrastructure: React.FC<SectionProps> = ({ onOpenModal }) => {
  const handleDetailsClick = () => {
    if (onOpenModal) {
      onOpenModal({
        title: 'Техническая Спецификация ЦОД',
        type: 'table',
        theme: 'dark',
        content: {
          headers: ['Компонент', 'Характеристика', 'Примечания'],
          rows: [
            ['Вычислительные узлы', 'GPU Кластер A100/H100', 'Собственность РБ'],
            ['СХД', 'All-Flash массивы', 'Скорость доступа <1мс'],
            ['Каналы связи', 'Защищенные ВОЛС', 'Изолированный контур'],
            ['Безопасность', 'ФСТЭК К1', 'Гостайна'],
            ['Энергоснабжение', 'Tier III', 'Резервирование 2N+1']
          ]
        }
      });
    }
  };

  return (
    <SectionWrapper id="infra" transitionEffect="wipe-right">
      <div className="max-w-7xl mx-auto px-6 md:px-12 w-full h-full flex flex-col justify-center">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16 items-center lg:items-start justify-center">
          <motion.div 
            className="w-full lg:w-1/2 flex flex-col justify-center"
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: [0.645, 0.045, 0.355, 1.000] }}
          >
            <div className="flex items-center gap-2 mb-4">
                <div className="w-2 h-2 bg-[#20e3b2]"></div>
                <span className="text-[#20e3b2] font-mono text-xs tracking-widest">01. ИНФРАСТРУКТУРА</span>
            </div>
            
            <h3 className="text-4xl md:text-6xl lg:text-7xl font-black mb-6 text-theme-main tracking-tighter leading-none">
              АППАРАТНЫЙ<br/>
              <span className="text-theme-muted">КОНТРОЛЬ</span>
            </h3>
            <p className="text-theme-muted text-base md:text-lg mb-8 leading-relaxed font-light max-w-md">
              Интеллект Республики должен жить в её стенах. Стратегия цифрового суверенитета: отказ от аренды в пользу капитализации собственных активов. ЦОД станет "железным" сердцем Кампуса. 
            </p>
            
            <motion.button
              onClick={handleDetailsClick}
              whileHover={{ x: 5 }}
              className="flex items-center gap-2 text-[#20e3b2] font-mono text-sm uppercase hover:underline underline-offset-4 w-fit"
            >
              <Info className="w-4 h-4" />
              Подробнее о мощностях
            </motion.button>
          </motion.div>

          <div className="w-full lg:w-1/2 space-y-4 flex flex-col justify-center">
              {[
                { icon: Server, title: "Фундамент на десятилетие", desc: "Архитектура дата-центра будет спроектирована на годы вперед." },
                { icon: ShieldCheck, title: "Контур Гостайны", desc: "Изолированный конвейер обработки данных по стандартам требованиий ФСТЭК." },
                { icon: Cpu, title: "Суверенный Кремний", desc: "Формирование суверенного вычислительного кластера (HPC) в собственности Республики." }
              ].map((item, idx) => (
                <motion.div 
                    key={idx} 
                    initial={{ opacity: 0, x: 50 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.2 + idx * 0.15, duration: 0.6, ease: [0.645, 0.045, 0.355, 1.000] }}
                    whileHover={{ x: -10 }}
                    className="flex items-start gap-4 md:gap-6 p-4 md:p-6 border-l border-theme bg-theme-card hover:bg-theme-card/80 hover:border-[#ff4b4b] transition-all duration-300 group cursor-default"
                >
                  <div className="mt-1">
                    <item.icon className="w-5 h-5 text-[#ff4b4b]" />
                  </div>
                  <div>
                    <h4 className="text-theme-main font-bold text-lg md:text-xl mb-1 font-mono uppercase">{item.title}</h4>
                    <p className="text-theme-muted text-sm leading-relaxed">{item.desc}</p>
                  </div>
                </motion.div>
              ))}
          </div>
        </div>
      </div>
    </SectionWrapper>
  );
};

export default Infrastructure;