import React, { useState } from 'react';

const HomePage = () => {
  // Состояния
  const [aiPrompt, setAiPrompt] = useState('');
  const [activeFilter, setActiveFilter] = useState('all');
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [compareMode, setCompareMode] = useState(false);

  // Данные для примеров
  const examples = [
    { id: 1, title: 'Магазин кроссовок', category: 'ecommerce', img: 'https://via.placeholder.com/300x200?text=Кроссовки' },
    { id: 2, title: 'Каталог отелей', category: 'tourism', img: 'https://via.placeholder.com/300x200?text=Отели' },
    { id: 3, title: 'Сравнение курсов', category: 'education', img: 'https://via.placeholder.com/300x200?text=Курсы' },
    { id: 4, title: 'Недвижимость в Москве', category: 'realty', img: 'https://via.placeholder.com/300x200?text=Недвижимость' },
    { id: 5, title: 'Каталог услуг', category: 'services', img: 'https://via.placeholder.com/300x200?text=Услуги' },
    { id: 6, title: 'Меню ресторана', category: 'services', img: 'https://via.placeholder.com/300x200?text=Ресторан' },
  ];

  const filteredExamples = activeFilter === 'all' 
    ? examples 
    : examples.filter(ex => ex.category === activeFilter);

  // Товары для виджета сравнения
  const products = [
    { id: 1, name: 'Ноутбук A', price: '1200$', cpu: 'Intel i7', ram: '16GB', storage: '512GB SSD' },
    { id: 2, name: 'Ноутбук B', price: '1500$', cpu: 'AMD Ryzen 7', ram: '32GB', storage: '1TB SSD' },
    { id: 3, name: 'Ноутбук C', price: '900$', cpu: 'Intel i5', ram: '8GB', storage: '256GB SSD' },
  ];

  const toggleProduct = (id) => {
    setSelectedProducts(prev =>
      prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]
    );
  };

  const handleCompare = () => {
    setCompareMode(true);
  };

  const selectedProductData = products.filter(p => selectedProducts.includes(p.id));

  // Обработчик генерации
  const handleGenerate = () => {
    if (aiPrompt.trim()) {
      alert(`Генерация сайта по запросу: "${aiPrompt}"\n(в реальном приложении откроется редактор)`);
    } else {
      alert('Пожалуйста, опишите ваш проект');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 font-sans">
      {/* ========== HEADER ========== */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between flex-wrap">
          <div className="flex items-center space-x-2">
            <span className="text-2xl font-bold text-indigo-600">Site.Select</span>
            <span className="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded-full">Beta</span>
          </div>
          <nav className="hidden md:flex space-x-6 text-gray-700 font-medium">
            <a href="#" className="hover:text-indigo-600">Возможности</a>
            <a href="#" className="hover:text-indigo-600">Примеры</a>
            <a href="#" className="hover:text-indigo-600">Цены</a>
            <a href="#" className="hover:text-indigo-600">Блог</a>
          </nav>
          <div className="flex items-center space-x-4">
            <a href="#" className="text-gray-600 hover:text-indigo-600">Войти</a>
            <a href="#" className="bg-indigo-600 text-white px-5 py-2 rounded-full hover:bg-indigo-700 transition">
              Попробовать бесплатно
            </a>
          </div>
        </div>
      </header>

      {/* ========== HERO ========== */}
      <section className="relative bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-20 overflow-hidden">
        <div className="container mx-auto px-4 text-center relative z-10">
          <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 leading-tight">
            Создай каталог, <br className="hidden md:block" />
            в котором <span className="text-indigo-600">хочется выбирать</span>
          </h1>
          <p className="text-xl text-gray-600 mt-4 max-w-2xl mx-auto">
            Опишите свой бизнес словами — ИИ за минуту соберёт структуру, фильтры и дизайн.
            Никакого кода и перетаскивания блоков.
          </p>
          <div className="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-3">
            <input
              type="text"
              value={aiPrompt}
              onChange={(e) => setAiPrompt(e.target.value)}
              placeholder="Например: интернет-магазин кроссовок с фильтром по размеру и бренду"
              className="flex-1 px-5 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
            <button
              onClick={handleGenerate}
              className="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition shadow-lg"
            >
              Сгенерировать сайт
            </button>
          </div>
          <div className="mt-4 flex flex-wrap justify-center gap-2">
            <span className="bg-white px-3 py-1 rounded-full text-sm shadow">🛍️ Каталог одежды</span>
            <span className="bg-white px-3 py-1 rounded-full text-sm shadow">🍽️ Меню ресторана</span>
            <span className="bg-white px-3 py-1 rounded-full text-sm shadow">🏨 Сравнение отелей</span>
            <span className="bg-white px-3 py-1 rounded-full text-sm shadow">📚 База курсов</span>
          </div>
        </div>
        {/* декоративный фон */}
        <div className="absolute -top-16 -right-16 w-64 h-64 bg-indigo-200 rounded-full opacity-30 blur-3xl"></div>
        <div className="absolute -bottom-20 -left-20 w-72 h-72 bg-purple-200 rounded-full opacity-30 blur-3xl"></div>
      </section>

      {/* ========== WHY ========== */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Почему Site.Select</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              { icon: '🤖', title: 'Умный ИИ-архитектор', desc: 'Не просто генерация блоков, а полноценная структура с фильтрами и связями.' },
              { icon: '🔍', title: 'Интерактивные фильтры и сравнение', desc: 'Встроенные виджеты «выбери лучшее», тесты и умный поиск.' },
              { icon: '⚡', title: 'Мгновенная адаптивность', desc: 'Сайт автоматически подстраивается под все устройства.' },
              { icon: '📊', title: 'Аналитика в реальном времени', desc: 'Какие товары чаще сравнивают, где останавливаются пользователи.' },
            ].map((item, idx) => (
              <div key={idx} className="text-center p-6 rounded-2xl bg-gray-50 hover:shadow-lg transition">
                <div className="text-4xl mb-3">{item.icon}</div>
                <h3 className="font-bold text-lg">{item.title}</h3>
                <p className="text-gray-600 text-sm mt-2">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== EXAMPLES с фильтром ========== */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-8">Живые примеры</h2>
          <div className="flex flex-wrap justify-center gap-2 mb-8">
            {['all', 'ecommerce', 'services', 'realty', 'education', 'tourism'].map(cat => (
              <button
                key={cat}
                onClick={() => setActiveFilter(cat)}
                className={`px-4 py-1 rounded-full text-sm font-medium transition ${
                  activeFilter === cat
                    ? 'bg-indigo-600 text-white'
                    : 'bg-white text-gray-700 hover:bg-gray-200'
                }`}
              >
                {cat === 'all' ? 'Все' : cat.charAt(0).toUpperCase() + cat.slice(1)}
              </button>
            ))}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredExamples.map(ex => (
              <div key={ex.id} className="bg-white rounded-xl shadow overflow-hidden hover:shadow-lg transition">
                <img src={ex.img} alt={ex.title} className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="font-semibold">{ex.title}</h3>
                  <button className="mt-2 text-indigo-600 hover:underline text-sm">Посмотреть живой сайт →</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== HOW IT WORKS ========== */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Как это работает</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { step: 1, title: 'Опишите', desc: 'Пишете краткое описание проекта или загружаете прайс-лист Excel.' },
              { step: 2, title: 'Настройте', desc: 'Выбираете тему, загружаете логотип, корректируете структуру.' },
              { step: 3, title: 'Опубликуйте', desc: 'Нажимаете «Опубликовать» и подключаете свой домен.' },
            ].map((item) => (
              <div key={item.step} className="text-center p-6 border border-gray-200 rounded-2xl relative">
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">
                  {item.step}
                </div>
                <h3 className="font-bold text-xl mt-4">{item.title}</h3>
                <p className="text-gray-600 mt-2">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== ИНТЕРАКТИВНЫЙ ВИДЖЕТ СРАВНЕНИЯ ========== */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">Попробуйте сравнение товаров</h2>
          <p className="text-center text-gray-600 mb-8">Выберите два ноутбука и нажмите «Сравнить»</p>
          <div className="flex flex-wrap justify-center gap-6 mb-6">
            {products.map(p => (
              <div key={p.id} className="bg-white p-4 rounded-xl shadow w-48 text-center">
                <h3 className="font-bold">{p.name}</h3>
                <p className="text-gray-600">{p.price}</p>
                <label className="inline-flex items-center mt-2">
                  <input
                    type="checkbox"
                    checked={selectedProducts.includes(p.id)}
                    onChange={() => toggleProduct(p.id)}
                    className="form-checkbox h-5 w-5 text-indigo-600"
                  />
                  <span className="ml-2 text-sm">Выбрать</span>
                </label>
              </div>
            ))}
          </div>
          <div className="text-center">
            <button
              onClick={handleCompare}
              disabled={selectedProducts.length < 2}
              className={`px-6 py-2 rounded-full font-medium ${
                selectedProducts.length >= 2
                  ? 'bg-indigo-600 text-white hover:bg-indigo-700'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
              } transition`}
            >
              Сравнить
            </button>
          </div>
          {compareMode && selectedProducts.length >= 2 && (
            <div className="mt-8 overflow-x-auto">
              <table className="min-w-full bg-white rounded-xl shadow">
                <thead>
                  <tr className="bg-indigo-50">
                    <th className="px-4 py-2 text-left">Характеристика</th>
                    {selectedProductData.map(p => (
                      <th key={p.id} className="px-4 py-2 text-left">{p.name}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {['price', 'cpu', 'ram', 'storage'].map(field => (
                    <tr key={field} className="border-t">
                      <td className="px-4 py-2 font-medium capitalize">{field}</td>
                      {selectedProductData.map(p => (
                        <td key={p.id} className="px-4 py-2">{p[field]}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </section>

      {/* ========== TESTIMONIALS ========== */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Отзывы</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: 'Анна', company: 'Магазин косметики', text: 'Мы запустили каталог из 500 товаров за 15 минут. Раньше на это уходила неделя!' },
              { name: 'Игорь', company: 'Агентство недвижимости', text: 'Клиенты в восторге от удобного сравнения объектов. Конверсия выросла на 30%.' },
              { name: 'Екатерина', company: 'Онлайн-школа', text: 'Создали базу курсов с фильтрами по уровню и цене — студенты легко находят нужное.' },
            ].map((t, idx) => (
              <div key={idx} className="bg-gray-50 p-6 rounded-2xl shadow-sm">
                <p className="text-gray-700 italic">«{t.text}»</p>
                <div className="mt-4 font-semibold">{t.name}</div>
                <div className="text-sm text-gray-500">{t.company}</div>
              </div>
            ))}
          </div>
          <div className="mt-8 text-center text-gray-500 text-sm">
            ⭐ 4.9 на основе 1200+ отзывов
          </div>
        </div>
      </section>

      {/* ========== PRICING ========== */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Выберите тариф</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {[
              { name: 'Базовый', price: '0 ₽', features: ['До 100 товаров', '10 ИИ-запросов/мес', 'Поддомен .site.select'], cta: 'Начать' },
              { name: 'Про', price: '990 ₽/мес', features: ['До 5000 товаров', '100 ИИ-запросов', 'Свой домен', 'Расширенная аналитика'], cta: 'Выбрать', popular: true },
              { name: 'Бизнес', price: '2990 ₽/мес', features: ['Безлимит товаров', 'Безлимит ИИ-запросов', 'Приоритетная поддержка', 'Менеджер'], cta: 'Выбрать' },
            ].map((plan, idx) => (
              <div key={idx} className={`bg-white p-6 rounded-2xl shadow text-center relative ${plan.popular ? 'border-2 border-indigo-600' : ''}`}>
                {plan.popular && <span className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-indigo-600 text-white text-xs px-3 py-1 rounded-full">Популярный</span>}
                <h3 className="text-2xl font-bold">{plan.name}</h3>
                <p className="text-3xl font-extrabold mt-2">{plan.price}</p>
                <ul className="mt-4 space-y-2 text-gray-600">
                  {plan.features.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
                <button className={`mt-6 w-full py-2 rounded-full font-medium ${
                  plan.popular ? 'bg-indigo-600 text-white hover:bg-indigo-700' : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
                } transition`}>
                  {plan.cta}
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== FOOTER ========== */}
      <footer className="bg-gray-900 text-white py-10">
        <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 className="font-bold text-lg">Site.Select</h3>
            <p className="text-gray-400 text-sm mt-2">Создавайте каталоги, в которых хочется выбирать.</p>
          </div>
          <div>
            <h4 className="font-semibold">Продукт</h4>
            <ul className="mt-2 space-y-1 text-gray-400 text-sm">
              <li><a href="#" className="hover:text-white">Возможности</a></li>
              <li><a href="#" className="hover:text-white">Шаблоны</a></li>
              <li><a href="#" className="hover:text-white">Цены</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold">Компания</h4>
            <ul className="mt-2 space-y-1 text-gray-400 text-sm">
              <li><a href="#" className="hover:text-white">О нас</a></li>
              <li><a href="#" className="hover:text-white">Блог</a></li>
              <li><a href="#" className="hover:text-white">Партнёрам</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold">Контакты</h4>
            <ul className="mt-2 space-y-1 text-gray-400 text-sm">
              <li>support@site.select</li>
              <li>+7 (999) 123-45-67</li>
              <li className="flex space-x-2 mt-1">
                <a href="#" className="hover:text-white">Telegram</a>
                <a href="#" className="hover:text-white">YouTube</a>
                <a href="#" className="hover:text-white">GitHub</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="container mx-auto px-4 mt-8 pt-6 border-t border-gray-800 text-gray-400 text-sm flex flex-col md:flex-row justify-between">
          <span>© 2026 Site.Select. Все права защищены.</span>
          <span>
            <a href="#" className="hover:text-white">Политика конфиденциальности</a> · <a href="#" className="hover:text-white">Пользовательское соглашение</a>
          </span>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;