// Variant A — Eisphora Premium Dark Landing (Responsive)

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const LANGUAGES = [
  { code: 'RU', label: 'Русский' },
  { code: 'EN', label: 'English' },
  { code: 'UA', label: 'Українська' },
];

const ACCENT     = 'linear-gradient(135deg, #ff2d55 0%, #630218 100%)';
const BORDER_CLR = 'rgba(255,255,255,0.1)';

// ── Animation helpers ──────────────────────────────────────────────────────────

function useInView(threshold = 0.12) {
  const ref = useRefA(null);
  const [inView, setInView] = useStateA(false);
  useEffectA(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

const fu = (visible, delay = 0) => ({
  opacity: visible ? 1 : 0,
  transform: visible ? 'translateY(0)' : 'translateY(28px)',
  transition: `opacity 0.72s ease ${delay}ms, transform 0.72s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  willChange: 'opacity, transform',
});

const si = (visible, delay = 0) => ({
  opacity: visible ? 1 : 0,
  transform: visible ? 'scale(1) translateY(0)' : 'scale(0.97) translateY(20px)',
  transition: `opacity 0.8s ease ${delay}ms, transform 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  willChange: 'opacity, transform',
});

// ── Breakpoint hook ────────────────────────────────────────────────────────────

function useBreakpoint() {
  const [w, setW] = useStateA(typeof window !== 'undefined' ? window.innerWidth : 1280);
  useEffectA(() => {
    const fn = () => setW(window.innerWidth);
    window.addEventListener('resize', fn, { passive: true });
    return () => window.removeEventListener('resize', fn);
  }, []);
  return { isMobile: w < 768, isTablet: w >= 768 && w < 1024, isDesktop: w >= 1024, w };
}

// ── Mobile menu ────────────────────────────────────────────────────────────────

function MobileMenu({ open, onClose, lang, setLang, onSignIn, t }) {
  useEffectA(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  const COMM_LINKS = [
    { label: 'Discord',  icon: Icon.discord,  color: '#5865F2', href: 'https://discord.gg/vwHv83zvBV' },
    { label: 'Telegram', icon: Icon.telegram, color: '#229ED9', href: 'https://t.me/+K6xDRpL9eEhjNDNi' },
    { label: 'YouTube',  icon: Icon.youtube,  color: '#FF0000', href: 'https://www.youtube.com/@EisphoraOrderflow' },
  ];

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 150, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)' }}>
      <div onClick={e => e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '82%', maxWidth: 340, background: '#0a0a0a', borderLeft: `1px solid ${BORDER_CLR}`, display: 'flex', flexDirection: 'column', overflowY: 'auto', animation: 'eMobileIn 0.26s cubic-bezier(0.16,1,0.3,1)' }}>

        {/* Header row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px', height: 64, borderBottom: `1px solid ${BORDER_CLR}`, flexShrink: 0 }}>
          <img src="assets/logo.png" alt="Eisphora" style={{ height: 32, width: 'auto' }} />
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.5)', display: 'flex', padding: 4 }}>
            <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          </button>
        </div>

        {/* Nav */}
        <div style={{ padding: '8px 0', borderBottom: `1px solid ${BORDER_CLR}`, flexShrink: 0 }}>
          {[{ label: t.nav_indicators, href: '#studies' }, { label: t.nav_pricing, href: '#pricing' }, { label: t.faq, href: '#faq' }].map(item => (
            <a key={item.href} href={item.href} onClick={onClose} style={{ display: 'block', padding: '14px 24px', color: '#FFFFFF', textDecoration: 'none', fontSize: 18, fontWeight: 600, transition: 'background 0.1s' }}
              onTouchStart={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
              onTouchEnd={e => e.currentTarget.style.background = 'transparent'}
            >{item.label}</a>
          ))}
        </div>

        {/* Community */}
        <div style={{ padding: '16px 24px', borderBottom: `1px solid ${BORDER_CLR}`, flexShrink: 0 }}>
          <div style={{ fontSize: 11, color: '#5D6069', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>{t.community}</div>
          {COMM_LINKS.map(item => (
            <a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', color: '#D1D4DC', textDecoration: 'none', fontSize: 16, borderBottom: `1px solid rgba(255,255,255,0.05)` }}>
              <span style={{ color: item.color, display: 'flex', flexShrink: 0 }}>{item.icon(18)}</span>{item.label}
            </a>
          ))}
        </div>

        {/* Language */}
        <div style={{ padding: '16px 24px', borderBottom: `1px solid ${BORDER_CLR}`, flexShrink: 0 }}>
          <div style={{ fontSize: 11, color: '#5D6069', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>Language</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {LANGUAGES.map(l => (
              <button key={l.code} onClick={() => setLang(l.code)} style={{ flex: 1, padding: '10px 6px', borderRadius: 8, border: `1px solid ${lang === l.code ? '#ff2d55' : BORDER_CLR}`, background: lang === l.code ? 'rgba(255,45,85,0.1)' : 'transparent', color: lang === l.code ? '#ff2d55' : '#D1D4DC', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
                {l.code}
              </button>
            ))}
          </div>
        </div>

        {/* Auth */}
        <div style={{ padding: '20px 24px', marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button onClick={() => { onClose(); onSignIn('login'); }} style={{ width: '100%', padding: '15px', background: 'transparent', border: `1px solid ${BORDER_CLR}`, borderRadius: 10, color: '#fff', fontSize: 16, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
            {t.signIn}
          </button>
          <button onClick={() => { onClose(); onSignIn('register'); }} style={{ width: '100%', padding: '15px', background: ACCENT, border: 'none', borderRadius: 10, color: '#fff', fontSize: 16, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
            {t.start}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Dropdowns ──────────────────────────────────────────────────────────────────

function LangSwitcher({ lang, setLang }) {
  const [open, setOpen] = useStateA(false);
  const ref = useRefA(null);

  useEffectA(() => {
    function onOutside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    function onOther(e) { if (e.detail !== 'lang') setOpen(false); }
    function onScroll() { setOpen(false); }
    document.addEventListener('mousedown', onOutside);
    document.addEventListener('menuOpen', onOther);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { document.removeEventListener('mousedown', onOutside); document.removeEventListener('menuOpen', onOther); window.removeEventListener('scroll', onScroll); };
  }, []);

  const toggle = () => {
    setOpen(o => { if (!o) document.dispatchEvent(new CustomEvent('menuOpen', { detail: 'lang' })); return !o; });
  };

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={toggle} style={{ display: 'flex', alignItems: 'center', gap: 7, background: open ? 'rgba(255,255,255,0.07)' : 'transparent', border: `1px solid ${BORDER_CLR}`, borderRadius: 8, padding: '8px 13px', cursor: 'pointer', color: '#FFFFFF', fontSize: 15, fontFamily: 'inherit', fontWeight: 500, transition: 'background 0.15s' }}
        onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; }}
        onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}
      >
        <svg width={17} height={17} viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
        <span>{lang}</span>
        <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s', opacity: 0.6 }}><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 8px)', right: 0, background: '#000', border: `1px solid ${BORDER_CLR}`, borderRadius: 10, overflow: 'hidden', minWidth: 160, boxShadow: '0 8px 32px rgba(0,0,0,0.6)', zIndex: 100, animation: 'eDropdown 0.18s cubic-bezier(0.16,1,0.3,1)' }}>
          {LANGUAGES.map(l => (
            <button key={l.code} onClick={() => { setLang(l.code); setOpen(false); }} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '10px 14px', background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit', color: lang === l.code ? '#ff2d55' : '#D1D4DC', fontSize: 14, textAlign: 'left', transition: 'background 0.1s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span>{l.label}</span>
              <span style={{ fontSize: 12, color: lang === l.code ? '#ff2d55' : '#5D6069' }}>{l.code}</span>
              {lang === l.code && <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="#ff2d55" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function UserMenu({ lang, onSignIn }) {
  const [open, setOpen] = useStateA(false);
  const ref = useRefA(null);

  useEffectA(() => {
    function onOutside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    function onOther(e) { if (e.detail !== 'user') setOpen(false); }
    function onScroll() { setOpen(false); }
    document.addEventListener('mousedown', onOutside);
    document.addEventListener('menuOpen', onOther);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { document.removeEventListener('mousedown', onOutside); document.removeEventListener('menuOpen', onOther); window.removeEventListener('scroll', onScroll); };
  }, []);

  const toggle = () => {
    setOpen(o => { if (!o) document.dispatchEvent(new CustomEvent('menuOpen', { detail: 'user' })); return !o; });
  };

  const t = T[lang];

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={toggle} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 8, background: open ? 'rgba(255,255,255,0.08)' : 'transparent', border: `1px solid ${BORDER_CLR}`, cursor: 'pointer', color: '#FFFFFF', transition: 'background 0.15s' }}
        onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; }}
        onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}
      >
        <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 8px)', right: 0, background: '#000', border: `1px solid ${BORDER_CLR}`, borderRadius: 12, overflow: 'hidden', minWidth: 200, boxShadow: '0 8px 32px rgba(0,0,0,0.6)', zIndex: 100, padding: 6, animation: 'eDropdown 0.18s cubic-bezier(0.16,1,0.3,1)' }}>
          <button onClick={() => { setOpen(false); onSignIn('login'); }} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, color: '#D1D4DC', fontSize: 14, fontWeight: 500, background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit', transition: 'background 0.1s', marginBottom: 2 }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <svg width={15} height={15} viewBox="0 0 24 24" fill="none" stroke="#A2A9B4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
            {t.signIn}
          </button>
          <div style={{ height: 1, background: 'rgba(255,255,255,0.06)', margin: '4px 0' }} />
          <div style={{ padding: '6px 12px 2px', fontSize: 11, color: '#5D6069', letterSpacing: 0.8, textTransform: 'uppercase' }}>{t.community}</div>
          {[
            { label: 'Discord',  icon: Icon.discord,  color: '#5865F2', href: 'https://discord.gg/vwHv83zvBV' },
            { label: 'Telegram', icon: Icon.telegram, color: '#229ED9', href: 'https://t.me/+K6xDRpL9eEhjNDNi' },
            { label: 'YouTube',  icon: Icon.youtube,  color: '#FF0000', href: 'https://www.youtube.com/@EisphoraOrderflow' },
          ].map(item => (
            <a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, textDecoration: 'none', color: '#D1D4DC', fontSize: 14, transition: 'background 0.1s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            ><span style={{ color: item.color, display: 'flex' }}>{item.icon(16)}</span>{item.label}</a>
          ))}
          <div style={{ height: 1, background: 'rgba(255,255,255,0.06)', margin: '4px 0' }} />
          <div style={{ padding: '6px 12px 2px', fontSize: 11, color: '#5D6069', letterSpacing: 0.8, textTransform: 'uppercase' }}>{t.support}</div>
          <a href="#faq" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, textDecoration: 'none', color: '#D1D4DC', fontSize: 14, transition: 'background 0.1s' }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <svg width={15} height={15} viewBox="0 0 24 24" fill="none" stroke="#A2A9B4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
            {t.faq}
          </a>
        </div>
      )}
    </div>
  );
}

function CommunityMenu({ lang }) {
  const [open, setOpen] = useStateA(false);
  const ref = useRefA(null);

  useEffectA(() => {
    function onOutside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    function onOther(e) { if (e.detail !== 'community') setOpen(false); }
    function onScroll() { setOpen(false); }
    document.addEventListener('mousedown', onOutside);
    document.addEventListener('menuOpen', onOther);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { document.removeEventListener('mousedown', onOutside); document.removeEventListener('menuOpen', onOther); window.removeEventListener('scroll', onScroll); };
  }, []);

  const toggle = () => {
    setOpen(o => { if (!o) document.dispatchEvent(new CustomEvent('menuOpen', { detail: 'community' })); return !o; });
  };

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={toggle} style={{ display: 'flex', alignItems: 'center', gap: 5, background: open ? 'rgba(255,255,255,0.06)' : 'transparent', border: 'none', cursor: 'pointer', color: '#FFFFFF', fontSize: 17, fontWeight: 500, fontFamily: 'inherit', padding: '8px 18px', borderRadius: 8, transition: 'background 0.15s' }}
        onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; }}
        onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}
      >
        {T[lang].community}
        <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, background: '#000', border: `1px solid ${BORDER_CLR}`, borderRadius: 12, overflow: 'hidden', minWidth: 180, boxShadow: '0 8px 32px rgba(0,0,0,0.6)', zIndex: 100, padding: 6, animation: 'eDropdown 0.18s cubic-bezier(0.16,1,0.3,1)' }}>
          {[
            { label: 'Discord',  icon: Icon.discord,  color: '#5865F2', href: 'https://discord.gg/vwHv83zvBV' },
            { label: 'Telegram', icon: Icon.telegram, color: '#229ED9', href: 'https://t.me/+K6xDRpL9eEhjNDNi' },
            { label: 'YouTube',  icon: Icon.youtube,  color: '#FF0000', href: 'https://www.youtube.com/@EisphoraOrderflow' },
          ].map(item => (
            <a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, textDecoration: 'none', color: '#D1D4DC', fontSize: 14, transition: 'background 0.1s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            ><span style={{ color: item.color, display: 'flex' }}>{item.icon(16)}</span>{item.label}</a>
          ))}
        </div>
      )}
    </div>
  );
}

// ── AuthModal ──────────────────────────────────────────────────────────────────

function AuthModal({ mode, lang, onClose }) {
  const [tab, setTab] = useStateA(mode);
  const [email, setEmail] = useStateA('');
  const [password, setPassword] = useStateA('');
  const { isMobile } = useBreakpoint();

  useEffectA(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);

  const t = T[lang];
  const inputStyle = {
    width: '100%', padding: '13px 16px', background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, fontSize: 15,
    color: '#FFFFFF', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.82)', backdropFilter: 'blur(16px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: isMobile ? 16 : 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '300px 1fr', width: isMobile ? '100%' : 820, maxWidth: '100%', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.09)', boxShadow: '0 40px 100px rgba(0,0,0,0.9)', animation: 'eAuthIn 0.24s cubic-bezier(0.16,1,0.3,1)' }}>

        {/* LEFT — hidden on mobile */}
        {!isMobile && (
          <div style={{ background: 'linear-gradient(160deg, #0e0e0e 0%, #1e0009 60%, #0e0e0e 100%)', padding: '48px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden', minHeight: 460 }}>
            <div style={{ position: 'absolute', top: '15%', left: '-20%', width: 340, height: 340, background: 'radial-gradient(circle, rgba(255,45,85,0.18) 0%, transparent 68%)', pointerEvents: 'none' }} />
            <img src="assets/logo.png" alt="Eisphora" style={{ height: 'auto', width: '100%', maxWidth: 200, display: 'block', margin: '0 auto', position: 'relative', zIndex: 1 }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <p style={{ fontSize: 26, fontWeight: 800, color: '#FFFFFF', letterSpacing: '-0.03em', lineHeight: 1.25, margin: '0 0 12px', fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif' }}>
                {t.hero_h1a}<br/>
                <span style={{ background: ACCENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>{t.hero_h1b}</span>
              </p>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.38)', margin: 0, lineHeight: 1.65 }}>{t.auth_tagline}</p>
            </div>
          </div>
        )}

        {/* RIGHT */}
        <div style={{ background: '#0a0a0a', padding: isMobile ? '28px 24px 24px' : '44px 40px 36px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
            <h2 style={{ fontSize: 22, fontWeight: 700, color: '#FFFFFF', margin: 0, letterSpacing: '-0.02em' }}>
              {tab === 'register' ? t.auth_register : t.auth_login}
            </h2>
            <button onClick={onClose} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.3)', padding: 4, display: 'flex', transition: 'color 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.color = '#fff'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.3)'}
            >
              <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </button>
          </div>

          <button style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '13px 16px', background: '#FFFFFF', border: 'none', borderRadius: 10, fontSize: 15, fontWeight: 600, color: '#111', cursor: 'pointer', marginBottom: 16, fontFamily: 'inherit', transition: 'background 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.background = '#f0f0f0'}
            onMouseLeave={e => e.currentTarget.style.background = '#FFFFFF'}
          >
            <svg width={17} height={17} viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
            {t.auth_google}
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 16px' }}>
            <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.07)' }} />
            <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.25)' }}>{t.auth_or}</span>
            <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.07)' }} />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 14 }}>
            <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} style={inputStyle}
              onFocus={e => e.target.style.borderColor = 'rgba(255,45,85,0.5)'}
              onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'}
            />
            <input type="password" placeholder={t.auth_password} value={password} onChange={e => setPassword(e.target.value)} style={inputStyle}
              onFocus={e => e.target.style.borderColor = 'rgba(255,45,85,0.5)'}
              onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'}
            />
          </div>

          <button style={{ width: '100%', padding: '14px 16px', background: ACCENT, border: 'none', borderRadius: 10, fontSize: 15, fontWeight: 700, color: '#FFFFFF', cursor: 'pointer', fontFamily: 'inherit', marginBottom: 20, transition: 'filter 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.filter = 'brightness(1.15)'}
            onMouseLeave={e => e.currentTarget.style.filter = 'brightness(1)'}
          >
            {tab === 'register' ? t.auth_create : t.auth_submit_login}
          </button>

          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.35)', margin: 0, textAlign: 'center' }}>
            {tab === 'register' ? t.auth_have_account : t.auth_no_account}{' '}
            <button onClick={() => setTab(tab === 'register' ? 'login' : 'register')} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: '#ff2d55', fontSize: 13, fontFamily: 'inherit', padding: 0 }}>
              {tab === 'register' ? t.auth_go_login : t.auth_go_register}
            </button>
          </p>
        </div>
      </div>
    </div>
  );
}

// ── StudyShowcase ──────────────────────────────────────────────────────────────

const SHOWCASE_BASE = [
  { name: 'Volume Profile & Delta Profile', img: 'screenshots/vpdp.png' },
  { name: 'Footprint',                      img: 'screenshots/footprint.png' },
  { name: 'Gradient Map',                   img: 'screenshots/gradient.png' },
  { name: 'Live News — Forex Factory',      img: 'screenshots/forex.png' },
  { name: 'Live News — Financial Juice',    img: 'screenshots/juice.png' },
  { name: 'Order Book (DOM)',               img: 'screenshots/orderbook.png' },
  { name: 'Tape Reader',                    img: 'screenshots/tape.png' },
  { name: 'CVD',                            img: 'screenshots/cvd.png' },
  { name: 'Stacked Imbalance',              img: 'screenshots/stacked.png' },
  { name: 'MGI Levels',                     img: 'screenshots/mgi-levels.png' },
  { name: 'MGI Weekly',                     img: 'screenshots/mgi-week.png' },
  { name: 'MGI Monthly',                    img: 'screenshots/mgi-month.png' },
];

function StudyShowcase({ lang }) {
  const [active, setActive] = useStateA(0);
  const [fading, setFading] = useStateA(false);
  // Default OFF: autoplay was rotating slides while users were trying
  // to study a screenshot. Pause icon stays so they can opt-in.
  const [autoplay, setAutoplay] = useStateA(false);
  const listRef = useRefA(null);
  const itemRefs = useRefA([]);
  const [wrapRef, wrapInView] = useInView(0.08);
  const { isMobile, isTablet } = useBreakpoint();

  const showcase = SHOWCASE_BASE.map((s, i) => ({ ...s, desc: SHOWCASE_DESCS[lang][i] }));
  const isSmall = isMobile || isTablet;

  const go = (i) => {
    const next = ((i % showcase.length) + showcase.length) % showcase.length;
    if (next === active) return;
    setFading(true);
    setTimeout(() => { setActive(next); setFading(false); }, 380);
  };

  useEffectA(() => {
    if (!autoplay) return;
    const t = setInterval(() => {
      setActive(prev => {
        const next = (prev + 1) % showcase.length;
        setFading(true);
        setTimeout(() => setFading(false), 380);
        return next;
      });
    }, 4000);
    return () => clearInterval(t);
  }, [autoplay]);

  useEffectA(() => {
    if (isSmall) return;
    const el = itemRefs.current[active];
    const list = listRef.current;
    if (el && list) {
      const elTop = el.offsetTop - list.offsetTop;
      list.scrollTo({ top: elTop - list.offsetHeight / 2 + el.offsetHeight / 2, behavior: 'smooth' });
    }
  }, [active, isSmall]);

  const cur = showcase[active];

  const navControls = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {[
        { onClick: () => go(active - 1), icon: <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg> },
        { onClick: () => go(active + 1), icon: <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg> },
      ].map((btn, i) => (
        <button key={i} onClick={btn.onClick} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', cursor: 'pointer', color: '#fff', width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 0.15s' }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.16)'}
          onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
        >{btn.icon}</button>
      ))}
      <span style={{ color: '#fff', fontSize: 14, minWidth: 52, textAlign: 'center' }}>{active + 1} / {showcase.length}</span>
      <button onClick={() => setAutoplay(p => !p)} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', cursor: 'pointer', color: '#fff', width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 0.15s' }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.16)'}
        onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
      >
        {autoplay
          ? <svg width={11} height={11} viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
          : <svg width={11} height={11} viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        }
      </button>
    </div>
  );

  /* ── Mobile / Tablet layout ── */
  if (isSmall) {
    return (
      <div ref={wrapRef} style={{ margin: '0 5% 60px', border: `1px solid ${BORDER_CLR}`, borderRadius: 16, overflow: 'hidden', ...si(wrapInView, 80) }}>
        {/* Image */}
        <div style={{ opacity: fading ? 0 : 1, transform: fading ? 'translateY(8px) scale(0.99)' : 'translateY(0) scale(1)', transition: 'opacity 0.38s cubic-bezier(0.4,0,0.2,1), transform 0.38s cubic-bezier(0.4,0,0.2,1)', lineHeight: 0 }}>
          {cur.img && <img src={cur.img} alt={cur.name} style={{ width: '100%', height: 'auto', display: 'block' }} />}
        </div>
        {/* Info + controls */}
        <div style={{ padding: '20px 20px 24px' }}>
          <div style={{ opacity: fading ? 0 : 1, transition: 'opacity 0.38s ease', marginBottom: 12 }}>
            <div style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: '#FFFFFF', letterSpacing: '-0.02em', marginBottom: 8, fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif' }}>{cur.name}</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', lineHeight: 1.65 }}>{cur.desc}</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
            {navControls}
          </div>
        </div>
      </div>
    );
  }

  /* ── Desktop layout ── */
  return (
    <div ref={wrapRef} style={{ margin: '0 7% 80px', border: `1px solid ${BORDER_CLR}`, borderRadius: 20, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr', ...si(wrapInView, 80) }}>
      {/* LEFT */}
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 80, background: 'linear-gradient(to bottom, #000 0%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: 'linear-gradient(to top, #000 0%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />
        <div ref={listRef} style={{ overflowY: 'auto', scrollbarWidth: 'none', maxHeight: 620, padding: '60px 0' }}>
          {showcase.map((item, i) => {
            const isActive = i === active;
            return (
              <div key={i} ref={el => itemRefs.current[i] = el} onClick={() => go(i)} style={{ cursor: 'pointer', userSelect: 'none', padding: '10px 36px' }}>
                <span style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: 44, fontWeight: isActive ? 800 : 500, color: isActive ? '#FFFFFF' : 'rgba(255,255,255,0.3)', letterSpacing: '-0.03em', lineHeight: 1.2, display: 'block', transition: 'color 0.5s ease, font-weight 0.5s ease' }}>{item.name}</span>
                <div style={{ height: 52, overflow: 'hidden', marginTop: 4 }}>
                  <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', lineHeight: 1.65, opacity: isActive && !fading ? 1 : 0, transform: isActive && !fading ? 'translateY(0)' : 'translateY(16px)', transition: 'opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1)' }}>{item.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      {/* RIGHT */}
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '32px' }}>
        <div style={{ opacity: fading ? 0 : 1, transform: fading ? 'translateY(12px) scale(0.98)' : 'translateY(0) scale(1)', transition: 'opacity 0.38s cubic-bezier(0.4,0,0.2,1), transform 0.38s cubic-bezier(0.4,0,0.2,1)' }}>
          {cur.img && <img src={cur.img} alt={cur.name} style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 8 }} />}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16, gap: 8, alignItems: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            {navControls}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Main component ─────────────────────────────────────────────────────────────

function VariantA() {
  const [openFaq, setOpenFaq] = useStateA(-1);
  // Language is shared with dashboard.html via localStorage.eisphora_lang.
  // Storage uses lowercase ('en'/'ru'/'ua'); landing state uses uppercase.
  const [lang, setLang] = useStateA(() => {
    try {
      const s = (typeof localStorage !== 'undefined' && localStorage.getItem('eisphora_lang')) || '';
      if (s === 'ua') return 'UA';
      if (s === 'ru') return 'RU';
      if (s === 'en') return 'EN';
    } catch(e){}
    return 'EN';
  });
  useEffectA(() => {
    try { localStorage.setItem('eisphora_lang', lang.toLowerCase()); } catch(e){}
  }, [lang]);
  const [mounted, setMounted] = useStateA(false);
  // Auth flow lives in dashboard.html (Google OAuth + email login + register).
  // Every "Sign in" / "Get started" CTA on the landing just routes there;
  // the AuthModal component below is dead code kept only to avoid touching
  // the visual layer if we ever want to re-introduce inline auth.
  const setAuthModal = (mode) => { window.location.href = 'dashboard.html'; };
  const authModal = null;
  const [mobileMenuOpen, setMobileMenuOpen] = useStateA(false);

  const { isMobile, isTablet, isDesktop } = useBreakpoint();
  const isSmall = isMobile || isTablet;

  const BG     = '#000000';
  const T1     = '#FFFFFF';
  const T2     = 'rgba(255,255,255,0.85)';
  const T3     = 'rgba(255,255,255,0.6)';
  const BORDER = BORDER_CLR;
  const t      = T[lang];

  useEffectA(() => {
    if (document.getElementById('e-anim')) return;
    const s = document.createElement('style');
    s.id = 'e-anim';
    s.textContent = `
      @keyframes eDropdown {
        from { opacity: 0; transform: translateY(-8px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes eHeaderIn {
        from { opacity: 0; transform: translateY(-100%); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes eAuthIn {
        from { opacity: 0; transform: scale(0.96) translateY(12px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
      }
      @keyframes eMobileIn {
        from { opacity: 0; transform: translateX(100%); }
        to   { opacity: 1; transform: translateX(0); }
      }
    `;
    document.head.appendChild(s);
  }, []);

  useEffectA(() => {
    const id = requestAnimationFrame(() => setMounted(true));
    return () => cancelAnimationFrame(id);
  }, []);

  useEffectA(() => {
    const MAP = { RU: 'ru', EN: 'en', UA: 'uk' };
    document.documentElement.lang = MAP[lang] || 'ru';
    setOpenFaq(-1);
  }, [lang]);

  // Close mobile menu on resize to desktop
  useEffectA(() => {
    if (isDesktop) setMobileMenuOpen(false);
  }, [isDesktop]);

  const [featRef,    featInView]    = useInView(0.1);
  const [studHdRef,  studHdInView]  = useInView(0.2);
  const [priceHdRef, priceHdInView] = useInView(0.2);
  const [priceGRef,  priceGInView]  = useInView(0.08);
  const [faqRef,     faqInView]     = useInView(0.1);
  const [commRef,    commInView]    = useInView(0.1);
  const [footRef,    footInView]    = useInView(0.1);

  const COMM_HREFS     = ['https://discord.gg/vwHv83zvBV', 'https://t.me/+K6xDRpL9eEhjNDNi', 'https://www.youtube.com/@EisphoraOrderflow'];
  const COMM_COLORS    = ['#5865F2', '#229ED9', '#FF0000'];
  const COMM_GRADIENTS = [
    'linear-gradient(180deg, #5865F2 0%, #ff2d55 100%)',
    'linear-gradient(180deg, #229ED9 0%, #5865F2 100%)',
    'linear-gradient(180deg, #ff2d55 0%, #630218 100%)',
  ];

  const px = isDesktop ? '7%' : isTablet ? '5%' : '5%';

  return (
    <div style={{ background: BG, color: T1, fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', minHeight: '100%' }}>

      {/* ── HEADER ── */}
      <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(0,0,0,0.95)', backdropFilter: 'blur(24px)', animation: 'eHeaderIn 0.5s cubic-bezier(0.16,1,0.3,1)' }}>
        <div style={{ padding: isSmall ? '0 20px' : '0 56px', height: 64, maxWidth: 1400, margin: '0 auto', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

          {/* Left: logo + desktop nav */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
            <a href="#"><img src="assets/logo.png" alt="Eisphora" style={{ height: 36, width: 'auto', display: 'block' }} /></a>
            {isDesktop && (
              <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                {[{ label: t.nav_indicators, href: '#studies' }, { label: t.nav_pricing, href: '#pricing' }, { label: t.faq, href: '#faq' }].map(item => (
                  <a key={item.href} href={item.href} style={{ color: T1, textDecoration: 'none', fontSize: 17, fontWeight: 500, padding: '8px 18px', borderRadius: 8, transition: 'background 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.07)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                  >{item.label}</a>
                ))}
                <CommunityMenu lang={lang} />
              </nav>
            )}
          </div>

          {/* Right: desktop controls OR mobile hamburger */}
          {isDesktop ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <LangSwitcher lang={lang} setLang={setLang} />
              <UserMenu lang={lang} onSignIn={setAuthModal} />
              <button onClick={() => setAuthModal('register')} style={{ background: ACCENT, color: T1, padding: '11px 24px', fontSize: 16, fontWeight: 700, border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', borderRadius: 8, letterSpacing: '-0.01em', fontFamily: 'inherit', transition: 'filter 0.15s' }}
                onMouseEnter={e => e.currentTarget.style.filter = 'brightness(1.15)'}
                onMouseLeave={e => e.currentTarget.style.filter = 'brightness(1)'}
              >{t.start}</button>
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <button onClick={() => setAuthModal('register')} style={{ background: ACCENT, color: T1, padding: '9px 18px', fontSize: 14, fontWeight: 700, border: 'none', cursor: 'pointer', borderRadius: 8, fontFamily: 'inherit' }}>
                {t.start}
              </button>
              <button onClick={() => setMobileMenuOpen(true)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, background: 'transparent', border: `1px solid ${BORDER_CLR}`, borderRadius: 8, cursor: 'pointer', color: T1 }}>
                <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
              </button>
            </div>
          )}
        </div>
      </header>

      {/* Mobile menu */}
      <MobileMenu
        open={mobileMenuOpen}
        onClose={() => setMobileMenuOpen(false)}
        lang={lang}
        setLang={setLang}
        onSignIn={setAuthModal}
        t={t}
      />

      {/* ── HERO ── */}
      <section style={{ overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '64px 5% 48px' : isTablet ? '80px 5% 56px' : '100px 7% 64px', textAlign: 'center' }}>
          <h1 style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 'clamp(48px, 12vw, 72px)' : 'clamp(72px, 10.5vw, 140px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '0 0 24px', ...fu(mounted, 0) }}>
            {t.hero_h1a}<br/>
            <span style={{ background: ACCENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>{t.hero_h1b}</span>
          </h1>
          <p style={{ fontSize: isMobile ? 16 : 'clamp(17px, 1.5vw, 22px)', color: T2, maxWidth: 640, margin: '0 auto 32px', lineHeight: 1.65, ...fu(mounted, 150) }}>
            {t.hero_sub}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 32, ...fu(mounted, 280) }}>
            <a href="#pricing" style={{ background: ACCENT, color: T1, padding: isMobile ? '14px 24px' : '16px 32px', borderRadius: 12, fontSize: isMobile ? 15 : 16, fontWeight: 700, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, boxShadow: '0 0 48px rgba(99,2,24,0.4)', transition: 'filter 0.15s, box-shadow 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.15)'; e.currentTarget.style.boxShadow = '0 0 72px rgba(99,2,24,0.55)'; }}
              onMouseLeave={e => { e.currentTarget.style.filter = 'brightness(1)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(99,2,24,0.4)'; }}
            >{t.hero_cta1} {Icon.arrowRight(16)}</a>
            <a href="#studies" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)', color: T1, padding: isMobile ? '14px 24px' : '16px 32px', borderRadius: 12, fontSize: isMobile ? 15 : 16, fontWeight: 500, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'background 0.15s, border-color 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.28)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)'; }}
            >{t.hero_cta2}</a>
          </div>
        </div>

        {/* Video */}
        <div style={{ position: 'relative', zIndex: 1, margin: `0 ${px}`, ...si(mounted, 420) }}>
          <div style={{ position: 'absolute', top: -50, left: -60, right: -60, bottom: -40, zIndex: 0, pointerEvents: 'none', background: 'linear-gradient(135deg, rgba(59,82,61,0.9) 0%, rgba(99,2,24,0.9) 100%)', filter: 'blur(55px)', borderRadius: '68% 32% 55% 45% / 42% 58% 38% 62%' }} />
          <div style={{ position: 'relative', zIndex: 1, borderRadius: isMobile ? 10 : 16, overflow: 'hidden', border: `1px solid ${BORDER}`, lineHeight: 0 }}>
            <video src="assets/motivewave.mp4" autoPlay loop muted playsInline style={{ width: '100%', display: 'block' }} ref={el => { if (el) el.playbackRate = 1.25; }} />
          </div>
        </div>

        {/* Features */}
        <div ref={featRef} style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', padding: isMobile ? '56px 5% 24px' : isTablet ? '72px 5% 24px' : '96px 7% 32px', gap: isMobile ? 32 : 48 }}>
          {[Icon.layers(28), Icon.activity(28), Icon.gauge(28), Icon.bell(28)].map((icon, i) => (
            <div key={i} style={{ ...fu(featInView, i * 90) }}>
              <div style={{ color: T1, marginBottom: 16 }}>{icon}</div>
              <div style={{ fontSize: isMobile ? 15 : 17, fontWeight: 600, color: T1, marginBottom: 8 }}>{t.features[i].title}</div>
              <div style={{ fontSize: isMobile ? 13 : 14, color: T3, lineHeight: 1.65 }}>{t.features[i].desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── STUDIES ── */}
      <section id="studies" style={{ background: BG }}>
        <div ref={studHdRef} style={{ padding: isMobile ? '48px 5% 40px' : isTablet ? '56px 5% 48px' : '60px 7% 64px', textAlign: 'center' }}>
          <h2 style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 'clamp(38px, 9vw, 56px)' : 'clamp(52px, 6.5vw, 88px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '0 0 20px', ...fu(studHdInView, 0) }}>
            {t.studies_h2a}<br/>{t.studies_h2b}
          </h2>
          <p style={{ fontSize: isMobile ? 16 : 20, color: T2, maxWidth: 640, margin: '0 auto', lineHeight: 1.65, ...fu(studHdInView, 120) }}>{t.studies_sub}</p>
        </div>
        <StudyShowcase lang={lang} />
      </section>

      {/* ── PRICING ── */}
      <section id="pricing" style={{ background: BG }}>
        <div style={{ padding: isMobile ? '48px 5%' : isTablet ? '56px 5%' : '60px 7%' }}>
          <div ref={priceHdRef} style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 72 }}>
            <h2 style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 'clamp(36px, 9vw, 52px)' : 'clamp(48px, 6vw, 80px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05, margin: '0 0 20px', ...fu(priceHdInView, 0) }}>
              {t.pricing_h2a}<br/>{t.pricing_h2b}
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 18, color: T2, margin: '0 auto', maxWidth: 520, lineHeight: 1.65, ...fu(priceHdInView, 120) }}>{t.pricing_sub}</p>
          </div>
          <div ref={priceGRef} style={{ display: 'grid', gridTemplateColumns: isDesktop ? 'repeat(3, 1fr)' : '1fr', gap: isMobile ? 16 : 20, maxWidth: isDesktop ? 'none' : 520, margin: '0 auto' }}>
            {PRICING[lang].map((p, idx) => {
              const isPop = p.id === 'yearly';
              return (
                <div key={p.id}
                  style={{ background: '#0a0a0a', border: isPop ? '1px solid rgba(255,45,85,0.4)' : `1px solid ${BORDER}`, borderRadius: 20, padding: isMobile ? '28px 24px' : '40px 36px', position: 'relative', boxShadow: isPop ? '0 0 60px rgba(99,2,24,0.2)' : 'none', transition: 'transform 0.2s', ...fu(priceGInView, isDesktop ? idx * 100 : 0) }}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
                >
                  {p.badge && <div style={{ position: 'absolute', top: 20, right: 20, padding: '5px 14px', background: ACCENT, color: T1, fontSize: 11, fontWeight: 700, borderRadius: 8, letterSpacing: 1 }}>{p.badge}</div>}
                  <div style={{ fontSize: 11, color: isPop ? 'rgba(255,45,85,0.7)' : T3, letterSpacing: 1.5, marginBottom: 20, textTransform: 'uppercase' }}>{String(idx + 1).padStart(2, '0')} / {p.label}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
                    <span style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 52 : 64, fontWeight: 800, letterSpacing: '-0.04em', color: T1 }}>{p.price}</span>
                    <span style={{ color: T3, fontSize: 15 }}>{p.period}</span>
                  </div>
                  <div style={{ fontSize: 13, color: isPop ? 'rgba(255,45,85,0.85)' : T3, marginBottom: 24 }}>{p.subtitle}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
                    {p.features.map((f, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: T1 }}>
                        <span style={{ color: '#ff2d55', flexShrink: 0 }}>{Icon.check(14)}</span>{f}
                      </div>
                    ))}
                  </div>
                  <button onClick={e => { e.stopPropagation(); window.location.href = 'dashboard.html?plan=' + p.id; }} style={{ width: '100%', padding: '15px 16px', background: isPop ? ACCENT : 'rgba(255,255,255,0.07)', color: T1, border: 'none', borderRadius: 12, fontSize: 15, fontWeight: 600, cursor: 'pointer', marginBottom: 10, fontFamily: 'inherit', transition: 'filter 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.filter = 'brightness(1.15)'}
                    onMouseLeave={e => e.currentTarget.style.filter = 'brightness(1)'}
                  >{t.btn_subscribe}</button>
                  <button onClick={e => { e.stopPropagation(); window.location.href = 'dashboard.html?plan=' + p.id + '&crypto=1'; }} style={{ width: '100%', padding: '13px 16px', background: 'transparent', color: T3, border: `1px solid ${BORDER}`, borderRadius: 12, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'border-color 0.15s, color 0.15s' }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; e.currentTarget.style.color = T2; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = BORDER; e.currentTarget.style.color = T3; }}
                  >{t.btn_crypto}</button>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section id="faq" style={{ background: BG }}>
        <div ref={faqRef} style={{ padding: isMobile ? '56px 5%' : isTablet ? '64px 5%' : '80px 7%' }}>
          <h2 style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 'clamp(34px, 9vw, 48px)' : 'clamp(48px, 6vw, 80px)', fontWeight: 800, letterSpacing: '-0.04em', margin: '0 0 36px', ...fu(faqInView, 0) }}>{t.faq_title}</h2>
          <div style={{ borderTop: `1px solid ${BORDER}` }}>
            {FAQ[lang].map((f, i) => (
              <div key={i} style={{ borderBottom: `1px solid ${BORDER}`, ...fu(faqInView, 80 + i * 60) }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{ width: '100%', padding: isMobile ? '18px 0' : '24px 0', background: 'transparent', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: isMobile ? 15 : 17, fontWeight: 500, color: openFaq === i ? T1 : T2, textAlign: 'left', gap: 20, fontFamily: 'inherit', transition: 'color 0.2s' }}
                >
                  <span>{f.q}</span>
                  <span style={{ width: 28, height: 28, flexShrink: 0, borderRadius: '50%', border: '1.5px solid', borderColor: openFaq === i ? 'rgba(255,45,85,0.4)' : BORDER, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, lineHeight: 1, color: openFaq === i ? '#ff2d55' : T3, transition: 'color 0.2s, border-color 0.2s' }}>
                    {openFaq === i ? '−' : '+'}
                  </span>
                </button>
                <div style={{ overflow: 'hidden', maxHeight: openFaq === i ? 400 : 0, opacity: openFaq === i ? 1 : 0, transition: 'max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease' }}>
                  <p style={{ margin: '0 0 20px', color: T3, fontSize: isMobile ? 14 : 15, lineHeight: 1.75, maxWidth: 760 }}>{f.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── COMMUNITY ── */}
      <section style={{ background: BG }}>
        <div ref={commRef} style={{ padding: isMobile ? '56px 5% 72px' : isTablet ? '64px 5% 80px' : '80px 7% 100px' }}>
          <h2 style={{ fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', fontSize: isMobile ? 'clamp(34px, 9vw, 48px)' : 'clamp(48px, 6vw, 80px)', fontWeight: 800, letterSpacing: '-0.04em', margin: isMobile ? '0 0 40px' : '0 0 64px', ...fu(commInView, 0) }}>{t.community_h2}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isDesktop ? 'repeat(3, 1fr)' : '1fr', gap: isDesktop ? 0 : 0 }}>
            {t.community_items.map((item, i) => (
              <a key={i} href={COMM_HREFS[i]} target="_blank" rel="noopener noreferrer"
                style={{ textDecoration: 'none', display: 'flex', flexDirection: 'row', paddingRight: isDesktop ? 40 : 0, paddingBottom: isDesktop ? 0 : 32, marginBottom: isDesktop ? 0 : 8, borderRight: isDesktop && i < 2 ? `1px solid ${BORDER}` : 'none', borderBottom: !isDesktop && i < 2 ? `1px solid ${BORDER}` : 'none', paddingLeft: isDesktop && i > 0 ? 40 : 0, transition: 'background 0.2s', ...fu(commInView, 80 + i * 100) }}
                onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.02)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <div style={{ width: 3, flexShrink: 0, background: COMM_GRADIENTS[i], borderRadius: 2, marginRight: 24 }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: isDesktop ? 0 : 4 }}>
                  <div>
                    <div style={{ fontSize: isMobile ? 20 : 26, fontWeight: 700, color: T1, marginBottom: 10, fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', letterSpacing: '-0.02em' }}>{item.title}</div>
                    <div style={{ fontSize: isMobile ? 14 : 15, color: T3, lineHeight: 1.65 }}>{item.desc}</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 14, fontWeight: 600, color: COMM_COLORS[i] }}>
                    {item.link} {Icon.arrowRight(13)}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{ background: BG, borderTop: `1px solid ${BORDER}` }}>
        <div ref={footRef} style={{ padding: isMobile ? '48px 5% 36px' : isTablet ? '64px 5% 40px' : '80px 7% 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : isTablet ? '1fr 1fr 1fr' : '2fr 1fr 1fr 1fr', gap: isMobile ? '40px 24px' : 48, marginBottom: 48, ...fu(footInView, 0) }}>
            <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
              <a href="#"><img src="assets/logo.png" alt="Eisphora" style={{ height: 24, marginBottom: 14, display: 'block' }} /></a>
              <p style={{ fontSize: 14, color: T3, maxWidth: 280, margin: 0, lineHeight: 1.65 }}>{t.footer_desc}</p>
            </div>
            {[
              { title: t.footer_col_product, items: [{ label: t.nav_indicators, href: '#studies' }, { label: t.nav_pricing, href: '#pricing' }, { label: t.faq, href: '#faq' }] },
              { title: t.footer_col_support, items: [{ label: 'Discord', href: 'https://discord.gg/vwHv83zvBV' }, { label: 'Telegram', href: 'https://t.me/+K6xDRpL9eEhjNDNi' }, { label: 'Email', href: 'mailto:support@eisphora.net' }] },
              { title: t.footer_col_legal,   items: [{ label: t.footer_tos, href: 'terms.html' }, { label: t.footer_privacy, href: 'privacy.html' }, { label: t.footer_refund, href: 'refund.html' }] },
            ].map((s, i) => (
              <div key={i} style={{ ...fu(footInView, 80 + i * 60) }}>
                <div style={{ fontSize: 12, color: T1, fontWeight: 600, marginBottom: 14 }}>{s.title}</div>
                {s.items.map((it, j) => (
                  <a key={j} href={it.href} target={it.href.startsWith('http') ? '_blank' : undefined} rel={it.href.startsWith('http') ? 'noopener noreferrer' : undefined} style={{ display: 'block', fontSize: 13, color: T3, textDecoration: 'none', padding: '5px 0', transition: 'color 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.color = T2}
                    onMouseLeave={e => e.currentTarget.style.color = T3}
                  >{it.label}</a>
                ))}
              </div>
            ))}
          </div>
          <div style={{ paddingTop: 24, borderTop: `1px solid ${BORDER}`, fontSize: 12, color: T3, ...fu(footInView, 200) }}>
            <span>{t.footer_copy}</span>
          </div>
        </div>
      </footer>

      {authModal && <AuthModal mode={authModal} lang={lang} onClose={() => setAuthModal(null)} />}
    </div>
  );
}

window.VariantA = VariantA;