club_promnemo

PRO Mnemo — preview

const { useState, useEffect, useRef } = React;

// --- Icons ---
      const AlertTriangle = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
      );
      const Key = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
      );
      const Check = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="20 6 9 17 4 12"/></svg>
      );
      const Play = ({ size = 24, className = "", fill = "none" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="6 3 20 12 6 21 6 3"/></svg>
      );
      const Database = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
      );
      const FileCheck = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="m9 15 2 2 4-4"/></svg>
      );
      const X = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 6 6 18"/><path d="m6 6 18 12"/></svg>
      );
      const BarChart3 = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
      );
      const MessageCircle = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
      );
      const Gift = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
      );
      const Clock = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      );
      const Brain = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>
      );
      const UserCheck = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
      );
      const Wrench = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
      );
      const ArrowDown = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
      );
      const Star = ({ size = 24, className = "", fill="none" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
      );
      const Plus = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M5 12h14"/><path d="M12 5v14"/></svg>
      );
      const Minus = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M5 12h14"/></svg>
      );
      const Lock = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
      );
      const CreditCard = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
      );
      const Wallet = ({ size = 24, className = "" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></svg>
      );

// --- Hook for Scroll Animations ---
      const useScrollReveal = () => {
        useEffect(() => {
          const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                entry.target.classList.add('active');
              }
            });
          }, { threshold: 0.1 });

return () => observer.disconnect();
        }, []);
      };
      
      // --- Telegram Join Logic ---
      const handleJoin = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=6936a75d07bcf2827e09e4ed"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

// --- Telegram Join Logic for Light Course ---
      const handleJoinLight = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=69392cc17c13eb5cae05d65b"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

// --- Telegram Join Logic for Monobank Light Course ---
      const handleJoinMonobankLight = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=693d1ba32033462dcc0051f7"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

// --- Telegram Join Logic for Monobank PRO Course ---
      const handleJoinMonobankPro = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=693d1d0331ba3f6ba8019b18"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

// --- Telegram Join Logic for Other Payment Methods Light Course ---
      const handleJoinOtherPaymentLight = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=693d1d66044b5080e50f3426"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

// --- Telegram Join Logic for Other Payment Methods PRO Course ---
      const handleJoinOtherPaymentPro = () => {
         const botLink = "https://t.me/pro_mnemo_bot?start=693d1e5b430e10247f071c4f"; 
         
         // Check if running inside Telegram Web App
         if (window.Telegram && window.Telegram.WebApp) {
             // Open the deep link via Telegram API
             window.Telegram.WebApp.openTelegramLink(botLink);
             // Close the Web App to return to the chat
             window.Telegram.WebApp.close();
         } else {
             // Fallback for regular browser
             window.location.href = botLink;
         }
      };

function formatSundayDeadlineRu(deadline) {
        const d = new Date(deadline);
        return d.toLocaleString('ru-RU', {
          weekday: 'long',
          day: 'numeric',
          month: 'long',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false,
        });
      }

function formatWeeklyCountdown(ms) {
        const total = Math.max(0, Math.floor(ms / 1000));
        const days = Math.floor(total / 86400);
        const h = Math.floor((total % 86400) / 3600);
        const m = Math.floor((total % 3600) / 60);
        const s = total % 60;
        return { days, h, m, s };
      }

// --- Components ---

// --- Payment Modal Components ---
      const PaymentModalLight = ({ isOpen, onClose }) => {
        if (!isOpen) return null;

return (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-brand-black/90 backdrop-blur-sm" onClick={onClose}>
            <div className="relative w-full max-w-md bg-white rounded-2xl shadow-2xl border-4 border-brand-black overflow-hidden" onClick={e => e.stopPropagation()}>
              <button 
                onClick={onClose}
                className="absolute top-4 right-4 z-20 bg-white hover:bg-brand-red text-brand-black hover:text-white p-2 rounded-full transition-colors border-2 border-brand-black"
              >
                <X size={20} />
              </button>
              
              <div className="p-6 md:p-8">
                <div className="mb-6">
                  <div className="inline-block bg-brand-gold/20 text-brand-black px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider mb-3 border border-brand-gold">
                    ЛАЙТ ФОРМАТ
                  </div>
                  <h3 className="text-2xl font-black mb-2 text-brand-black">Курс «Все мнемотехники»</h3>
                  <div className="flex items-end gap-2 mb-4">
                    <p className="text-3xl font-black text-brand-red">39</p>
                    <p className="text-lg font-bold text-brand-red mb-1">€</p>
                  </div>
                </div>

<div className="mb-6">
                  <p className="text-sm font-bold text-brand-black mb-4 uppercase tracking-wide">Выберите способ оплаты:</p>
                  <div className="space-y-3">
                    <a 
                      href="#order:Курс Все Мнемотехники за 7 дней=39 :::extid=vu55yk5snxnmufp"
                      onClick={(e) => {
                        e.preventDefault();
                        onClose();
                        // Создаем временную ссылку и кликаем по ней для Tilda
                        setTimeout(() => {
                          const link = document.createElement('a');
                          link.href = "#order:Курс Все Мнемотехники за 7 дней=39 :::extid=vu55yk5snxnmufp";
                          link.click();
                        }, 100);
                      }}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                    >
                      <div className="flex items-center gap-3">
                        <CreditCard size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">Картой (Visa, Mastercard), PayPal</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </a>

<button 
                      onClick={() => handleJoinLight()}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                    >
                      <div className="flex items-center gap-3">
                        <Wallet size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">В других валютах или переводом</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </button>

<button 
                      onClick={() => handleJoinLight()}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                    >
                      <div className="flex items-center gap-3">
                        <Wallet size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">В гривнах в Monobank</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </button>
                  </div>
                </div>

<div className="pt-4 border-t border-gray-200">
                  <p className="flex items-center gap-2 text-xs text-gray-500 justify-center">
                    <Lock size={12} />
                    Безопасная оплата
                  </p>
                </div>
              </div>
            </div>
          </div>
        );
      };

const PaymentModalPro = ({ isOpen, onClose }) => {
        if (!isOpen) return null;

return (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-brand-black/90 backdrop-blur-sm" onClick={onClose}>
            <div className="relative w-full max-w-md bg-white rounded-2xl shadow-2xl border-4 border-brand-black overflow-hidden" onClick={e => e.stopPropagation()}>
              <button 
                onClick={onClose}
                className="absolute top-4 right-4 z-20 bg-white hover:bg-brand-red text-brand-black hover:text-white p-2 rounded-full transition-colors border-2 border-brand-black"
              >
                <X size={20} />
              </button>
              
              <div className="p-6 md:p-8">
                <div className="mb-6">
                  <h3 className="text-2xl font-black mb-2 text-brand-black">Полный доступ (клуб PRO Mnemo)</h3>
                  <div className="flex items-end gap-3 mb-4">
                    <p className="text-3xl font-black text-brand-red">59</p>
                    <p className="text-lg font-bold text-brand-red mb-1">€</p>
                    <p className="text-lg text-gray-400 line-through font-bold mb-1">108 €</p>
                  </div>
                </div>

<div className="mb-6">
                  <p className="text-sm font-bold text-brand-black mb-4 uppercase tracking-wide">Выберите способ оплаты:</p>
                  <div className="space-y-3">
                    <a 
                      href="#order:Клуб PRO Mnemo=59 :::extid=sdjdmxgzrkdbugf"
                      onClick={(e) => {
                        e.preventDefault();
                        onClose();
                        // Создаем временную ссылку и кликаем по ней для Tilda
                        setTimeout(() => {
                          const link = document.createElement('a');
                          link.href = "#order:Клуб PRO Mnemo=59 :::extid=sdjdmxgzrkdbugf";
                          link.click();
                        }, 100);
                      }}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                    >
                      <div className="flex items-center gap-3">
                        <CreditCard size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">Картой (Visa, Mastercard), PayPal</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </a>

<button 
                      onClick={() => handleJoin()}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                    >
                      <div className="flex items-center gap-3">
                        <Wallet size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">В других валютах или переводом</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </button>

<button 
                      onClick={() => handleJoin()}
                      className="w-full flex items-center justify-between p-4 bg-white border-2 border-brand-black rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                    >
                      <div className="flex items-center gap-3">
                        <Wallet size={24} className="text-brand-black" />
                        <span className="font-bold text-brand-black">В гривнах в Monobank</span>
                      </div>
                      <ArrowDown size={20} className="text-brand-black rotate-[-90deg]" />
                    </button>
                  </div>
                </div>

const Hero = () => {
        const weekMs = useWeeklySundayCountdown();
        const deadlineRu = formatSundayDeadlineRu(getNextSundayNightDeadline());
        return (
          <section className="p-6 pt-12 md:p-10 pb-6 border-b border-gray-100 relative overflow-hidden">
             {/* Abstract Synapse Background Illustration */}
            <div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
              <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
                <circle cx="350" cy="50" r="100" fill="#FFCE00" />
                <circle cx="50" cy="350" r="80" fill="#DD0000" />
                <path d="M50 350 L350 50" stroke="#000" strokeWidth="2" strokeDasharray="10 10" />
                <circle cx="200" cy="200" r="40" fill="#000" className="animate-pulse-slow" />
                <path d="M50 350 L200 200 L350 50" stroke="#000" strokeWidth="1" fill="none" />
              </svg>
            </div>

<div className="relative z-10 reveal active">
              <h1 className="text-4xl md:text-5xl font-black leading-tight tracking-tight mb-4 text-brand-black max-w-2xl">
                Учи немецкий по методу мнемотехники
                <span className="block mt-2 text-blue-700">
                  и запоминай в 3 раза больше слов — без зубрёжки
                </span>
              </h1>

<div className="mb-6 max-w-2xl text-lg md:text-xl text-gray-800 font-bold leading-relaxed space-y-1">
                <p>Курс «Все мнемотехники немецкого»,</p>
                <p>база 800 готовых ассоциаций</p>
                <p>и Приложение с карточками, темами и упражнениями.</p>
              </div>

<div className="mb-6 max-w-2xl w-full mx-auto text-center">
                <p className="text-sm md:text-base font-black text-blue-700 mb-3 tracking-tight leading-snug">
                  Текущие условия действуют до:{' '}
                  <span className="text-blue-900 block sm:inline sm:ml-1 mt-1 sm:mt-0">{deadlineRu}</span>
                </p>
                <div className="flex justify-center w-full">
                  <CountdownCells ms={weekMs} tone="blue" scale="hero" />
                </div>
              </div>

<div className="mb-8 flex flex-col items-center w-full">
                <a 
                  href="#pricing" 
                  className="inline-flex items-center justify-center gap-2 bg-brand-gold text-brand-black font-black text-lg md:text-xl px-8 py-4 rounded-2xl border-2 border-brand-black hover:bg-[#ffdb4d] hover:scale-[1.02] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:scale-[0.98] transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] no-underline"
                >
                  Войти в клуб →
                </a>
              </div>

<div className="mt-5 flex items-center gap-4 reveal delay-200">
                <div className="w-20 h-20 rounded-full bg-gray-200 overflow-hidden border-2 border-brand-red shadow-md">
                     {/* Using a friendly illustrative avatar placeholder */}
                     <img src="https://static3.tildacdn.com/tild3031-6164-4765-b864-613861303135/Screenshot_2025-12-0.png" alt="Денис Mnemo" className="w-full h-full object-cover" />
                </div>
                <div>
                    <p className="text-xs text-brand-red font-bold uppercase tracking-wider">Денис Mnemo</p>
                </div>
              </div>

<div className="mt-3 relative p-6 bg-white rounded-xl border-2 border-brand-gold shadow-[6px_6px_0px_0px_rgba(255,206,0,0.6)] reveal delay-300 hover:shadow-[4px_4px_0px_0px_rgba(255,206,0,0.8)] hover:-translate-y-1 transition-all duration-300">
                  <div className="relative z-10">
                      <p className="text-gray-800 leading-relaxed font-medium italic">
                          "Я сам учу по этой системе <span className="not-italic font-bold bg-brand-gold/30 px-1 rounded">500+ слов в месяц</span> — и никогда их не забываю.
                          Три года я собирал и тестировал каждую технику, чтобы тебе <span className="not-italic font-bold text-brand-red underline decoration-brand-red/30 underline-offset-4">не пришлось проходить мой путь ошибок</span>."
                      </p>
                  </div>
              </div>
            </div>
          </section>
        );
      };

const Benefits = () => {
        const steps = [
          "Учить быстро в 5 раз больше новых слов без зубрежки",
          "Выйти на нужный уровень языка в 3-5 раз быстрее",
          "Достичь своих целей — учеба, работа, жизнь в Германии"
        ];

return (
          <section className="p-6 md:p-10 border-b border-gray-100 relative">
             {/* Decorative Background Element */}
            <div className="absolute top-20 right-10 w-32 h-32 opacity-10 hidden md:block animate-float">
               <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="10" y="10" width="30" height="30" stroke="#000" strokeWidth="2" />
                  <rect x="25" y="25" width="30" height="30" stroke="#DD0000" strokeWidth="2" />
                  <rect x="40" y="40" width="30" height="30" stroke="#FFCE00" strokeWidth="2" />
               </svg>
            </div>

<h2 className="text-2xl font-black mb-12 leading-tight text-brand-black reveal">
              Ты можешь продолжать зубрить и забывать...<br />А можешь получить доступ к системе и:
            </h2>

<div className="space-y-4 reveal delay-100 flex flex-col items-center">
              {steps.map((step, index) => {
                // Background colors to show progress (getting brighter/more prominent)
                const getBgClass = (i) => {
                    if (i === 0) return "bg-brand-gold/50 border-2 border-brand-gold";
                    if (i === 1) return "bg-brand-red/20 border-2 border-brand-red";
                    if (i === 2) return "bg-brand-gold border-4 border-brand-black shadow-[4px_4px_0px_0px_#000]";
                    return "bg-brand-gold shadow-[4px_4px_0px_0px_#000]";
                };
                
                return (
                <React.Fragment key={index}>
                  <div className={`w-full p-6 rounded-2xl text-center relative z-10 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg ${getBgClass(index)}`}>
                     <p className={`font-bold text-lg md:text-xl leading-snug text-brand-black`}>{step}</p>
                  </div>
                  
                  {index < steps.length - 1 && (
                    <div className="h-8 flex items-center justify-center text-brand-red">
                      <ArrowDown size={32} />
                    </div>
                  )}
                </React.Fragment>
              )})}
            </div>

</section>
        );
      };

const Modules = () => {
        const modules = [
          {
            number: 1,
            title: "Основы Мнемотехники",
            description: "Освоишь пошаговый алгоритм создания ассоциаций для любого немецкого слова. Подробные инструкции, как создавать мнемо-якоря.",
            icon: <Brain size={24} className="text-white" />
          },
          {
            number: 2,
            title: "Практика Мнемотехники",
            description: "Научишься быстро запоминать много немецких слов за раз. На основе практического текста мы вместе создадим ассоциации.",
            icon: <MessageCircle size={24} className="text-white" />
          },
          {
            number: 3,
            title: "Интервальное повторение",
            description: "Ты узнаешь, как формировать наборы слов и создавать график повторений, чтобы слова не забывались и оставались в памяти.",
            icon: <Clock size={24} className="text-brand-black" />
          },
          {
            number: 4,
            title: "Уровень «Профи»",
            description: "Продвинутые мнемотехники для самых сложных немецких слов - глаголы с приставками, артикли, сильные глаголы и глаголы с управлением.",
            icon: <BarChart3 size={24} className="text-white" />
          }
        ];

const getNumberStyle = (index) => {
          const styles = [
            "bg-brand-black text-white border-2 border-brand-black",
            "bg-brand-red text-white border-2 border-brand-red",
            "bg-brand-gold text-brand-black border-2 border-brand-gold",
          ];
          return styles[index % styles.length];
        };

const getTitleStyle = (index) => {
            const styles = [
                "bg-gray-100 text-brand-black border border-gray-200",
                "bg-red-50 text-brand-red border border-red-200",
                "bg-brand-gold/40 text-brand-black border border-brand-gold"
            ];
            return styles[index % styles.length];
        }

return (
          <section className="p-6 md:p-10 bg-gradient-to-b from-white to-gray-50 border-t border-gray-100">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12 reveal">
                <Badge variant="gold" className="mb-4">
                  <span className="flex items-center gap-2">
                    <Brain size={14} /> КУРС
                  </span>
                </Badge>
                <h2 className="text-3xl md:text-4xl font-black mb-4 text-brand-black leading-tight">
                  Курс "Все Мнемотехники немецкого"
                </h2>
                <p className="text-lg text-gray-700 font-medium leading-relaxed max-w-2xl mx-auto">
                  4 модуля с видео уроками и практикой
                </p>
              </div>
              
              <div className="space-y-6">
                {modules.map((mod, index) => (
                  <div key={mod.number} className="relative reveal delay-100 group">
                    {/* Decorative line connecting modules */}
                    {index !== modules.length - 1 && (
                      <div className="absolute left-6 top-14 bottom-[-24px] w-1 bg-gradient-to-b from-brand-gold via-brand-red to-brand-gold -z-10 group-hover:from-brand-red group-hover:via-brand-gold group-hover:to-brand-red transition-all duration-500 rounded-full"></div>
                    )}

<div className="bg-white border-2 border-gray-200 rounded-2xl p-6 hover:border-brand-black hover:shadow-lg transition-all duration-300 group-hover:scale-[1.02]">
                      <div className="flex items-start gap-4">
                          <div className={`flex-shrink-0 w-12 h-12 md:w-14 md:h-14 rounded-xl flex items-center justify-center shadow-lg transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 ${getNumberStyle(index)}`}>
                              <span className="font-black text-xl">{mod.number}</span>
                          </div>
                          
                          <div className="flex-1">
                              <h3 className={`text-xl md:text-2xl font-black px-4 py-2 inline-block rounded-xl mb-3 ${getTitleStyle(index)}`}>
                                  {mod.title}
                              </h3>
                              <p className="text-gray-700 text-base md:text-lg leading-relaxed font-medium">
                                  {mod.description}
                              </p>
                          </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      };

const Bonus = () => {
        const [showModal, setShowModal] = useState(false);

return (
          <section className="bg-gray-50 border-y border-gray-200">
            {/* Block 2: База ассоциаций + Приложение PRO Mnemo */}
            <div className="p-6 md:p-10 pb-6">
              <h2 className="text-3xl font-black mb-4 text-brand-black leading-tight reveal">
                  Второе, что ты получишь: <br className="md:hidden" />
                  <span className="bg-brand-gold px-1 shadow-[4px_4px_0px_0px_#000]">База ассоциаций</span>
                  <span className="text-brand-black"> + </span>
                  <span className="bg-brand-red px-1 text-white shadow-[4px_4px_0px_0px_#000]">Приложение PRO Mnemo</span>
              </h2>
              <p className="text-lg text-gray-700 mb-6 font-medium reveal delay-100">
                  Тебе будут доступны уже готовые ассоциации на 800 слов в клубе PRO Mnemo. Плюс приложение <span className="font-bold text-brand-red">Pro Mnemo</span> с темами, упражнениями, карточками. Это супер помогает прокачивать немецкий в любую свободную минуту.
              </p>
              
              {/* Приложение PRO Mnemo — картинка пользователя */}
              <div className="bg-white border-2 border-brand-black rounded-3xl shadow-[8px_8px_0px_0px_#000] overflow-hidden reveal delay-200 mb-6">
                <div className="flex items-center justify-center p-4 md:p-6">
                  <img 
                    src="https://optim.tildacdn.net/tild3264-3034-4364-b763-373366646632/-/format/webp/______7__2.png.webp" 
                    alt="База Ассоциаций — 800 ассоциаций, карточки, тексты, упражнения" 
                    className="w-full max-w-md rounded-xl object-contain"
                  />
                </div>
              </div>

<button 
                onClick={() => setShowModal(true)}
                className="group relative overflow-hidden flex items-center gap-3 bg-brand-red text-white pl-6 pr-8 py-4 rounded-xl font-bold transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] reveal delay-300"
              >
                <div className="absolute inset-0 bg-white/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm">
                   <Play fill="#DD0000" className="ml-1 text-brand-red w-5 h-5 group-hover:scale-110 transition-transform" />
                </div>
                <span className="text-lg relative z-10">Вот как выглядит Pro Mnemo изнутри</span>
              </button>
            </div>

{/* Video Modal */}
            {showModal && (
              <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-brand-black/90 backdrop-blur-sm" onClick={() => setShowModal(false)}>
                <div className="relative w-full max-w-[350px] aspect-[9/16] bg-black rounded-2xl overflow-hidden border-4 border-brand-gold shadow-2xl animate-in fade-in zoom-in duration-200" onClick={e => e.stopPropagation()}>
                  <button 
                    onClick={() => setShowModal(false)}
                    className="absolute top-4 right-4 z-20 bg-black/50 hover:bg-brand-red text-white p-2 rounded-full transition-colors backdrop-blur-md"
                  >
                    <X size={24} />
                  </button>
                  <iframe 
                    className="w-full h-full"
                    src="https://kinescope.io/embed/bAmTjStsJiZzBKY2sVwANA?autoplay=1" 
                    title="Demo Video" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowFullScreen
                  ></iframe>
                </div>
              </div>
            )}
          </section>
        );
      };

const TelegramChannel = () => {
        return (
          <section className="p-6 md:p-10 border-t border-gray-100 bg-white">
            <h2 className="text-3xl font-black mb-4 text-brand-black leading-tight reveal">
                Третье, что ты получишь: <br className="md:hidden" />
                <span className="bg-brand-gold px-1 shadow-[4px_4px_0px_0px_#000]">Доступ в закрытый Телеграм канал</span>
            </h2>

<p className="text-lg text-gray-700 mb-8 font-medium reveal delay-100">
                Расширяем словарный запас вместе и целенаправленно - <span className="font-bold text-brand-black">Ты сразу почувствуешь прогресс.</span>
            </p>

<div className="flex items-start gap-5 relative z-10">
                    <div className="bg-brand-red p-4 rounded-2xl text-white flex-shrink-0 shadow-md group-hover:rotate-12 transition-transform duration-300">
                        <MessageCircle size={32} />
                    </div>
                    <div>
                        <p className="font-bold text-xl mb-2 text-brand-black">Что тебя ждет?</p>
                        <ul className="text-gray-600 leading-relaxed text-lg space-y-2">
                            <li className="flex items-start gap-2">
                                <Check size={20} className="text-brand-red flex-shrink-0 mt-0.5" />
                                <span>Еженедельные разборы актуальных тем</span>
                            </li>
                            <li className="flex items-start gap-2">
                                <Check size={20} className="text-brand-red flex-shrink-0 mt-0.5" />
                                <span>Тексты с готовыми ассоциациями к новым словам</span>
                            </li>
                            <li className="flex items-start gap-2">
                                <Check size={20} className="text-brand-red flex-shrink-0 mt-0.5" />
                                <span>Полезные фразы и диалоги для практики</span>
                            </li>
                            <li className="flex items-start gap-2">
                                <Check size={20} className="text-brand-red flex-shrink-0 mt-0.5" />
                                <span>Целенаправленное расширение словарного запаса</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
          </section>
        );
      };

const AppTeaser = () => {
        return (
          <section className="p-6 md:p-10 border-t border-gray-100 bg-gray-50 overflow-hidden">
             {/* Intro Text */}
             <div className="max-w-3xl mb-8 reveal">
                 <Badge variant="red">
                    <span className="flex items-center gap-2">
                        <Gift size={14} /> БОНУС!
                    </span>
                 </Badge>
                 <h2 className="text-2xl md:text-3xl font-black text-brand-black leading-tight mb-3">
                     Хочу с тобой поделиться еще одной крутой новостью
                 </h2>
                 <p className="text-lg text-gray-700 font-medium">
                     Всем участникам клуба уже доступно приложение <span className="font-bold text-brand-red">Pro Mnemo</span> с бесплатным доступом на 3 месяца.
                 </p>
             </div>

<div className="bg-white border-2 border-brand-black rounded-3xl shadow-[8px_8px_0px_0px_#000] overflow-hidden reveal delay-100">
              
              {/* Right Column: Visual / Phone Mockup (Made Full Width/Centered) */}
              <div className="bg-gray-100 flex items-center justify-center p-8 border-brand-black min-h-[400px] relative">
                   {/* Abstract background circles */}
                   <div className="absolute w-64 h-64 bg-brand-gold/20 rounded-full blur-3xl -top-10 -right-10 animate-pulse-slow"></div>
                   <div className="absolute w-48 h-48 bg-brand-red/10 rounded-full blur-3xl bottom-10 left-10"></div>

<div className="relative w-[240px] md:w-[260px] transform hover:scale-105 transition-transform duration-500 z-10">
                        {/* Phone Border */}
                        <div className="bg-brand-black rounded-[2.5rem] p-3 border-4 border-brand-black shadow-2xl">
                            {/* Screen */}
                            <div className="bg-white rounded-[2rem] overflow-hidden aspect-[9/19] flex flex-col border border-gray-800 relative">
                                {/* Screen Header */}
                                <div className="h-16 bg-brand-gold flex items-center justify-center border-b-2 border-brand-black relative">
                                    <span className="font-bold text-brand-black text-lg">PRO Mnemo</span>
                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-2 bg-brand-red rounded-full animate-ping"></div>
                                </div>
                                
                                {/* Screen Content */}
                                <div className="flex-1 p-4 bg-gray-50 flex flex-col items-center justify-center gap-3">
                                     <div className="w-full bg-white border border-gray-200 rounded-xl p-3 shadow-sm flex items-center gap-3">
                                         <div className="w-8 h-8 rounded-full bg-brand-gold/20 flex items-center justify-center flex-shrink-0"><Clock size={14} className="text-brand-gold"/></div>
                                         <span className="text-xs font-bold text-brand-black">Учи слова в любую минуту</span>
                                     </div>
                                     <div className="w-full bg-white border border-gray-200 rounded-xl p-3 shadow-sm flex items-center gap-3">
                                         <div className="w-8 h-8 rounded-full bg-brand-red/20 flex items-center justify-center flex-shrink-0"><BarChart3 size={14} className="text-brand-red"/></div>
                                         <span className="text-xs font-bold text-brand-black">Умное повторение</span>
                                     </div>
                                     <div className="w-full bg-white border border-gray-200 rounded-xl p-3 shadow-sm flex items-center gap-3">
                                         <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0"><MessageCircle size={14} className="text-brand-black"/></div>
                                         <span className="text-xs font-bold text-brand-black">Фразы и диалоги</span>
                                     </div>
                                </div>

{/* Navigation Bar Mockup */}
                                <div className="h-14 bg-brand-black flex justify-around items-center px-6">
                                    <div className="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 transition-colors"></div>
                                    <div className="w-10 h-10 rounded-full bg-brand-gold transform -translate-y-4 border-4 border-brand-black flex items-center justify-center">
                                       <div className="w-4 h-4 bg-brand-black rounded-sm"></div>
                                    </div>
                                    <div className="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 transition-colors"></div>
                                </div>
                            </div>
                        </div>
                   </div>
              </div>

</div>
          </section>
        );
      };

const CostExplanation = () => {
        return (
          <section className="p-6 md:p-10 bg-white border-t border-gray-100 reveal">
             <div className="max-w-2xl mx-auto">
                <h2 className="text-3xl font-black mb-6 text-brand-black leading-tight">
                    Сколько всё это может стоить?
                </h2>
                
                <div className="space-y-6 text-lg text-gray-800 font-medium leading-relaxed">
                    <p>
                        Цена этим знаниям — <span className="font-bold bg-brand-gold/20 px-1 rounded">3 года моей работы</span> и опыт, за который обычно платят <span className="font-bold text-brand-black border-b-2 border-brand-red">500–1000 €</span> на курсах и в школах.
                    </p>
                    <p>
                        И при этом никто там не объясняет, как быстро учить слова без зубрёжки — обучение просто растягивают.
                    </p>
                    
                    <div className="bg-gray-50 border-l-4 border-brand-gold p-5 rounded-r-xl my-6">
                        <p className="font-bold text-brand-black">
                            Здесь ты получаешь всю систему сразу — и уже на старте экономишь те самые 500–1000 €.
                        </p>
                    </div>

<p>
                        И поскольку моя цель — научить мнемотехнике каждого,
                    </p>

<p className="text-2xl font-black text-brand-black pt-2">
                        цена — <span className="text-brand-red bg-brand-red/5 px-2 py-1 rounded">доступная для всех</span>
                    </p>
                </div>
             </div>
          </section>
        );
      };

const Pricing = () => {
        const [showLightPayment, setShowLightPayment] = useState(false);
        const [showProPayment, setShowProPayment] = useState(false);
        const proWeekMs = useWeeklySundayCountdown();

return (
          <section id="pricing" className="p-6 md:p-10 pb-16 bg-gradient-to-b from-gray-50 to-white reveal">
            <div className="text-center mb-12">
                <Badge variant="red" className="mb-4">
                  <span className="flex items-center gap-2">
                    <Gift size={14} /> ВЫБЕРИ ФОРМАТ
                  </span>
                </Badge>
                <h2 className="text-3xl md:text-4xl font-black mb-4 text-brand-black leading-tight">
                    Выбери формат, который подходит тебе сейчас
                </h2>
                <p className="text-lg md:text-xl text-gray-700 font-medium leading-relaxed max-w-2xl mx-auto">
                    Можно начать с лёгкого старта или сразу взять полный доступ к клубу PRO Mnemo.
                </p>
            </div>

<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
                {/* Карточка 1 - Лайт-продукт */}
                <div className="bg-white border-2 border-gray-300 rounded-2xl p-6 md:p-8 shadow-lg hover:border-brand-gold hover:shadow-2xl transition-all duration-300 relative overflow-hidden group">
                    {/* Декоративный фон */}
                    <div className="absolute top-0 right-0 w-32 h-32 bg-brand-gold/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-brand-gold/10 transition-colors"></div>
                    
                    <div className="relative z-10">
                        <div className="mb-5">
                            <div className="inline-block bg-brand-gold/20 text-brand-black px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-wider mb-4 border border-brand-gold">
                                ЛАЙТ ФОРМАТ
                            </div>
                            <h3 className="text-xl md:text-2xl font-black mb-3 text-brand-black leading-tight">
                                Курс «Все мнемотехники»
                            </h3>
                        </div>

<ul className="space-y-3.5 mb-6">
                            {[
                                "За 7 дней ты научишься всем мнемотехникам немецкого",
                                "Запомнишь <b>300 частотных немецких слов</b>",
                                "Доступ к курсу на <b>6 мес</b>"
                            ].map((item, i) => (
                                <li key={i} className="flex items-start gap-3 group/item">
                                    <div className="mt-0.5 min-w-[24px] flex-shrink-0">
                                         <div className="w-6 h-6 rounded-full border-2 border-brand-gold bg-brand-gold/10 flex items-center justify-center group-hover/item:bg-brand-gold group-hover/item:border-brand-black transition-all">
                                              <Check size={14} className="text-brand-black stroke-[3]" />
                                         </div>
                                    </div>
                                    <span className="text-gray-800 font-medium text-sm md:text-base leading-relaxed group-hover/item:text-brand-black transition-colors" dangerouslySetInnerHTML={{__html: item}}></span>
                                </li>
                            ))}
                        </ul>

<button onClick={() => setShowLightPayment(!showLightPayment)} className="tilda-btn-fix w-full bg-brand-gold text-brand-black font-bold text-base md:text-lg py-4 rounded-xl border-2 border-brand-black hover:bg-[#ffdb4d] hover:scale-[1.02] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:scale-[0.98] transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center gap-2 no-underline">
                            Получить доступ
                        </button>
                        
                        <div className={`payment-dropdown mt-4 space-y-3 ${showLightPayment ? 'show' : ''}`}>
                          <p className="text-xs font-bold text-blue-600 mb-3 uppercase tracking-wide text-center">Выберите способ оплаты:</p>
                          <a 
                            href="#order:Курс Все Мнемотехники за 7 дней=39 :::extid=vu55yk5snxnmufp"
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                          >
                            <div className="flex items-center gap-2.5">
                              <CreditCard size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Картой или PayPal</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </a>
                          <button 
                            onClick={() => handleJoinOtherPaymentLight()}
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                          >
                            <div className="flex items-center gap-2.5">
                              <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Перевод/Другая валюта</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </button>
                          <button 
                            onClick={() => handleJoinMonobankLight()}
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                          >
                            <div className="flex items-center gap-2.5">
                              <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Монобанк в грн</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </button>
                        </div>
                    </div>
                </div>

{/* Карточка 2 - Полный доступ */}
                <div className="bg-gradient-to-br from-brand-red/5 to-brand-gold/5 border-4 border-brand-black rounded-2xl p-6 md:p-8 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all duration-300 relative overflow-hidden group">
                    {/* Декоративный фон */}
                    <div className="absolute top-0 left-0 w-40 h-40 bg-brand-red/10 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2 group-hover:bg-brand-red/15 transition-colors"></div>
                    <div className="absolute bottom-0 right-0 w-32 h-32 bg-brand-gold/10 rounded-full blur-3xl translate-y-1/2 translate-x-1/2"></div>

<div className="relative z-10">
                        <div className="mb-5">
                            <div className="inline-block bg-brand-red text-white px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-wider mb-4 border-2 border-brand-black shadow-[2px_2px_0px_0px_#000]">
                                Большинство выбирают
                            </div>
                            <h3 className="text-xl md:text-2xl font-black mb-3 text-brand-black leading-tight">
                                Клуб PRO Mnemo
                            </h3>
                        </div>

<ul className="space-y-3.5 mb-6">
                            {[
                                "Курс «Все мнемотехники Немецкого»",
                                "База 800 готовых ассоциаций + шпаргалки",
                                "Бесплатный доступ к приложению PRO Mnemo",
                                "Закрытая группа «PRO Mnemo» (доступ на год)"
                            ].map((item, i) => (
                                <li key={i} className="flex items-start gap-3 group/item">
                                    <div className="mt-0.5 min-w-[24px] flex-shrink-0">
                                         <div className="w-6 h-6 rounded-full border-2 border-brand-red bg-white flex items-center justify-center group-hover/item:bg-brand-red transition-all shadow-sm">
                                              <Check size={14} className="text-brand-red stroke-[3] group-hover/item:text-white transition-colors" />
                                         </div>
                                    </div>
                                    <span className="text-gray-800 font-medium text-sm md:text-base leading-relaxed group-hover/item:text-brand-black transition-colors">{item}</span>
                                </li>
                            ))}
                        </ul>

<div className="flex items-end justify-center gap-3 mb-2">
                            <p className="text-3xl md:text-4xl font-black text-brand-red">59</p>
                            <p className="text-lg md:text-xl font-bold text-brand-red mb-1">€</p>
                            <p className="text-lg md:text-xl text-gray-400 line-through font-bold mb-1 decoration-3">108 €</p>
                        </div>
                        <p className="text-center text-[10px] md:text-xs font-black uppercase tracking-wide text-brand-red mb-2">До конца воскресенья</p>
                        <div className="mb-5 flex justify-center">
                            <CountdownCells ms={proWeekMs} compact={true} />
                        </div>

<button onClick={() => setShowProPayment(!showProPayment)} className="tilda-btn-fix w-full bg-brand-gold text-brand-black font-bold text-lg md:text-xl py-5 rounded-xl border-4 border-brand-black hover:bg-[#ffdb4d] hover:scale-[1.02] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:scale-[0.98] transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center gap-2 no-underline">
                            Хочу присоединиться
                        </button>
                        
                        <div className={`payment-dropdown mt-4 space-y-3 ${showProPayment ? 'show' : ''}`}>
                          <p className="text-xs font-bold text-blue-600 mb-3 uppercase tracking-wide text-center">Выберите способ оплаты:</p>
                          <a 
                            href="#order:Клуб PRO Mnemo=59 :::extid=sdjdmxgzrkdbugf"
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                          >
                            <div className="flex items-center gap-2.5">
                              <CreditCard size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Картой или PayPal</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </a>
                          <button 
                            onClick={() => handleJoinOtherPaymentPro()}
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                          >
                            <div className="flex items-center gap-2.5">
                              <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Перевод/Другая валюта</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </button>
                          <button 
                            onClick={() => handleJoinMonobankPro()}
                            className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                          >
                            <div className="flex items-center gap-2.5">
                              <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                              <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Монобанк в грн</span>
                            </div>
                            <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                          </button>
                        </div>
                        
                    </div>
                </div>
            </div>

<div className="mt-12">
                <PaymentFooter />
            </div>
          </section>
        );
      };

const Guarantee = () => {
        return (
          <section className="p-6 md:p-10 bg-white border-t border-gray-100 reveal">
            <div className="max-w-3xl mx-auto">
              <div className="bg-gradient-to-br from-brand-gold/10 to-brand-red/5 border-2 border-brand-gold rounded-2xl p-8 md:p-10 shadow-lg relative overflow-hidden">
                {/* Декоративный элемент */}
                <div className="absolute top-4 right-4 text-6xl opacity-10">????️</div>
                
                <div className="relative z-10">
                  <h2 className="text-2xl md:text-3xl font-black mb-6 text-brand-black leading-tight">
                    <b>А что если мнемотехника в моем случае не сработает?</b>
                  </h2>
                  
                  <div className="flex items-start gap-4">
                    <div className="text-4xl flex-shrink-0">????️</div>
                    <p className="text-lg md:text-xl text-gray-800 font-medium leading-relaxed">
                      Моя гарантия результата: если за 7 дней прохождения курса ты не убедишься, что мнемотехника в твоем случае работает — я верну тебе деньги.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        );
      };

const Reviews = () => {
        return (
          <section className="p-6 md:p-10 bg-gray-50 border-t border-gray-100 reveal">
            <h2 className="text-3xl font-black mb-8 text-brand-black leading-tight text-centern">
              Отзывы участников
            </h2>
       <div className="space-y-8 max-w-lg mx-auto flex flex-col items-center">

{/* Photo 1 */}
    <div className="w-full bg-white p-2 border-2 border-gray-200 rounded-xl shadow-sm rotate-1 hover:rotate-0 transition-transform duration-300">
      <div className="bg-gray-200 rounded-lg flex items-center justify-center overflow-hidden relative aspect-auto">
        <img 
          src="https://static3.tildacdn.com/tild3963-6466-4532-b931-656137616261/Screenshot_2025-09-2.png" 
          alt="Отзыв 1" 
          className="w-full h-full object-contain"
        />
      </div>
    </div>

{/* Photo 2 */}
    <div className="w-full bg-white p-2 border-2 border-gray-200 rounded-xl shadow-sm -rotate-1 hover:rotate-0 transition-transform duration-300">
      <div className="bg-gray-200 rounded-lg flex items-center justify-center overflow-hidden relative aspect-auto">
        <img 
          src="https://static3.tildacdn.com/tild3066-3963-4134-b739-663137663337/Screenshot_2025-12-0.png" 
          alt="Отзыв 2" 
          className="w-full h-full object-contain"
        />
      </div>
    </div>

{/* Photo 3 */}
    <div className="w-full bg-white p-2 border-2 border-gray-200 rounded-xl shadow-sm rotate-1 hover:rotate-0 transition-transform duration-300">
      <div className="bg-gray-200 rounded-lg flex items-center justify-center overflow-hidden relative aspect-auto">
        <img 
          src="https://static3.tildacdn.com/tild6163-3431-4831-a536-666331313433/Screenshot_2025-12-0.png" 
          alt="Отзыв 3" 
          className="w-full h-full object-contain"
        />
      </div>
    </div>

</div>
          </section>
        );
      };

const FinalCTA = () => {
        const [showProPayment, setShowProPayment] = useState(false);

return (
          <section className="p-6 md:p-10 pb-20 bg-white border-t border-gray-100 reveal">
             <div className="max-w-md mx-auto text-center">
                <button onClick={() => setShowProPayment(!showProPayment)} className="tilda-btn-fix w-full bg-brand-gold text-brand-black font-bold text-xl py-5 rounded-2xl border-2 border-brand-black hover:bg-[#ffdb4d] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center gap-2 no-underline">
                    Хочу присоединиться
                </button>
                
                <div className={`payment-dropdown mt-4 space-y-3 ${showProPayment ? 'show' : ''}`}>
                  <p className="text-xs font-bold text-brand-black mb-3 uppercase tracking-wide text-center">Выберите способ оплаты:</p>
                  <a 
                    href="#order:Клуб PRO Mnemo=59 :::extid=sdjdmxgzrkdbugf"
                    className="payment-item w-full flex items-center justify-between p-3 bg-brand-gold/20 border-2 border-brand-gold rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                  >
                    <div className="flex items-center gap-2.5">
                      <CreditCard size={18} className="text-brand-black flex-shrink-0" />
                      <span className="font-bold text-brand-black text-sm whitespace-nowrap">Картой (Visa, Mastercard), PayPal</span>
                    </div>
                    <ArrowDown size={16} className="text-brand-black rotate-[-90deg] flex-shrink-0" />
                  </a>
                  <button 
                    onClick={() => handleJoinOtherPaymentPro()}
                    className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                  >
                    <div className="flex items-center gap-2.5">
                      <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                      <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Перевод/Другая валюта</span>
                    </div>
                    <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                  </button>
                  <button 
                    onClick={() => handleJoinMonobankPro()}
                    className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                  >
                    <div className="flex items-center gap-2.5">
                      <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                      <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Монобанк в грн</span>
                    </div>
                    <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                  </button>
                </div>
             </div>
          </section>
        );
      }

const FAQ = () => {
        const [openIndex, setOpenIndex] = useState(null);
        const toggle = (index) => setOpenIndex(openIndex === index ? null : index);

const items = [
            {
                q: "Подойдёт ли мне обучение, если я только начинаю учить язык?",
                a: "Да, полностью. Мнемотехника идеально работает даже с нулевого уровня. Более того — новичкам она помогает быстрее всего: появляется структура, слова не забываются, а мозг сразу привыкает к правильной технике запоминания. Обычно ученики выходят на 500–1000 слов за 1–2 месяца."
            },
            {
                q: "Не перегрузит ли это мою память?",
                a: "Нет. Наша память устроена так, что она любит образы и визуальные сцены. Мнемотехника разгружает твою память, потому что ты не заучиваешь слово напрямую — вместо этого создаёшь образ, который мозг запоминает легче. Через пару недель ты заметишь больше идей, лучшую концентрацию и более яркое воображение."
            },
            {
                q: "У меня нет много времени. Справлюсь ли я?",
                a: "Да. Обучение построено так, что достаточно 10–15 минут в день, чтобы увидеть первые результаты уже через несколько дней. Упражнения короткие, эффективные и легко вписываются в занятое расписание."
            },
            {
                q: "На какой срок я получаю доступ к материалам?",
                a: "Доступ сохраняется на весь период участия. Ты можешь пересматривать уроки, технику, материалы и упражнения в любое время."
            }
        ];

return (
            <section className="p-6 md:p-10 bg-white border-t border-gray-100 reveal">
                <h2 className="text-3xl font-black mb-8 text-brand-black leading-tight max-w-xl">
                    У тебя ещё остались вопросы? Отвечаю на них:
                </h2>
                <div className="space-y-4 max-w-2xl mx-auto">
                    {items.map((item, index) => (
                        <div key={index} className="border-2 border-gray-200 rounded-xl overflow-hidden transition-all duration-300 hover:border-brand-black">
                            <button
                                onClick={() => toggle(index)}
                                className="w-full flex items-center justify-between p-5 text-left bg-white focus:outline-none"
                            >
                                <span className="font-bold text-lg text-brand-black pr-4">{item.q}</span>
                                <div className={`flex-shrink-0 w-8 h-8 rounded-full border-2 border-brand-black flex items-center justify-center transition-transform duration-300 ${openIndex === index ? 'bg-brand-black text-white rotate-180' : 'bg-white text-brand-black'}`}>
                                    {openIndex === index ? <Minus size={18} /> : <Plus size={18} />}
                                </div>
                            </button>
                            <div
                                className={`transition-all duration-300 ease-in-out overflow-hidden ${openIndex === index ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}
                            >
                                <div className="p-5 pt-0 text-gray-700 leading-relaxed font-medium border-t border-gray-100 mt-2">
                                    {item.a}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </section>
        );
      };

const LimitedOffer = () => {
          const [showProPayment, setShowProPayment] = useState(false);

return (
              <section className="p-6 md:p-10 pb-24 bg-gray-50 border-t border-gray-100 reveal text-center">
                  <div className="max-w-md mx-auto">
                      <div className="inline-block bg-brand-red/10 text-brand-red px-4 py-1 rounded-full text-sm font-black uppercase tracking-widest mb-8 animate-pulse">
                          Предложение ограничено
                      </div>

<button onClick={() => setShowProPayment(!showProPayment)} className="tilda-btn-fix w-full bg-brand-gold text-brand-black font-bold text-xl py-5 rounded-2xl border-2 border-brand-black hover:bg-[#ffdb4d] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center gap-2 no-underline">
                          Хочу присоединиться
                      </button>
                      
                      <div className={`payment-dropdown mt-4 space-y-3 ${showProPayment ? 'show' : ''}`}>
                        <p className="text-xs font-bold text-brand-black mb-3 uppercase tracking-wide text-center">Выберите способ оплаты:</p>
                        <a 
                          href="#order:Клуб PRO Mnemo=59 :::extid=sdjdmxgzrkdbugf"
                          className="payment-item w-full flex items-center justify-between p-3 bg-brand-gold/20 border-2 border-brand-gold rounded-xl hover:bg-brand-gold hover:border-brand-black transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] no-underline cursor-pointer"
                        >
                          <div className="flex items-center gap-2.5">
                            <CreditCard size={18} className="text-brand-black flex-shrink-0" />
                            <span className="font-bold text-brand-black text-sm whitespace-nowrap">Картой (Visa, Mastercard), PayPal</span>
                          </div>
                          <ArrowDown size={16} className="text-brand-black rotate-[-90deg] flex-shrink-0" />
                        </a>
                        <button 
                          onClick={() => handleJoinOtherPaymentPro()}
                          className="payment-item w-full flex items-center justify-between p-3 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-blue-500 transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                        >
                          <div className="flex items-center gap-2.5">
                            <Wallet size={18} className="text-blue-600 flex-shrink-0" />
                            <span className="font-bold text-blue-600 text-sm whitespace-nowrap">Перевод/Другая валюта</span>
                          </div>
                          <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 ml-2" />
                        </button>
                        <button 
                          onClick={() => handleJoin()}
                          className="payment-item w-full flex items-center justify-between p-3 bg-blue-50 border-2 border-blue-400 rounded-xl hover:bg-blue-500 hover:text-white transition-all shadow-[2px_2px_0px_0px_#000] hover:shadow-[4px_4px_0px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px]"
                        >
                          <div className="flex items-center gap-2.5">
                            <Wallet size={18} className="text-blue-600 flex-shrink-0 group-hover:text-white" />
                            <span className="font-bold text-brand-black text-sm whitespace-nowrap group-hover:text-white">В гривнах в Monobank</span>
                          </div>
                          <ArrowDown size={16} className="text-blue-600 rotate-[-90deg] flex-shrink-0 group-hover:text-white" />
                        </button>
                      </div>
                  </div>
              </section>
          );
      };

const App = () => {
        useScrollReveal();

return (
          <div className="min-h-screen bg-dot-pattern font-sans selection:bg-brand-red selection:text-white">
            <main className="max-w-2xl mx-auto bg-white min-h-screen shadow-2xl border-x border-gray-100 overflow-hidden relative">
              {/* German Flag Decorative Strip */}
              <div className="flex h-2 w-full absolute top-0 left-0 z-50 shadow-sm">
                  <div className="w-1/3 bg-brand-black"></div>
                  <div className="w-1/3 bg-brand-red"></div>
                  <div className="w-1/3 bg-brand-gold"></div>
              </div>

<Hero />
              <Benefits />
              <Modules />
              <Bonus />
              <TelegramChannel />
              <CostExplanation />
              <Pricing />
              <Guarantee />
              <Reviews />
              <FinalCTA />
              <FAQ />
              <LimitedOffer />
            </main>
          </div>
        );
      };

const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);