import React from 'react';
import { motion } from 'framer-motion';
import { Layers, Zap, ShieldCheck } from 'lucide-react';

const PhysicsOfSafety = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { 
      opacity: 1,
      transition: { staggerChildren: 0.2 }
    }
  };

  const itemVariants = {
    hidden: { x: 50, opacity: 0 },
    visible: { x: 0, opacity: 1, transition: { duration: 0.6, type: "spring" } }
  };

  return (
    <section id="technology" style={{ backgroundColor: 'var(--bg-lighter)', position: 'relative' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: '80px' }}>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            style={{ fontSize: '3.5rem', marginBottom: '20px' }}
          >
            ФИЗИКА <span className="text-accent-blue">БЕЗОПАСНОСТИ</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            style={{ color: 'var(--text-muted)', fontSize: '1.3rem', maxWidth: '800px', margin: '0 auto' }}
          >
            Наша запатентованная многослойная полимерная структура поглощает кинетическую энергию, нейтрализует взрывные волны и предотвращает катастрофическое разрушение стекла.
          </motion.p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', gap: '60px', alignItems: 'center' }}>
          
          {/* Visual Animation Block */}
          <div style={{ position: 'relative', height: '500px', display: 'flex', justifyContent: 'center', alignItems: 'center', perspective: '1000px' }}>
            <motion.div 
              initial={{ rotateX: 60, rotateZ: -45 }}
              whileInView={{ rotateX: 60, rotateZ: 315 }}
              transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
              viewport={{ once: true }}
              style={{ position: 'relative', width: '280px', height: '280px', transformStyle: 'preserve-3d' }}
            >
              {/* Layer 1: Glass */}
              <motion.div style={{
                position: 'absolute', width: '100%', height: '100%',
                background: 'rgba(14, 165, 233, 0.05)',
                border: '2px solid rgba(14, 165, 233, 0.3)',
                boxShadow: 'inset 0 0 30px rgba(14, 165, 233, 0.1)',
                backdropFilter: 'blur(4px)',
                transform: 'translateZ(0px)',
                display: 'flex', justifyContent: 'center', alignItems: 'center',
                color: 'var(--accent-blue)', fontWeight: '700', letterSpacing: '1px'
              }}>
                БАЗОВОЕ СТЕКЛО
              </motion.div>
              
              {/* Layer 2: Adhesive */}
              <motion.div 
                initial={{ transform: 'translateZ(0px)', opacity: 0 }}
                whileInView={{ transform: 'translateZ(50px)', opacity: 1 }}
                transition={{ duration: 1.2, delay: 0.5, type: "spring" }}
                viewport={{ margin: "-100px" }}
                style={{
                  position: 'absolute', width: '100%', height: '100%',
                  background: 'rgba(234, 88, 12, 0.05)',
                  border: '2px dashed var(--accent-orange)',
                  backdropFilter: 'blur(2px)',
                  display: 'flex', justifyContent: 'center', alignItems: 'center',
                  color: 'var(--accent-orange)', fontWeight: '700', letterSpacing: '1px'
                }}>
                ПОГЛОЩЕНИЕ ЭНЕРГИИ
              </motion.div>
              
              {/* Layer 3: Polymer Film */}
              <motion.div 
                initial={{ transform: 'translateZ(0px)', opacity: 0 }}
                whileInView={{ transform: 'translateZ(100px)', opacity: 1 }}
                transition={{ duration: 1.2, delay: 1, type: "spring" }}
                viewport={{ margin: "-100px" }}
                style={{
                  position: 'absolute', width: '100%', height: '100%',
                  background: 'rgba(245, 158, 11, 0.1)',
                  border: '3px solid var(--accent-yellow)',
                  boxShadow: '0 0 40px rgba(245, 158, 11, 0.2)',
                  backdropFilter: 'blur(1px)',
                  display: 'flex', justifyContent: 'center', alignItems: 'center',
                  color: 'var(--accent-yellow)', fontWeight: '800', letterSpacing: '2px'
                }}>
                БРОНЕПОЛИМЕР
              </motion.div>
            </motion.div>
          </div>

          {/* Features Text */}
          <motion.div 
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            style={{ display: 'flex', flexDirection: 'column', gap: '25px' }}
          >
            <motion.div variants={itemVariants} className="glass-panel" style={{ padding: '35px', display: 'flex', gap: '25px', transition: 'all 0.3s' }}>
              <div style={{ background: 'rgba(245, 158, 11, 0.15)', padding: '18px', borderRadius: '50%', height: 'fit-content' }}>
                <Zap className="text-accent-yellow" size={28} />
              </div>
              <div>
                <h3 style={{ fontSize: '1.5rem', marginBottom: '10px', color: 'var(--text-main)' }}>Кинетическое рассеивание</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: '1.05rem', lineHeight: '1.6' }}>При ударе ударная волна мгновенно распределяется по всей площади поверхности пленки, радикально снижая локальное давление.</p>
              </div>
            </motion.div>

            <motion.div variants={itemVariants} className="glass-panel" style={{ padding: '35px', display: 'flex', gap: '25px', transition: 'all 0.3s' }}>
              <div style={{ background: 'rgba(234, 88, 12, 0.15)', padding: '18px', borderRadius: '50%', height: 'fit-content' }}>
                <Layers className="text-accent-orange" size={28} />
              </div>
              <div>
                <h3 style={{ fontSize: '1.5rem', marginBottom: '10px', color: 'var(--text-main)' }}>Микрослойная технология</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: '1.05rem', lineHeight: '1.6' }}>Разработана с использованием десятков чередующихся микроскопических слоев полиэстера, скрепленных высокопрочными акриловыми адгезивами.</p>
              </div>
            </motion.div>

            <motion.div variants={itemVariants} className="glass-panel" style={{ padding: '35px', display: 'flex', gap: '25px', transition: 'all 0.3s' }}>
              <div style={{ background: 'rgba(14, 165, 233, 0.15)', padding: '18px', borderRadius: '50%', height: 'fit-content' }}>
                <ShieldCheck className="text-accent-blue" size={28} />
              </div>
              <div>
                <h3 style={{ fontSize: '1.5rem', marginBottom: '10px', color: 'var(--text-main)' }}>Удержание осколков</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: '1.05rem', lineHeight: '1.6' }}>Даже при полном разрушении стеклянного полотна, смертоносные осколки остаются прочно закрепленными на эластичной матрице.</p>
              </div>
            </motion.div>
          </motion.div>

        </div>
      </div>
    </section>
  );
};

export default PhysicsOfSafety;
