import React, { useState, useEffect } from 'react';
import { Clock, Mail, Phone, X, CheckCircle, Star, Zap, Shield, Activity, ArrowRight, ChevronDown } from 'lucide-react';

export default function RomanPortfolioWebsite() {
  const [selectedProject, setSelectedProject] = useState(null);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    projectType: '',
    message: ''
  });
  const [isSubmitted, setIsSubmitted] = useState(false);

  const [speedPrediction, setSpeedPrediction] = useState({
    pages: 5,
    contentSize: 2,
    features: {
      animations: false,
      video: false,
      ecommerce: false,
      blog: false,
      userAccounts: false
    },
    result: null,
    history: []
  });

  useEffect(() => {
    const savedHistory = localStorage.getItem('speedPredictionHistory');
    if (savedHistory) {
      try {
        const parsedHistory = JSON.parse(savedHistory);
        setSpeedPrediction(prev => ({
          ...prev,
          history: parsedHistory
        }));
      } catch (error) {
        console.error('Error loading prediction history:', error);
      }
    }
  }, []);

  useEffect(() => {
    if (speedPrediction.history.length > 0) {
      localStorage.setItem('speedPredictionHistory', JSON.stringify(speedPrediction.history));
    }
  }, [speedPrediction.history]);

  const handlePredictionInputChange = (e) => {
    const { name, value, type, checked } = e.target;

    if (name.startsWith('feature-')) {
      const featureName = name.replace('feature-', '');
      setSpeedPrediction(prev => ({
        ...prev,
        features: {
          ...prev.features,
          [featureName]: checked
        }
      }));
    } else {
      setSpeedPrediction(prev => ({
        ...prev,
        [name]: type === 'number' ? parseInt(value, 10) : value
      }));
    }
  };

  const calculateSpeedPrediction = () => {
    let baseTime = 1.0;
    baseTime += (speedPrediction.pages * 0.1);
    baseTime += (speedPrediction.contentSize * 0.3);
    if (speedPrediction.features.animations) baseTime += 0.5;
    if (speedPrediction.features.video) baseTime += 1.0;
    if (speedPrediction.features.ecommerce) baseTime += 1.2;
    if (speedPrediction.features.blog) baseTime += 0.3;
    if (speedPrediction.features.userAccounts) baseTime += 0.8;
    const randomFactor = 0.9 + (Math.random() * 0.2);
    baseTime *= randomFactor;
    const finalTime = Math.round(baseTime * 10) / 10;

    let speedCategory;
    if (finalTime < 2.0) {
      speedCategory = 'fast';
    } else if (finalTime < 4.0) {
      speedCategory = 'medium';
    } else {
      speedCategory = 'slow';
    }

    const result = {
      loadTime: finalTime,
      category: speedCategory,
      timestamp: new Date().toISOString()
    };

    setSpeedPrediction(prev => ({
      ...prev,
      result,
      history: [...prev.history, {
        ...result,
        inputs: {
          pages: prev.pages,
          contentSize: prev.contentSize,
          features: {...prev.features}
        }
      }]
    }));
  };

  const getSpeedColor = (category) => {
    switch(category) {
      case 'fast': return 'text-green-500';
      case 'medium': return 'text-yellow-500';
      case 'slow': return 'text-red-500';
      default: return 'text-gray-400';
    }
  };

  const getNeedleAngle = (loadTime) => {
    const maxTime = 8;
    const clampedTime = Math.min(loadTime, maxTime);
    return (clampedTime / maxTime) * 180;
  };

  const portfolioProjects = [
    {
      id: 1,
      title: "Astro Kids Harmonizer",
      shortDescription: "Астрологический сайт для детей с интерактивными элементами",
      description: "Современный астрологический сайт, специально разработанный для детской аудитории. Включает интерактивные гороскопы, красочный дизайн и удобную навигацию.",
      image: "https://assets.sitebrew.ai/generated-1748502305110.webp",
      category: "Детский сайт",
      developmentTime: "45 минут",
      technologies: ["React", "CSS3", "Responsive Design"],
      features: [
        "Яркий детский дизайн",
        "Интерактивные астрологические элементы",
        "Адаптивная верстка для всех устройств",
        "Быстрая загрузка страниц"
      ]
    },
    {
      id: 2,
      title: "Neural Scribe Hub Blog",
      shortDescription: "Современный блог с чистым дизайном и удобной навигацией",
      description: "Профессиональный блог-платформа с современным дизайном, оптимизированная для чтения и SEO. Включает систему комментариев и социальные функции.",
      image: "https://assets.sitebrew.ai/generated-1748502305303.webp",
      category: "Блог",
      developmentTime: "1 час",
      technologies: ["HTML5", "CSS3", "JavaScript", "SEO"],
      features: [
        "Чистый и читаемый дизайн",
        "SEO-оптимизация",
        "Система комментариев",
        "Интеграция с соцсетями"
      ]
    },
    {
      id: 3,
      title: "Speedy Site Landing",
      shortDescription: "Высококонверсионная посадочная страница для продажи курсов",
      description: "Продающая посадочная страница, разработанная для максимальной конверсии. Включает все необходимые элементы для успешных продаж онлайн-курсов.",
      image: "https://assets.sitebrew.ai/generated-1748502306610.webp",
      category: "Landing Page",
      developmentTime: "50 минут",
      technologies: ["React", "Conversion Optimization", "Analytics"],
      features: [
        "Высокая конверсия",
        "A/B тестирование",
        "Интеграция с платежными системами",
        "Аналитика и отслеживание"
      ]
    },
    {
      id: 4,
      title: "Корпоративный сайт",
      shortDescription: "Представительский сайт для IT-компании",
      description: "Современный корпоративный сайт с презентацией услуг, командой и портфолио. Полностью адаптивный дизайн и быстрая загрузка.",
      image: "https://assets.sitebrew.ai/generated-1748502305110.webp",
      category: "Корпоративный",
      developmentTime: "1 час 15 минут",
      technologies: ["React", "TypeScript", "Tailwind CSS"],
      features: [
        "Презентация услуг",
        "Раздел команды",
        "Портфолио проектов",
        "Форма обратной связи"
      ]
    },
    {
      id: 5,
      title: "Интернет-магазин",
      shortDescription: "E-commerce решение с корзиной и оплатой",
      description: "Полнофункциональный интернет-магазин с каталогом товаров, корзиной, системой оплаты и административной панелью.",
      image: "https://assets.sitebrew.ai/generated-1748502305303.webp",
      category: "E-commerce",
      developmentTime: "1 час 30 минут",
      technologies: ["React", "Node.js", "Payment API"],
      features: [
        "Каталог товаров",
        "Корзина покупок",
        "Система оплаты",
        "Административная панель"
      ]
    },
    {
      id: 6,
      title: "Портфолио фотографа",
      shortDescription: "Элегантное портфолио с галереей работ",
      description: "Стильное портфолио для фотографа с красивой галереей, информацией об услугах и формой заказа съемки.",
      image: "https://assets.sitebrew.ai/generated-1748502306610.webp",
      category: "Портфолио",
      developmentTime: "40 минут",
      technologies: ["HTML5", "CSS3", "Lightbox", "Responsive"],
      features: [
        "Галерея с лайтбоксом",
        "Презентация услуг",
        "Форма заказа",
        "Мобильная оптимизация"
      ]
    }
  ];

  const painPoints = [
    {
      icon: Clock,
      title: "Сжатые сроки",
      problem: "Нужен сайт \"еще вчера\", а разработчики говорят о месяцах",
      solution: "Создаю сайты за 1 час. Публикация через 2 часа после утверждения."
    },
    {
      icon: Shield,
      title: "Высокие цены",
      problem: "Стоимость разработки сайта начинается от 50 000 рублей",
      solution: "Мои цены начинаются от 2 500 рублей. Качество не страдает."
    },
    {
      icon: Zap,
      title: "Сложное общение",
      problem: "Разработчики говорят на техническом языке, не понимают бизнес",
      solution: "Говорю простым языком, понимаю потребности бизнеса."
    }
  ];

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitted(true);
    console.log('Form submitted:', formData);
  };

  return (
    <div className="min-h-screen bg-gray-50 font-['Inter',sans-serif]">
      {/* Hero Section - Enhanced with animations and improved layout */}
      <section className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white min-h-screen flex items-center relative overflow-hidden">
        {/* Background decoration elements */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-96 h-96 bg-orange-500 opacity-10 rounded-full blur-3xl"></div>
          <div className="absolute top-1/2 -left-20 w-80 h-80 bg-blue-500 opacity-10 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 right-1/4 w-64 h-64 bg-purple-500 opacity-10 rounded-full blur-3xl"></div>
        </div>

        <div className="container mx-auto px-6 py-20 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <div className="mb-6 inline-block animate-fadeIn">
              <span className="bg-white/10 text-orange-300 text-sm font-medium px-4 py-1.5 rounded-full">
                Профессиональная веб-разработка
              </span>
            </div>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight animate-slideUp">
              Сайты под ключ <span className="text-orange-500 relative">
                за 1 час
                <span className="absolute bottom-1 left-0 w-full h-1 bg-orange-500/30 rounded"></span>
              </span>
            </h1>
            <p className="text-xl md:text-2xl mb-10 text-gray-300 animate-slideUp animation-delay-100">
              Быстро. Качественно. Доступно. От 2 500 рублей.
            </p>
            <div className="flex flex-col sm:flex-row gap-5 justify-center mb-14 animate-slideUp animation-delay-200">
              <div className="flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-xl px-6 py-4 transition-transform hover:transform hover:scale-105">
                <Clock className="text-orange-400 mr-3" size={24} />
                <span className="font-medium">1 час разработки</span>
              </div>
              <div className="flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-xl px-6 py-4 transition-transform hover:transform hover:scale-105">
                <Zap className="text-orange-400 mr-3" size={24} />
                <span className="font-medium">2 часа до публикации</span>
              </div>
              <div className="flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-xl px-6 py-4 transition-transform hover:transform hover:scale-105">
                <Star className="text-orange-400 mr-3" size={24} />
                <span className="font-medium">От 2 500 ₽</span>
              </div>
            </div>
            <button
              onClick={() => document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })}
              className="group bg-gradient-to-r from-orange-500 to-orange-600 text-white font-bold py-4 px-10 rounded-xl text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-orange-500/20 animate-slideUp animation-delay-300 flex items-center justify-center mx-auto"
            >
              Получить бесплатный макет
              <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
            </button>

            <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
              <ChevronDown size={24} className="text-gray-400" />
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Section - Enhanced card design and hover effects */}
      <section className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <span className="text-orange-500 font-medium text-sm uppercase tracking-wider mb-3 block">Портфолио</span>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Мои работы
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Каждый проект создан с нуля за рекордное время без потери качества
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {portfolioProjects.map((project) => (
              <div
                key={project.id}
                onClick={() => setSelectedProject(project)}
                className="group bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/60 border border-gray-100 hover:border-gray-200"
              >
                <div className="relative overflow-hidden h-56">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                    <div className="text-white p-6">
                      <p className="font-medium">Нажмите для подробностей</p>
                    </div>
                  </div>
                </div>
                <div className="p-6">
                  <div className="flex items-center mb-3">
                    <span className="px-3 py-1 bg-orange-100 text-orange-600 text-xs font-medium rounded-full">
                      {project.category}
                    </span>
                    <span className="text-gray-400 text-sm ml-auto">{project.developmentTime}</span>
                  </div>
                  <h3 className="font-bold text-slate-800 text-lg mb-2 group-hover:text-orange-500 transition-colors">
                    {project.title}
                  </h3>
                  <p className="text-gray-600 text-sm">{project.shortDescription}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pain Points Section - Enhanced with better cards and icons */}
      <section className="py-24 bg-gray-50">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <span className="text-orange-500 font-medium text-sm uppercase tracking-wider mb-3 block">Решения</span>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Знакомые проблемы?
            </h2>
            <p className="text-xl text-gray-600">
              Я решаю типичные боли при заказе сайтов
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {painPoints.map((point, index) => (
              <div key={index} className="bg-white rounded-xl p-8 shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-lg hover:shadow-slate-200/60 hover:border-gray-200">
                <div className="flex items-center mb-6">
                  <div className="bg-gradient-to-br from-orange-500 to-orange-600 p-4 rounded-xl text-white shadow-lg shadow-orange-500/20 mr-5">
                    <point.icon size={24} />
                  </div>
                  <h3 className="text-xl font-bold text-slate-800">{point.title}</h3>
                </div>
                <div className="mb-5 pb-5 border-b border-gray-100">
                  <h4 className="font-semibold text-red-600 mb-3 flex items-center">
                    <span className="w-1.5 h-1.5 bg-red-600 rounded-full mr-2"></span>
                    Проблема:
                  </h4>
                  <p className="text-gray-600">{point.problem}</p>
                </div>
                <div>
                  <h4 className="font-semibold text-green-600 mb-3 flex items-center">
                    <span className="w-1.5 h-1.5 bg-green-600 rounded-full mr-2"></span>
                    Решение:
                  </h4>
                  <p className="text-gray-600">{point.solution}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section - Enhanced with better layout and styling */}
      <section className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div className="relative">
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-orange-100 rounded-full z-0"></div>
                <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-100 rounded-full z-0"></div>
                <img
                  src="https://assets.sitebrew.ai/generated-1748502305406.webp"
                  alt="Роман Данилов"
                  className="w-full max-w-md mx-auto rounded-xl shadow-xl relative z-10"
                />
              </div>
              <div>
                <span className="text-orange-500 font-medium text-sm uppercase tracking-wider mb-3 block">Обо мне</span>
                <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-6">
                  Роман Данилов
                </h2>
                <p className="text-xl text-gray-600 mb-8">
                  Специалист по быстрой разработке сайтов с многолетним опытом и сотнями успешных проектов
                </p>
                <div className="space-y-5 mb-10">
                  <div className="flex items-start bg-gray-50 p-4 rounded-lg">
                    <CheckCircle className="text-green-500 mr-4 mt-1 flex-shrink-0" size={20} />
                    <div>
                      <h4 className="font-medium text-slate-800">5+ лет опыта в веб-разработке</h4>
                      <p className="text-sm text-gray-600 mt-1">Работаю с современными технологиями и фреймворками</p>
                    </div>
                  </div>
                  <div className="flex items-start bg-gray-50 p-4 rounded-lg">
                    <CheckCircle className="text-green-500 mr-4 mt-1 flex-shrink-0" size={20} />
                    <div>
                      <h4 className="font-medium text-slate-800">100+ успешно реализованных проектов</h4>
                      <p className="text-sm text-gray-600 mt-1">От лендингов до сложных корпоративных сайтов</p>
                    </div>
                  </div>
                  <div className="flex items-start bg-gray-50 p-4 rounded-lg">
                    <CheckCircle className="text-green-500 mr-4 mt-1 flex-shrink-0" size={20} />
                    <div>
                      <h4 className="font-medium text-slate-800">Специализация на скоростной разработке</h4>
                      <p className="text-sm text-gray-600 mt-1">Уникальная методология для быстрого создания сайтов</p>
                    </div>
                  </div>
                  <div className="flex items-start bg-gray-50 p-4 rounded-lg">
                    <CheckCircle className="text-green-500 mr-4 mt-1 flex-shrink-0" size={20} />
                    <div>
                      <h4 className="font-medium text-slate-800">Гарантия качества и поддержка</h4>
                      <p className="text-sm text-gray-600 mt-1">Сопровождение проекта после запуска</p>
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })}
                  className="group bg-slate-800 hover:bg-slate-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 flex items-center"
                >
                  Обсудить проект
                  <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Speed Prediction Tool Section - Completely redesigned for better UX */}
      <section className="py-24 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <span className="text-orange-500 font-medium text-sm uppercase tracking-wider mb-3 block">Инструмент</span>
              <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
                Предсказание скорости сайта
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Узнайте, насколько быстрым будет ваш сайт на основе требований проекта
              </p>
            </div>

            <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
              <div className="grid grid-cols-1 lg:grid-cols-2">
                {/* Input Form - Left side */}
                <div className="p-8 lg:p-10 bg-gray-50 border-r border-gray-100">
                  <h3 className="text-xl font-bold text-slate-800 mb-8 flex items-center">
                    <div className="w-8 h-8 bg-orange-100 text-orange-600 rounded-lg flex items-center justify-center mr-3">1</div>
                    Параметры проекта
                  </h3>

                  <div className="mb-8">
                    <div className="flex justify-between mb-2">
                      <label className="block text-sm font-medium text-slate-700">
                        Количество страниц
                      </label>
                      <span className="text-orange-500 font-medium">{speedPrediction.pages}</span>
                    </div>
                    <input
                      type="range"
                      name="pages"
                      min="1"
                      max="50"
                      value={speedPrediction.pages}
                      onChange={handlePredictionInputChange}
                      className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-orange-500"
                    />
                    <div className="flex justify-between text-xs text-gray-500 mt-2">
                      <span>1</span>
                      <span>25</span>
                      <span>50</span>
                    </div>
                  </div>

                  <div className="mb-8">
                    <div className="flex justify-between mb-2">
                      <label className="block text-sm font-medium text-slate-700">
                        Размер контента
                      </label>
                      <span className="text-orange-500 font-medium">{speedPrediction.contentSize} МБ</span>
                    </div>
                    <input
                      type="range"
                      name="contentSize"
                      min="1"
                      max="10"
                      value={speedPrediction.contentSize}
                      onChange={handlePredictionInputChange}
                      className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-orange-500"
                    />
                    <div className="flex justify-between text-xs text-gray-500 mt-2">
                      <span>1 МБ</span>
                      <span>5 МБ</span>
                      <span>10 МБ</span>
                    </div>
                  </div>

                  <div className="mb-8">
                    <label className="block text-sm font-medium text-slate-700 mb-3">Функциональность:</label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <div className="flex items-center p-3 bg-white rounded-lg border border-gray-200 transition-colors hover:border-orange-200">
                        <input
                          type="checkbox"
                          id="feature-animations"
                          name="feature-animations"
                          checked={speedPrediction.features.animations}
                          onChange={handlePredictionInputChange}
                          className="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded"
                        />
                        <label htmlFor="feature-animations" className="ml-3 text-sm text-gray-700">
                          Анимации и эффекты
                        </label>
                      </div>
                      <div className="flex items-center p-3 bg-white rounded-lg border border-gray-200 transition-colors hover:border-orange-200">
                        <input
                          type="checkbox"
                          id="feature-video"
                          name="feature-video"
                          checked={speedPrediction.features.video}
                          onChange={handlePredictionInputChange}
                          className="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded"
                        />
                        <label htmlFor="feature-video" className="ml-3 text-sm text-gray-700">
                          Видео контент
                        </label>
                      </div>
                      <div className="flex items-center p-3 bg-white rounded-lg border border-gray-200 transition-colors hover:border-orange-200">
                        <input
                          type="checkbox"
                          id="feature-ecommerce"
                          name="feature-ecommerce"
                          checked={speedPrediction.features.ecommerce}
                          onChange={handlePredictionInputChange}
                          className="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded"
                        />
                        <label htmlFor="feature-ecommerce" className="ml-3 text-sm text-gray-700">
                          Интернет-магазин
                        </label>
                      </div>
                      <div className="flex items-center p-3 bg-white rounded-lg border border-gray-200 transition-colors hover:border-orange-200">
                        <input
                          type="checkbox"
                          id="feature-blog"
                          name="feature-blog"
                          checked={speedPrediction.features.blog}
                          onChange={handlePredictionInputChange}
                          className="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded"
                        />
                        <label htmlFor="feature-blog" className="ml-3 text-sm text-gray-700">
                          Блог
                        </label>
                      </div>
                      <div className="flex items-center p-3 bg-white rounded-lg border border-gray-200 transition-colors hover:border-orange-200">
                        <input
                          type="checkbox"
                          id="feature-userAccounts"
                          name="feature-userAccounts"
                          checked={speedPrediction.features.userAccounts}
                          onChange={handlePredictionInputChange}
                          className="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded"
                        />
                        <label htmlFor="feature-userAccounts" className="ml-3 text-sm text-gray-700">
                          Пользовательские аккаунты
                        </label>
                      </div>
                    </div>
                  </div>

                  <button
                    onClick={calculateSpeedPrediction}
                    className="group w-full bg-gradient-to-r from-orange-500 to-orange-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center"
                  >
                    Рассчитать скорость
                    <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                  </button>
                </div>

                {/* Results Display - Right side */}
                <div className="p-8 lg:p-10 flex flex-col">
                  <h3 className="text-xl font-bold text-slate-800 mb-8 flex items-center">
                    <div className="w-8 h-8 bg-orange-100 text-orange-600 rounded-lg flex items-center justify-center mr-3">2</div>
                    Результат предсказания
                  </h3>

                  {speedPrediction.result ? (
                    <div className="flex flex-col items-center flex-grow">
                      <div className="text-center mb-8">
                        <div className="text-4xl font-bold mb-2">
                          <span className={getSpeedColor(speedPrediction.result.category)}>
                            {speedPrediction.result.loadTime} сек
                          </span>
                        </div>
                        <p className="text-gray-600">
                          Ожидаемое время загрузки вашего сайта
                        </p>
                      </div>

                      {/* Enhanced Speed Gauge */}
                      <div className="relative w-64 h-32 mb-10">
                        {/* Gauge Background with better gradient */}
                        <div className="absolute w-full h-full overflow-hidden">
                          <div className="w-full h-full bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 rounded-t-full opacity-80"></div>
                        </div>

                        {/* Gauge Cover with better styling */}
                        <div className="absolute w-full h-full flex items-center justify-center">
                          <div className="w-[90%] h-[90%] bg-white rounded-t-full shadow-inner"></div>
                        </div>

                        {/* Gauge Markings with tick marks */}
                        <div className="absolute w-full h-full">
                          <div className="w-full h-full flex items-end justify-between px-6 pb-4">
                            <div className="flex flex-col items-center">
                              <div className="h-3 w-0.5 bg-red-500 mb-1"></div>
                              <span className="text-xs font-medium text-red-500">Медленно</span>
                            </div>
                            <div className="flex flex-col items-center">
                              <div className="h-3 w-0.5 bg-yellow-500 mb-1"></div>
                              <span className="text-xs font-medium text-yellow-500">Средне</span>
                            </div>
                            <div className="flex flex-col items-center">
                              <div className="h-3 w-0.5 bg-green-500 mb-1"></div>
                              <span className="text-xs font-medium text-green-500">Быстро</span>
                            </div>
                          </div>
                        </div>

                        {/* Gauge Needle with animation */}
                        <div 
                          className="absolute bottom-0 left-1/2 w-1 h-24 bg-slate-800 origin-bottom transform -translate-x-1/2 transition-transform duration-1000"
                          style={{ transform: `translateX(-50%) rotate(${getNeedleAngle(speedPrediction.result.loadTime)}deg)` }}
                        >
                          <div className="w-3 h-3 rounded-full bg-slate-800 absolute -left-1 -top-1 shadow"></div>
                        </div>

                        {/* Gauge Center with better styling */}
                        <div className="absolute bottom-0 left-1/2 w-5 h-5 bg-slate-800 rounded-full transform -translate-x-1/2 translate-y-1/2 shadow-lg"></div>
                      </div>

                      {/* Recommendations with better styling */}
                      <div className="bg-gray-50 p-6 rounded-xl border border-gray-200 w-full">
                        <h4 className="font-semibold text-slate-800 mb-4 pb-3 border-b border-gray-200">Рекомендации по оптимизации:</h4>
                        <ul className="space-y-3">
                          {speedPrediction.result.loadTime > 3 && (
                            <li className="flex items-start">
                              <div className="bg-orange-100 p-1 rounded-full mr-3 mt-0.5">
                                <CheckCircle className="text-orange-500" size={14} />
                              </div>
                              <span className="text-gray-700">Оптимизация изображений и медиа-контента</span>
                            </li>
                          )}
                          {speedPrediction.features.animations && (
                            <li className="flex items-start">
                              <div className="bg-orange-100 p-1 rounded-full mr-3 mt-0.5">
                                <CheckCircle className="text-orange-500" size={14} />
                              </div>
                              <span className="text-gray-700">Упрощение анимаций или их отложенная загрузка</span>
                            </li>
                          )}
                          {speedPrediction.features.video && (
                            <li className="flex items-start">
                              <div className="bg-orange-100 p-1 rounded-full mr-3 mt-0.5">
                                <CheckCircle className="text-orange-500" size={14} />
                              </div>
                              <span className="text-gray-700">Использование оптимизированных видео-плееров</span>
                            </li>
                          )}
                          {speedPrediction.contentSize > 3 && (
                            <li className="flex items-start">
                              <div className="bg-orange-100 p-1 rounded-full mr-3 mt-0.5">
                                <CheckCircle className="text-orange-500" size={14} />
                              </div>
                              <span className="text-gray-700">Сжатие и минификация ресурсов</span>
                            </li>
                          )}
                          <li className="flex items-start">
                            <div className="bg-orange-100 p-1 rounded-full mr-3 mt-0.5">
                              <CheckCircle className="text-orange-500" size={14} />
                            </div>
                            <span className="text-gray-700">Использование кэширования браузера</span>
                          </li>
                        </ul>
                      </div>

                      <button
                        onClick={() => document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })}
                        className="group mt-8 bg-slate-800 hover:bg-slate-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 w-full flex items-center justify-center"
                      >
                        Получить оптимизированный сайт
                        <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                      </button>
                    </div>
                  ) : (
                    <div className="flex flex-col items-center justify-center flex-grow">
                      <div className="bg-gray-50 p-8 rounded-xl border border-gray-200 w-full text-center">
                        <Activity size={64} className="text-gray-300 mb-6 mx-auto" />
                        <h4 className="text-lg font-medium text-slate-700 mb-3">Готовы узнать скорость вашего сайта?</h4>
                        <p className="text-gray-500">
                          Заполните параметры проекта слева и нажмите "Рассчитать скорость" для получения предсказания
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section - Enhanced form design */}
      <section id="contact" className="py-24 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <span className="bg-white/10 text-orange-300 text-sm font-medium px-4 py-1.5 rounded-full inline-block mb-3">
                Свяжитесь со мной
              </span>
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Получите бесплатный макет
              </h2>
              <p className="text-xl text-gray-300">
                Опишите ваш проект, и я создам макет бесплатно
              </p>
            </div>

            {!isSubmitted ? (
              <form onSubmit={handleSubmit} className="bg-white rounded-2xl p-8 md:p-10 text-gray-800 shadow-2xl">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                  <div>
                    <label className="block text-sm font-medium mb-2 text-slate-700">Ваше имя *</label>
                    <div className="relative">
                      <input
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        required
                        className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
                        placeholder="Введите ваше имя"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2 text-slate-700">Email *</label>
                    <div className="relative">
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        required
                        className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
                        placeholder="your@email.com"
                      />
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                  <div>
                    <label className="block text-sm font-medium mb-2 text-slate-700">Телефон</label>
                    <div className="relative">
                      <input
                        type="tel"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
                        placeholder="+7 (999) 123-45-67"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2 text-slate-700">Тип проекта</label>
                    <div className="relative">
                      <select
                        name="projectType"
                        value={formData.projectType}
                        onChange={handleInputChange}
                        className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent appearance-none transition-all"
                      >
                        <option value="">Выберите тип</option>
                        <option value="landing">Landing Page</option>
                        <option value="corporate">Корпоративный сайт</option>
                        <option value="portfolio">Портфолио</option>
                        <option value="blog">Блог</option>
                        <option value="ecommerce">Интернет-магазин</option>
                        <option value="other">Другое</option>
                      </select>
                      <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                        <ChevronDown size={20} className="text-gray-400" />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="mb-8">
                  <label className="block text-sm font-medium mb-2 text-slate-700">Описание проекта</label>
                  <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    rows={4}
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
                    placeholder="Расскажите о вашем проекте, целях и пожеланиях..."
                  />
                </div>

                <button
                  type="submit"
                  className="group w-full bg-gradient-to-r from-orange-500 to-orange-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-orange-500/20 flex items-center justify-center"
                >
                  Получить бесплатный макет
                  <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                </button>

                <p className="text-sm text-gray-500 mt-4 text-center">
                  * Обязательные поля. Ваши данные защищены и не передаются третьим лицам.
                </p>
              </form>
            ) : (
              <div className="bg-green-50 border border-green-100 text-green-700 px-8 py-10 rounded-2xl text-center shadow-xl">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <CheckCircle className="text-green-500" size={32} />
                </div>
                <h3 className="text-2xl font-bold mb-4 text-green-800">Спасибо за заявку!</h3>
                <p className="text-lg">
                  Я свяжусь с вами в течение 30 минут и предоставлю бесплатный макет вашего сайта.
                </p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Footer - Enhanced design */}
      <footer className="bg-slate-900 text-white py-12">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto text-center">
            <div className="mb-8">
              <h3 className="text-2xl font-bold mb-2">Роман Данилов</h3>
              <p className="text-gray-400">Специалист по быстрой разработке сайтов</p>
            </div>
            <div className="flex flex-col md:flex-row justify-center gap-4 md:gap-8 mb-8">
              <a href="mailto:roman@example.com" className="flex items-center justify-center bg-slate-800 hover:bg-slate-700 px-6 py-3 rounded-xl transition-colors">
                <Mail size={20} className="mr-3 text-orange-400" />
                roman@example.com
              </a>
              <a href="tel:+79991234567" className="flex items-center justify-center bg-slate-800 hover:bg-slate-700 px-6 py-3 rounded-xl transition-colors">
                <Phone size={20} className="mr-3 text-orange-400" />
                +7 (999) 123-45-67
              </a>
            </div>
            <div className="pt-8 border-t border-slate-800">
              <p className="text-gray-500">
                © 2024 Роман Данилов. Быстрая разработка сайтов.
              </p>
            </div>
          </div>
        </div>
      </footer>

      {/* Portfolio Modal - Enhanced design */}
      {selectedProject && (
        <div className="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
          <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
            <div className="relative">
              <button
                onClick={() => setSelectedProject(null)}
                className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100 transition-colors"
              >
                <X size={20} className="text-gray-600" />
              </button>
              <div className="h-64 md:h-80 overflow-hidden">
                <img
                  src={selectedProject.image}
                  alt={selectedProject.title}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="p-8">
                <div className="flex items-center mb-4">
                  <span className="px-3 py-1 bg-orange-100 text-orange-600 text-xs font-medium rounded-full">
                    {selectedProject.category}
                  </span>
                  <span className="text-gray-400 text-sm ml-auto">{selectedProject.developmentTime}</span>
                </div>
                <h3 className="text-2xl font-bold text-slate-800 mb-4">{selectedProject.title}</h3>
                <p className="text-gray-600 mb-6 leading-relaxed">{selectedProject.description}</p>
                <div className="mb-6">
                  <h4 className="font-semibold text-slate-800 mb-3">Особенности проекта:</h4>
                  <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    {selectedProject.features.map((feature, index) => (
                      <li key={index} className="flex items-start">
                        <div className="bg-orange-100 p-1 rounded-full mr-3 mt-1">
                          <CheckCircle className="text-orange-500" size={12} />
                        </div>
                        <span className="text-gray-700">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="mb-6">
                  <h4 className="font-semibold text-slate-800 mb-3">Технологии:</h4>
                  <div className="flex flex-wrap gap-2">
                    {selectedProject.technologies.map((tech, index) => (
                      <span
                        key={index}
                        className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                </div>
                <button
                  onClick={() => {
                    setSelectedProject(null);
                    document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
                  }}
                  className="group bg-slate-800 hover:bg-slate-700 text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 flex items-center"
                >
                  Заказать похожий проект
                  <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Add CSS animations */}
      <style jsx>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        @keyframes slideUp {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out forwards;
        }

        .animate-slideUp {
          animation: slideUp 0.5s ease-out forwards;
        }

        .animation-delay-100 {
          animation-delay: 0.1s;
        }

        .animation-delay-200 {
          animation-delay: 0.2s;
        }

        .animation-delay-300 {
          animation-delay: 0.3s;
        }
      `}</style>
    </div>
  );
}