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

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>
+  );
+}