import React from 'react';
import { motion } from 'framer-motion';
import { Factory, Building2, Home, Power } from 'lucide-react';

const UseCases = () => {
  const cases = [
    {
      title: 'Критическая инфраструктура',
      icon: <Power size={56} className="text-accent-blue" />,
      desc: 'Защита электростанций, подстанций и центров обработки данных от саботажа и атак дронов с полезной нагрузкой.',
      bgImg: 'https://images.unsplash.com/photo-1544439160-c3d5963f1ecf?q=80&w=1000&auto=format&fit=crop'
    },
    {
      title: 'Промышленные объекты',
      icon: <Factory size={56} className="text-accent-orange" />,
      desc: 'Снижение рисков внутренних взрывов и внешних кинетических угроз в производственных помещениях.',
      bgImg: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1000&auto=format&fit=crop'
    },
    {
      title: 'Коммерческие штаб-квартиры',
      icon: <Building2 size={56} className="text-accent-yellow" />,
      desc: 'Защита корпоративных активов и кабинетов руководства от промышленного шпионажа, взлома и вандализма.',
      bgImg: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1000&auto=format&fit=crop'
    },
    {
      title: 'Частные дома и квартиры',
      icon: <Home size={56} className="text-accent-blue" />,
      desc: 'Периметральная безопасность для частной недвижимости. Защита оконных проемов в квартирах, загородных домах и паник-комнатах.',
      bgImg: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=1000&auto=format&fit=crop'
    }
  ];

  return (
    <section id="applications" style={{ position: 'relative', 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-orange">ПРИМЕНЕНИЯ</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(280px, 1fr))', 
          gap: '40px' 
        }}>
          {cases.map((useCase, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 50, scale: 0.95 }}
              whileInView={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ duration: 0.6, delay: index * 0.15, type: "spring" }}
              viewport={{ once: true, margin: "-50px" }}
              className="glass-panel"
              style={{
                position: 'relative',
                overflow: 'hidden',
                padding: '50px 35px',
                display: 'flex',
                flexDirection: 'column',
                gap: '25px',
                minHeight: '420px',
                cursor: 'pointer'
              }}
              whileHover={{ 
                y: -15, 
                boxShadow: '0 20px 40px rgba(15, 23, 42, 0.12)' 
              }}
            >
              {/* Background Image with Lighter Overlay */}
              <motion.div 
                style={{
                  position: 'absolute',
                  top: 0, left: 0, right: 0, bottom: 0,
                  backgroundImage: `url(${useCase.bgImg})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  opacity: 0.05,
                  zIndex: 0
                }} 
                whileHover={{ opacity: 0.15, scale: 1.05 }}
                transition={{ duration: 0.4 }}
              />
              
              <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <motion.div 
                  initial={{ scale: 1 }}
                  whileHover={{ scale: 1.1, rotate: 5 }}
                  style={{ marginBottom: '25px', display: 'inline-block' }}
                >
                  {useCase.icon}
                </motion.div>
                <h3 style={{ fontSize: '1.6rem', marginBottom: '15px', color: 'var(--text-main)' }}>{useCase.title}</h3>
                <p style={{ color: 'var(--text-muted)', lineHeight: '1.7', fontSize: '1.05rem', marginTop: 'auto' }}>{useCase.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default UseCases;
