import React from 'react';
import SectionWrapper from './SectionWrapper';
import { motion } from 'framer-motion';
import { PieChart } from 'lucide-react';
import { SectionProps } from '../types';

const Metrics: React.FC<SectionProps> = ({ onOpenModal }) => {
  const handleOpenReport = () => {
      if (onOpenModal) {
        onOpenModal({
          title: 'Экономический Эффект',
          type: 'article',
          theme: 'light',
          content: {
            text: `Прогноз экономической эффективности внедрения Суверенной LLM к 2026 году:

            1. **Оптимизация ФОТ**
            Высвобождение до 30% рабочего времени сотрудников аппарата, занятых рутинной обработкой документов. Это эквивалентно экономии 1.2 млрд рублей в год.

            2. **Импортозамещение ПО**
            Отказ от зарубежных проприетарных решений (Microsoft 365 Copilot, Notion AI, Zoom AI) сохранит в бюджете порядка 400 млн рублей ежегодно.

            3. **Ускорение процессов**
            Сокращение сроков согласования НПА с 14 до 3 дней.
            Ускорение обработки обращений граждан в 10 раз.

            4. **Снижение ошибок**
            Минимизация юридических рисков и штрафов за счет автоматической проверки документов на соответствие законодательству.`
          }
        });
      }
  };

  return (
    <SectionWrapper id="metrics" transitionEffect="sand">
      <div className="max-w-7xl mx-auto px-6 md:px-12 w-full h-full flex flex-col justify-center items-center text-center">
        
        {/* Header Section */}
        <div className="mb-12 md:mb-20 flex flex-col items-center z-10">
          <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">05. ЭКОНОМИКА</span>
          </div>
          <h3 className="text-4xl md:text-6xl lg:text-7xl font-black text-theme-main tracking-tighter uppercase leading-none">
            ЭФФЕКТ<br/><span className="text-theme-muted">ВНЕДРЕНИЯ</span>
          </h3>
            <p className="text-theme-muted text-lg mb-8 max-w-2xl">
               <br/> Внедрение суверенной LLM — это конкретные экономические и управленческие метрики, которые должны быть достигнуты уже в среднесрочной перспективе.
            </p>
            
            <button 
                onClick={handleOpenReport}
                className="inline-flex items-center gap-2 px-6 py-2 border border-theme text-theme-main hover:bg-theme-card transition-all rounded-full text-xs font-bold uppercase tracking-wide"
            >
                <PieChart className="w-4 h-4" />
                Финансовая модель
            </button>
        </div>

        {/* Metrics Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 w-full max-w-6xl z-10">
          <MetricCard 
              value="8X" 
              label="Ускорение" 
              desc="Сокращение рутины при подготовке НПА, анализе стенограмм и входящей корреспонденции." 
              delay={0.2}
          />
          <MetricCard 
              value="+15%" 
              label="Эффективность" 
              desc="Повышение исполнительской дисциплины по Нацпроектам." 
              delay={0.4}
          />
          <MetricCard 
              value="0₽" 
              label="Стоимость Лицензий" 
              desc="Полное импортозамещение. Бюджетные средства инвестируются в региональную IT-отрасль." 
              delay={0.6}
          />
        </div>
      </div>
    </SectionWrapper>
  );
};

const MetricCard: React.FC<{value: string, label: string, desc: string, delay: number}> = ({ value, label, desc, delay }) => (
    <motion.div 
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay, duration: 0.6 }}
        whileHover={{ y: -5 }}
        className="flex flex-col items-center justify-start pt-8 pb-8 px-4 border-t border-theme hover:bg-theme-card/50 transition-colors duration-300 w-full"
    >
        <div className="text-6xl md:text-8xl font-black mb-6 text-theme-main group-hover:text-[#ff4b4b] transition-colors duration-300 tracking-tighter">
            {value}
        </div>
        <div className="text-xs font-bold text-theme-main mb-3 font-mono uppercase tracking-widest border-b border-theme/20 pb-2 inline-block">
            {label}
        </div>
        <div className="text-theme-muted text-sm md:text-base leading-relaxed max-w-[200px]">
            {desc}
        </div>
    </motion.div>
)

export default Metrics;