import React from 'react';
import { Shield, Phone, Mail, MapPin } from 'lucide-react';
import { motion } from 'framer-motion';

const Footer = () => {
  return (
    <footer style={{ backgroundColor: 'var(--bg-lighter)', padding: '80px 0 30px 0', borderTop: '1px solid var(--border-light)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '50px', marginBottom: '60px' }}>
          
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '25px' }}>
              <img src="/oskolkam.png" alt="Осколкам.Нет" style={{ height: '36px', objectFit: 'contain' }} />
              <span style={{ fontFamily: 'var(--font-heading)', fontSize: '1.4rem', fontWeight: 800, letterSpacing: '1px', color: 'var(--text-main)' }}>
                Осколкам.<span className="text-accent-blue">Нет</span>
              </span>
            </div>
            <p style={{ color: 'var(--text-muted)', fontSize: '1rem', lineHeight: '1.8' }}>
              Передовые системы поглощения кинетической энергии и смягчения последствий взрывов для объектов с повышенным риском. Защита активов, обеспечение непрерывности работы.
            </p>
          </div>

          <div>
            <h4 style={{ color: 'var(--text-main)', marginBottom: '25px', fontSize: '1.2rem', fontWeight: 700 }}>Круглосуточный диспетчерский центр</h4>
            {/* ИЗМЕНИТЬ КОНТАКТНЫЕ ДАННЫЕ ЗДЕСЬ (Телефон и Email) */}
            <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '18px' }}>
              <li style={{ display: 'flex', alignItems: 'center', gap: '12px', color: 'var(--text-muted)' }}>
                <Phone size={20} className="text-accent-orange" />
                <span style={{ fontWeight: 600 }}>8 (800) 555-DEFENSE</span>
              </li>
              <li style={{ display: 'flex', alignItems: 'center', gap: '12px', color: 'var(--text-muted)' }}>
                <Mail size={20} className="text-accent-blue" />
                <span style={{ fontWeight: 600 }}>ops@oskolkam.net</span>
              </li>
            </ul>
          </div>

          <div>
            <h4 style={{ color: 'var(--text-main)', marginBottom: '25px', fontSize: '1.2rem', fontWeight: 700 }}>Зона обслуживания</h4>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', color: 'var(--text-muted)' }}>
              <MapPin size={22} className="text-accent-orange" style={{ flexShrink: 0, marginTop: '2px' }} />
              <div>
                <p style={{ marginBottom: '8px', fontWeight: 600, color: 'var(--text-main)' }}>Возможности глобального развертывания.</p>
                <p style={{ fontSize: '0.95rem', lineHeight: '1.6' }}>Работаем по всей территории РФ и в странах СНГ. Возможен выезд спецбригады в любую точку.</p>
              </div>
            </div>
          </div>

        </div>

        <div style={{ 
          marginBottom: '40px', 
          padding: '20px 25px', 
          backgroundColor: 'rgba(234, 88, 12, 0.05)', 
          borderLeft: '4px solid var(--accent-orange)', 
          borderRadius: '6px' 
        }}>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.95rem', margin: 0, lineHeight: '1.6' }}>
            <strong style={{ color: 'var(--accent-orange)' }}>Важное уведомление:</strong> Мы не можем гарантировать 100% защиту от прямого прилета БПЛА или крупнокалиберных снарядов. Основная задача наших бронирующих пленок — критически снизить риск поражения разлетающимися осколками стекла и частично погасить энергию ударной волны.
          </p>
        </div>

        <div style={{ 
          borderTop: '1px solid var(--border-light)', 
          paddingTop: '30px', 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '20px',
          color: 'var(--text-muted)',
          fontSize: '0.95rem'
        }}>
          <p>&copy; {new Date().getFullYear()} Осколкам.Нет. Все права защищены.</p>
          <div style={{ display: 'flex', gap: '30px' }}>
            <motion.a whileHover={{ color: 'var(--accent-blue)' }} href="#" style={{ transition: 'color 0.3s ease' }}>Политика конфиденциальности</motion.a>
            <motion.a whileHover={{ color: 'var(--accent-blue)' }} href="#" style={{ transition: 'color 0.3s ease' }}>Условия предоставления услуг</motion.a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
