❓ Page: Справка - настройка VPN на всех платформах

app/help/page.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { 
+  ChevronLeft, ChevronDown, ChevronUp,
+  Rocket, HelpCircle, Wrench, MessageCircle, FileText,
+  Smartphone, Download, Play, Apple, Monitor, Wifi, Globe, Shield, Zap
+} from 'lucide-react';
+
+export default function HelpPage() {
+  const router = useRouter();
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
+  const [openTrouble, setOpenTrouble] = useState<number | null>(null);
+
+  const toggleFaq = (index: number) => {
+    setOpenFaq(openFaq === index ? null : index);
+  };
+
+  const toggleTrouble = (index: number) => {
+    setOpenTrouble(openTrouble === index ? null : index);
+  };
+
+  const faqs = [
+    {
+      question: 'Как подключиться к VPN?',
+      answer: 'Откройте приложение Umbrix → выберите сервер → нажмите кнопку "Подключить". Приложение автоматически установит безопасное соединение.'
+    },
+    {
+      question: 'Как изменить страну/сервер?',
+      answer: 'В главном экране нажмите на текущий сервер → выберите нужную страну из списка → нажмите "Подключить". Приложение переключится на новый сервер.'
+    },
+    {
+      question: 'Как проверить что VPN работает?',
+      answer: 'Проверьте иконку в статус-баре (должна быть зеленой). Или зайдите на сайт 2ip.ru - вы увидите IP-адрес выбранной страны, а не свой реальный.'
+    },
+    {
+      question: 'Как продлить подписку?',
+      answer: 'Главное меню → Тарифы → выберите нужный план → оплатите. Подписка продлится автоматически после подтверждения оплаты.'
+    },
+    {
+      question: 'Можно ли использовать на нескольких устройствах?',
+      answer: 'Да! Одна подписка работает на неограниченном количестве устройств. Просто установите Umbrix на каждое устройство и войдите с той же подпиской.'
+    },
+    {
+      question: 'Как получить бесплатный пробный период?',
+      answer: '7 дней бесплатно при регистрации! Или получите +7 дней за каждого приглашенного друга через реферальную программу.'
+    },
+  ];
+
+  const troubleshooting = [
+    {
+      problem: 'VPN не подключается',
+      solution: '1) Проверьте интернет-соединение\n2) Попробуйте другой сервер\n3) Переустановите приложение\n4) Напишите в поддержку с описанием проблемы'
+    },
+    {
+      problem: 'Низкая скорость соединения',
+      solution: '1) Выберите ближайший к вам сервер\n2) Смените протокол на WireGuard (быстрее OpenVPN)\n3) Проверьте скорость без VPN для сравнения\n4) Попробуйте подключиться в другое время суток'
+    },
+    {
+      problem: 'Приложение вылетает/зависает',
+      solution: '1) Обновите приложение до последней версии\n2) Очистите кеш приложения\n3) Перезагрузите устройство\n4) Переустановите приложение заново'
+    },
+    {
+      problem: 'Ошибка "Не удалось установить соединение"',
+      solution: '1) Проверьте срок действия подписки\n2) Убедитесь что не превышен лимит трафика\n3) Попробуйте переключиться на другой протокол\n4) Проверьте не блокирует ли ваш провайдер VPN'
+    },
+    {
+      problem: 'Не приходит код подтверждения',
+      solution: '1) Проверьте папку "Спам" в почте\n2) Убедитесь что email указан верно\n3) Подождите 5-10 минут\n4) Запросите код повторно\n5) Напишите в поддержку Telegram'
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-app)] text-white">
+      {/* Header */}
+      <div className="bg-[var(--bg-card)] border-b border-slate-700 sticky top-0 z-10 backdrop-blur-sm">
+        <div className="max-w-2xl mx-auto p-4 flex items-center gap-3">
+          <button
+            onClick={() => router.back()}
+            className="p-2 hover:bg-slate-700 rounded-lg transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+          <h1 className="text-xl font-bold">Помощь</h1>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-2xl mx-auto p-4 space-y-6">
+        {/* 1. Начало работы */}
+        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Rocket className="w-6 h-6" style={{ color: 'var(--primary)' }} />
+            <h2 className="text-xl font-bold">Начало работы</h2>
+          </div>
+
+          <div className="space-y-4">
+            {/* Шаг 1: Установка */}
+            <div>
+              <h3 className="font-semibold mb-2 flex items-center gap-2">
+                <Download className="w-5 h-5" style={{ color: 'var(--primary)' }} />
+                1. Установите приложение
+              </h3>
+              <div className="pl-7 space-y-2 text-sm text-slate-400">
+                <div className="flex items-center gap-2">
+                  <Smartphone className="w-4 h-4" />
+                  <span><strong>Android:</strong> Google Play Store → "Umbrix VPN"</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Apple className="w-4 h-4" />
+                  <span><strong>iOS:</strong> App Store → "Umbrix VPN"</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Monitor className="w-4 h-4" />
+                  <span><strong>Desktop:</strong> umbrix.net/download</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Шаг 2: Активация */}
+            <div>
+              <h3 className="font-semibold mb-2 flex items-center gap-2">
+                <Play className="w-5 h-5" style={{ color: 'var(--primary)' }} />
+                2. Активируйте подписку
+              </h3>
+              <p className="pl-7 text-sm text-slate-400">
+                Скопируйте ссылку подписки из бота → вставьте в приложение Umbrix → готово!
+              </p>
+            </div>
+
+            {/* Шаг 3: Подключение */}
+            <div>
+              <h3 className="font-semibold mb-2 flex items-center gap-2">
+                <Wifi className="w-5 h-5" style={{ color: 'var(--primary)' }} />
+                3. Подключитесь к VPN
+              </h3>
+              <p className="pl-7 text-sm text-slate-400">
+                Перейдите во вкладку "Локации" → выберите сервер (страну) → нажмите большую зеленую кнопку → VPN активирован!
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* 2. FAQ */}
+        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <HelpCircle className="w-6 h-6" style={{ color: 'var(--primary)' }} />
+            <h2 className="text-xl font-bold">Частые вопросы</h2>
+          </div>
+
+          <div className="space-y-3">
+            {faqs.map((faq, index) => (
+              <div
+                key={index}
+                className="border border-slate-700 rounded-lg overflow-hidden"
+              >
+                <button
+                  onClick={() => toggleFaq(index)}
+                  className="w-full flex items-center justify-between p-4 hover:bg-slate-700/50 transition-colors text-left"
+                >
+                  <span className="font-medium">{faq.question}</span>
+                  {openFaq === index ? (
+                    <ChevronUp className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
+                  ) : (
+                    <ChevronDown className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
+                  )}
+                </button>
+                {openFaq === index && (
+                  <div className="px-4 pb-4 text-sm text-slate-400 border-t border-slate-700 pt-4">
+                    {faq.answer}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 3. Решение проблем */}
+        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Wrench className="w-6 h-6" style={{ color: 'var(--primary)' }} />
+            <h2 className="text-xl font-bold">Решение проблем</h2>
+          </div>
+
+          <div className="space-y-3">
+            {troubleshooting.map((item, index) => (
+              <div
+                key={index}
+                className="border border-slate-700 rounded-lg overflow-hidden"
+              >
+                <button
+                  onClick={() => toggleTrouble(index)}
+                  className="w-full flex items-center justify-between p-4 hover:bg-slate-700/50 transition-colors text-left"
+                >
+                  <span className="font-medium">{item.problem}</span>
+                  {openTrouble === index ? (
+                    <ChevronUp className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
+                  ) : (
+                    <ChevronDown className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
+                  )}
+                </button>
+                {openTrouble === index && (
+                  <div className="px-4 pb-4 text-sm text-slate-400 border-t border-slate-700 pt-4 whitespace-pre-line">
+                    {item.solution}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 4. Связаться с поддержкой */}
+        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <MessageCircle className="w-6 h-6" style={{ color: 'var(--primary)' }} />
+            <h2 className="text-xl font-bold">Связаться с поддержкой</h2>
+          </div>
+
+          <div className="space-y-4">
+            <p className="text-sm text-slate-400">
+              Не нашли ответ на свой вопрос? Свяжитесь с нами любым удобным способом:
+            </p>
+
+            <div className="space-y-3">
+              <a
+                href="https://telegram.me/umbrix_support"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-3 p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition-colors"
+              >
+                <MessageCircle className="w-5 h-5" style={{ color: 'var(--primary)' }} />
+                <div className="flex-1">
+                  <div className="font-medium">Telegram поддержка</div>
+                  <div className="text-xs text-slate-400">Ответим в течение 5 минут</div>
+                </div>
+                <ChevronDown className="w-5 h-5 rotate-[-90deg]" />
+              </a>
+
+              <div className="p-4 bg-slate-700/30 rounded-lg">
+                <div className="text-sm text-slate-400">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Globe className="w-4 h-4" style={{ color: 'var(--primary)' }} />
+                    <strong>Email:</strong> support@umbrix.net
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Zap className="w-4 h-4" style={{ color: 'var(--primary)' }} />
+                    <strong>Время работы:</strong> 24/7
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Spacer для нижнего отступа */}
+        <div className="h-8" />
+      </div>
+    </div>
+  );
+}