import React, { useState, useEffect } from 'react';

const App = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [activeSection, setActiveSection] = useState('home');

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
      
      const sections = ['home', 'services', 'government', 'contacts'];
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el) {
          const rect = el.getBoundingClientRect();
          if (rect.top <= 100 && rect.bottom >= 100) {
            setActiveSection(id);
            break;
          }
        }
      }
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollTo = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    setMenuOpen(false);
  };

  const navItems = [
    { id: 'home', label: 'Главная' },
    { id: 'services', label: 'Услуги' },
    { id: 'government', label: 'Госзаказчикам' },
    { id: 'contacts', label: 'Контакты' }
  ];

  const services = [
    {
      icon: '📡',
      title: 'Установка ГЛОНАСС/GPS',
      desc: 'Монтаж трекеров и навигационного оборудования на транспорт'
    },
    {
      icon: '⛽',
      title: 'Датчики топлива',
      desc: 'Установка ДУТ для точного контроля расхода топлива'
    },
    {
      icon: '📟',
      title: 'Тахографы',
      desc: 'Установка и калибровка тахографов по требованиям законодательства'
    },
    {
      icon: '🔌',
      title: 'Электромонтаж',
      desc: 'Протяжка кабелей, монтаж адаптеров и коммутация'
    },
    {
      icon: '⚙️',
      title: 'Настройка ПО',
      desc: 'Интеграция с Wialon, GLONASSsoft, Navtelecom'
    },
    {
      icon: '🛠',
      title: 'Сервис 24/7',
      desc: 'Диагностика, замена SIM-карт, обновление ПО'
    }
  ];

  const benefits = [
    { icon: '🚐', text: 'Выезд по всему Уралу' },
    { icon: '⚖️', text: 'Соответствие 44-ФЗ и 223-ФЗ' },
    { icon: '🔄', text: 'Интеграция с любым ПО' },
    { icon: '🕒', text: 'Поддержка 24/7' }
  ];

  return (
    <div style={{ fontFamily: "'Roboto', sans-serif", color: '#2D3747', overflowX: 'hidden' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@400;500;700&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        .font-oswald { font-family: 'Oswald', sans-serif; }
        
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-in {
          animation: fadeInUp 0.6s ease-out forwards;
        }
        
        .nav-link {
          position: relative;
          transition: color 0.3s;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 2px;
          background: #FF6B35;
          transition: width 0.3s;
        }
        
        .nav-link.active::after,
        .nav-link:hover::after {
          width: 100%;
        }
        
        .nav-link.active,
        .nav-link:hover {
          color: #FF6B35;
        }
        
        .btn-primary {
          background: #FF6B35;
          color: white;
          padding: 12px 28px;
          border-radius: 8px;
          border: none;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
        }
        
        .btn-primary:hover {
          background: #e55a25;
          transform: translateY(-2px);
          box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }
        
        .btn-secondary {
          background: #2D3747;
          color: white;
          padding: 12px 28px;
          border-radius: 8px;
          border: none;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
        }
        
        .btn-secondary:hover {
          background: #1a202c;
          transform: translateY(-2px);
        }
        
        .card {
          background: white;
          border-radius: 12px;
          padding: 24px;
          transition: all 0.3s;
          border: 1px solid #e5e7eb;
        }
        
        .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .section-padding {
          padding: 80px 0;
        }
        
        @media (max-width: 768px) {
          .section-padding { padding: 50px 0; }
        }
        
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }
        
        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        
        @media (max-width: 900px) {
          .grid-4 { grid-template-columns: repeat(2, 1fr); }
          .grid-3 { grid-template-columns: repeat(2, 1fr); }
        }
        
        @media (max-width: 600px) {
          .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
        }
        
        .stat-box {
          text-align: center;
          padding: 30px;
          background: linear-gradient(135deg, #2D3747 0%, #4a5568 100%);
          border-radius: 12px;
          color: white;
        }
        
        .stat-number {
          font-size: 48px;
          font-weight: 700;
          color: #FF6B35;
          font-family: 'Oswald', sans-serif;
        }
      `}</style>

      {/* Header */}
      <header style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        background: scrolled ? 'rgba(45, 55, 71, 0.98)' : 'transparent',
        backdropFilter: scrolled ? 'blur(10px)' : 'none',
        transition: 'all 0.3s',
        boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.1)' : 'none'
      }}>
        <div className="container" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '16px 20px',
          maxWidth: 1200,
          margin: '0 auto'
        }}>
          {/* Logo */}
          <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => scrollTo('home')}>
            <svg width="40" height="40" viewBox="0 0 64 64" fill="none" style={{ marginRight: 12 }}>
              <rect x="4" y="4" width="56" height="56" rx="8" fill="#2D3747"/>
              <path d="M16 20C16 16 19 14 22 14C25 14 28 16 28 20V32C28 36 25 38 22 38C19 38 16 36 16 32V20Z" fill="#FF6B35"/>
              <path d="M22 26H38V30H22V26Z" fill="white"/>
              <path d="M38 14H42C46 14 48 16 48 20V32C48 36 46 38 42 38H38V34H42C44 34 44 33 44 32V20C44 19 44 18 42 18H38V14Z" fill="#FF6B35"/>
              <rect x="16" y="44" width="32" height="4" rx="2" fill="white" opacity="0.5"/>
            </svg>
            <span className="font-oswald" style={{ fontSize: 24, fontWeight: 700, color: 'white', letterSpacing: 1 }}>
              ГЛОБЕРГ
            </span>
          </div>

          {/* Desktop Nav */}
          <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }} className="desktop-nav">
            {navItems.map(item => (
              <button
                key={item.id}
                onClick={() => scrollTo(item.id)}
                className={`nav-link ${activeSection === item.id ? 'active' : ''}`}
                style={{
                  background: 'none',
                  border: 'none',
                  color: 'white',
                  fontSize: 15,
                  fontWeight: 500,
                  cursor: 'pointer',
                  padding: '8px 0'
                }}
              >
                {item.label}
              </button>
            ))}
            <a
              href="http://gl.Globerg.ru"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                background: '#FF6B35',
                color: 'white',
                padding: '10px 24px',
                borderRadius: 8,
                textDecoration: 'none',
                fontWeight: 500,
                transition: 'all 0.3s'
              }}
            >
              Личный кабинет
            </a>
          </nav>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            style={{
              display: 'none',
              background: 'none',
              border: 'none',
              color: 'white',
              fontSize: 28,
              cursor: 'pointer'
            }}
            className="mobile-menu-btn"
          >
            {menuOpen ? '✕' : '☰'}
          </button>
        </div>

        {/* Mobile Menu */}
        {menuOpen && (
          <div style={{
            background: '#2D3747',
            padding: 20,
            display: 'flex',
            flexDirection: 'column',
            gap: 16
          }}>
            {navItems.map(item => (
              <button
                key={item.id}
                onClick={() => scrollTo(item.id)}
                style={{
                  background: 'none',
                  border: 'none',
                  color: 'white',
                  fontSize: 18,
                  textAlign: 'left',
                  padding: '12px 0',
                  borderBottom: '1px solid rgba(255,255,255,0.1)',
                  cursor: 'pointer'
                }}
              >
                {item.label}
              </button>
            ))}
            <a
              href="http://gl.Globerg.ru"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                background: '#FF6B35',
                color: 'white',
                padding: '14px',
                borderRadius: 8,
                textDecoration: 'none',
                textAlign: 'center',
                fontWeight: 500
              }}
            >
              Личный кабинет
            </a>
          </div>
        )}
      </header>

      <style>{`
        @media (max-width: 900px) {
          .desktop-nav { display: none !important; }
          .mobile-menu-btn { display: block !important; }
        }
      `}</style>

      {/* Hero Section */}
      <section id="home" style={{
        minHeight: '100vh',
        background: 'linear-gradient(135deg, #2D3747 0%, #1a202c 50%, #0f172a 100%)',
        display: 'flex',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* Background Pattern */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: `radial-gradient(circle at 20% 50%, rgba(255,107,53,0.1) 0%, transparent 50%),
                           radial-gradient(circle at 80% 20%, rgba(255,107,53,0.05) 0%, transparent 50%)`,
          pointerEvents: 'none'
        }} />
        
        <div className="container" style={{ position: 'relative', zIndex: 1, padding: '120px 20px 80px' }}>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            alignItems: 'center',
            gap: 60
          }}>
            <div style={{ flex: '1 1 500px' }}>
              <div style={{
                display: 'inline-block',
                background: 'rgba(255,107,53,0.1)',
                border: '1px solid rgba(255,107,53,0.3)',
                borderRadius: 20,
                padding: '8px 20px',
                marginBottom: 24,
                color: '#FF6B35',
                fontSize: 14,
                fontWeight: 500
              }}>
                🚐 Работаем по всему Уралу
              </div>
              
              <h1 className="font-oswald" style={{
                fontSize: 'clamp(32px, 5vw, 56px)',
                fontWeight: 700,
                color: 'white',
                lineHeight: 1.1,
                marginBottom: 24
              }}>
                Профессиональный<br />
                <span style={{ color: '#FF6B35' }}>мониторинг транспорта</span><br />
                для бизнеса Урала
              </h1>
              
              <p style={{
                fontSize: 18,
                color: '#a0aec0',
                lineHeight: 1.7,
                marginBottom: 36,
                maxWidth: 550
              }}>
                ООО «Глоберг» — установка ГЛОНАСС/GPS, датчиков топлива, тахографов и электромонтажные работы. 
                Работаем с вашим ПО (Wialon, GLONASSsoft, Navtelecom), обеспечиваем соответствие 44-ФЗ и 223-ФЗ.
              </p>
              
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
                <button className="btn-primary">Вызвать специалиста</button>
                <button className="btn-secondary">Рассчитать стоимость</button>
              </div>
              
              {/* Benefits */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                gap: 20,
                marginTop: 50
              }}>
                {benefits.map((item, i) => (
                  <div key={i} style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 12,
                    color: '#a0aec0',
                    fontSize: 15
                  }}>
                    <span style={{ fontSize: 24 }}>{item.icon}</span>
                    <span>{item.text}</span>
                  </div>
                ))}
              </div>
            </div>
            
            <div style={{ flex: '1 1 400px', textAlign: 'center' }}>
              <div style={{
                background: 'rgba(255,255,255,0.05)',
                borderRadius: 24,
                padding: 40,
                border: '1px solid rgba(255,255,255,0.1)',
                backdropFilter: 'blur(10px)'
              }}>
                <div style={{
                  fontSize: 120,
                  marginBottom: 20,
                  filter: 'drop-shadow(0 10px 30px rgba(255,107,53,0.3))'
                }}>
                  🚛
                </div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'center',
                  gap: 20,
                  marginTop: 20
                }}>
                  <div style={{
                    background: 'rgba(255,107,53,0.2)',
                    borderRadius: 12,
                    padding: '16px 24px',
                    textAlign: 'center'
                  }}>
                    <div style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>500+</div>
                    <div style={{ fontSize: 13, color: '#a0aec0' }}>датчиков</div>
                  </div>
                  <div style={{
                    background: 'rgba(255,107,53,0.2)',
                    borderRadius: 12,
                    padding: '16px 24px',
                    textAlign: 'center'
                  }}>
                    <div style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>10+</div>
                    <div style={{ fontSize: 13, color: '#a0aec0' }}>госучреждений</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="section-padding" style={{ background: '#F5F5F5' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <h2 className="font-oswald" style={{
              fontSize: 40,
              fontWeight: 700,
              marginBottom: 16
            }}>
              Наши <span style={{ color: '#FF6B35' }}>услуги</span>
            </h2>
            <p style={{ color: '#718096', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
              Комплексные решения для мониторинга и контроля транспорта
            </p>
          </div>
          
          <div className="grid-3">
            {services.map((service, i) => (
              <div key={i} className="card">
                <div style={{ fontSize: 48, marginBottom: 16 }}>{service.icon}</div>
                <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>
                  {service.title}
                </h3>
                <p style={{ color: '#718096', lineHeight: 1.6 }}>
                  {service.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Government Section */}
      <section id="government" className="section-padding" style={{ background: 'white' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <h2 className="font-oswald" style={{
              fontSize: 40,
              fontWeight: 700,
              marginBottom: 16
            }}>
              Для <span style={{ color: '#FF6B35' }}>госзаказчиков</span>
            </h2>
            <p style={{ color: '#718096', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
              Работаем по 44-ФЗ и 223-ФЗ. Официальный подрядчик государственных учреждений
            </p>
          </div>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 24,
            marginBottom: 50
          }}>
            {['44-ФЗ', '223-ФЗ', 'Приказ Минтранса №285'].map((reg, i) => (
              <div key={i} className="card" style={{
                borderLeft: `4px solid #FF6B35`,
                display: 'flex',
                alignItems: 'center',
                gap: 16
              }}>
                <span style={{
                  background: 'rgba(255,107,53,0.1)',
                  borderRadius: '50%',
                  width: 50,
                  height: 50,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 24
                }}>
                  ✓
                </span>
                <span style={{ fontSize: 18, fontWeight: 500 }}>{reg}</span>
              </div>
            ))}
          </div>
          
          <div className="grid-2" style={{ maxWidth: 700, margin: '0 auto' }}>
            <div className="stat-box">
              <div className="stat-number">500+</div>
              <div>установленных датчиков</div>
            </div>
            <div className="stat-box">
              <div className="stat-number">10+</div>
              <div>госучреждений на обслуживании</div>
            </div>
          </div>
          
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <button className="btn-primary">Скачать шаблон заявки (PDF)</button>
          </div>
        </div>
      </section>

      {/* Trust Section */}
      <section style={{
        background: '#2D3747',
        padding: '60px 0'
      }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <p style={{ color: '#a0aec0', marginBottom: 30, fontSize: 16 }}>
            Официальный подрядчик государственных учреждений
          </p>
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: 40,
            opacity: 0.7
          }}>
            {['Спецсвязь ФСО', 'Минздрав УрФО', 'Росдорнадзор'].map((name, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.1)',
                borderRadius: 12,
                padding: '20px 36px',
                color: 'white',
                fontWeight: 500
              }}>
                {name}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contacts" className="section-padding" style={{ background: '#F5F5F5' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <h2 className="font-oswald" style={{
              fontSize: 40,
              fontWeight: 700,
              marginBottom: 16
            }}>
              <span style={{ color: '#FF6B35' }}>Контакты</span>
            </h2>
          </div>
          
          <div className="grid-2" style={{ maxWidth: 900, margin: '0 auto' }}>
            <div>
              <div className="card" style={{ marginBottom: 24 }}>
                <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 20 }}>
                  Свяжитесь с нами
                </h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: 24 }}>📍</span>
                    <span>г. Екатеринбург, ул. Цвиллинга, 7а</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: 24 }}>📞</span>
                    <a href="tel:+73432269622" style={{ color: '#2D3747', textDecoration: 'none', fontWeight: 500 }}>
                      +7 (343) 22-696-22
                    </a>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: 24 }}>✉️</span>
                    <a href="mailto:info@globerg.ru" style={{ color: '#2D3747', textDecoration: 'none', fontWeight: 500 }}>
                      info@globerg.ru
                    </a>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: 24 }}>💬</span>
                    <a href="https://t.me/globerg_bot" target="_blank" rel="noopener noreferrer" style={{ color: '#FF6B35', textDecoration: 'none', fontWeight: 500 }}>
                      Telegram-бот
                    </a>
                  </div>
                </div>
              </div>
              
              <div style={{
                background: '#2D3747',
                borderRadius: 12,
                padding: 24,
                color: 'white'
              }}>
                <div style={{ fontWeight: 700, marginBottom: 12 }}>Юридическая информация</div>
                <div style={{ color: '#a0aec0', fontSize: 14 }}>
                  ООО «Глоберг»<br />
                  ИНН: 6681008939<br />
                  г. Екатеринбург, ул. Цвиллинга, 7а
                </div>
              </div>
            </div>
            
            <div className="card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: 300 }}>
              <div style={{ fontSize: 80, marginBottom: 20 }}>📍</div>
              <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 8 }}>
                г. Екатеринбург
              </div>
              <div style={{ color: '#718096', textAlign: 'center' }}>
                ул. Цвиллинга, 7а<br />
                <small style={{ color: '#a0aec0' }}>Яндекс.Карта будет загружена здесь</small>
              </div>
              <a 
                href="https://yandex.ru/maps/?text=Екатеринбург,+ул.+Цвиллинга,+7а"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary"
                style={{ marginTop: 20, textDecoration: 'none', display: 'inline-block' }}
              >
                Открыть на карте
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        background: '#1a202c',
        color: 'white',
        padding: '50px 0 30px'
      }}>
        <div className="container">
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 20,
            marginBottom: 30,
            paddingBottom: 30,
            borderBottom: '1px solid rgba(255,255,255,0.1)'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <svg width="32" height="32" viewBox="0 0 64 64" fill="none">
                <rect x="4" y="4" width="56" height="56" rx="8" fill="#FF6B35"/>
                <path d="M16 20C16 16 19 14 22 14C25 14 28 16 28 20V32C28 36 25 38 22 38C19 38 16 36 16 32V20Z" fill="white"/>
                <path d="M22 26H38V30H22V26Z" fill="#2D3747"/>
              </svg>
              <span className="font-oswald" style={{ fontSize: 20, fontWeight: 700 }}>
                ГЛОБЕРГ
              </span>
            </div>
            <div style={{ color: '#718096', fontSize: 14 }}>
              © {new Date().getFullYear()} ООО «Глоберг». Все права защищены. ИНН 6681008939
            </div>
          </div>
          
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 24,
            justifyContent: 'center'
          }}>
            {navItems.map(item => (
              <button
                key={item.id}
                onClick={() => scrollTo(item.id)}
                style={{
                  background: 'none',
                  border: 'none',
                  color: '#718096',
                  cursor: 'pointer',
                  fontSize: 14,
                  transition: 'color 0.3s'
                }}
                onMouseEnter={(e) => e.target.style.color = '#FF6B35'}
                onMouseLeave={(e) => e.target.style.color = '#718096'}
              >
                {item.label}
              </button>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;