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

const Hero: React.FC<SectionProps> = ({ id, onOpenModal }) => {
  // Grid config for the background animation
  const GRID_ROWS = 10;
  const GRID_COLS = 20;
  const dots = Array.from({ length: GRID_ROWS * GRID_COLS });
  const smoothEase: [number, number, number, number] = [0.645, 0.045, 0.355, 1.000];

  const handleOpenSpecs = () => {
    if (onOpenModal) {
      onOpenModal({
        title: 'Спецификация Системы v2.5.0-RC',
        type: 'table',
        theme: 'dark',
        content: {
          headers: ['Параметр', 'Значение', 'Описание'],
          rows: [
            ['Архитектура', 'Transformer++ (MoE)', 'Гибридная архитектура Mixture of Experts для оптимизации инференса'],
            ['Параметры', '70B (Int8 Quantization)', 'Базовая модель, дообученная на закрытых датасетах РБ'],
            ['Контекстное окно', '128k токенов', 'Позволяет анализировать объемные юридические документы целиком'],
            ['Датасет', '50 лет архивов', 'Оцифрованные стенограммы заседаний, НПА, указы'],
            ['Развертывание', 'On-Premise (Air-gapped)', 'Полная изоляция от глобальной сети интернет'],
            ['Инференс', '20ms / token', 'Высокая скорость генерации на кластере H100']
          ]
        }
      });
    }
  };

  const handleLaunch = () => {
      if (onOpenModal) {
          onOpenModal({
              title: 'Запрос на развертывание',
              type: 'form',
              theme: 'dark',
              content: {
                  text: 'Для запуска системы в вашем контуре требуется предварительное согласование архитектуры.'
              }
          });
      }
  };

  return (
    <section id={id} className="h-[100dvh] w-full flex flex-col items-center justify-between relative overflow-hidden bg-theme-main text-center px-4 snap-start shrink-0 border-b border-theme py-20 md:py-24">
      
      {/* Wipe Effect for Hero (Reveals on load) */}
      <motion.div 
        className="absolute inset-0 z-50 bg-[#ff4b4b] pointer-events-none"
        initial={{ y: "0%" }}
        animate={{ y: "-100%" }}
        transition={{ duration: 0.8, ease: smoothEase, delay: 0.2 }}
      />
      <motion.div 
        className="absolute inset-0 z-40 bg-[#20e3b2] pointer-events-none"
        initial={{ y: "0%" }}
        animate={{ y: "-100%" }}
        transition={{ duration: 0.8, ease: smoothEase, delay: 0.3 }}
      />
      
      {/* Animated Grid Background */}
      <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20 overflow-hidden">
        <div 
          className="grid gap-1" 
          style={{ gridTemplateColumns: `repeat(${GRID_COLS}, 1fr)` }}
        >
          {dots.map((_, i) => (
            <motion.div
              key={i}
              initial={{ scale: 0, opacity: 0 }}
              animate={{ 
                scale: [0, 1, 0.5, 1], 
                opacity: [0, 0.8, 0.2, 0.5],
                backgroundColor: Math.random() > 0.8 ? '#ff4b4b' : (Math.random() > 0.5 ? '#20e3b2' : '#333')
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                repeatType: "reverse",
                delay: Math.random() * 2,
                ease: "easeInOut"
              }}
              className="w-4 h-4 md:w-8 md:h-8 rounded-sm"
            />
          ))}
        </div>
      </div>

      <div className="flex-1 flex flex-col justify-center items-center z-10 max-w-5xl mx-auto relative w-full mt-8 md:mt-0">
        <motion.div
          initial={{ opacity: 0, scaleX: 0 }}
          animate={{ opacity: 1, scaleX: 1 }}
          transition={{ duration: 0.8, ease: "circOut", delay: 1 }}
          className="flex justify-center mb-4 md:mb-8"
        >
          <div className="px-4 py-2 border border-[#20e3b2] bg-[#20e3b2]/10 text-[#20e3b2] font-mono text-[10px] md:text-xs font-bold tracking-widest uppercase">
            Статус Системы: Онлайн
          </div>
        </motion.div>

        <div className="relative overflow-hidden">
            <motion.h1
              initial={{ y: "100%" }}
              animate={{ y: 0 }}
              transition={{ duration: 1.2, ease: smoothEase, delay: 0.8 }}
              className="text-[12vw] md:text-7xl lg:text-8xl xl:text-[8rem] font-black tracking-tighter text-theme-main leading-[0.85]"
            >
                СУВЕРЕННАЯ
            </motion.h1>
        </div>
        <div className="relative overflow-hidden mb-6 md:mb-10">
            <motion.h1
              initial={{ y: "100%" }}
              animate={{ y: 0 }}
              transition={{ duration: 1.2, delay: 0.9, ease: smoothEase }}
              className="text-[12vw] md:text-7xl lg:text-8xl xl:text-[8rem] font-black tracking-tighter text-[#ff4b4b] leading-[0.85]"
            >
                LLM СИСТЕМА
            </motion.h1>
        </div>

        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1.2, duration: 1 }}
            className="flex flex-col items-center w-full"
        >
            <p className="text-sm md:text-base text-theme-muted max-w-3xl mx-auto mb-8 font-mono px-4 leading-relaxed">
              <span className="text-theme-main">Башкортостан</span> создаст первый в России прецедент федерального масштаба: внедрения генеративного искусственного интеллекта в контур власти без рисков для национальной безопасности.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto px-6 sm:px-0">
                <button 
                    onClick={handleLaunch}
                    className="w-full sm:w-auto px-6 py-4 bg-[#ff4b4b] text-white font-bold rounded-sm hover:bg-transparent hover:text-[#ff4b4b] border border-transparent hover:border-[#ff4b4b] transition-all duration-200 uppercase tracking-wider text-xs font-mono"
                >
                    ЗАПУСТИТЬ
                </button>
                <button 
                    onClick={handleOpenSpecs}
                    className="w-full sm:w-auto px-6 py-4 border border-theme text-theme-main font-bold rounded-sm hover:bg-theme-card transition-colors duration-200 uppercase tracking-wider text-xs font-mono"
                >
                    СПЕЦИФИКАЦИИ
                </button>
            </div>
        </motion.div>
      </div>

      <motion.div 
        className="w-full flex justify-between px-6 md:px-10 font-mono text-[10px] md:text-xs text-theme-muted z-10 pb-4 md:pb-0"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 2 }}
      >
        <span>ЛИСТАЙТЕ ВНИЗ</span>
        <span className="hidden md:inline">ВЕРСИЯ 2.5.0-RC</span>
      </motion.div>
    </section>
  );
};

export default Hero;