import React from 'react';
import SectionWrapper from './SectionWrapper';
import { HeartHandshake, AlertTriangle, MessageCircle, BarChart2, FileText } from 'lucide-react';
import { motion } from 'framer-motion';
import { SectionProps } from '../types';

const Social: React.FC<SectionProps> = ({ onOpenModal }) => {
  
  const handleOpenMethodology = () => {
    if (onOpenModal) {
      onOpenModal({
        title: 'Методика Предиктивной Аналитики',
        type: 'list',
        theme: 'dark',
        content: {
            items: [
                'Агрегация данных из 50+ открытых источников (соцсети, СМИ, блоги).',
                'Семантический анализ тональности сообщений (Sentiment Analysis).',
                'Выявление очагов социальной напряженности на ранней стадии.',
                'Автоматическая классификация обращений по категориям (ЖКХ, Дороги, Медицина).',
                'Формирование тепловых карт проблемных зон региона.'
            ]
        }
      });
    }
  };

  return (
    <SectionWrapper id="social" transitionEffect="shutters">
      <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 h-full">
          <motion.div 
            className="w-full lg:w-1/2 order-2 lg:order-1"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: [0.645, 0.045, 0.355, 1.000] }}
          >
             {/* Tech Grid Visualization */}
             <div className="grid grid-cols-8 gap-1 p-2 bg-theme-card border border-theme">
                {Array.from({ length: 64 }).map((_, i) => {
                    const active = Math.random() > 0.85;
                    return (
                        <motion.div 
                          key={i} 
                          initial={{ scale: 0 }}
                          whileInView={{ scale: 1 }}
                          transition={{ delay: Math.random() * 0.5, duration: 0.5 }}
                          className={`aspect-square ${active ? 'bg-[#ff4b4b]' : 'bg-[#333]/20'} rounded-sm`}
                        />
                    )
                })}
             </div>
             <div className="flex justify-between mt-4 font-mono text-[10px] text-theme-muted uppercase">
                <span>Статус: Мониторинг</span>
                <span className="text-[#ff4b4b] animate-pulse">Угрозы: Обнаружены</span>
             </div>
          </motion.div>

          <motion.div 
            className="w-full lg:w-1/2 order-1 lg:order-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-[#ffffff]"></div>
                  <span className="text-theme-main font-mono text-xs tracking-widest">03. ВЛИЯНИЕ</span>
            </div>
            <h3 className="text-4xl md:text-6xl lg:text-7xl font-black mb-6 md:mb-8 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 font-light leading-relaxed mb-8 max-w-lg">
            Главный показателем системы — социальное благополучие и доверие граждан. ИИ станет главным аналитическим фильтром ЦУР, работающим на упреждение рисков.
            </p>
            
            <div className="mb-8">
                <button
                    onClick={handleOpenMethodology} 
                    className="flex items-center gap-3 px-6 py-3 border border-theme text-theme-main font-bold uppercase tracking-widest text-xs hover:bg-[#ff4b4b] hover:text-white hover:border-[#ff4b4b] transition-all duration-300 w-fit group active:scale-95"
                >
                    <FileText className="w-4 h-4" />
                    Отчет по рискам
                </button>
            </div>
            
            <div className="space-y-4">
              {[
                { icon: MessageCircle, title: "Слышать Каждого", desc: "Мгновенная обработка обращений граждан." },
                { icon: AlertTriangle, title: "Предвидеть Риски", desc: "Мониторинг и прогнозирование социальной напряженности." },
                { icon: HeartHandshake, title: "Поддержка Населения", desc: "Отслеживания получения льгот для граждан." }
              ].map((item, idx) => (
                 <motion.div 
                    key={idx}
                    initial={{ x: 20, opacity: 0 }}
                    whileInView={{ x: 0, opacity: 1 }}
                    transition={{ delay: idx * 0.1 + 0.3 }}
                    // lg:hover:pl-6 prevents jumpiness on touch scroll, active state adds feedback
                    className="flex gap-4 p-4 border-b border-theme/30 lg:hover:pl-6 active:bg-theme-card/50 transition-all duration-300 cursor-default group"
                  >
                     <div className="mt-1 opacity-50 group-hover:opacity-100 transition-opacity">
                        <item.icon className="w-5 h-5 text-theme-main" />
                     </div>
                     <div>
                        <h4 className="text-theme-main font-bold text-lg font-mono uppercase">{item.title}</h4>
                        <p className="text-theme-muted text-sm">{item.desc}</p>
                     </div>
                 </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </SectionWrapper>
  );
};

export default Social;