import React, { useState, useEffect } from 'react';
import { Shield, PhoneCall } from 'lucide-react';
import { motion } from 'framer-motion';

const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <motion.nav 
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.6, type: "spring", bounce: 0.2 }}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        padding: scrolled ? '15px 0' : '25px 0',
        transition: 'all 0.4s ease',
        borderBottom: scrolled ? '1px solid var(--glass-border)' : '1px solid transparent',
        backgroundColor: scrolled ? 'var(--glass-bg)' : 'transparent',
        backdropFilter: scrolled ? 'blur(16px)' : 'none',
        boxShadow: scrolled ? 'var(--glass-shadow)' : 'none',
      }}
    >
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <motion.div 
          whileHover={{ scale: 1.05 }}
          style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}
        >
          <img src="/oskolkam.png" alt="Осколкам.Нет" style={{ height: '40px', objectFit: 'contain' }} />
          <span style={{ fontFamily: 'var(--font-heading)', fontSize: '1.6rem', fontWeight: 800, letterSpacing: '1px', color: 'var(--text-main)' }}>
            Осколкам.<span className="text-accent-blue">Нет</span>
          </span>
        </motion.div>
        
        <div style={{ display: 'flex', gap: '35px', alignItems: 'center' }}>
          <motion.a whileHover={{ y: -2, color: 'var(--accent-blue)' }} href="#technology" style={{ fontWeight: 600, fontSize: '0.95rem', transition: 'color 0.3s ease' }}>Технологии</motion.a>
          <motion.a whileHover={{ y: -2, color: 'var(--accent-blue)' }} href="#applications" style={{ fontWeight: 600, fontSize: '0.95rem', transition: 'color 0.3s ease' }}>Применение</motion.a>
          <motion.a whileHover={{ y: -2, color: 'var(--accent-blue)' }} href="#estimator" style={{ fontWeight: 600, fontSize: '0.95rem', transition: 'color 0.3s ease' }}>Калькулятор</motion.a>
          
          {/* ИЗМЕНИТЬ НОМЕР ДЛЯ СВЯЗИ ЗДЕСЬ (атрибут href и текст ниже) */}
          <motion.a 
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            href="tel:112" 
            className="btn-outline" 
            style={{ 
              display: 'flex', 
              alignItems: 'center', 
              gap: '10px', 
              padding: '10px 24px', 
              fontSize: '0.9rem',
              borderColor: 'var(--accent-orange)',
              color: 'var(--accent-orange)'
            }}
          >
            <PhoneCall size={18} />
            <span>Экстренный вызов</span>
          </motion.a>
        </div>
      </div>
    </motion.nav>
  );
};

export default Navbar;
