
import { Shield, Phone, Clock, CheckCircle, Users, Award, Wrench, CameraIcon, Building2, Home, Factory, PhoneCall, ArrowRight, Star, Settings, Zap, HeadphonesIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import ContactForm from '@/components/contact-form'
import Image from 'next/image'
import InteractiveButtons from '@/components/interactive-buttons'

export default function LandingPage() {
  return (
    <main className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-gray-900 to-black">
        <div className="absolute inset-0">
          <Image
            src="https://www.advancedcontrolcorp.com/wp-content/uploads/2021/08/CCTV-Solutions-in-South-Florida.jpg"
            alt="Профессиональное видеонаблюдение"
            fill
            className="object-cover opacity-30"
            priority
          />
        </div>
        <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 py-12 text-center text-white">
          <div className="mb-6 sm:mb-8">
            <Shield className="mx-auto h-12 w-12 sm:h-16 sm:w-16 text-blue-400 mb-4" />
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-blue-400 to-white bg-clip-text text-transparent leading-tight">
              Профессиональный монтаж<br />видеонаблюдения
            </h1>
            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-300 mb-3 sm:mb-4 max-w-3xl mx-auto px-2">
              Системы безопасности <span className="text-blue-400 font-semibold">любой сложности</span> в Москве
            </p>
            <p className="text-sm sm:text-base md:text-lg text-gray-400 mb-6 sm:mb-8 px-2">
              От частных домов до крупных промышленных объектов
            </p>
          </div>
          
          <div className="mb-8 sm:mb-12">
            <InteractiveButtons variant="hero" />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 max-w-4xl mx-auto">
            <div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
              <Clock className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
              <h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">24/7 поддержка</h3>
              <p className="text-gray-300 text-xs sm:text-sm">Круглосуточная техническая поддержка</p>
            </div>
            <div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
              <Award className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
              <h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">Гарантия качества</h3>
              <p className="text-gray-300 text-xs sm:text-sm">Официальная гарантия на все работы</p>
            </div>
            <div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
              <Users className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
              <h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">Опытная команда</h3>
              <p className="text-gray-300 text-xs sm:text-sm">Сертифицированные специалисты</p>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-12 sm:py-16 md:py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-10 sm:mb-12 md:mb-16">
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
              Наши услуги
            </h2>
            <p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
              Полный спектр услуг по установке и обслуживанию систем видеонаблюдения
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="hover:shadow-lg transition-shadow duration-300 group">
              <div className="relative h-48 overflow-hidden rounded-t-lg">
                <Image
                  src="/home-security.jpg"
                  alt="Домашнее видеонаблюдение"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Home className="mr-2 h-6 w-6 text-blue-600" />
                  Частные дома и квартиры
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  Системы видеонаблюдения для защиты вашего дома и семьи
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Внутренние и внешние камеры
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Мобильное приложение
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Ночное видение
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow duration-300 group">
              <div className="relative h-48 overflow-hidden rounded-t-lg">
                <Image
                  src="/commercial-security.jpg"
                  alt="Коммерческое видеонаблюдение"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Building2 className="mr-2 h-6 w-6 text-blue-600" />
                  Коммерческие объекты
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  Профессиональные решения для бизнеса и офисов
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Системы контроля доступа
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Интеграция с охранной системой
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Центральный мониторинг
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow duration-300 group">
              <div className="relative h-48 overflow-hidden rounded-t-lg">
                <Image
                  src="/industrial-security.jpg"
                  alt="Промышленное видеонаблюдение"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Factory className="mr-2 h-6 w-6 text-blue-600" />
                  Промышленные объекты
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  Комплексные решения для крупных предприятий
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Периметральная защита
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Тепловизионные камеры
                  </li>
                  <li className="flex items-center text-sm text-gray-600">
                    <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
                    Аналитические функции
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-12 sm:py-16 md:py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-10 sm:mb-12 md:mb-16">
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
              Почему выбирают Global-IT24
            </h2>
            <p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
              Мы предоставляем надежные решения безопасности с гарантией качества
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center group">
              <div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
                <Shield className="h-8 w-8 text-blue-600 mx-auto" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Надежность</h3>
              <p className="text-gray-600">
                Используем только проверенное оборудование ведущих мировых брендов
              </p>
            </div>

            <div className="text-center group">
              <div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
                <Zap className="h-8 w-8 text-blue-600 mx-auto" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Быстрый монтаж</h3>
              <p className="text-gray-600">
                Профессиональная установка в кратчайшие сроки без ущерба качеству
              </p>
            </div>

            <div className="text-center group">
              <div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
                <HeadphonesIcon className="h-8 w-8 text-blue-600 mx-auto" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Поддержка 24/7</h3>
              <p className="text-gray-600">
                Круглосуточная техническая поддержка и оперативное решение проблем
              </p>
            </div>

            <div className="text-center group">
              <div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
                <Star className="h-8 w-8 text-blue-600 mx-auto" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Гарантия качества</h3>
              <p className="text-gray-600">
                Предоставляем расширенную гарантию на все виды работ и оборудование
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section className="py-12 sm:py-16 md:py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-10 sm:mb-12 md:mb-16">
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
              Как мы работаем
            </h2>
            <p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
              Простой и прозрачный процесс от консультации до запуска системы
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="relative">
              <div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
                  1
                </div>
                <h3 className="text-xl font-semibold mb-3">Консультация</h3>
                <p className="text-gray-600">
                  Бесплатная консультация и выезд специалиста для оценки объекта
                </p>
              </div>
              <div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
                <ArrowRight className="h-8 w-8 text-gray-300" />
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
                  2
                </div>
                <h3 className="text-xl font-semibold mb-3">Проектирование</h3>
                <p className="text-gray-600">
                  Разработка индивидуального проекта с учетом ваших потребностей
                </p>
              </div>
              <div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
                <ArrowRight className="h-8 w-8 text-gray-300" />
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
                  3
                </div>
                <h3 className="text-xl font-semibold mb-3">Монтаж</h3>
                <p className="text-gray-600">
                  Профессиональная установка оборудования и настройка системы
                </p>
              </div>
              <div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
                <ArrowRight className="h-8 w-8 text-gray-300" />
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
                  4
                </div>
                <h3 className="text-xl font-semibold mb-3">Запуск</h3>
                <p className="text-gray-600">
                  Тестирование системы, обучение пользователей и сдача объекта
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-12 sm:py-16 md:py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-10 sm:mb-12 md:mb-16">
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
              Пакеты услуг
            </h2>
            <p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
              Выберите оптимальное решение для вашего объекта
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="hover:shadow-xl transition-shadow duration-300 border-2 hover:border-blue-200">
              <CardHeader className="text-center">
                <CardTitle className="text-2xl mb-2">Базовый</CardTitle>
                <p className="text-gray-600 mb-4">Для небольших объектов</p>
                <div className="text-3xl font-bold text-blue-600">
                  от 25,000₽
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>До 4 камер</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Базовый регистратор</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Мобильное приложение</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Гарантия 1 год</span>
                </div>
                <InteractiveButtons variant="pricing" />
              </CardContent>
            </Card>

            <Card className="hover:shadow-xl transition-shadow duration-300 border-2 border-blue-500 relative overflow-hidden">
              <div className="absolute top-0 left-0 right-0 bg-blue-500 text-white text-center py-2 text-sm font-semibold">
                Популярный выбор
              </div>
              <CardHeader className="text-center pt-10">
                <CardTitle className="text-2xl mb-2">Стандартный</CardTitle>
                <p className="text-gray-600 mb-4">Для средних объектов</p>
                <div className="text-3xl font-bold text-blue-600">
                  от 65,000₽
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>До 8 камер</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Профессиональный регистратор</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Удаленный доступ</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Ночное видение</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Гарантия 2 года</span>
                </div>
                <InteractiveButtons variant="pricing" />
              </CardContent>
            </Card>

            <Card className="hover:shadow-xl transition-shadow duration-300 border-2 hover:border-blue-200">
              <CardHeader className="text-center">
                <CardTitle className="text-2xl mb-2">Премиум</CardTitle>
                <p className="text-gray-600 mb-4">Для крупных объектов</p>
                <div className="text-3xl font-bold text-blue-600">
                  от 150,000₽
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>16+ камер</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Серверное решение</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Аналитические функции</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Интеграция с системами</span>
                </div>
                <div className="flex items-center">
                  <CheckCircle className="mr-3 h-5 w-5 text-green-500" />
                  <span>Гарантия 3 года</span>
                </div>
                <InteractiveButtons variant="pricing" />
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact-section" className="py-12 sm:py-16 md:py-20 bg-gray-900 text-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 lg:gap-12 items-center">
            <div>
              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
                Получите бесплатную консультацию
              </h2>
              <p className="text-base sm:text-lg md:text-xl text-gray-300 mb-6 sm:mb-8">
                Наш специалист выедет на объект, проведет анализ и предложит оптимальное решение
              </p>
              
              <div className="space-y-4 sm:space-y-6">
                <div className="flex items-center">
                  <Phone className="h-5 w-5 sm:h-6 sm:w-6 text-blue-400 mr-3 sm:mr-4 flex-shrink-0" />
                  <div>
                    <p className="font-semibold text-base sm:text-lg">8(985)489-16-19</p>
                    <p className="text-gray-400 text-sm sm:text-base">Звоните круглосуточно</p>
                  </div>
                </div>
                
                <div className="flex items-center">
                  <Settings className="h-5 w-5 sm:h-6 sm:w-6 text-blue-400 mr-3 sm:mr-4 flex-shrink-0" />
                  <div>
                    <p className="font-semibold text-sm sm:text-base">Global-IT24</p>
                    <p className="text-gray-400 text-sm sm:text-base">Профессиональные системы безопасности</p>
                  </div>
                </div>

                <div className="flex items-center">
                  <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
                  <p className="text-gray-300 text-sm sm:text-base">Выезд специалиста - бесплатно</p>
                </div>
              </div>
            </div>

            <div id="contact-form" className="bg-white rounded-lg p-4 sm:p-6 md:p-8 text-gray-900">
              <h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-center">
                Оставьте заявку
              </h3>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-8 sm:py-10 md:py-12">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
            <div>
              <h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 flex items-center">
                <Shield className="mr-2 h-5 w-5 sm:h-6 sm:w-6 text-blue-400" />
                Global-IT24
              </h3>
              <p className="text-gray-400 mb-3 sm:mb-4 text-sm sm:text-base">
                Профессиональные системы видеонаблюдения в Москве
              </p>
              <div className="flex items-center">
                <Phone className="h-4 w-4 text-blue-400 mr-2 flex-shrink-0" />
                <span className="font-semibold text-sm sm:text-base">8(985)489-16-19</span>
              </div>
            </div>

            <div>
              <h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Услуги</h4>
              <ul className="space-y-2 text-gray-400 text-sm sm:text-base">
                <li>Домашнее видеонаблюдение</li>
                <li>Коммерческие системы</li>
                <li>Промышленное видеонаблюдение</li>
                <li>Техническое обслуживание</li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Преимущества</h4>
              <ul className="space-y-2 text-gray-400 text-sm sm:text-base">
                <li>Гарантия качества</li>
                <li>Поддержка 24/7</li>
                <li>Опытная команда</li>
                <li>Современное оборудование</li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Контакты</h4>
              <ul className="space-y-2 text-gray-400 text-sm sm:text-base">
                <li>Москва и область</li>
                <li>8(985)489-16-19</li>
                <li>Консультации 24/7</li>
                <li>Выезд специалиста</li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-700 mt-6 sm:mt-8 pt-6 sm:pt-8 text-center">
            <p className="text-gray-400 text-xs sm:text-sm">
              © 2024 Global-IT24. Все права защищены. Профессиональный монтаж видеонаблюдения в Москве.
            </p>
          </div>
        </div>
      </footer>
    </main>
  )
}
