export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      <nav className="border-b border-white/10 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg"></div>
              <span className="text-white font-bold text-xl">AI News Hub</span>
            </div>
            <button className="bg-white text-slate-900 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition-colors">
              Получить доступ
            </button>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="text-center mb-20">
          <div className="inline-flex items-center px-4 py-2 bg-purple-500/20 rounded-full text-purple-300 text-sm font-medium mb-6">
            🚀 Для разработчиков, которые хотят быть на шаг впереди
          </div>
          
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
            Превращаем{' '}
            <span className="bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
              новости
            </span>{' '}
            в рабочие мануалы
          </h1>
          
          <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
            Получайте AI-новости и аналитику, которые сразу можно протестировать. 
            Не просто читайте — погружайтесь в код вместе с вашим AI-ассистентом!
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:shadow-2xl hover:shadow-purple-500/25 transition-all">
              🎯 Начать бесплатно
            </button>
            <button className="border border-white/20 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white/10 transition-colors">
              📖 Узнать больше
            </button>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-20">
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
            <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
              🔄
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Конвертация в реальном времени</h3>
            <p className="text-gray-400">
              Любая новость мгновенно превращается в рабочий мануал с готовым кодом
            </p>
          </div>
          
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
            <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
              🤖
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Тестирование AI-ассистентом</h3>
            <p className="text-gray-400">
              Ваш код-помощник может сразу протестировать и применить полученные знания
            </p>
          </div>
          
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
            <div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4">
              ⚡
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Утренний ритм</h3>
            <p className="text-gray-400">
              Зашли с утра — не просто почитали, а сразу пощупали новый код!
            </p>
          </div>
        </div>

        <div className="text-center bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl p-12 border border-white/10">
          <h2 className="text-3xl font-bold text-white mb-4">
            Готовы изменить подход к новостям?
          </h2>
          <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
            Присоединяйтесь к разработчикам, которые не просто следят за AI-трендами, 
            а сразу их внедряют
          </p>
          <div className="flex items-center justify-center space-x-4">
            <div className="text-3xl font-bold text-white">₽999</div>
            <div className="text-gray-400">/месяц</div>
          </div>
          <button className="mt-6 bg-white text-slate-900 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
            Получить 7 дней бесплатно
          </button>
        </div>
      </main>
    </div>
  );
}