🧩 Components: QR код модал и реферальная система

components/QRCodeModal.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X, Download, Share2, Copy, Check } from 'lucide-react';
+
+interface QRCodeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  url: string;
+  title?: string;
+}
+
+export default function QRCodeModal({
+  isOpen,
+  onClose,
+  url,
+  title = 'QR Код подписки',
+}: QRCodeModalProps) {
+  const [copied, setCopied] = useState(false);
+  const [qrDataUrl, setQrDataUrl] = useState<string>('');
+
+  useEffect(() => {
+    if (isOpen && url) {
+      // Generate QR code using qrcode library
+      import('qrcode').then((QRCode) => {
+        QRCode.toDataURL(url, {
+          width: 300,
+          margin: 2,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF',
+          },
+          errorCorrectionLevel: 'H',
+        })
+          .then((dataUrl) => {
+            setQrDataUrl(dataUrl);
+          })
+          .catch((err) => {
+            console.error('Failed to generate QR code:', err);
+          });
+      });
+    }
+  }, [isOpen, url]);
+
+  if (!isOpen) return null;
+
+  const downloadQR = () => {
+    const a = document.createElement('a');
+    a.href = qrDataUrl;
+    a.download = 'vpn-subscription-qr.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+
+  const shareQR = async () => {
+    if (!navigator.share) {
+      // Fallback: copy URL to clipboard
+      await copyUrl();
+      return;
+    }
+
+    try {
+      // Convert data URL to blob
+      const response = await fetch(qrDataUrl);
+      const blob = await response.blob();
+      const file = new File([blob], 'vpn-qr-code.png', { type: 'image/png' });
+
+      await navigator.share({
+        title: 'VPN Подписка',
+        text: 'QR код для подключения к VPN',
+        files: [file],
+      });
+    } catch (err) {
+      console.error('Failed to share QR code:', err);
+      // Fallback to copying URL
+      await copyUrl();
+    }
+  };
+
+  const copyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy URL:', err);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6 max-w-sm w-full"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-white">{title}</h3>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-700 rounded-lg transition-colors text-white"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* QR Code */}
+        <div className="bg-white p-4 rounded-lg mb-6 flex items-center justify-center">
+          {qrDataUrl ? (
+            <img src={qrDataUrl} alt="QR Code" className="w-full h-auto max-w-[256px]" />
+          ) : (
+            <div className="w-64 h-64 flex items-center justify-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--primary)]"></div>
+            </div>
+          )}
+        </div>
+
+        {/* Info text */}
+        <p className="text-sm text-slate-400 text-center mb-6">
+          Отсканируйте QR код в приложении Umbrix для автоматического подключения
+        </p>
+
+        {/* Actions */}
+        <div className="grid grid-cols-2 gap-3">
+          <button
+            onClick={downloadQR}
+            disabled={!qrDataUrl}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors text-white"
+          >
+            <Download className="h-4 w-4" />
+            <span>Скачать</span>
+          </button>
+          <button
+            onClick={shareQR}
+            disabled={!qrDataUrl}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-[var(--primary)] hover:bg-[var(--primary)]/80 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors text-white"
+          >
+            <Share2 className="h-4 w-4" />
+            <span>Поделиться</span>
+          </button>
+        </div>
+
+        {/* Copy URL button */}
+        <button
+          onClick={copyUrl}
+          className="w-full mt-3 flex items-center justify-center gap-2 px-4 py-3 bg-slate-800/50 hover:bg-slate-700/50 rounded-lg transition-colors text-slate-300 text-sm"
+        >
+          {copied ? (
+            <>
+              <Check className="h-4 w-4 text-green-500" />
+              <span className="text-green-500">Скопировано!</span>
+            </>
+          ) : (
+            <>
+              <Copy className="h-4 w-4" />
+              <span>Скопировать ссылку</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

components/ReferralModal.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { X, Copy, Share2, Gift, Users, Award } from 'lucide-react';
+
+interface ReferralModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  referralUrl: string;
+  onShare: () => void;
+  onCopy: () => void;
+}
+
+export default function ReferralModal({ 
+  isOpen, 
+  onClose, 
+  referralUrl,
+  onShare,
+  onCopy
+}: ReferralModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      
+      {/* Modal */}
+      <div 
+        className="relative w-full max-w-lg bg-[var(--bg-card)] rounded-t-3xl sm:rounded-3xl shadow-2xl border border-slate-700 max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="sticky top-0 bg-[var(--bg-card)] border-b border-slate-700 p-6 flex items-center justify-between z-10">
+          <h2 className="text-xl font-bold flex items-center gap-2">
+            <Gift className="w-6 h-6 text-[var(--primary)]" />
+            Пригласи друга
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-700 rounded-full transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Условия программы */}
+          <div className="space-y-4">
+            <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4">
+              <div className="flex items-start gap-3">
+                <Award className="w-6 h-6 flex-shrink-0 mt-1" style={{ color: 'var(--primary)' }} />
+                <div>
+                  <h3 className="font-semibold mb-2" style={{ color: 'var(--primary)' }}>Ты получишь:</h3>
+                  <ul className="space-y-2 text-sm text-slate-300">
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5" style={{ color: 'var(--primary)' }}>✓</span>
+                      <span><strong>+7 дней</strong> бесплатно за каждого друга</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5" style={{ color: 'var(--primary)' }}>✓</span>
+                      <span><strong>10% скидка</strong> на продление при оплате</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5" style={{ color: 'var(--primary)' }}>✓</span>
+                      <span>За 5 друзей → <strong>1 месяц в подарок</strong></span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4">
+              <div className="flex items-start gap-3">
+                <Users className="w-6 h-6 flex-shrink-0 mt-1" style={{ color: 'var(--primary)' }} />
+                <div>
+                  <h3 className="font-semibold mb-2" style={{ color: 'var(--primary)' }}>Твой друг получит:</h3>
+                  <ul className="space-y-2 text-sm text-slate-300">
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5" style={{ color: 'var(--primary)' }}>✓</span>
+                      <span><strong>7 дней бесплатного</strong> триала</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5" style={{ color: 'var(--primary)' }}>✓</span>
+                      <span><strong>-10% скидка</strong> на первую покупку</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Реферальная ссылка */}
+          <div className="space-y-3">
+            <label className="text-sm text-slate-400">Твоя реферальная ссылка:</label>
+            <div className="flex items-center gap-2 p-3 bg-slate-800 rounded-lg border border-slate-700">
+              <code className="flex-1 text-sm text-[var(--primary)] truncate">
+                {referralUrl}
+              </code>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="space-y-3">
+            <button
+              onClick={onShare}
+              className="w-full flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-semibold transition-all shadow-lg hover:opacity-90"
+              style={{ background: 'var(--primary)', color: 'white' }}
+            >
+              <Share2 className="w-5 h-5" />
+              Поделиться с друзьями
+            </button>
+
+            <button
+              onClick={onCopy}
+              className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-slate-700 hover:bg-slate-600 rounded-xl font-semibold transition-all"
+            >
+              <Copy className="w-5 h-5" />
+              Скопировать ссылку
+            </button>
+          </div>
+
+          {/* Info */}
+          <div className="text-xs text-slate-500 text-center">
+            Бонусы начисляются после активации подписки приглашенным другом
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}