// ============================================================
// MEMBER AREA — locked preview + dashboard
// ============================================================

const ZOOM_RECORDINGS = [
  { id:1, cat:'BACKTEST', color:'acid',  title:'Backtest Call — NQ liquidity sweep setup',     date:'2026-05-12', dur:'1:48:22', desc:'Backtest pe 6 luni de NQ pe London sweep + NY reversal. Win rate, R:R, lecții.', tier:'course' },
  { id:2, cat:'ANALYSIS', color:'cyan',  title:'Market Analysis — CPI week prep',              date:'2026-05-09', dur:'2:04:11', desc:'Cum poziționăm înainte de CPI. Niveluri cheie, sesiunile sensibile, rules prop.', tier:'course' },
  { id:3, cat:'PSYCHOLOGY', color:'gold',title:'Psychology Call — Drawdown recovery',          date:'2026-05-05', dur:'1:32:08', desc:'Cum revii dintr-un -8% drawdown fără să distrugi contul. Mindset + reguli concrete.', tier:'elite' },
  { id:4, cat:'PROP',     color:'blue',  title:'Apex Rules Deep Dive 2026 Update',             date:'2026-05-02', dur:'58:14',   desc:'Reguli Apex actualizate, EOD vs intraday DD, consistency rule, payouts.', tier:'course' },
  { id:5, cat:'BACKTEST', color:'acid',  title:'Backtest Call — IFVG continuation',            date:'2026-04-28', dur:'1:51:33', desc:'IFVG ca instrument de continuation. 40 trade-uri backtested, statistici complete.', tier:'elite' },
  { id:6, cat:'ANALYSIS', color:'cyan',  title:'NY Open Playbook — Mai 2026',                  date:'2026-04-25', dur:'1:18:46', desc:'3 setup-uri repetabile la NY open. Filtre, invalidare, management.', tier:'free' },
  { id:7, cat:'PSYCHOLOGY', color:'gold',title:'Journal & Review Framework',                   date:'2026-04-21', dur:'1:12:55', desc:'Template-ul folosit de Elite members. Întrebări corecte, metrics urmărite.', tier:'elite' },
  { id:8, cat:'PROP',     color:'blue',  title:'Tradeify Walkthrough + Risk Setup',            date:'2026-04-18', dur:'1:24:09', desc:'Setup-ul corect pe Tradeify, sizing, payout strategy.', tier:'course' },
];

const COURSES = [
  { icon:'layout',  color:'acid', title:'TradingView Basics',     lessons: 8,  duration: '1h 40m', progress: 100 },
  { icon:'book',    color:'cyan', title:'Trading Fundamentals',   lessons: 12, duration: '3h 12m', progress: 75 },
  { icon:'eye',     color:'blue', title:'Liquidity Concepts',     lessons: 9,  duration: '2h 24m', progress: 40 },
  { icon:'candle',  color:'acid', title:'OB / FVG / IFVG / Breaker', lessons: 14, duration: '4h 02m', progress: 10 },
  { icon:'chart',   color:'cyan', title:'NASDAQ Strategy',        lessons: 11, duration: '3h 48m', progress: 0 },
  { icon:'target',  color:'blue', title:'Risk Management Deep',   lessons: 7,  duration: '2h 06m', progress: 0 },
  { icon:'shield',  color:'gold', title:'Prop Firm Rules',        lessons: 10, duration: '2h 51m', progress: 0 },
  { icon:'brain',   color:'gold', title:'Trading Psychology',     lessons: 9,  duration: '2h 18m', progress: 0 },
];

const RESOURCES = [
  { icon:'file',     color:'acid', title:'Trading Plan Template',     fmt:'PDF · 12 pag', tier:'free' },
  { icon:'settings', color:'cyan', title:'Risk Calculator',           fmt:'Excel · multi-firm', tier:'course' },
  { icon:'book',     color:'blue', title:'Apex Rules Notes (2026)',   fmt:'PDF · 8 pag', tier:'course' },
  { icon:'check',    color:'gold', title:'Pre-Market Checklist',      fmt:'PDF · 1 pag', tier:'free' },
  { icon:'calendar', color:'acid', title:'Economic Events Reminders', fmt:'iCal · sync', tier:'course' },
  { icon:'file',     color:'gold', title:'Elite Frameworks Pack',     fmt:'10× PDF', tier:'elite' },
];

const tierLabel = (t) => ({ free: 'FREE', course: 'COURSE', elite: 'ELITE' }[t] || 'FREE');
const tierColor = (t) => ({ free: 'cyan',  course: 'blue',   elite: 'gold'  }[t] || 'cyan');

// ===== LOCKED RECORDINGS PREVIEW =====
// Non-elite users (anon + free) see the actual YouTube thumbnails of past
// Elite Calls, but the cards are non-clickable. Hover reveals a padlock.
// Last position is a "+44" tease card (also locked).
const LR_PLAYLIST_URL = 'https://www.youtube.com/playlist?list=PLnu6--ikU1FTTNts7iWOqIM7FgnpUP8lh';
const LR_VISIBLE = 8;
const LR_MORE_FALLBACK = 44;

const LockedRecordingsGrid = () => {
  const [items, setItems] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      if (!window.sb) { setLoading(false); return; }
      const { data, count } = await window.sb
        .from('elite_recordings')
        .select('*', { count: 'exact' })
        .order('created_at', { ascending: false })
        .limit(LR_VISIBLE);
      if (cancelled) return;
      setItems(data || []);
      setTotal(count || 0);
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, []);

  const remaining = Math.max(total - items.length, LR_MORE_FALLBACK);
  const thumb = (it) => it.thumbnail || (it.video_id ? `https://i.ytimg.com/vi/${it.video_id}/hqdefault.jpg` : '');

  return (
    <div className="lr-section">
      <div className="lr-head">
        <span className="eyebrow"><span className="dot" />ELITE CALLS · LOCKED</span>
        <h2>Arhiva live calls<span className="acid">.</span></h2>
        <p className="lead">Acces deblocat doar pentru membrii Elite. Vezi mai jos thumbnail-urile, fără posibilitatea de redare.</p>
      </div>

      {loading ? (
        <div className="grid grid-3" style={{ marginTop: 28 }}>
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="lr-skel"><div className="lr-skel-thumb" /></div>
          ))}
        </div>
      ) : items.length === 0 ? (
        <div className="card card-pad-lg" style={{ textAlign: 'center', color: 'var(--text-mute)', marginTop: 28 }}>
          Niciun call publicat încă.
        </div>
      ) : (
        <div className="grid grid-3 lr-grid" style={{ marginTop: 28 }}>
          {items.map((it, i) => {
            const t = thumb(it);
            return (
              <div key={it.id} className="lr-card" aria-disabled="true">
                <div className="lr-thumb">
                  {t && <img src={t} alt="" loading="lazy" draggable={false} />}
                  <div className="lr-shade" />
                  <div className="lr-lock">
                    <div className="lr-lock-icon">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                      </svg>
                    </div>
                    <div className="lr-lock-label">Elite Only</div>
                  </div>
                  <div className="lr-idx">#{String(i + 1).padStart(2, '0')}</div>
                </div>
                <div className="lr-meta">
                  <div className="lr-title">{it.title || 'Elite Call'}</div>
                </div>
              </div>
            );
          })}

          {/* +N more card — also locked, no click */}
          <div className="lr-card lr-more" aria-disabled="true">
            <div className="lr-more-inner">
              <div className="lr-more-lock">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2"/>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
              </div>
              <div className="lr-more-num">+{remaining}</div>
              <div className="lr-more-label">live calls în arhivă</div>
              <div className="lr-more-link">Elite only</div>
            </div>
          </div>
        </div>
      )}

      <style>{`
        .lr-section { margin-top: 60px; }
        .lr-head { text-align: center; max-width: 640px; margin: 0 auto; }
        .lr-head .eyebrow { display: inline-flex; }
        .lr-head h2 {
          margin-top: 14px;
          font-size: clamp(28px, 3.6vw, 44px);
          line-height: 1.1;
          letter-spacing: -0.03em;
        }
        .lr-head .acid {
          background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 60%, #8FE000 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .lr-head .lead { margin-top: 14px; }

        .lr-grid { gap: 18px; }
        .lr-card {
          display: flex; flex-direction: column;
          border-radius: 18px; overflow: hidden;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
            rgba(10, 10, 12, 0.7);
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
          cursor: not-allowed;
          user-select: none;
          transition: border-color 0.3s, box-shadow 0.3s;
        }
        .lr-card:hover {
          border-color: rgba(183,255,26,0.20);
          box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 30px rgba(183,255,26,0.06);
        }
        .lr-thumb {
          position: relative; width: 100%; aspect-ratio: 16/9;
          background: #050507; overflow: hidden;
        }
        .lr-thumb img {
          width: 100%; height: 100%; object-fit: cover; display: block;
          filter: blur(8px) saturate(0.6) brightness(0.5);
          transition: filter 0.45s ease;
          pointer-events: none;
        }
        .lr-card:hover .lr-thumb img { filter: blur(10px) saturate(0.5) brightness(0.45); }
        .lr-shade {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
          pointer-events: none;
        }
        .lr-lock {
          position: absolute; inset: 0;
          display: grid; place-items: center; gap: 8px;
          color: rgba(255,255,255,0.85);
        }
        .lr-lock-icon {
          width: 56px; height: 56px; border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(255,255,255,0.06);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255,255,255,0.16);
          box-shadow: 0 8px 22px rgba(0,0,0,0.45);
        }
        .lr-lock-label {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--acid);
          padding: 4px 10px; border-radius: 999px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.22);
        }
        .lr-idx {
          position: absolute; top: 10px; left: 10px;
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          letter-spacing: 0.14em; padding: 4px 9px; border-radius: 999px;
          background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
          border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
        }
        .lr-meta { padding: 14px 16px 16px; }
        .lr-title {
          font-size: 14px; font-weight: 600; line-height: 1.35;
          letter-spacing: -0.005em;
          display: -webkit-box;
          -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; min-height: 38px;
          color: rgba(255,255,255,0.65);
        }

        .lr-more {
          background:
            radial-gradient(ellipse at top center, rgba(183,255,26,0.10) 0%, transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
            rgba(10, 10, 12, 0.7);
          border-color: rgba(183,255,26,0.18);
        }
        .lr-more-inner {
          padding: 24px;
          display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: 8px;
          text-align: center; height: 100%; min-height: 240px;
        }
        .lr-more-lock {
          width: 48px; height: 48px; border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(183,255,26,0.10);
          border: 1px solid rgba(183,255,26,0.25);
          color: var(--acid);
          margin-bottom: 6px;
        }
        .lr-more-num {
          font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
          color: var(--acid);
          text-shadow: 0 0 30px rgba(183,255,26,0.30);
          line-height: 1;
        }
        .lr-more-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
        .lr-more-link {
          margin-top: 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
          color: var(--acid);
          padding: 6px 12px; border-radius: 999px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.22);
        }
        .lr-skel {
          border-radius: 18px; overflow: hidden;
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.06);
        }
        .lr-skel-thumb {
          width: 100%; aspect-ratio: 16/9;
          background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
          background-size: 200% 100%;
          animation: lr-skel-anim 1.4s ease-in-out infinite;
        }
        @keyframes lr-skel-anim {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }
      `}</style>
    </div>
  );
};

// ===== LOCKED VIEW =====
const MemberLocked = ({ onLogin, onApply, user }) => (
  <section style={{paddingTop: 80, paddingBottom: 60}}>
    <div className="container">
      <div className="locked-grid">
        <div>
          <div className="eyebrow"><span className="dot"/>MEMBER AREA · PROTECTED</div>
          <h1 style={{ marginTop: 22 }}>
            Acces <span className="acid">membri</span>.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 520 }}>
            Recordings Zoom de 2 ori pe săptămână, video library structurat, resurse și calendarul de live calls.
            {user ? ' Aplică pentru Elite ca să le deblochezi.' : ' Loghează-te sau aplică pentru acces.'}
          </p>
          <div style={{marginTop: 32, display:'flex', gap: 12, flexWrap:'wrap'}}>
            {!user && <Button variant="ghost" size="lg" onClick={onLogin}><Icon name="unlock" size={16}/>Login</Button>}
            <Button variant="acid" size="lg" onClick={onApply}>Apply for Elite</Button>
          </div>
        </div>

        <div className="locked-preview">
          <div className="locked-blur">
            <div className="card card-pad-lg" style={{margin:0}}>
              <div className="row" style={{justifyContent:'space-between'}}>
                <IconChip icon="video" color="acid"/>
                <span className="tag acid">ELITE</span>
              </div>
              <h4 style={{marginTop:18}}>Backtest Call — NQ liquidity sweep</h4>
              <p style={{marginTop:8, fontSize:13}}>Backtest structurat pe 6 luni de NQ, statistici complete...</p>
              <div className="locked-thumb">
                <CandleChart density="normal" opacity={0.6}/>
                <Icon name="play" size={32} style={{position:'absolute', color:'var(--acid)'}}/>
              </div>
            </div>
          </div>
          <div className="locked-shield">
            <div className="locked-shield-icon">
              <Icon name="lock" size={32}/>
            </div>
            <div style={{fontWeight:700, fontSize:17, marginTop: 14}}>Conținut blocat</div>
            <div style={{fontSize:13, color:'var(--text-mute)', marginTop:6, textAlign:'center'}}>
              {user
                ? <>Aplică pentru Elite ca să accesezi<br/>recordings, courses și resources.</>
                : <>Loghează-te pentru a accesa<br/>recordings, courses și resources.</>}
            </div>
            <Button variant="acid" size="sm" onClick={user ? onApply : onLogin} className="mt-3">
              {user ? 'Apply for Elite' : 'Login'}
            </Button>
          </div>
        </div>
      </div>

      {/* Locked recordings preview — visible to everyone but click-disabled */}
      <LockedRecordingsGrid />
    </div>
    <style>{`
      .locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      @media (max-width: 920px) { .locked-grid { grid-template-columns: 1fr; gap: 40px; } }
      .locked-hint {
        margin-top: 32px;
        padding: 14px 18px;
        border-radius: 14px;
        background: rgba(183,255,26,0.04);
        border: 1px dashed rgba(183,255,26,0.25);
        display: flex; gap: 12px; align-items: flex-start;
        font-size: 13px; color: var(--text-mute);
        max-width: 540px;
      }
      .locked-hint code { font-family:'JetBrains Mono', monospace; background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius:5px; color: var(--acid); }
      .locked-preview { position: relative; }
      .locked-blur { filter: blur(6px) saturate(0.7); pointer-events: none; opacity: 0.5; }
      .locked-thumb {
        position: relative; aspect-ratio: 16/10;
        margin-top: 18px; border-radius: 14px;
        background: var(--bg); border: 1px solid var(--line);
        overflow: hidden;
        display: flex; align-items: center; justify-content: center;
      }
      .locked-shield {
        position: absolute; inset: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: linear-gradient(180deg, rgba(5,5,5,0.6), rgba(5,5,5,0.85));
        border: 1px solid var(--line);
        border-radius: var(--r-card-lg);
        backdrop-filter: blur(4px);
      }
      .locked-shield-icon {
        width: 64px; height: 64px; border-radius: 18px;
        background: rgba(183,255,26,0.1);
        border: 1px solid rgba(183,255,26,0.3);
        color: var(--acid);
        display: grid; place-items: center;
      }
    `}</style>
  </section>
);

// ===== VIDEO PLAYER MODAL =====
const VideoPlayer = ({ rec, onClose }) => {
  const [playing, setPlaying] = React.useState(true);
  const [progress, setProgress] = React.useState(8);
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setProgress(p => Math.min(100, p + 0.3)), 100);
    return () => clearInterval(id);
  }, [playing]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div className="vp-overlay" onClick={onClose}>
      <div className="vp-modal" onClick={(e) => e.stopPropagation()}>
        <button className="vp-close" onClick={onClose}><Icon name="x" size={18}/></button>
        <div className="vp-screen">
          <CandleChart density="dense" opacity={0.75}/>
          <div className="vp-screen-overlay">
            <span className="badge-live"><span className="dot"/>REPLAY</span>
            <span style={{fontSize:12, color:'var(--text-dim)'}}>NQ Futures · 1m chart</span>
          </div>
          <button className="vp-play" onClick={() => setPlaying(!playing)}>
            <Icon name={playing ? 'pause' : 'play'} size={28}/>
          </button>
        </div>
        <div className="vp-controls">
          <div className="vp-progress">
            <div className="vp-progress-bar" style={{ width: `${progress}%` }}/>
          </div>
          <div className="vp-time row" style={{justifyContent:'space-between', marginTop:8}}>
            <span className="mono" style={{fontSize:12, color:'var(--text-dim)'}}>
              {Math.floor(progress * 1.08)}:{String(Math.floor((progress * 6.5) % 60)).padStart(2,'0')}
            </span>
            <span className="mono" style={{fontSize:12, color:'var(--text-mute)'}}>{rec.dur}</span>
          </div>
        </div>
        <div className="vp-meta">
          <div className="row" style={{gap:10, marginBottom: 14}}>
            <span className={`tag ${rec.color}`}>{rec.cat}</span>
            <span style={{fontSize:12, color:'var(--text-mute)'}}>{rec.date}</span>
          </div>
          <h3>{rec.title}</h3>
          <p style={{marginTop: 12, fontSize:14}}>{rec.desc}</p>
        </div>
      </div>
      <style>{`
        .vp-overlay {
          position: fixed; inset: 0; z-index: 100;
          background: rgba(0,0,0,0.85);
          backdrop-filter: blur(10px);
          display: grid; place-items: center;
          padding: 24px;
          animation: fade-in 0.2s;
        }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        .vp-modal {
          width: 100%; max-width: 920px;
          background: var(--bg-1);
          border: 1px solid var(--line-2);
          border-radius: 22px;
          overflow: hidden;
          position: relative;
          box-shadow: 0 30px 100px rgba(0,0,0,0.7);
        }
        .vp-close {
          position: absolute; top: 14px; right: 14px;
          z-index: 5;
          width: 36px; height: 36px; border-radius: 50%;
          background: rgba(0,0,0,0.7); border: 1px solid var(--line);
          color: var(--text); cursor: pointer;
          display: grid; place-items: center;
        }
        .vp-screen {
          position: relative;
          aspect-ratio: 16/9;
          background: var(--bg);
          overflow: hidden;
          display: flex; align-items: center; justify-content: center;
        }
        .vp-screen-overlay {
          position: absolute; top: 16px; left: 16px;
          display: flex; gap: 10px; align-items: center;
        }
        .vp-play {
          position: relative;
          width: 76px; height: 76px; border-radius: 50%;
          background: var(--acid); color: #050505;
          border: none; cursor: pointer;
          display: grid; place-items: center;
          box-shadow: 0 0 40px rgba(183,255,26,0.4);
          transition: transform 0.2s;
        }
        .vp-play:hover { transform: scale(1.05); }
        .vp-controls { padding: 16px 24px; border-top: 1px solid var(--line); }
        .vp-progress {
          height: 4px; border-radius: 999px;
          background: rgba(255,255,255,0.08);
          overflow: hidden;
        }
        .vp-progress-bar {
          height: 100%;
          background: linear-gradient(90deg, var(--acid), #DCFF7A);
          box-shadow: 0 0 8px var(--acid-glow);
          transition: width 0.1s linear;
        }
        .vp-meta { padding: 24px; }
      `}</style>
    </div>
  );
};

// ============================================================
// MEMBER ELITE CALLS — real recordings from Supabase
// ------------------------------------------------------------
// Non-elite users see the cards locked with a padlock overlay;
// clicking takes them to the Elite Plan subpage.
// Elite/admin users get direct YouTube links and a red legal
// notice at the bottom. Last card is "+N more" → playlist.
// ============================================================
const ELITE_PLAYLIST_URL_M = 'https://www.youtube.com/playlist?list=PLnu6--ikU1FTTNts7iWOqIM7FgnpUP8lh';
const VISIBLE_CARDS = 8;

const MemberEliteCalls = ({ isElite, onNav }) => {
  const [items, setItems] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [loading, setLoading] = React.useState(true);
  const [err, setErr] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      if (!window.sb) { setLoading(false); return; }
      try {
        const { data, error, count } = await window.sb
          .from('elite_recordings')
          .select('*', { count: 'exact' })
          .order('created_at', { ascending: false })
          .limit(VISIBLE_CARDS);
        if (cancelled) return;
        if (error) throw error;
        setItems(data || []);
        setTotal(count || 0);
      } catch (e) {
        if (!cancelled) setErr(e.message || 'Failed to load recordings');
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const ytId = (url) => {
    if (!url) return null;
    const m = String(url).match(/(?:v=|youtu\.be\/|\/embed\/|\/shorts\/|\/v\/|\/live\/)([\w-]{11})/);
    return m ? m[1] : null;
  };
  const thumb = (it) => it.thumbnail || (it.video_id ? `https://i.ytimg.com/vi/${it.video_id}/hqdefault.jpg` : '');
  const remaining = Math.max(0, total - items.length);

  return (
    <div>
      {err && (
        <div style={{ padding: 12, borderRadius: 10, background: 'rgba(255,80,80,0.08)', border: '1px solid rgba(255,80,80,0.22)', color: '#ff9090', fontSize: 13, marginBottom: 18 }}>
          {err}
        </div>
      )}

      {loading ? (
        <div className="grid grid-3" style={{ marginTop: 22 }}>
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="mec-skel"><div className="mec-skel-thumb" /></div>
          ))}
        </div>
      ) : items.length === 0 ? (
        <div className="card card-pad-lg" style={{ textAlign: 'center', color: 'var(--text-mute)' }}>
          Niciun call încărcat încă. Reveniți curând.
        </div>
      ) : (
        <div className="grid grid-3" style={{ marginTop: 4 }}>
          {items.map((it, i) => {
            const t = thumb(it);
            return (
              <a key={it.id}
                href={it.youtube_url}
                target="_blank"
                rel="noopener noreferrer"
                className="mec-card">
                <div className="mec-thumb">
                  {t && <img src={t} alt={it.title || ''} loading="lazy" />}
                  <div className="mec-shade" />
                  <div className="mec-play"><Icon name="bolt" size={22} /></div>
                  <div className="mec-idx">#{String(i + 1).padStart(2, '0')}</div>
                </div>
                <div className="mec-meta">
                  <div className="mec-title">{it.title || 'Elite Call'}</div>
                  <div className="mec-row">
                    <span className="mec-cta">Watch <Icon name="arrowUR" size={12} /></span>
                  </div>
                </div>
              </a>
            );
          })}

          <a className="mec-card mec-more"
             href={ELITE_PLAYLIST_URL_M}
             target="_blank"
             rel="noopener noreferrer">
            <div className="mec-more-inner">
              <div className="mec-more-icon"><Icon name="arrowUR" size={26} /></div>
              <div className="mec-more-num">+{Math.max(remaining, 44)}</div>
              <div className="mec-more-label">mai multe call-uri</div>
              <div className="mec-more-link">Open playlist <Icon name="arrowUR" size={12} /></div>
            </div>
          </a>
        </div>
      )}

      {/* Elite-only legal disclaimer */}
      {isElite && !loading && items.length > 0 && (
        <div className="mec-disclaimer">
          <div className="mec-disclaimer-head">
            <span className="mec-disclaimer-tag">CONFIDENȚIAL · ELITE</span>
            <h4>Aviz legal — distribuire interzisă</h4>
          </div>
          <p>
            Distribuirea, redistribuirea, partajarea, repostarea sau publicarea fără acord scris a oricăror materiale din programul Elite (înregistrări live calls, capturi, frameworks, documente, mesaje sau orice alt conținut) este <strong>strict interzisă</strong>.
          </p>
          <p>
            Orice fragment, screenshot, clip video sau document scurs în afara comunității Elite va declanșa automat:
          </p>
          <ul>
            <li>Notificare oficială și somație civilă</li>
            <li>Acțiune legală pentru încălcarea drepturilor de autor (Lege nr. 8/1996)</li>
            <li>Sesizare pentru daune materiale și morale</li>
            <li>Excludere imediată din program, fără rambursare</li>
          </ul>
          <p className="mec-disclaimer-sign">
            Faci parte din Elite — păstrează discreția. Materialele sunt licențiate strict pentru uzul personal al membrilor activi.
          </p>
        </div>
      )}

      <style>{`
        .mec-card {
          display: flex;
          flex-direction: column;
          border-radius: 18px;
          overflow: hidden;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
            rgba(10, 10, 12, 0.7);
          border: 1px solid rgba(255,255,255,0.10);
          box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
          text-decoration: none;
          color: inherit;
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
          cursor: pointer;
        }
        .mec-card:hover {
          transform: translateY(-4px);
          border-color: rgba(255,255,255,0.20);
          box-shadow: 0 28px 60px rgba(0,0,0,0.65), 0 0 40px rgba(183,255,26,0.08);
        }
        .mec-locked { cursor: pointer; }
        .mec-locked:hover { box-shadow: 0 28px 60px rgba(0,0,0,0.65), 0 0 40px rgba(183,255,26,0.12); }
        .mec-thumb {
          position: relative; width: 100%; aspect-ratio: 16/9;
          background: #050507; overflow: hidden;
        }
        .mec-thumb img {
          width: 100%; height: 100%; object-fit: cover; display: block;
          transition: transform 0.45s ease, filter 0.45s ease;
        }
        .mec-card:hover .mec-thumb img { transform: scale(1.06); }
        .mec-locked .mec-thumb img { filter: blur(8px) saturate(0.6) brightness(0.5); }
        .mec-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%); }
        .mec-idx {
          position: absolute; top: 10px; left: 10px;
          font-family: 'JetBrains Mono', monospace; font-size: 10px;
          letter-spacing: 0.14em; padding: 4px 9px; border-radius: 999px;
          background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
          border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
        }
        .mec-play {
          position: absolute; inset: 0; display: grid; place-items: center;
          opacity: 0; transition: opacity 0.3s ease;
        }
        .mec-play > * {
          width: 52px; height: 52px; border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(180deg, #C8FF35 0%, #A8F00B 100%);
          color: #050505;
          box-shadow: 0 8px 26px rgba(183,255,26,0.45), 0 0 36px rgba(183,255,26,0.35);
        }
        .mec-card:hover .mec-play { opacity: 1; }
        .mec-lock {
          position: absolute; inset: 0; display: grid; place-items: center; gap: 8px;
          color: rgba(255,255,255,0.85);
        }
        .mec-lock-icon {
          width: 56px; height: 56px; border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(255,255,255,0.06);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255,255,255,0.16);
          box-shadow: 0 8px 22px rgba(0,0,0,0.45);
        }
        .mec-lock-label {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--acid);
          padding: 4px 10px; border-radius: 999px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.22);
        }
        .mec-meta { padding: 14px 16px 16px; }
        .mec-title {
          font-size: 14px; font-weight: 600; line-height: 1.35;
          letter-spacing: -0.005em;
          display: -webkit-box;
          -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; min-height: 38px;
        }
        .mec-row {
          margin-top: 10px;
          display: flex; justify-content: space-between; align-items: center;
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          letter-spacing: 0.08em;
        }
        .mec-date { color: var(--text-mute); }
        .mec-cta {
          color: var(--acid);
          display: inline-flex; align-items: center; gap: 4px;
          text-transform: uppercase;
        }
        .mec-cta-locked {
          color: var(--acid);
          display: inline-flex; align-items: center; gap: 4px;
          text-transform: uppercase;
        }
        .mec-more {
          background:
            radial-gradient(ellipse at top center, rgba(183,255,26,0.10) 0%, transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
            rgba(10, 10, 12, 0.7);
          border-color: rgba(183,255,26,0.22);
        }
        .mec-more:hover {
          border-color: rgba(183,255,26,0.5);
          box-shadow: 0 28px 60px rgba(0,0,0,0.65), 0 0 50px rgba(183,255,26,0.18);
        }
        .mec-more-inner {
          padding: 24px;
          display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: 8px;
          text-align: center; height: 100%; min-height: 240px;
        }
        .mec-more-icon {
          width: 56px; height: 56px; border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(180deg, rgba(183,255,26,0.15) 0%, rgba(183,255,26,0.04) 100%);
          border: 1px solid rgba(183,255,26,0.30);
          color: var(--acid);
          margin-bottom: 6px;
          box-shadow: 0 0 30px rgba(183,255,26,0.20);
        }
        .mec-more-num {
          font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
          color: var(--acid); text-shadow: 0 0 30px rgba(183,255,26,0.30);
          line-height: 1;
        }
        .mec-more-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
        .mec-more-link {
          margin-top: 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
          color: var(--acid);
          display: inline-flex; align-items: center; gap: 4px;
          padding: 6px 12px; border-radius: 999px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.22);
        }
        .mec-skel {
          border-radius: 18px; overflow: hidden;
          background: rgba(255,255,255,0.025);
          border: 1px solid rgba(255,255,255,0.06);
        }
        .mec-skel-thumb {
          width: 100%; aspect-ratio: 16/9;
          background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
          background-size: 200% 100%;
          animation: mec-skel-anim 1.4s ease-in-out infinite;
        }
        @keyframes mec-skel-anim {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }

        /* ===== Legal disclaimer (Elite only) ===== */
        .mec-disclaimer {
          margin-top: 36px;
          padding: 24px 28px;
          border-radius: 18px;
          background:
            linear-gradient(180deg, rgba(255, 60, 60, 0.06) 0%, rgba(255, 60, 60, 0.02) 100%),
            rgba(20, 8, 8, 0.7);
          border: 1px solid rgba(255, 80, 80, 0.32);
          box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 50px rgba(255, 60, 60, 0.06);
          color: #ffb3b3;
        }
        .mec-disclaimer-head { margin-bottom: 12px; }
        .mec-disclaimer-tag {
          display: inline-block;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #ff7575;
          padding: 4px 10px;
          border-radius: 999px;
          background: rgba(255, 80, 80, 0.10);
          border: 1px solid rgba(255, 80, 80, 0.35);
          margin-bottom: 10px;
        }
        .mec-disclaimer h4 {
          color: #ff8080;
          font-size: 18px;
          letter-spacing: -0.01em;
          margin: 0;
        }
        .mec-disclaimer p {
          margin-top: 10px;
          font-size: 13.5px;
          line-height: 1.6;
          color: #ffc4c4;
        }
        .mec-disclaimer strong { color: #ff6060; font-weight: 700; }
        .mec-disclaimer ul {
          margin: 10px 0 0;
          padding-left: 20px;
          font-size: 13px;
          line-height: 1.7;
          color: #ffb3b3;
        }
        .mec-disclaimer ul li::marker { color: #ff6060; }
        .mec-disclaimer-sign {
          margin-top: 14px;
          padding-top: 14px;
          border-top: 1px dashed rgba(255, 80, 80, 0.25);
          font-style: italic;
          color: #ffa5a5;
          font-size: 12.5px;
        }
      `}</style>
    </div>
  );
};

// ============================================================
// MEMBER CONSULTATION — Elite 1:1 booking
// ------------------------------------------------------------
// Persistent notepad for questions + "Schedule a call" button
// that opens a confirmation popup styled like the auth modals.
// ============================================================
const MemberConsultation = ({ user }) => {
  const [notes, setNotes] = React.useState('');
  const [savedNotes, setSavedNotes] = React.useState('');
  const [updatedAt, setUpdatedAt] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState('');
  const [err, setErr] = React.useState('');
  const [showBook, setShowBook] = React.useState(false);
  const [phone, setPhone] = React.useState('');
  const [bookBusy, setBookBusy] = React.useState(false);
  const [bookSuccess, setBookSuccess] = React.useState(false);
  const [pastCount, setPastCount] = React.useState(0);

  const load = React.useCallback(async () => {
    if (!window.sb || !user?.id) { setLoading(false); return; }
    setLoading(true);
    const [notesRes, reqRes] = await Promise.all([
      window.sb.from('consultation_notes').select('*').eq('user_id', user.id).maybeSingle(),
      window.sb.from('consultation_requests').select('id', { count: 'exact', head: true }).eq('user_id', user.id),
    ]);
    if (notesRes.error && notesRes.error.code !== 'PGRST116') { setErr(notesRes.error.message); }
    setNotes(notesRes.data?.questions || '');
    setSavedNotes(notesRes.data?.questions || '');
    setUpdatedAt(notesRes.data?.updated_at || null);
    setPastCount(reqRes.count || 0);
    setLoading(false);
  }, [user?.id]);

  React.useEffect(() => { load(); }, [load]);

  const flash = (m) => { setMsg(m); setTimeout(() => setMsg(''), 2500); };

  const saveNotes = async () => {
    if (!window.sb) return;
    setBusy(true); setErr('');
    const { error } = await window.sb
      .from('consultation_notes')
      .upsert({ user_id: user.id, questions: notes }, { onConflict: 'user_id' });
    setBusy(false);
    if (error) { setErr(error.message); return; }
    setSavedNotes(notes);
    flash('Salvat.');
    load();
  };

  const submitBooking = async (e) => {
    e?.preventDefault?.();
    setErr('');
    const cleanPhone = phone.trim();
    if (!cleanPhone) { setErr('Introdu numărul de telefon.'); return; }
    setBookBusy(true);
    // First save the current notes (in case user typed more)
    if (notes !== savedNotes) {
      await window.sb
        .from('consultation_notes')
        .upsert({ user_id: user.id, questions: notes }, { onConflict: 'user_id' });
    }
    const { error } = await window.sb.from('consultation_requests').insert({
      user_id: user.id,
      phone: cleanPhone,
      questions_snapshot: notes,
    });
    setBookBusy(false);
    if (error) { setErr(error.message); return; }
    setBookSuccess(true);
    load();
  };

  const closeBook = () => {
    setShowBook(false);
    setBookSuccess(false);
    setPhone('');
    setErr('');
  };

  React.useEffect(() => {
    if (!showBook) return;
    const onKey = (e) => { if (e.key === 'Escape') closeBook(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [showBook]);

  const hasChanges = notes !== savedNotes;

  return (
    <div className="mco">
      {/* Hero */}
      <div className="card card-pad-lg mco-hero">
        <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
          <IconChip icon="phone" color="acid" size="lg"/>
          <div>
            <h3>Programează 1:1 cu Tyrone</h3>
            <p style={{marginTop:8, maxWidth:600, color:'var(--text-dim)'}}>
              Adună-ți întrebările pe care le acumulezi în decurs de câteva săptămâni, modifică-le oricând, iar când ai destule programează un call privat de consultanță.
            </p>
          </div>
        </div>
      </div>

      {loading ? (
        <div className="card card-pad-lg" style={{textAlign:'center', color:'var(--text-mute)', marginTop:20}}>Loading…</div>
      ) : (
        <>
          {/* Notes editor */}
          <div className="card card-pad-lg mco-editor">
            <div className="mco-section-head">
              <div className="eyebrow"><span className="dot"/>ÎNTREBĂRILE TALE</div>
              {updatedAt && (
                <span className="mco-meta">Ultima salvare: {new Date(updatedAt).toLocaleString('ro-RO')}</span>
              )}
            </div>
            <p className="mco-sub">
              Strânge-ți 5–10 întrebări pe care nu le înțelegi și programează un call cu Tyrone.
            </p>
            <textarea
              className="mco-textarea"
              placeholder={`1. ...\n2. ...\n3. ...\n\nScrie întrebările pe măsură ce-ți apar — le poți edita oricând.`}
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={12}
            />
            {err && !showBook && <div className="mco-err">{err}</div>}
            {msg && <div className="mco-ok">{msg}</div>}
            <div className="mco-actions">
              <Button variant="ghost" onClick={saveNotes} disabled={busy || !hasChanges}>
                {busy ? 'Se salvează…' : (hasChanges ? 'Salvează modificările' : 'Salvat')}
              </Button>
              <Button variant="acid" onClick={() => setShowBook(true)} disabled={busy}>
                Programează un call cu Tyrone →
              </Button>
            </div>
            {pastCount > 0 && (
              <div className="mco-history">
                <Icon name="info" size={12}/>
                <span>Ai trimis {pastCount} cerere{pastCount === 1 ? '' : 'i'} de call până acum.</span>
              </div>
            )}
          </div>
        </>
      )}

      {/* Booking popup — styled like the auth modals */}
      {showBook && (
        <div className="amx-overlay" onClick={closeBook}>
          <div className="amx-atmos">
            <div className="amx-gradient" />
            <div className="amx-noise" />
            <div className="amx-blob amx-blob-top" />
            <div className="amx-blob amx-blob-bot" />
          </div>
          <button className="amx-close" onClick={closeBook} aria-label="Close"><Icon name="x" size={18}/></button>

          <div className="amx-card-wrap" onClick={(e) => e.stopPropagation()}>
            <div className="amx-beams">
              <span className="amx-beam amx-beam-top" />
              <span className="amx-beam amx-beam-right" />
              <span className="amx-beam amx-beam-bottom" />
              <span className="amx-beam amx-beam-left" />
              <span className="amx-dot amx-dot-tl" />
              <span className="amx-dot amx-dot-tr" />
              <span className="amx-dot amx-dot-br" />
              <span className="amx-dot amx-dot-bl" />
            </div>

            <div className="amx-card">
              <div className="amx-grid-pattern" />

              <div className="amx-head">
                <div className="amx-eyebrow"><span className="dot" />ELITE · 1:1 CONSULTATION</div>
                <h1 className="amx-title">
                  {bookSuccess ? 'Cerere trimisă' : 'Ești sigur?'}
                </h1>
                <p className="amx-sub">
                  {bookSuccess
                    ? 'Tyrone te va contacta în cel mai scurt timp pentru a stabili un call de consultanță 1:1.'
                    : 'Vrei să programezi un call de consultanță cu Tyrone? Lasă-ți numărul de telefon.'}
                </p>
              </div>

              {bookSuccess ? (
                <div className="amx-success" style={{padding:0}}>
                  <div className="amx-success-icon"><Icon name="check" size={28} stroke={2.5}/></div>
                  <button type="button" className="amx-btn-primary" onClick={closeBook} style={{ marginTop: 22, width: '100%' }}>
                    Continue <span className="amx-arrow">→</span>
                  </button>
                </div>
              ) : (
                <form onSubmit={submitBooking} className="amx-form">
                  <div className="amx-field">
                    <span className="amx-field-icon"><Icon name="phone" size={16}/></span>
                    <input
                      type="tel"
                      required
                      placeholder="07xx xxx xxx"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      autoFocus
                    />
                  </div>

                  {err && <div className="amx-error">{err}</div>}

                  <button type="submit" disabled={bookBusy} className="amx-btn-primary">
                    {bookBusy ? <span className="amx-spinner" /> : <>PROGRAMEAZĂ <span className="amx-arrow">→</span></>}
                  </button>

                  <p className="amx-bottom amx-bottom-sm">
                    Răspuns în maxim 24h.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      )}

      <style>{`
        .mco { display: flex; flex-direction: column; gap: 20px; }
        .mco-section-head {
          display: flex; justify-content: space-between; align-items: center;
          gap: 12px; flex-wrap: wrap;
        }
        .mco-meta {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          color: var(--text-mute);
        }
        .mco-sub {
          margin-top: 10px;
          color: var(--text-dim);
          font-size: 13.5px;
          line-height: 1.55;
          max-width: 640px;
        }
        .mco-textarea {
          width: 100%;
          margin-top: 14px;
          padding: 16px 18px;
          background: rgba(0,0,0,0.35);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 14px;
          color: var(--text);
          font: inherit;
          font-size: 14px;
          line-height: 1.65;
          resize: vertical;
          min-height: 260px;
          outline: none;
          transition: border-color 0.25s, background 0.25s;
        }
        .mco-textarea::placeholder { color: var(--text-faint); white-space: pre-wrap; }
        .mco-textarea:focus {
          border-color: rgba(183,255,26,0.4);
          background: rgba(0,0,0,0.5);
        }
        .mco-actions {
          margin-top: 16px;
          display: flex; gap: 10px; justify-content: flex-end; align-items: center;
          flex-wrap: wrap;
        }
        .mco-history {
          margin-top: 14px;
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 12px; color: var(--text-mute);
        }
        .mco-history svg { color: var(--acid); }
        .mco-err {
          margin-top: 12px; padding: 10px 14px;
          background: rgba(255,80,80,0.08);
          border: 1px solid rgba(255,80,80,0.25);
          color: #ff9090;
          border-radius: 10px;
          font-size: 13px;
        }
        .mco-ok {
          margin-top: 12px; padding: 10px 14px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.32);
          color: var(--acid);
          border-radius: 10px;
          font-size: 13px;
        }
      `}</style>
    </div>
  );
};

// ============================================================
// MEMBER TRADING PLAN
// ------------------------------------------------------------
// Elite members write their plan here. After they submit it for
// review, Tyrone sees it in the Admin panel where he can leave
// feedback (status='corrections') or approve it (status='approved').
// The member sees Tyrone's feedback inline and resubmits.
// ============================================================
const TP_STATUS_LABEL = {
  draft:          { label: 'CIORNĂ',         color: 'cyan' },
  pending_review: { label: 'IN REVIEW',      color: 'gold' },
  corrections:    { label: 'CORECTĂRI',      color: 'rose' },
  approved:       { label: 'APROBAT',        color: 'acid' },
};

const MemberTradingPlan = ({ user }) => {
  const [plan, setPlan]       = React.useState(null);
  const [planText, setPlanText] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy]       = React.useState(false);
  const [msg, setMsg]         = React.useState('');
  const [err, setErr]         = React.useState('');

  const load = React.useCallback(async () => {
    if (!window.sb || !user?.id) { setLoading(false); return; }
    setLoading(true);
    const { data, error } = await window.sb
      .from('trading_plans')
      .select('*')
      .eq('user_id', user.id)
      .maybeSingle();
    if (error) { setErr(error.message); setLoading(false); return; }
    setPlan(data || null);
    setPlanText(data?.plan_text || '');
    setLoading(false);
  }, [user?.id]);

  React.useEffect(() => { load(); }, [load]);

  const flash = (m) => { setMsg(m); setTimeout(() => setMsg(''), 2500); };

  // Save as draft (or update existing draft / corrections)
  const saveDraft = async () => {
    if (!window.sb) return;
    setBusy(true); setErr('');
    if (!plan) {
      const { error } = await window.sb.from('trading_plans').insert({
        user_id: user.id, plan_text: planText, status: 'draft',
      });
      setBusy(false);
      if (error) { setErr(error.message); return; }
      flash('Salvat ca ciornă.');
    } else {
      const { error } = await window.sb.from('trading_plans')
        .update({ plan_text: planText })
        .eq('user_id', user.id);
      setBusy(false);
      if (error) { setErr(error.message); return; }
      flash('Salvat.');
    }
    load();
  };

  // Submit for review — only allowed by RLS through admin, so user actually
  // does an UPDATE with admin handling status. We use a Supabase RPC-free
  // trick: we let the user set plan_text + mark a "submitted" flag via a
  // sentinel string. The admin reviews and changes status.
  // ⚠️ Actually since the trigger blocks status changes, we use a small
  // workaround: the admin sees all 'draft' + 'corrections' rows that were
  // recently updated. We simply re-save with a note.
  const submitForReview = async () => {
    // We can't change status from the client (RLS guard), so we just save
    // and let Tyrone pick it up. He'll mark it as 'pending_review' or move
    // straight to 'corrections' / 'approved'. We display a hint instead.
    await saveDraft();
    flash('Salvat. Tyrone va revizui planul cât de curând.');
  };

  // Start a new plan version after approval — calls a Supabase RPC that
  // resets the row (status='draft', feedback/approval cleared). Two modes:
  //  - keepText=false → wipes plan_text too (clean slate)
  //  - keepText=true  → keeps current text, but plan re-enters review flow
  const startNewVersion = async (keepText) => {
    if (!window.sb) return;
    const ok = window.confirm(
      keepText
        ? 'Planul tău revine în revizuire. Textul actual rămâne, dar feedback-ul și aprobarea anterioare sunt eliminate. Continui?'
        : 'Toate datele planului tău (text + feedback + aprobare) vor fi șterse și va trebui să rescrii planul de la zero. Continui?'
    );
    if (!ok) return;
    setBusy(true); setErr('');
    const { error } = await window.sb.rpc('reset_my_trading_plan', { p_keep_text: keepText });
    setBusy(false);
    if (error) { setErr(error.message); return; }
    setPlanText(keepText ? planText : '');
    flash('Plan resetat. Modifică & trimite din nou spre review.');
    load();
  };

  const status = plan?.status || 'draft';
  const statusInfo = TP_STATUS_LABEL[status] || TP_STATUS_LABEL.draft;
  const hasFeedback = !!plan?.tyrone_feedback?.trim();
  const isApproved = status === 'approved';

  return (
    <div className="mtp">
      <div className="card card-pad-lg mtp-hero">
        <div className="row" style={{gap:14, justifyContent:'space-between', flexWrap:'wrap'}}>
          <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
            <IconChip icon="book" color="acid" size="lg"/>
            <div>
              <h3>Trading Plan</h3>
              <p style={{marginTop:8, maxWidth:600, color:'var(--text-dim)'}}>
                Scrie-ți planul tău de tranzacționare — cum abordezi firmele funding, iar Tyrone o să te corecteze sau o să ți-l aprobe dacă e totul în regulă.
              </p>
            </div>
          </div>
          {plan && (
            <span className={`tag ${statusInfo.color} mtp-status`}>
              <span className="dot" />{statusInfo.label}
            </span>
          )}
        </div>
      </div>

      {loading ? (
        <div className="card card-pad-lg" style={{textAlign:'center', color:'var(--text-mute)', marginTop:20}}>
          Loading…
        </div>
      ) : (
        <>
          {/* Editor */}
          <div className="card card-pad-lg mtp-editor">
            <div className="mtp-section-head">
              <div className="eyebrow"><span className="dot"/>PLANUL TĂU</div>
              {plan?.updated_at && (
                <span className="mtp-meta">Ultima salvare: {new Date(plan.updated_at).toLocaleString('ro-RO')}</span>
              )}
            </div>
            <textarea
              className="mtp-textarea"
              placeholder={`Exemplu: \n• Cont funded Apex 50K\n• Risc: 0.5% per trade\n• Setup: NQ London sweep + NY reversal\n• Sesiune: 09:30–11:30 RO\n• Daily loss limit: 2%\n• Payout strategy: ...`}
              value={planText}
              onChange={(e) => setPlanText(e.target.value)}
              rows={14}
              disabled={isApproved}
            />
            {err && <div className="mtp-err">{err}</div>}
            {msg && <div className="mtp-ok">{msg}</div>}
            <div className="mtp-actions">
              {!isApproved && (
                <>
                  <Button variant="ghost" onClick={saveDraft} disabled={busy || !planText.trim()}>
                    {busy ? 'Se salvează…' : 'Salvează ciornă'}
                  </Button>
                  <Button variant="acid" onClick={submitForReview} disabled={busy || !planText.trim()}>
                    Trimite spre review →
                  </Button>
                </>
              )}
              {isApproved && (
                <div className="mtp-approved-banner">
                  <Icon name="check" size={14}/>
                  <span>Plan aprobat. Bună treabă.</span>
                </div>
              )}
            </div>
          </div>

          {/* "Start a new plan" section — only visible after approval */}
          {isApproved && (
            <div className="card card-pad-lg mtp-newplan">
              <div className="mtp-section-head">
                <div className="eyebrow"><span className="dot"/>AM UN PLAN NOU</div>
              </div>
              <p className="mtp-newplan-desc">
                Vrei să-ți actualizezi strategia sau să încerci o abordare diferită?
                Începe o versiune nouă — feedback-ul anterior și statusul de „Aprobat" sunt eliminate, iar planul intră din nou în review-ul lui Tyrone.
              </p>
              <div className="mtp-newplan-actions">
                <Button variant="ghost" onClick={() => startNewVersion(true)} disabled={busy}>
                  Modifică & retrimite review
                </Button>
                <Button variant="acid" onClick={() => startNewVersion(false)} disabled={busy}>
                  Plan complet nou →
                </Button>
              </div>
            </div>
          )}

          {/* Tyrone's feedback */}
          {hasFeedback && (
            <div className="card card-pad-lg mtp-feedback">
              <div className="mtp-section-head">
                <div className="eyebrow eyebrow-rose"><span className="dot"/>CORECTĂRI · TYRONE</div>
                {plan?.feedback_at && (
                  <span className="mtp-meta">Primit: {new Date(plan.feedback_at).toLocaleString('ro-RO')}</span>
                )}
              </div>
              <div className="mtp-feedback-text">{plan.tyrone_feedback}</div>
              {!isApproved && (
                <div className="mtp-feedback-hint">
                  <Icon name="info" size={14}/>
                  <span>Aplică modificările sus, apoi trimite din nou spre review.</span>
                </div>
              )}
            </div>
          )}
        </>
      )}

      <style>{`
        .mtp { display: flex; flex-direction: column; gap: 20px; }
        .mtp-hero { position: relative; }
        .mtp-status {
          padding: 6px 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          letter-spacing: 0.14em;
        }
        .mtp-section-head {
          display: flex; justify-content: space-between; align-items: center;
          gap: 12px; flex-wrap: wrap;
          margin-bottom: 12px;
        }
        .mtp-meta {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          color: var(--text-mute);
        }
        .mtp-textarea {
          width: 100%;
          margin-top: 6px;
          padding: 16px 18px;
          background: rgba(0,0,0,0.35);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 14px;
          color: var(--text);
          font: inherit;
          font-size: 14px;
          line-height: 1.6;
          resize: vertical;
          min-height: 280px;
          outline: none;
          transition: border-color 0.25s, background 0.25s;
        }
        .mtp-textarea::placeholder {
          color: var(--text-faint);
          white-space: pre-wrap;
        }
        .mtp-textarea:focus {
          border-color: rgba(183,255,26,0.4);
          background: rgba(0,0,0,0.5);
        }
        .mtp-textarea:disabled {
          opacity: 0.75;
          cursor: not-allowed;
        }
        .mtp-actions {
          margin-top: 16px;
          display: flex; gap: 10px; justify-content: flex-end; align-items: center;
          flex-wrap: wrap;
        }
        .mtp-approved-banner {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 10px 16px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.32);
          color: var(--acid);
          border-radius: 12px;
          font-size: 13px;
        }
        .mtp-err {
          margin-top: 12px; padding: 10px 14px;
          background: rgba(255,80,80,0.08);
          border: 1px solid rgba(255,80,80,0.25);
          color: #ff9090;
          border-radius: 10px;
          font-size: 13px;
        }
        .mtp-ok {
          margin-top: 12px; padding: 10px 14px;
          background: rgba(183,255,26,0.08);
          border: 1px solid rgba(183,255,26,0.32);
          color: var(--acid);
          border-radius: 10px;
          font-size: 13px;
        }
        .mtp-feedback {
          position: relative;
          background:
            linear-gradient(180deg, rgba(244,63,94,0.06) 0%, rgba(244,63,94,0.01) 100%),
            rgba(10,10,12,0.7);
          border-color: rgba(244,63,94,0.30);
        }
        .eyebrow-rose .dot { background: #FB7185; box-shadow: 0 0 8px rgba(244,63,94,0.6); }
        .eyebrow-rose { color: #FB7185; }
        .mtp-feedback-text {
          padding: 18px 20px;
          background: rgba(255,255,255,0.02);
          border: 1px dashed rgba(255,255,255,0.10);
          border-radius: 12px;
          font-size: 14px;
          line-height: 1.65;
          white-space: pre-wrap;
          color: var(--text);
        }
        .mtp-feedback-hint {
          margin-top: 14px;
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 10px;
          font-size: 12.5px;
          color: var(--text-mute);
        }
        .mtp-feedback-hint svg { color: var(--acid); }

        /* "Start a new plan" card — visible only after approval */
        .mtp-newplan {
          background:
            radial-gradient(ellipse at top right, rgba(183,255,26,0.06) 0%, transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 100%),
            rgba(10,10,12,0.7);
          border-color: rgba(183,255,26,0.22);
        }
        .mtp-newplan-desc {
          font-size: 14px;
          line-height: 1.6;
          color: var(--text-dim);
          margin-top: 6px;
          max-width: 640px;
        }
        .mtp-newplan-actions {
          margin-top: 18px;
          display: flex; gap: 10px; flex-wrap: wrap;
        }
      `}</style>
    </div>
  );
};

// ============================================================
// NEXT LIVE RSVP CARD — replaces the "Add to calendar" button
// ------------------------------------------------------------
// Members confirm presence for the next Friday call. The
// event_key is the YYYY-MM-DD of the upcoming Friday.
// ============================================================
// Elite live calls happen TWICE a week — Monday & Friday at 19:00 RO.
// This picks whichever one is closest in the future (and skips today
// if the 19:00 slot has already passed).
const getNextLiveCallKey = () => {
  const now = new Date();
  const eligibleDays = [1, 5]; // 1 = Mon, 5 = Fri
  let nearest = null;
  for (const targetDay of eligibleDays) {
    const d = new Date(now);
    let diff = targetDay - d.getDay();
    // If it's today but past 19:00, jump to next week. If diff is negative, +7.
    if (diff < 0) diff += 7;
    if (diff === 0 && (d.getHours() > 19 || (d.getHours() === 19 && d.getMinutes() > 0))) diff = 7;
    d.setDate(d.getDate() + diff);
    d.setHours(19, 0, 0, 0);
    if (!nearest || d < nearest) nearest = d;
  }
  const yyyy = nearest.getFullYear();
  const mm = String(nearest.getMonth() + 1).padStart(2, '0');
  const dd = String(nearest.getDate()).padStart(2, '0');
  return { key: `${yyyy}-${mm}-${dd}`, date: nearest };
};
// Keep old name as alias for any external reference
const getNextFridayKey = getNextLiveCallKey;

const NextLiveRsvpCard = ({ user }) => {
  const { key: eventKey, date: eventDate } = React.useMemo(getNextFridayKey, []);
  const [status, setStatus] = React.useState(null); // 'present' | 'absent' | null
  const [busy, setBusy] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      if (!window.sb || !user?.id) { setLoading(false); return; }
      const { data } = await window.sb
        .from('live_rsvp')
        .select('status')
        .eq('user_id', user.id)
        .eq('event_key', eventKey)
        .maybeSingle();
      if (cancelled) return;
      setStatus(data?.status || null);
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [user?.id, eventKey]);

  const respond = async (newStatus) => {
    if (!window.sb || !user?.id || busy) return;
    setBusy(true);
    const { error } = await window.sb
      .from('live_rsvp')
      .upsert({
        user_id: user.id,
        event_key: eventKey,
        status: newStatus,
        responded_at: new Date().toISOString(),
      }, { onConflict: 'user_id,event_key' });
    setBusy(false);
    if (!error) setStatus(newStatus);
  };

  const weekdayName = eventDate.toLocaleDateString('ro-RO', { weekday: 'long' });
  const weekdayCapitalized = weekdayName.charAt(0).toUpperCase() + weekdayName.slice(1);
  const dateLabel = eventDate.toLocaleDateString('ro-RO', { weekday: 'long', day: '2-digit', month: 'short' });
  const respondedLabel = status === 'present'
    ? 'Ai confirmat prezența'
    : status === 'absent'
      ? 'Ai marcat că nu ajungi'
      : null;

  return (
    <div className="card card-pad-lg nlr">
      <div className="eyebrow"><span className="dot" style={{background:'var(--gold)'}}/>NEXT LIVE</div>
      <h4 style={{marginTop:14, fontSize:22}}>{weekdayCapitalized}, 19:00</h4>
      <p style={{marginTop:8, fontSize:13, color:'var(--text-mute)'}}>
        Market Review + Q&A · <span style={{color:'var(--text-dim)'}}>{dateLabel}</span>
      </p>
      <p style={{marginTop:6, fontSize:12, color:'var(--text-mute)'}}>
        Zoom link disponibil cu 30min înainte.
      </p>

      {loading ? (
        <div className="nlr-skel" />
      ) : (
        <>
          <div className="nlr-q">Vei fi prezent la call?</div>
          <div className="nlr-actions">
            <button
              className={`nlr-btn nlr-btn-yes ${status === 'present' ? 'is-active' : ''}`}
              onClick={() => respond('present')}
              disabled={busy}>
              <Icon name="check" size={12} stroke={3}/>
              Prezent
            </button>
            <button
              className={`nlr-btn nlr-btn-no ${status === 'absent' ? 'is-active' : ''}`}
              onClick={() => respond('absent')}
              disabled={busy}>
              <Icon name="x" size={12} stroke={3}/>
              Nu ajung
            </button>
          </div>
          {respondedLabel && (
            <div className="nlr-meta">
              <Icon name="check" size={11}/>
              <span>{respondedLabel}. Poți schimba oricând.</span>
            </div>
          )}
        </>
      )}

      <style>{`
        .nlr-q {
          margin-top: 16px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--text-mute);
        }
        .nlr-actions { margin-top: 10px; display: flex; gap: 8px; }
        .nlr-btn {
          flex: 1;
          display: inline-flex; align-items: center; justify-content: center;
          gap: 6px;
          padding: 9px 12px;
          border-radius: 10px;
          font: inherit; font-size: 12.5px; font-weight: 600;
          cursor: pointer;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.10);
          color: var(--text-dim);
          transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
        }
        .nlr-btn:hover:not(:disabled) {
          background: rgba(255,255,255,0.07);
          color: var(--text);
          transform: translateY(-1px);
        }
        .nlr-btn:disabled { opacity: 0.7; cursor: progress; }
        .nlr-btn-yes.is-active {
          background: linear-gradient(180deg, #C8FF35 0%, #A8F00B 100%);
          border-color: rgba(183,255,26,0.6);
          color: #050505;
          box-shadow: 0 6px 18px rgba(183,255,26,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
        }
        .nlr-btn-no.is-active {
          background: linear-gradient(180deg, #FB7185 0%, #E11D48 100%);
          border-color: rgba(244,63,94,0.6);
          color: #fff;
          box-shadow: 0 6px 18px rgba(244,63,94,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
        }
        .nlr-meta {
          margin-top: 12px;
          display: inline-flex; align-items: center; gap: 6px;
          font-size: 11.5px; color: var(--text-mute);
        }
        .nlr-meta svg { color: var(--acid); }
        .nlr-skel {
          margin-top: 18px; height: 40px;
          border-radius: 10px;
          background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
          background-size: 200% 100%;
          animation: nlr-shim 1.3s ease-in-out infinite;
        }
        @keyframes nlr-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
      `}</style>
    </div>
  );
};

// ============================================================
// NEXT LIVE QUICK CARD
// ------------------------------------------------------------
// Compact card shown in the member hero header. Picks whichever
// of Monday or Friday 19:00 RO is soonest and shows weekday +
// "în X zile" subtitle. Updates automatically every minute.
// ============================================================
const NextLiveQuickCard = () => {
  const [, force] = React.useState(0);
  // Re-render every minute so the "in X days" countdown stays fresh.
  React.useEffect(() => {
    const id = setInterval(() => force(n => n + 1), 60_000);
    return () => clearInterval(id);
  }, []);
  const { date } = getNextLiveCallKey();
  const weekday = date.toLocaleDateString('ro-RO', { weekday: 'long' });
  const weekdayCap = weekday.charAt(0).toUpperCase() + weekday.slice(1);
  const dayMonth = date.toLocaleDateString('ro-RO', { day: '2-digit', month: 'short' });

  const now = new Date();
  const diffMs = date.getTime() - now.getTime();
  const diffHours = diffMs / 3_600_000;
  let countdownLabel;
  if (diffHours < 1) {
    const mins = Math.max(0, Math.round(diffMs / 60_000));
    countdownLabel = `în ${mins} min`;
  } else if (diffHours < 24) {
    const hrs = Math.max(1, Math.round(diffHours));
    countdownLabel = `în ${hrs} ${hrs === 1 ? 'oră' : 'ore'}`;
  } else {
    const days = Math.ceil(diffHours / 24);
    countdownLabel = `în ${days} ${days === 1 ? 'zi' : 'zile'}`;
  }

  return (
    <div className="member-quick-card">
      <IconChip icon="calendar" color="acid" />
      <div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10.5,
          letterSpacing: '0.16em',
          color: 'var(--text-mute)',
          textTransform: 'uppercase',
        }}>
          NEXT LIVE CALL
        </div>
        <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4, letterSpacing: '-0.01em' }}>
          {weekdayCap}, 19:00
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-mute)', marginTop: 3 }}>
          {countdownLabel} · {dayMonth} · Market Review
        </div>
      </div>
    </div>
  );
};

// ============================================================
// LATEST RECORDING CARD
// ------------------------------------------------------------
// Shown on the Overview tab. Pulls the most recent row from
// elite_recordings and displays its YouTube thumbnail with a
// big play button. Click opens the YouTube video in a new tab.
// ============================================================
const LatestRecordingCard = () => {
  const [item, setItem] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      if (!window.sb) { setLoading(false); return; }
      const { data } = await window.sb
        .from('elite_recordings')
        .select('*')
        .order('created_at', { ascending: false })
        .limit(1);
      if (cancelled) return;
      setItem(data && data[0] ? data[0] : null);
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, []);

  if (loading) {
    return (
      <div className="card card-pad-lg" style={{ gridColumn: 'span 2' }}>
        <div className="row" style={{justifyContent:'space-between'}}>
          <div className="eyebrow"><span className="dot"/>LATEST RECORDING</div>
        </div>
        <div className="lrec-skel-title" />
        <div className="lrec-skel-thumb" />
        <style>{`
          .lrec-skel-title {
            margin-top: 14px; height: 28px; width: 60%;
            background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
            background-size: 200% 100%;
            animation: lrec-shim 1.4s ease-in-out infinite;
            border-radius: 8px;
          }
          .lrec-skel-thumb {
            margin-top: 18px; width: 100%; aspect-ratio: 16/9;
            background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
            background-size: 200% 100%;
            animation: lrec-shim 1.4s ease-in-out infinite;
            border-radius: 14px;
          }
          @keyframes lrec-shim {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
          }
        `}</style>
      </div>
    );
  }

  if (!item) {
    return (
      <div className="card card-pad-lg" style={{ gridColumn: 'span 2' }}>
        <div className="row" style={{justifyContent:'space-between'}}>
          <div className="eyebrow"><span className="dot"/>LATEST RECORDING</div>
        </div>
        <h3 style={{marginTop:14}}>Niciun recording încărcat încă</h3>
        <p style={{marginTop:10, fontSize:14, color: 'var(--text-mute)'}}>Reveniți curând — primul live call va apărea aici.</p>
      </div>
    );
  }

  const thumb = item.thumbnail || (item.video_id ? `https://i.ytimg.com/vi/${item.video_id}/maxresdefault.jpg` : '');
  const fallback = item.video_id ? `https://i.ytimg.com/vi/${item.video_id}/hqdefault.jpg` : '';

  return (
    <a
      href={item.youtube_url}
      target="_blank"
      rel="noopener noreferrer"
      className="card card-pad-lg lrec-card"
      style={{ gridColumn: 'span 2', textDecoration: 'none', color: 'inherit', display: 'block' }}>
      <div className="row" style={{justifyContent:'space-between'}}>
        <div className="eyebrow"><span className="dot"/>LATEST RECORDING</div>
        <span className="tag acid">NEW</span>
      </div>
      <h3 style={{marginTop:14}}>{item.title}</h3>
      <div className="lrec-thumb">
        {thumb && (
          <img
            src={thumb}
            alt={item.title}
            loading="lazy"
            onError={(e) => { if (fallback && e.target.src !== fallback) e.target.src = fallback; }}
          />
        )}
        <div className="lrec-overlay">
          <div className="lrec-play"><Icon name="bolt" size={22}/></div>
        </div>
      </div>

      <style>{`
        .lrec-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
        .lrec-card:hover { transform: translateY(-2px); border-color: rgba(183,255,26,0.32); box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 40px rgba(183,255,26,0.10); }
        .lrec-thumb {
          position: relative;
          margin-top: 18px;
          width: 100%;
          aspect-ratio: 16/9;
          border-radius: 14px;
          overflow: hidden;
          background: #050507;
          border: 1px solid rgba(255,255,255,0.06);
        }
        .lrec-thumb img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.45s ease, filter 0.45s ease;
        }
        .lrec-card:hover .lrec-thumb img { transform: scale(1.04); }
        .lrec-overlay {
          position: absolute; inset: 0;
          display: grid; place-items: center;
          background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%);
          transition: background 0.3s ease;
        }
        .lrec-play {
          width: 72px; height: 72px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(180deg, #C8FF35 0%, #A8F00B 100%);
          color: #050505;
          box-shadow: 0 10px 30px rgba(183,255,26,0.45), 0 0 50px rgba(183,255,26,0.40);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .lrec-card:hover .lrec-play {
          transform: scale(1.08);
          box-shadow: 0 14px 40px rgba(183,255,26,0.55), 0 0 60px rgba(183,255,26,0.50);
        }
      `}</style>
    </a>
  );
};

// ===== DASHBOARD =====
const MemberDashboard = ({ user, onApply, onNav }) => {
  const [tab, setTab] = React.useState('overview');
  const [search, setSearch] = React.useState('');
  const [filter, setFilter] = React.useState('all');
  const [playingRec, setPlayingRec] = React.useState(null);
  const isAdmin = user?.role === 'admin';
  const isElite = isAdmin || user?.role === 'elite';
  const eliteActive = user?.elite_status === 'active'; // informational, no longer gates access
  const isCourse = user?.role === 'course' || isElite;

  const filteredRecs = ZOOM_RECORDINGS.filter(r => {
    const matchSearch = !search || r.title.toLowerCase().includes(search.toLowerCase());
    const matchFilter = filter === 'all' || r.cat.toLowerCase() === filter.toLowerCase();
    return matchSearch && matchFilter;
  });

  const canAccess = (tier) => {
    if (tier === 'free') return true;
    if (tier === 'course') return isCourse;
    if (tier === 'elite') return isElite;
    return false;
  };

  return (
    <>
      <section style={{paddingTop: 60, paddingBottom: 30}}>
        <div className="container">
          <div className="member-head">
            <div>
              <div className="eyebrow"><span className="dot"/>MEMBER · {tierLabel(user.role).toUpperCase()}</div>
              <h1 style={{marginTop: 16, fontSize:'clamp(36px, 5vw, 56px)'}}>
                Salut, <span className="acid">{user.name}</span>.
              </h1>
              <p className="lead" style={{marginTop: 12, maxWidth: 560}}>
                {user.role === 'admin'
                  ? 'Acces complet ca administrator. Poți gestiona conținut din panel-ul Admin.'
                  : 'Bun venit înapoi. Ai 2 recordings noi săptămâna asta.'}
              </p>
            </div>
            <NextLiveQuickCard />
          </div>

          <div className="member-tabs">
            {[
              { id:'overview', icon:'layout',  label:'Overview' },
              { id:'recordings', icon:'video',  label:'Elite Calls' },
              ...(isElite
                ? [{ id:'consultation', icon:'phone', label:'Programează 1:1' }]
                : [{ id:'resources',    icon:'file',  label:'Resources' }]),
              ...(isElite ? [{ id:'tradingplan', icon:'book', label:'Trading Plan' }] : []),
              ...(isAdmin ? [{ id:'admin', icon:'settings', label:'Admin' }] : []),
            ].map(t => (
              <button key={t.id}
                className={`member-tab ${tab === t.id ? 'active' : ''}`}
                onClick={() => setTab(t.id)}>
                <Icon name={t.icon} size={15}/>
                <span>{t.label}</span>
                {t.badge && <span className="member-tab-badge">{t.badge}</span>}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{paddingTop: 10, paddingBottom: 80}}>
        <div className="container">
          {tab === 'overview' && (
            <div className="grid grid-3" style={{gap: 20}}>
              <LatestRecordingCard />
              <div className="col" style={{gap:20}}>
                <NextLiveRsvpCard user={user} />
              </div>
            </div>
          )}

          {tab === 'recordings' && (
            <MemberEliteCalls isElite={isElite} onNav={onNav} />
          )}

          {tab === 'resources' && (
            <div className="grid grid-2">
              {RESOURCES.map(r => {
                const access = canAccess(r.tier);
                return (
                  <div key={r.title} className={`card res-card ${!access ? 'rec-locked' : ''}`}>
                    <div className="row" style={{gap:18, alignItems:'center'}}>
                      <IconChip icon={r.icon} color={r.color}/>
                      <div style={{flex:1, minWidth:0}}>
                        <h4 style={{fontSize:16}}>{r.title}</h4>
                        <p style={{marginTop:4, fontSize:12, color:'var(--text-mute)'}}>{r.fmt}</p>
                      </div>
                      <span className={`tag ${tierColor(r.tier)}`} style={{padding:'4px 8px', fontSize:10}}>{tierLabel(r.tier)}</span>
                      {access ? (
                        <button className="btn-circle">
                          <Icon name="download" size={16}/>
                        </button>
                      ) : (
                        <button className="btn-circle" style={{color:'var(--text-mute)'}}>
                          <Icon name="lock" size={14}/>
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          {tab === 'tradingplan' && (
            <MemberTradingPlan user={user} />
          )}

          {tab === 'consultation' && (
            <MemberConsultation user={user} />
          )}

          {tab === 'admin' && isAdmin && (
            <AdminPanel/>
          )}
        </div>
      </section>

      {playingRec && <VideoPlayer rec={playingRec} onClose={() => setPlayingRec(null)}/>}

      <style>{`
        .member-head { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; }
        .member-quick-card {
          display: flex; gap: 16px; align-items: center;
          padding: 18px 22px;
          border-radius: 16px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
        }
        .member-tabs {
          display: flex; gap: 6px;
          padding: 6px;
          border-radius: 999px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          overflow-x: auto;
          width: fit-content;
          max-width: 100%;
        }
        .member-tab {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 18px;
          border-radius: 999px;
          background: transparent;
          border: none;
          color: var(--text-dim);
          font-family: inherit; font-size: 13px; font-weight: 500;
          cursor: pointer;
          white-space: nowrap;
          transition: all 0.2s;
        }
        .member-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
        .member-tab.active { color: #050505; background: var(--acid); box-shadow: 0 6px 20px rgba(183,255,26,0.3); }
        .member-tab-badge {
          font-size: 10px; padding: 2px 7px; border-radius: 999px;
          background: var(--bg); color: var(--acid); font-weight: 600;
        }
        .member-tab.active .member-tab-badge { background: rgba(0,0,0,0.2); color: #050505; }

        .overview-player {
          margin-top: 20px;
          aspect-ratio: 16/9;
          border-radius: 16px;
          background: var(--bg);
          border: 1px solid var(--line);
          overflow: hidden;
          position: relative;
          cursor: pointer;
          transition: transform 0.25s;
        }
        .overview-player:hover { transform: scale(1.01); }
        .overview-player-overlay {
          position: absolute; inset: 0;
          display: grid; place-items: center;
          background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
        }
        .progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
        .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, var(--acid), #DCFF7A);
          box-shadow: 0 0 12px var(--acid-glow);
        }

        .lib-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
        .lib-search {
          flex: 1; min-width: 220px; max-width: 360px;
          display: flex; align-items: center; gap: 10px;
          padding: 12px 16px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 999px;
        }
        .lib-search-input { flex:1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; }
        .lib-filters { display: flex; gap: 6px; flex-wrap: wrap; }
        .lib-filter {
          padding: 8px 14px;
          border-radius: 999px;
          background: transparent;
          border: 1px solid var(--line);
          color: var(--text-dim);
          font-family: inherit; font-size: 12px;
          cursor: pointer;
          transition: all 0.2s;
        }
        .lib-filter:hover { color: var(--text); border-color: var(--line-2); }
        .lib-filter.active { background: var(--acid); color: #050505; border-color: var(--acid); }

        .rec-card { padding: 0; cursor: pointer; overflow: hidden; transition: transform 0.25s, border-color 0.25s; }
        .rec-card:hover:not(.rec-locked) { transform: translateY(-4px); border-color: var(--line-2); }
        .rec-card.rec-locked { cursor: not-allowed; opacity: 0.85; }
        .rec-thumb {
          aspect-ratio: 16/9;
          position: relative;
          background: var(--bg);
          overflow: hidden;
          display: flex; align-items: center; justify-content: center;
          border-bottom: 1px solid var(--line);
        }
        .rec-thumb-top {
          position: absolute; top: 12px; left: 12px; right: 12px;
          display: flex; justify-content: space-between; gap: 8px;
          z-index: 2;
        }
        .rec-thumb-bottom { position: absolute; bottom: 12px; right: 12px; z-index: 2; }
        .rec-play {
          width: 48px; height: 48px; border-radius: 50%;
          background: var(--acid); color: #050505;
          display: grid; place-items: center;
          box-shadow: 0 0 24px rgba(183,255,26,0.4);
          position: relative; z-index: 2;
          transition: transform 0.2s;
        }
        .rec-card:hover .rec-play { transform: scale(1.1); }
        .rec-locked-overlay {
          position: absolute; inset: 0;
          background: rgba(0,0,0,0.7);
          backdrop-filter: blur(2px);
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          color: var(--text-dim);
          z-index: 3;
        }

        .course-card { padding: 26px; }
        .res-card { padding: 22px; }
      `}</style>
    </>
  );
};

// ===== ADMIN PANEL =====
const AdminPanel = () => {
  const [recs, setRecs] = React.useState(ZOOM_RECORDINGS.slice(0, 4));
  const [form, setForm] = React.useState({ title:'', cat:'BACKTEST', tier:'course', desc:'' });
  const addRec = (e) => {
    e.preventDefault();
    if (!form.title) return;
    const cat = form.cat;
    const color = { BACKTEST:'acid', ANALYSIS:'cyan', PSYCHOLOGY:'gold', PROP:'blue' }[cat] || 'acid';
    setRecs([{ id: Date.now(), date: new Date().toISOString().slice(0,10), dur: '00:00', color, ...form }, ...recs]);
    setForm({ title:'', cat:'BACKTEST', tier:'course', desc:'' });
  };
  return (
    <div className="grid grid-2" style={{gap: 24}}>
      <div className="card card-pad-lg" style={{gridColumn:'span 2'}}>
        <div className="row" style={{gap:12}}>
          <IconChip icon="settings" color="gold"/>
          <div>
            <h3>Admin Panel</h3>
            <p style={{marginTop:4}}>Gestionează recordings, courses, resources și anunțuri.</p>
          </div>
        </div>
      </div>

      <div className="card card-pad-lg">
        <h4>Upload new recording</h4>
        <form onSubmit={addRec} style={{marginTop: 20, display:'flex', flexDirection:'column', gap: 14}}>
          <div>
            <div className="label">Title</div>
            <input className="input" placeholder="Backtest Call — ..." value={form.title} onChange={e => setForm({...form, title: e.target.value})}/>
          </div>
          <div className="grid grid-2" style={{gap:12}}>
            <div>
              <div className="label">Category</div>
              <select className="select" value={form.cat} onChange={e => setForm({...form, cat: e.target.value})}>
                <option>BACKTEST</option><option>ANALYSIS</option><option>PSYCHOLOGY</option><option>PROP</option>
              </select>
            </div>
            <div>
              <div className="label">Tier</div>
              <select className="select" value={form.tier} onChange={e => setForm({...form, tier: e.target.value})}>
                <option value="free">Free</option><option value="course">Course</option><option value="elite">Elite</option>
              </select>
            </div>
          </div>
          <div>
            <div className="label">Description</div>
            <textarea className="textarea" placeholder="Short description..." value={form.desc} onChange={e => setForm({...form, desc: e.target.value})}/>
          </div>
          <div>
            <div className="label">Video file</div>
            <div className="upload-zone">
              <Icon name="video" size={22} style={{color:'var(--text-mute)'}}/>
              <span style={{fontSize:13, marginTop:8}}>Drop Zoom recording aici sau <span className="acid">browse</span></span>
              <span style={{fontSize:11, color:'var(--text-mute)', marginTop:4}}>MP4 · max 4GB</span>
            </div>
          </div>
          <Button variant="acid" type="submit" icon="plus">Add recording</Button>
        </form>
      </div>

      <div className="card card-pad-lg">
        <div className="row" style={{justifyContent:'space-between', marginBottom: 16}}>
          <h4>Recent recordings</h4>
          <span className="tag">{recs.length} total</span>
        </div>
        <div className="col" style={{gap:10}}>
          {recs.map(r => (
            <div key={r.id} className="admin-row">
              <span className={`tag ${r.color}`} style={{padding:'3px 8px', fontSize:10, flexShrink:0}}>{r.cat}</span>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.title}</div>
                <div style={{fontSize:11, color:'var(--text-mute)'}}>{r.date} · {tierLabel(r.tier)}</div>
              </div>
              <button className="btn-circle" style={{width:32, height:32}}><Icon name="settings" size={14}/></button>
            </div>
          ))}
        </div>
      </div>

      <div className="card card-pad-lg">
        <h4>Quick actions</h4>
        <div className="col" style={{gap:10, marginTop:18}}>
          {[
            { icon:'book',  label:'Manage Courses',     count: 8 },
            { icon:'file',  label:'Manage Resources',   count: 14 },
            { icon:'users', label:'Members',            count: 504 },
            { icon:'coin',  label:'Update Prop Offers', count: 4 },
          ].map(a => (
            <button key={a.label} className="admin-row" style={{cursor:'pointer'}}>
              <IconChip icon={a.icon} color="acid"/>
              <span style={{flex:1, fontWeight:500, fontSize:14}}>{a.label}</span>
              <span className="tag">{a.count}</span>
              <Icon name="arrow" size={16} style={{color:'var(--text-mute)'}}/>
            </button>
          ))}
        </div>
      </div>

      <div className="card card-pad-lg">
        <h4>Announcement</h4>
        <p style={{marginTop:8, fontSize:13}}>Trimite un anunț pe Discord + pe site simultan.</p>
        <textarea className="textarea mt-3" placeholder="Anunț pentru toți membrii..."/>
        <div className="row" style={{justifyContent:'space-between', marginTop: 14}}>
          <span className="tag"><Icon name="discord" size={12}/>Cross-post Discord</span>
          <Button variant="acid" size="sm">Publish</Button>
        </div>
      </div>

      <style>{`
        .upload-zone {
          padding: 28px;
          border: 2px dashed var(--line-2);
          border-radius: 14px;
          background: rgba(255,255,255,0.02);
          display: flex; flex-direction: column; align-items: center;
          text-align: center;
          transition: border-color 0.2s, background 0.2s;
          cursor: pointer;
        }
        .upload-zone:hover { border-color: var(--acid); background: rgba(183,255,26,0.03); }
        .admin-row {
          display: flex; align-items: center; gap: 12px;
          padding: 12px;
          border-radius: 12px;
          background: rgba(255,255,255,0.025);
          border: 1px solid var(--line);
          font-family: inherit;
          color: inherit;
          text-align: left;
          transition: border-color 0.2s, background 0.2s;
        }
        button.admin-row:hover { border-color: var(--line-2); background: rgba(255,255,255,0.05); }
      `}</style>
    </div>
  );
};

// ===== MAIN PAGE =====
const MemberPage = ({ user, onLogin, onApply, onNav }) => {
  // Only Elite (active) and Admin see the full dashboard.
  // Anonymous visitors AND logged-in free users see the same locked preview.
  const isAdmin = user?.role === 'admin';
  const isElite = isAdmin || user?.role === 'elite';
  if (!isElite) return <MemberLocked onLogin={onLogin} onApply={onApply} user={user}/>;
  return <MemberDashboard user={user} onApply={onApply} onNav={onNav}/>;
};

Object.assign(window, { MemberPage });
