import React from 'react';
import { motion } from 'framer-motion';
import { XCircle, CheckCircle } from 'lucide-react';

const Comparison = () => {
  return (
    <section style={{ backgroundColor: 'var(--bg-light)' }}>
      <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(320px, 1fr))', gap: '40px' }}>
          
          {/* Standard Glass */}
          <motion.div 
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, type: "spring" }}
            viewport={{ once: true }}
            className="glass-panel" 
            style={{ 
              padding: '50px', 
              borderTop: '5px solid #ef4444',
              background: 'linear-gradient(to bottom, rgba(239, 68, 68, 0.03), transparent)'
            }}
          >
            <h3 style={{ fontSize: '2.2rem', marginBottom: '35px', color: '#ef4444' }}>Обычное стекло</h3>
            
            <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '25px' }}>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <XCircle color="#ef4444" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Смертоносные осколки</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Мгновенно разбивается, образуя острые, быстро летящие фрагменты.</p>
                </div>
              </motion.li>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <XCircle color="#ef4444" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Нулевая защита от взрыва</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Ударные волны беспрепятственно проникают внутрь помещения.</p>
                </div>
              </motion.li>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <XCircle color="#ef4444" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Прорыв периметра</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Обеспечивает мгновенный доступ злоумышленникам после разрушения.</p>
                </div>
              </motion.li>
            </ul>
          </motion.div>

          {/* Armored Glass */}
          <motion.div 
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
            viewport={{ once: true }}
            className="glass-panel" 
            style={{ 
              padding: '50px', 
              borderTop: '5px solid var(--accent-blue)',
              background: 'linear-gradient(to bottom, rgba(14, 165, 233, 0.05), transparent)',
              boxShadow: '0 10px 40px rgba(14, 165, 233, 0.1)'
            }}
          >
            <h3 style={{ fontSize: '2.2rem', marginBottom: '35px', color: 'var(--accent-blue)' }}>Система Осколкам.Нет</h3>
            
            <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '25px' }}>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <CheckCircle className="text-accent-blue" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Полное удержание осколков</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Осколки остаются надежно зафиксированными на полимерной матрице. Нет разлетающихся фрагментов.</p>
                </div>
              </motion.li>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <CheckCircle className="text-accent-blue" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Нейтрализация ударной волны</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Эффективно поглощает и рассеивает экстремальную кинетическую энергию.</p>
                </div>
              </motion.li>
              <motion.li whileHover={{ x: 10 }} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', transition: 'all 0.2s' }}>
                <CheckCircle className="text-accent-blue" size={28} style={{ flexShrink: 0 }} />
                <div>
                  <h4 style={{ fontSize: '1.2rem', marginBottom: '8px', color: 'var(--text-main)' }}>Непрерывный периметр</h4>
                  <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.5' }}>Сохраняет структурную целостность окна, предотвращая несанкционированное проникновение.</p>
                </div>
              </motion.li>
            </ul>
          </motion.div>

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

export default Comparison;
