import React from 'react';
import { motion } from 'framer-motion';
import { ShieldAlert, ArrowRight } from 'lucide-react';

const Hero = () => {
  return (
    <section 
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        position: 'relative',
        paddingTop: '80px',
        overflow: 'hidden'
      }}
    >
      {/* Background Visuals for Light Theme */}
      <div 
        style={{
          position: 'absolute',
          top: 0, left: 0, right: 0, bottom: 0,
          backgroundImage: 'url("https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop")',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.15, /* Lighter opacity */
          zIndex: -1,
        }}
      />
      <div 
        style={{
          position: 'absolute',
          top: 0, left: 0, right: 0, bottom: 0,
          background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.7) 100%)',
          zIndex: -1,
        }}
      />

      {/* Animated Background Elements */}
      <motion.div 
        animate={{ 
          scale: [1, 1.2, 1],
          opacity: [0.1, 0.2, 0.1]
        }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
        style={{
          position: 'absolute',
          top: '20%', right: '10%',
          width: '400px', height: '400px',
          borderRadius: '50%',
          background: 'radial-gradient(circle, var(--accent-blue) 0%, transparent 70%)',
          filter: 'blur(60px)',
          zIndex: -1
        }}
      />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: '850px' }}>
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, type: "spring" }}
            style={{ 
              display: 'inline-flex', 
              alignItems: 'center', 
              gap: '12px',
              padding: '10px 20px',
              background: 'rgba(14, 165, 233, 0.1)',
              border: '1px solid rgba(14, 165, 233, 0.3)',
              borderRadius: '50px',
              marginBottom: '35px',
              boxShadow: '0 4px 15px rgba(14, 165, 233, 0.1)'
            }}
          >
            <ShieldAlert size={20} className="text-accent-blue" />
            <span className="text-accent-blue" style={{ fontWeight: 700, letterSpacing: '1.5px', fontSize: '0.9rem', textTransform: 'uppercase' }}>
              Защита военного класса
            </span>
          </motion.div>

          <motion.h1 
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2, type: "spring" }}
            style={{
              fontSize: '4.8rem',
              lineHeight: 1.05,
              marginBottom: '30px',
              color: 'var(--text-main)',
              textShadow: '0 10px 30px rgba(15, 23, 42, 0.05)'
            }}
          >
            ПРЕВРАТИТЕ ВАШИ ОКНА В <span className="text-accent-blue">ЗАЩИТНЫЙ ЩИТ</span>.
          </motion.h1>

          <motion.p 
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.4, type: "spring" }}
            style={{
              fontSize: '1.5rem',
              color: 'var(--text-muted)',
              marginBottom: '45px',
              maxWidth: '700px',
              fontWeight: 400
            }}
          >
            Промышленные бронирующие пленки, разработанные для максимального поглощения кинетической энергии: защита от взрывных волн и ударов дронов.
          </motion.p>

          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6, type: "spring" }}
            style={{ display: 'flex', gap: '25px', flexWrap: 'wrap' }}
          >
            <a href="#estimator" className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
              <span>Рассчитать стоимость</span>
              <ArrowRight size={20} />
            </a>
            <a href="#technology" className="btn-outline" style={{ display: 'inline-block' }}>
              Смотреть характеристики
            </a>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
