// ============================================================
// ELITE PLAN PAGE — main sales + apply flow
// ============================================================

const PROBLEMS = [
  { icon: 'x', color: 'red', title: 'Învață concepte random',          desc: 'Pe Youtube astăzi liquidity, mâine ICT, poimâine wyckoff. Nimic structurat.' },
  { icon: 'x', color: 'red', title: 'Nu profiți de regulile prop firms', desc: 'Nu știi cum să exploatezi regulile cât să faci payout-uri consistente.' },
  { icon: 'x', color: 'red', title: 'Nu știi momentele algoritmului',  desc: 'Nu știi când urmează un retracement și când urmează un reversal.' },
  { icon: 'x', color: 'red', title: 'Ai mereu un gol pe care nu ți-l poți explica', desc: 'Tipic pentru cineva care nu are un mentor — apare aceeași confuzie săptămână după săptămână.' },
  { icon: 'x', color: 'red', title: 'Tranzacționezi singur',            desc: 'Niciun review extern. Aceleași greșeli, săptămână după săptămână.' },
  { icon: 'x', color: 'red', title: 'Fără accountability',              desc: 'Nimeni nu te corectează dacă ai greșit ceva la trade-ul tău.' },
];

const ELITE_FEATURES = [
  { icon: 'video',   color: 'acid', title: '2× live calls/săpt',
    desc: 'Luni & Vineri, 19:00–21:00 RO. Backtest, market analysis, Q&A, psihologie.' },
  { icon: 'whatsapp',color: 'cyan', title: 'WhatsApp 1-on-1',
    desc: 'Suport direct, răspunsuri la trade-uri și întrebări de execuție.' },
  { icon: 'eye',     color: 'blue', title: 'Trade reviews',
    desc: 'Sesiuni săptămânale de review pe trade-urile tale, cu feedback pe execuție.' },
  { icon: 'chart',   color: 'acid', title: 'Backtesting împreună',
    desc: 'Sesiuni structurate de backtesting cu date reale și concluzii actionable.' },
  { icon: 'candle',  color: 'cyan', title: 'Market analysis',
    desc: 'Watchlist zilnic, nivele cheie pre-NY, plan pentru sesiunea curentă.' },
  { icon: 'brain',   color: 'gold', title: 'Psihologie & rutină',
    desc: 'Structură mentală, journal frameworks, recovery după drawdown.' },
  { icon: 'shield',  color: 'blue', title: 'Prop firm guidance',
    desc: 'Strategie de scaling, când iei payout, cum gestionezi multiple conturi.' },
  { icon: 'target',  color: 'acid', title: 'Risk setup personal',
    desc: 'Calculatoare custom, plan de risc adaptat capitalului și obiectivelor tale.' },
  { icon: 'lock',    color: 'gold', title: 'Conținut exclusiv Elite',
    desc: 'Recordings arhivate, materiale interne, frameworks care nu sunt în Discord.' },
];

const EliteShowcase = ({ onApply }) => {
  const sectionRef = React.useRef(null);
  const cornersRef = React.useRef([]);

  React.useLayoutEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const isMobile = window.matchMedia('(max-width: 760px)').matches;
    if (reduced || isMobile || !window.gsap || !window.ScrollTrigger) return;

    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    gsap.registerPlugin(ScrollTrigger);

    const corners = cornersRef.current.filter(Boolean);
    if (corners.length === 0) return;
    const triggers = [];
    const config = [
      { side: 'left',  rot: -5 },
      { side: 'right', rot:  4 },
      { side: 'left',  rot:  3 },
      { side: 'right', rot: -4 },
    ];

    corners.forEach((card, i) => {
      const c = config[i] || config[0];
      gsap.set(card, {
        x: c.side === 'left' ? '-70vw' : '70vw',
        rotation: c.side === 'left' ? c.rot - 12 : c.rot + 12,
        opacity: 0,
        scale: 0.92,
        filter: 'blur(8px)',
        willChange: 'transform, opacity, filter',
      });
    });

    corners.forEach((card, i) => {
      const c = config[i] || config[0];
      const tween = gsap.to(card, {
        x: 0,
        rotation: c.rot,
        opacity: 1,
        scale: 1,
        filter: 'blur(0px)',
        ease: 'power3.out',
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top 80%',
          end: 'center 60%',
          scrub: 0.4 + i * 0.08,
        },
      });
      if (tween.scrollTrigger) triggers.push(tween.scrollTrigger);
    });

    return () => {
      triggers.forEach((t) => t && t.kill && t.kill());
      corners.forEach((c) => c && gsap.set(c, { clearProps: 'all' }));
    };
  }, []);

  return (
    <section ref={sectionRef}>
      <div className="container">
        <div className="elite-stage">
          <div ref={(el) => { cornersRef.current[0] = el; }} className="elite-corner elite-corner-tl">
            <div className="elite-bicon amber"><Icon name="crown" size={22} /></div>
            <div className="elite-beyebrow">Elite Tier</div>
            <h3>1-on-1<br/>Mentorship</h3>
          </div>

          <div ref={(el) => { cornersRef.current[1] = el; }} className="elite-corner elite-corner-tr">
            <div className="elite-bicon acid"><Icon name="coin" size={22} /></div>
            <div className="elite-beyebrow">Plan dovedit</div>
            <h3>Fă payout<br/>de la ZERO</h3>
          </div>

          <div ref={(el) => { cornersRef.current[2] = el; }} className="elite-corner elite-corner-bl">
            <div className="elite-bicon violet"><Icon name="users" size={22} /></div>
            <div className="elite-beyebrow acid">Active</div>
            <h3><span className="elite-big">17</span><br/>Elite members</h3>
          </div>

          <div ref={(el) => { cornersRef.current[3] = el; }} className="elite-corner elite-corner-br">
            <div className="elite-bicon rose"><Icon name="star" size={22} /></div>
            <div className="elite-beyebrow acid">4+ Years</div>
            <h3>Profitable<br/>NQ Trader</h3>
          </div>

          {/* MAIN ELITE RECTANGLE — shared gradient card (acid+cyan top glow) */}
          <EliteMainCard onApply={onApply} />
        </div>
      </div>
      <style>{`
        .elite-for-hidden { display: none; }
        .elite-stage {
          position: relative;
          max-width: 880px;
          margin: 60px auto;
          padding: 80px 40px;
        }
        /* .elite-main / .elite-main-inner / .elite-feat-chart styles live in
           page-home.jsx — the new gradient card is shared between pages.
           Only corner/floating card styles remain here. */
        .elite-pill {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 7px 14px;
          border-radius: 999px;
          background: rgba(183,255,26,0.12);
          border: 1px solid rgba(183,255,26,0.3);
          color: var(--acid);
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }
        .elite-pill .dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--acid); box-shadow: 0 0 8px var(--acid-glow);
        }
        .elite-feat-title {
          font-size: clamp(46px, 6vw, 78px);
          line-height: 1;
          letter-spacing: -0.04em;
          margin: 22px 0 0;
          font-weight: 900;
        }
        .elite-feat-title .acid {
          background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 60%, #8FE000 100%);
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
          filter: drop-shadow(0 0 18px rgba(183,255,26,0.3));
        }
        .elite-feat-desc {
          margin: 18px auto 0;
          max-width: 480px;
          font-size: 15px;
          color: var(--text-dim);
          line-height: 1.55;
        }
        .elite-benefits {
          list-style: none;
          padding: 0;
          margin: 36px auto 36px;
          max-width: 620px;
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px 28px;
          text-align: left;
        }
        .elite-benefits li {
          display: flex; align-items: center; gap: 10px;
          font-size: 14px;
          color: var(--text);
        }
        .elite-benefits li svg {
          color: var(--acid);
          flex-shrink: 0;
          filter: drop-shadow(0 0 6px var(--acid-glow));
        }
        .elite-fineprint {
          margin-top: 16px;
          font-size: 12px;
          color: var(--text-mute);
          letter-spacing: 0.05em;
        }
        .elite-corner {
          position: absolute;
          z-index: 3;
          width: 215px;
          padding: 22px 22px 20px;
          background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
          border: 1px solid var(--line-2);
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 10px;
          box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04);
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s 0.35s;
        }
        .elite-corner h3 {
          font-size: 22px;
          line-height: 1.1;
          letter-spacing: -0.02em;
          margin: 0;
        }
        .elite-corner:hover {
          transform: rotate(0deg) translateY(-4px) scale(1.04) !important;
          z-index: 5;
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s;
        }
        .elite-corner-tl { top:  10px;  left:  -40px; transform: rotate(-5deg); }
        .elite-corner-tr { top:  -8px;  right: -60px; transform: rotate(4deg); }
        .elite-corner-bl { bottom: 0px;  left:  -70px; transform: rotate(3deg); }
        .elite-corner-br { bottom: 20px; right: -40px; transform: rotate(-4deg); }
        .elite-bicon {
          width: 46px; height: 46px;
          display: grid; place-items: center;
          border-radius: 13px;
          position: relative;
        }
        .elite-bicon::after {
          content: '';
          position: absolute; inset: 0;
          border-radius: inherit;
          background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.35), transparent 60%);
          pointer-events: none;
        }
        .elite-bicon.acid {
          background: linear-gradient(180deg, #C6FF3A 0%, #9DE000 100%);
          color: #050505;
          border: 1px solid rgba(0,0,0,0.18);
          box-shadow: 0 8px 22px rgba(183,255,26,0.40), inset 0 1px 0 rgba(255,255,255,0.35);
        }
        .elite-bicon.amber {
          background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%);
          color: #1a0d00;
          border: 1px solid rgba(0,0,0,0.18);
          box-shadow: 0 8px 22px rgba(245,158,11,0.42), inset 0 1px 0 rgba(255,255,255,0.35);
        }
        .elite-bicon.rose {
          background: linear-gradient(180deg, #FB7185 0%, #E11D48 100%);
          color: #ffffff;
          border: 1px solid rgba(255,255,255,0.14);
          box-shadow: 0 8px 22px rgba(244,63,94,0.42), inset 0 1px 0 rgba(255,255,255,0.30);
        }
        .elite-bicon.violet {
          background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);
          color: #ffffff;
          border: 1px solid rgba(255,255,255,0.14);
          box-shadow: 0 8px 22px rgba(139,92,246,0.42), inset 0 1px 0 rgba(255,255,255,0.30);
        }
        .elite-bicon svg { position: relative; z-index: 1; }
        .elite-beyebrow {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          letter-spacing: 0.14em;
          color: var(--text-mute);
          text-transform: uppercase;
        }
        .elite-beyebrow.acid { color: var(--acid); }
        .elite-big {
          font-size: 48px;
          font-weight: 800;
          line-height: 1;
          letter-spacing: -0.04em;
          color: var(--text);
        }
        @media (max-width: 1100px) {
          .elite-stage { padding: 60px 20px; max-width: 760px; }
          .elite-corner { width: 180px; padding: 18px; }
          .elite-corner h3 { font-size: 18px; }
          .elite-corner-tl { top: -10px;  left: -20px; }
          .elite-corner-tr { top: -20px;  right: -20px; }
          .elite-corner-bl { bottom: -20px; left: -20px; }
          .elite-corner-br { bottom: -10px; right: -20px; }
        }
        @media (max-width: 760px) {
          .elite-stage { padding: 30px 0; }
          .elite-main { padding: 36px 26px 32px; }
          .elite-benefits {
            grid-template-columns: 1fr;
            gap: 12px;
            max-width: 360px;
          }
          .elite-corner {
            position: relative;
            width: 100%;
            margin: 14px 0;
            top: auto; left: auto; right: auto; bottom: auto;
            transform: none !important;
          }
          .elite-corner:hover { transform: translateY(-3px) !important; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// ELITE REVIEWS — premium glow-card reviews with modal
// ============================================================

const ELITE_REVIEWS = [
  {
    name: 'Mihai',
    badge: 'Apex Payout',
    color: 'gold',
    highlight: '$8,000 total payout',
    tags: ['Payout', 'Apex', 'Execuție'],
    excerpt: 'Payout numărul 4 pe 4 conturi de APEX, $8,000 în total. Conceptele predate de Tyrone sunt mai mult decât suficiente pentru a deveni profitabil.',
    fullReview: 'Payout numarul 4 pe 4 conturi de APEX, 8000 $ in total, un payout mult asteptat de la aprobare pana la confirmare, dar a meritat asteparea. Va doresc sa castigati de 10 ori mai mult ca mine si eu sa castig milioane.\n\nConceptele predate de Tyrone sunt mai mult ca sufucient pentru a fi profitabil, impreuna cu consistenta in executie corecta → rezultatele vin. Trebuie multa munca, nu exista profitabilitate fara munca, si cel mai bine e ca poti scurta timpul pana la rezultate cu ajutorul unui mentor bun, am spus-o si o mai spun, Tyrone este expertul de care am avut nevoie.\n\nTyrone, tine-o tot asa — ai crescut bine multi traderi in Romania doar prin materialele de pe YouTube, iar ELITE este Next Level. Nu stiu mentorat in care mentorul sa raspunda la toate intrebarile si sa-si dea toate silintele sa faca membrii mentoratului sa inteleaga tot.',
  },
  {
    name: 'Cristi',
    badge: '3 conturi PA',
    color: 'gold',
    highlight: '4 eval + 3 conturi PA',
    tags: ['Apex', 'Eval', 'PA Accounts'],
    excerpt: '40 de zile în Elite. Am trecut 4 conturi de eval și tranzacționez pe 3 conturi PA. Înainte mă chinuiam să trec o singură evaluare.',
    fullReview: 'Sunt de 40 de zile în planul Elit, nu vă spun povești, vă spun rezultate.\n\nPrima dată în viața mea am tranzacționat în februarie pe cont Apex. Din februarie până acum 40 zile mă chinuiam să trec eval, am trecut o dată la început din întâmplare. De când am intrat în planul Elit am trecut 4 conturi de eval și acum tranzacționez pe 3 conturi PA. Cu asta cred că am spus tot.\n\nPe lângă faptul că Tyrone e de nota 10+ în tot, nu am ce să reproșez. P.S. până să iau contact cu el mă gândeam că e bot AI, mai ales după vocea de pe YouTube.\n\nAș vrea să rămân pe viață în Planul Elit pentru că mă simt mai în siguranță cu Tyrone mentor. Tot respectul, Tyrone.',
  },
  {
    name: 'Adrian',
    badge: 'Elite Member',
    color: 'acid',
    highlight: '3 conturi trecute',
    tags: ['Plan', 'Strategie', 'Implicare'],
    excerpt: 'Aproape 2 luni în Elite și am 3 conturi trecute relativ ușor, când înainte nu puteam să trec un cont de 10k. Pentru prima dată am un plan și o strategie clară.',
    fullReview: 'Pentru că mai sunt unele persoane care mă întreabă în privat despre planul Elite, am zis că scriu aici să fie pentru toată lumea.\n\nPentru mine planul Elite a făcut diferența de când sunt în el (aproape 2 luni). Într-adevăr, nu am făcut încă vreun payout, dar am 3 conturi trecute relativ ușor — asta după ce eu nu puteam să trec un cont de 10k.\n\nTyrone este foarte implicat și țin să spun că eu am mai avut mentori și programe, dar nimeni nu a fost așa de implicat ca Tyrone. Deci îl recomand 100%.\n\nȚine de fiecare după ce intră în program să fie serios și să fie dispus să învețe din greșeli și modul prin care Tyrone ne ajută să vedem piața.\n\nÎncă o chestie: eu înainte să colaborez cu Tyrone nu aveam vreun plan bine stabilit și vreo strategie. Acum țin să cred că am pentru prima dată un plan și o strategie pe care să o respect.\n\nDeci încă o dată recomand programul Elite, garantat se merită.',
  },
  {
    name: 'Sergiu',
    badge: 'Live Calls',
    color: 'indigo',
    highlight: 'Așteptările, depășite',
    tags: ['Live Calls', 'Disciplină', 'Acuratețe'],
    excerpt: 'Așteptările mele au fost depășite pe toate fronturile. Tyrone, cu răbdare, m-a ajutat să văd doar ceea ce trebuie. Ședințele live sunt de neprețuit.',
    fullReview: 'Hmmm, nu a fost conform așteptărilor... așteptările mele au fost depășite pe toate fronturile.\n\nTotul era la vedere, totul era în fața ochilor mei, dar eu nu vedeam. Tyrone a fost mentorul care, cu răbdare, m-a ajutat să-mi ridic acel văl de pe ochi și să văd doar ceea ce trebuie, doar ceea ce merită văzut.\n\nȘedințele din elite-live-call sunt de neprețuit. Cantitatea și calitatea informațiilor primite în call-uri au schimbat radical modul meu de abordare al mișcărilor din piață și au dus la îmbunătățirea acurateții setup-urilor și la construirea unui nivel ridicat de disciplină în trading.\n\nMULȚUMESC!',
  },
  {
    name: 'Giani',
    badge: 'Framework ICT',
    color: 'indigo',
    highlight: 'Proces structurat',
    tags: ['ICT', 'Lichiditate', 'Structură'],
    excerpt: 'Tyrone reprezintă primul reper concret în framework-ul ICT. Proces, coerență și replicabilitate, fără narațiuni inutile.',
    fullReview: 'Într-un context în care zgomotul depășește adesea substanța, găsirea unui mentor cu un mod de lucru cu adevărat structurat nu este ceva obișnuit.\n\nTyrone reprezintă, pentru mine, primul reper concret în framework-ul ICT.\n\nMunca lui pe MDI nu este simplă didactică: este construcția unui model operațional bazat pe citirea lichidității, structurii și timing-ului. Fără narațiuni inutile, fără overfitting conceptual. Doar proces, coerență și replicabilitate.\n\nCeea ce diferențiază cu adevărat abordarea lui este capacitatea de a transmite o logică operațională clară, care permite traderului să treacă de la o viziune discreționară confuză la o citire intențională a pieței.\n\nPentru cei orientați spre înțelegere profundă și nu spre căutarea scurtăturilor, valoarea este evidentă.',
  },
  {
    name: 'Marian',
    badge: 'Live Calls',
    color: 'cyan',
    highlight: '2 call-uri pe săptămână',
    tags: ['Backtesting', 'Live Calls', 'Claritate'],
    excerpt: 'Call-urile live de două ori pe săptămână aduc foarte multă valoare. Backtesting, explicații clare și răspunsuri la toate necunoscutele.',
    fullReview: 'Pe aceasta cale țin să apreciez și eu în mod deosebit calitatea programului Elite și în special al mentorului Tyrone, care aduce un plus de valoare deosebită prin call-urile live pe care le ține de două ori pe săptămână.\n\nPrin backtestingul săptămânii anterioare ne arată cum tradingul se ridică la nivel de artă, totodată lămurind toate necunoscutele pe care le avem în timpul call-ului.\n\nDacă ar fi să recomand un program și un mentor, acesta ar fi cu siguranță Elite și Tyrone.',
  },
  {
    name: 'Andreea',
    badge: 'Elite Member',
    color: 'rose',
    highlight: 'Mentor adevărat',
    tags: ['Mentorat', 'Psihologie', 'Comunitate'],
    excerpt: 'Am avut cursuri și persoane care m-au îndrumat, dar numai lui Tyrone îi dau statutul de mentor. Răbdare, implicare și suport psihologic ca un prieten.',
    fullReview: 'Bună ziua. Am numai cuvinte de laudă.\n\nAm mai avut cursuri plătite și persoane ce m-au îndrumat în trecut, dar numai lui Tyrone pot să îi dau statutul de mentor, pentru că îl merită pe deplin.\n\nAm rămas plăcut impresionată de răbdarea și implicarea de care dă dovadă cu membrii comunității sale. A fost alături de mine și m-a îndrumat exact ca un profesor. Chiar și din punct de vedere psihologic, m-a încurajat, lăudat — exact ca un prieten.\n\nChiar nu credeam că voi da peste o astfel de persoană și îi sunt foarte recunoscătoare în fiecare zi. Făcând parte din planul Elite, tradingul nu a devenit mai ușor neapărat, dar Tyrone a reușit să îmi clarifice toate conceptele și hărăbaura din capul meu.\n\nMulțumesc și membrilor din grup, pentru că au reușit să creeze o comunitate doar cu persoane cu suflet frumos. Mă înclin în fața voastră. Felicitări tuturor!',
  },
  {
    name: 'Barbu',
    badge: 'Elite Member',
    color: 'violet',
    highlight: 'Tyrone e nr.1',
    tags: ['Răbdare', 'Mentorat', 'Învățare'],
    excerpt: 'Sunt în prima lună de Elite, lupt cu propriul dușman — răbdarea. Din 4 ani în piață, Tyrone e cea mai bună persoană de la care poți învăța trading.',
    fullReview: 'Sunt în prima lună de Elite în care mă lupt cu propriul meu dușman nr. 1: RĂBDAREA!\n\nTyrone a fost tot timpul acolo să mă îndrume și să mă aducă pe calea dreaptă. Dacă este cineva pe această piață care să te poată învăța trading, Tyrone este acea persoană.\n\nPână la el am cercetat mult piața (sunt de 4 ani în piață și am pierdut mulți bani) și am găsit 2 persoane, din care Tyrone este nr. 1. Dacă cu el nu reușești să înveți trading, atunci cu siguranță nu o să găsești altă persoană de la care să poți învăța.\n\nTyrone e genial, pregătit și cu documentația făcută. Aștept cu nerăbdare să intru pe cont real, dar știți reclama de la OREO?! (nu cred că sunt pregătit încă!)\n\nMulțumesc Tyrone că ești cu noi!',
  },
  {
    name: 'Iosif',
    badge: 'Trade Analysis',
    color: 'cyan',
    highlight: 'Strategie clară și logică',
    tags: ['Analiză', 'Logică', 'Structură'],
    excerpt: 'De fiecare dată când am avut o tranzacție, a analizat-o în detaliu. Nu răspunsuri rapide, ci investiție reală în progresul meu.',
    fullReview: 'Vreau să mulțumesc pe această cale pentru ajutorul de până acum.\n\nDe fiecare dată când am avut o tranzacție, a analizat-o în detaliu — mi-a explicat clar ce a fost bine, ce nu, și de ce. Nu a oferit doar răspunsuri rapide, ci a investit timp real în progresul meu.\n\nM-a ajutat să învăț cum să gândesc o tranzacție logic, nu doar să urmez pași orbește. Strategia pe care mi-a prezentat-o este clară, bine structurată și adaptată la stilul meu.\n\nÎl recomand cu încredere oricui vrea să învețe trading în mod corect, cu explicații și logică.',
  },
  {
    name: 'Ion Mihai',
    badge: 'Elite Member',
    color: 'violet',
    highlight: '2 conturi PA',
    tags: ['Suport', 'PA Accounts', 'Psihologie'],
    excerpt: 'Am început la nivel de gambling, iar după o lună și ceva am făcut progrese notabile și tranzacționez pe 2 conturi PA.',
    fullReview: 'Aș vrea să las și eu o recenzie în ceea ce privește colaborarea cu Tyrone și să îi mulțumesc pentru tot ajutorul pe care mi l-a acordat până acum și de acum înainte.\n\nAm început colaborarea acum o lună și ceva (eram obișnuit cu trading-ul, dar la nivel de gambling). Am făcut niște progrese notabile, tranzacționez pe 2 conturi de PA destul de "muncite" pentru a le trece.\n\nAm primit tot suportul de care aveam nevoie, răspunsuri la întrebări și la lucrurile neclare indiferent de timeframe-ul zilei. Totodată call-urile live sunt foarte valoroase pentru noi — e locul unde ești îndrumat dacă greșești și primești răspunsul la neclarități.\n\nTyrone, pe această cale îți mulțumesc încă o dată pentru ajutor și pentru faptul că ne ajuți zi de zi să înțelegem tradingul. Sper ca în curând să îți fac concurență la payout-uri.',
  },
  {
    name: 'Manu',
    badge: 'Strategie & Feedback',
    color: 'acid',
    highlight: 'Winrate mai bun',
    tags: ['Winrate', 'Strategie', 'Feedback'],
    excerpt: 'Datorită lui Tyrone am un winrate mult mai bun și o strategie clară. Feedback pe fiecare trade — face diferența în înțelegerea pieței.',
    fullReview: 'Mii de mulțumiri lui Tyrone și programului Elite.\n\nDatorită lui am un winrate mult mai bun și o strategie clară. Suportul primit și feedback-ul pentru fiecare trade luat este încă un punct ce face diferența în înțelegerea pieței și a raționamentului după care se ghidează aceasta.\n\nMult succes în continuare și la cât mai multe TP-uri.',
  },
  {
    name: 'Mădălin',
    badge: 'Elite Progress',
    color: 'acid',
    highlight: 'Challenge trecut',
    tags: ['Strategie', 'Feedback', 'Progress'],
    excerpt: 'După o lună în Elite văd un progres mare. Am primit strategie personalizată, feedback pe fiecare trade și am trecut un challenge.',
    fullReview: 'Sunt de o lună în planul Elite și de când am intrat văd un progres mare în procesul meu spre drumul profitabilității.\n\nAici am primit o strategie personalizată, testată, care chiar funcționează foarte bine, și feedback pe fiecare tranzacție. Mereu primesc sfaturi de la Tyrone în legătură cu toate trade-urile mele, mereu răspunde rapid la mesaje și îmi explică clar ceea ce fac bine sau rău. De asta aveam nevoie de mult.\n\nÎn această lună am trecut și un cont de challenge cu ajutorul conceptelor, strategiei și suportului oferit de Tyrone în grupul Elite. În această comunitate sunt sigur că pot deveni un trader profitabil și să îmi valorific potențialul.',
  },
  {
    name: 'Alex',
    badge: 'Trade Feedback',
    color: 'gold',
    highlight: '10/10',
    tags: ['Feedback', 'Claritate', 'Implicare'],
    excerpt: 'Fiecare trade a fost disecat, greșelile au fost corectate, iar explicațiile au fost clare. 10/10 din partea mea.',
    fullReview: 'Fac parte din planul Elite și nu am ce să îi reproșez lui Tyrone.\n\nCând am avut neclarități mi-a explicat unde greșeam, a făcut lucrurile să fie cât mai clare. A fost foarte înțelegător și implicat. Fiecare trade luat a fost "disecat", iar dacă erau greșeli le corectam.\n\nDin punctul meu de vedere el îți oferă tot ce ai nevoie să fii profitabil, iar după ține de munca fiecăruia. 10/10 din partea mea!',
  },
  {
    name: 'Florin',
    badge: 'Course Member',
    color: 'blue',
    highlight: 'Momentul "Aha"',
    tags: ['Curs', 'Mentorat', 'Claritate'],
    excerpt: 'Am avut momentul acela de "Aha". Tiron nu e doar un mentor, e și un prieten de la care ai foarte multe de învățat.',
    fullReview: 'Am avut parte de momentul acela de "Aha" în momentul achiziționării cursului.\n\nTiron nu e doar un mentor, e și un prieten de la care ai foarte multe de învățat. De la fiecare explicație până la punerea în aplicare a ceea ce ai studiat este lângă noi — chiar dacă nu fizic, dar întotdeauna aici cu videoclipurile lui.\n\nMulțumim pentru tot, rege.',
  },
  {
    name: 'Robert',
    badge: 'Elite Member',
    color: 'rose',
    highlight: 'Progres mental și tehnic',
    tags: ['Psihologie', 'Entry-uri', 'Consistență'],
    excerpt: 'Elite m-a ajutat enorm atât tehnic, cât și psihic. Am mai multă încredere, mai puține stop loss-uri și mult mai multe win-uri.',
    fullReview: 'De o lună și câteva zile fac parte din planul ELITE al lui Tyrone și pot spune că m-a modelat foarte bine și m-a ajutat extrem de mult implicarea lui Tyrone în trade-urile mele.\n\nDin punct de vedere al analizei găsesc aproape aceleași trade-uri și entry-uri precum ale lui în 80% din cazuri, dar mai am de lucrat la asta — mereu e loc de mai bine.\n\nDin punct de vedere psihic m-a ajutat foarte mult, mi-a dat o încredere în mine legat de cum mă orientez în trade-uri, cum nu am avut niciodată.\n\nDin punct de vedere al rezultatelor, m-am îmbunătățit enorm: am foarte puține stop loss-uri, câteva break-even-uri și în mare parte win-uri. De altfel, cursul lui Tyrone, care e separat de planul ELITE, este foarte bun și îl revizuiesc de fiecare dată când am nevoie să înțeleg din nou ceva — prezintă tot, de la început până la sfârșit.\n\nÎn concluzie, am doar cuvinte de laudă pentru Tyrone și îi mulțumesc pentru tot timpul, răbdarea și atenția oferită până acum. Nu mă voi opri aici, drumul nostru continuă și va continua mult și bine.',
  },
  {
    name: 'Daniel',
    badge: 'Course + Elite',
    color: 'cyan',
    highlight: 'Viziune mai clară',
    tags: ['Macro', 'CSD', 'Setup'],
    excerpt: 'Înainte nu știam cum să caut un trade câștigător. Acum am o viziune mult mai clară și încep să gândesc procesul corect.',
    fullReview: 'Până să îl găsesc pe Tyrone pe YouTube, nu știam cum să caut un trade câștigător, nu știam la ce să fiu atent înainte de a lua un trade, nu știam ce înseamnă un CSD valid, o manipulare adevărată și cum se corelează macro cu setup-ul meu.\n\nDe când am început să învăț din materialele lui Tyrone, acum am o viziune mult mai clară și știu la ce să fiu atent când intru pe charturi. Nimeni nu îți explică cum să folosești corect MACRO și care macro este cel mai important. În schimb, Tyrone m-a făcut să înțeleg extrem de multe lucruri.\n\nAm achiziționat cursul de peste o săptămână, împreună cu planul Elite, și pot să zic că am început să fac progrese în ceea ce privește menegerierea unui trade și să nu mă las copleșit de emoții. Astăzi am luat exact același trade pe care l-a luat și Tyrone fără să vorbim între noi — pur și simplu am început să gândesc ca Tyrone, puțin câte puțin.\n\nEu recomand pentru cei începători să studieze structura pieței explicată de Tyrone și să cumpere cursul, pentru că sunt materiale pe care nu le găsiți atât de bine predate pe internet precum o face Tyrone.',
  },
];

const ReviewCard = ({ review, featured = false, onOpen }) => {
  const c = review.color;
  return (
    <div
      className={`er-card er-${c} ${featured ? 'er-featured' : ''}`}
      onClick={onOpen}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(); } }}
    >
      <div className="er-card-inner">
        <div className="er-head">
          <div className="er-id">
            <div className="er-name">{review.name}</div>
            <div className="er-badge" style={{ color: `var(--${c})` }}>{review.badge}</div>
          </div>
          {featured && (
            <div className="er-featured-pill"><Icon name="diamond" size={11}/>FEATURED</div>
          )}
        </div>

        <div className="er-highlight" style={{ color: `var(--${c})` }}>
          {review.highlight}
        </div>

        <p className="er-excerpt">{review.excerpt}</p>

        <div className="er-tags">
          {review.tags.map((t) => (
            <span key={t} className="er-tag">{t}</span>
          ))}
        </div>

        <button className="er-read" type="button" onClick={(e) => { e.stopPropagation(); onOpen(); }}>
          Citește review-ul complet <Icon name="arrow" size={13}/>
        </button>
      </div>
    </div>
  );
};

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

  const c = review.color;
  return (
    <div className="er-overlay" onClick={onClose}>
      <div className={`er-modal er-${c}`} onClick={(e) => e.stopPropagation()}>
        <button className="er-close" onClick={onClose} aria-label="Închide"><Icon name="x" size={18}/></button>
        <div className="er-modal-head">
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="er-modal-name">{review.name}</div>
            <div className="er-badge er-badge-lg" style={{ color: `var(--${c})` }}>{review.badge}</div>
          </div>
        </div>
        <div className="er-modal-highlight" style={{ color: `var(--${c})` }}>{review.highlight}</div>
        <div className="er-tags" style={{ marginTop: 14 }}>
          {review.tags.map((t) => <span key={t} className="er-tag">{t}</span>)}
        </div>
        <div className="er-modal-body">
          {review.fullReview.split('\n\n').map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>
      </div>
    </div>
  );
};

const EliteReviews = ({ onApply }) => {
  const [open, setOpen] = React.useState(null);
  const [featured, ...rest] = ELITE_REVIEWS;

  return (
    <section className="er-section">
      <div className="er-bg-blob er-blob-1"/>
      <div className="er-bg-blob er-blob-2"/>
      <div className="er-divider"/>
      <div className="container">
        <SectionHeader
          align="center"
          eyebrow="ELITE MEMBER REVIEWS"
          title={<>Ce spun membrii <span className="acid">Elite.</span></>}
          subtitle="Review-uri reale de la traderi care au trecut prin proces, call-uri live, feedback personalizat și rezultate concrete."
        />

        <Reveal>
          <ReviewCard review={featured} featured onOpen={() => setOpen(featured)}/>
        </Reveal>

        <div className="er-grid">
          {rest.map((r, i) => (
            <Reveal key={r.name} delay={i * 60}>
              <ReviewCard review={r} onOpen={() => setOpen(r)}/>
            </Reveal>
          ))}
        </div>
      </div>

      {open && <ReviewModal review={open} onClose={() => setOpen(null)}/>}

      <style>{`
        .er-section {
          position: relative;
          overflow: hidden;
          padding-top: 30px;
          padding-bottom: 30px;
        }
        .er-divider {
          position: absolute;
          top: 0; left: 10%; right: 10%;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
          opacity: 0.6;
        }
        .er-bg-blob {
          position: absolute;
          width: 520px; height: 520px;
          border-radius: 50%;
          filter: blur(120px);
          opacity: 0.18;
          pointer-events: none;
          z-index: 0;
        }
        .er-blob-1 {
          top: 10%; left: -160px;
          background: radial-gradient(circle, var(--gold), transparent 60%);
        }
        .er-blob-2 {
          bottom: 10%; right: -180px;
          background: radial-gradient(circle, var(--acid), transparent 60%);
        }

        /* Card — glassmorphism review pill, same language as the homepage glow chips */
        .er-card {
          position: relative;
          border-radius: 24px;
          padding: 26px 28px 22px;
          background:
            linear-gradient(180deg, var(--er-tint, rgba(255,255,255,0.04)), rgba(12, 12, 14, 0.55)),
            rgba(12, 12, 14, 0.6);
          border: 1.5px solid rgba(255, 255, 255, 0.10);
          backdrop-filter: blur(14px) saturate(140%);
          -webkit-backdrop-filter: blur(14px) saturate(140%);
          box-shadow:
            0 14px 40px rgba(0,0,0,0.45),
            0 0 0 1px var(--er-glow, rgba(255,255,255,0.06)),
            0 0 60px var(--er-glow, rgba(255,255,255,0.06));
          cursor: pointer;
          transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                      border-color 0.28s,
                      box-shadow 0.28s;
          isolation: isolate;
          overflow: hidden;
        }
        .er-card::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background: radial-gradient(circle at 30% 0%, var(--er-glow, transparent), transparent 60%);
          opacity: 0.55;
          pointer-events: none;
          z-index: 0;
        }
        .er-card-inner { position: relative; z-index: 1; }
        .er-card:hover {
          transform: translateY(-5px);
          border-color: rgba(255,255,255,0.22);
          box-shadow:
            0 22px 60px rgba(0,0,0,0.55),
            0 0 0 1px var(--er-glow-strong, rgba(255,255,255,0.16)),
            0 0 90px var(--er-glow-strong, rgba(255,255,255,0.16));
        }
        .er-card:focus-visible {
          outline: none;
          border-color: rgba(255,255,255,0.32);
        }

        /* Per-color tokens */
        .er-acid   { --er-tint: rgba(183, 255, 26, 0.10); --er-glow: rgba(183, 255, 26, 0.20); --er-glow-strong: rgba(183, 255, 26, 0.40); }
        .er-cyan   { --er-tint: rgba(79, 231, 213, 0.10); --er-glow: rgba(79, 231, 213, 0.20); --er-glow-strong: rgba(79, 231, 213, 0.40); }
        .er-blue   { --er-tint: rgba(90, 200, 255, 0.10); --er-glow: rgba(90, 200, 255, 0.20); --er-glow-strong: rgba(90, 200, 255, 0.40); }
        .er-gold   { --er-tint: rgba(255, 203, 82, 0.12); --er-glow: rgba(255, 203, 82, 0.22); --er-glow-strong: rgba(255, 203, 82, 0.44); }
        .er-indigo { --er-tint: rgba(99, 102, 241, 0.14); --er-glow: rgba(99, 102, 241, 0.24); --er-glow-strong: rgba(99, 102, 241, 0.46); }
        .er-rose   { --er-tint: rgba(244, 63, 94, 0.08);  --er-glow: rgba(244, 63, 94, 0.16);  --er-glow-strong: rgba(244, 63, 94, 0.32); }
        .er-violet { --er-tint: rgba(139, 92, 246, 0.12); --er-glow: rgba(139, 92, 246, 0.22); --er-glow-strong: rgba(139, 92, 246, 0.42); }
        .er-amber  { --er-tint: rgba(245, 158, 11, 0.12); --er-glow: rgba(245, 158, 11, 0.22); --er-glow-strong: rgba(245, 158, 11, 0.44); }

        .er-featured {
          padding: 38px 44px 34px;
          margin-bottom: 28px;
          border-radius: 28px;
        }
        .er-featured .er-highlight { font-size: 32px; }
        .er-featured .er-excerpt { font-size: 17px; max-width: 760px; }

        .er-head {
          display: flex;
          align-items: center;
          gap: 14px;
        }
        .er-id { flex: 1; min-width: 0; }
        .er-name {
          font-weight: 600;
          font-size: 15px;
          color: var(--text);
          letter-spacing: 0.01em;
        }
        .er-badge {
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          font-weight: 600;
          margin-top: 3px;
        }
        .er-badge-lg { font-size: 12px; margin-top: 5px; }

        .er-featured-pill {
          font-size: 9.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          padding: 5px 9px;
          border-radius: 999px;
          background: rgba(255, 203, 82, 0.10);
          color: var(--gold);
          border: 1px solid rgba(255, 203, 82, 0.30);
          display: inline-flex; align-items: center; gap: 5px;
          font-weight: 600;
        }

        .er-highlight {
          margin-top: 22px;
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -0.01em;
          line-height: 1.2;
        }

        .er-excerpt {
          margin-top: 14px;
          font-size: 14.5px;
          line-height: 1.6;
          color: rgba(255,255,255,0.78);
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .er-featured .er-excerpt { -webkit-line-clamp: 3; }

        .er-tags {
          margin-top: 18px;
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .er-tag {
          font-size: 10.5px;
          padding: 4px 9px;
          border-radius: 999px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.10);
          color: rgba(255,255,255,0.75);
          letter-spacing: 0.04em;
        }

        .er-read {
          margin-top: 20px;
          background: transparent;
          border: none;
          padding: 0;
          color: rgba(255,255,255,0.92);
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.02em;
          display: inline-flex;
          align-items: center;
          gap: 7px;
          cursor: pointer;
          transition: gap 0.2s, color 0.2s;
        }
        .er-card:hover .er-read { gap: 11px; color: #fff; }

        /* Grid */
        .er-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-top: 4px;
        }
        @media (max-width: 1024px) { .er-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 680px) {
          .er-grid { grid-template-columns: 1fr; gap: 16px; }
          .er-featured { padding: 28px 24px 24px; }
          .er-featured .er-highlight { font-size: 24px; }
          .er-featured .er-excerpt { font-size: 15px; }
        }

        /* Modal */
        .er-overlay {
          position: fixed;
          inset: 0;
          z-index: 200;
          background: rgba(0,0,0,0.72);
          backdrop-filter: blur(14px);
          display: grid;
          place-items: center;
          padding: 24px;
          animation: er-fade 0.22s ease;
        }
        @keyframes er-fade { from { opacity: 0; } to { opacity: 1; } }
        .er-modal {
          position: relative;
          width: 100%;
          max-width: 680px;
          max-height: calc(100vh - 48px);
          overflow-y: auto;
          padding: 36px 38px 32px;
          border-radius: 24px;
          background:
            linear-gradient(180deg, var(--er-tint, rgba(255,255,255,0.04)), rgba(12, 12, 14, 0.85)),
            rgba(12, 12, 14, 0.92);
          border: 1.5px solid rgba(255, 255, 255, 0.14);
          box-shadow:
            0 40px 100px rgba(0,0,0,0.7),
            0 0 0 1px var(--er-glow-strong, rgba(255,255,255,0.18)),
            0 0 90px var(--er-glow-strong, rgba(255,255,255,0.20));
          animation: er-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes er-rise { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
        .er-close {
          position: absolute;
          top: 14px; right: 14px;
          width: 36px; height: 36px;
          border-radius: 50%;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(255,255,255,0.12);
          color: var(--text);
          cursor: pointer;
          display: grid;
          place-items: center;
          z-index: 2;
        }
        .er-close:hover { background: rgba(0,0,0,0.8); border-color: rgba(255,255,255,0.28); }

        .er-modal-head {
          display: flex;
          align-items: center;
          gap: 16px;
          padding-right: 40px;
        }
        .er-modal-name {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -0.01em;
        }
        .er-modal-highlight {
          margin-top: 18px;
          font-size: 18px;
          font-weight: 700;
          letter-spacing: -0.005em;
        }
        .er-modal-body {
          margin-top: 22px;
          padding-top: 22px;
          border-top: 1px solid rgba(255,255,255,0.10);
        }
        .er-modal-body p {
          font-size: 15px;
          line-height: 1.7;
          color: rgba(255,255,255,0.86);
          margin: 0 0 14px;
        }
        .er-modal-body p:last-child { margin-bottom: 0; }

        @media (max-width: 680px) {
          .er-overlay { padding: 0; }
          .er-modal {
            max-width: 100%;
            max-height: 100vh;
            min-height: 100vh;
            border-radius: 0;
            padding: 24px 22px 28px;
          }
          .er-modal-head { padding-right: 50px; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// ELITE WEEK — schedule with scroll-in + 5s pulse on Luni/Vineri
// ============================================================

const WEEK_ROWS = [
  { day: 'LUNI',      time: '19:00 – 21:00 RO', title: 'Live Call — Backtest & Plan',
    desc: 'Backtest pe strategia mea de 5m / 1m / 15 secunde + plan pentru săptămână + Q&A.',
    color: 'acid', active: true, pulse: true },
  { day: 'MARȚI–JOI', time: 'în direct',         title: 'Trade reviews · WhatsApp',
    desc: 'Trimiți trade-uri, primești feedback. Continuu, fără queue.',
    color: 'cyan' },
  { day: 'VINERI',    time: '19:00 – 21:00 RO', title: 'Live Call — Review trade-uri & Backtest 15m / 1m',
    desc: 'Analizez în detaliu toate trade-urile membrilor Elite + backtesting la strategia 15m / 1m + Q&A.',
    color: 'gold', active: true, pulse: true },
  { day: 'WEEKEND',   time: 'arhivă + studiu',   title: 'Recordings + Materiale Elite',
    desc: 'Acces la toate sesiunile arhivate + frameworks exclusive Elite.',
    color: 'blue' },
];

const EliteWeek = ({ user, onApply }) => {
  const rowsRef = React.useRef([]);

  // Loop the premium glow pulse every 5s on the active rows (Luni & Vineri)
  React.useEffect(() => {
    const pulseRows = rowsRef.current.filter((el, i) => el && WEEK_ROWS[i].pulse);
    if (pulseRows.length === 0) return;
    const fire = () => {
      pulseRows.forEach((el, i) => {
        setTimeout(() => {
          el.classList.add('sched-pulse');
          setTimeout(() => el.classList.remove('sched-pulse'), 1400);
        }, i * 120);
      });
    };
    fire();
    const id = setInterval(fire, 5000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="ew-section">
      <div className="container">
        <SectionHeader
          eyebrow="WEEKLY STRUCTURE"
          title="O săptămână tipică."
          subtitle="Ritm clar. Acces direct. Toate înregistrate pentru arhivă."
        />
        <EliteCountdown user={user} onApply={onApply}/>
        <div className="schedule">
          {WEEK_ROWS.map((s, i) => (
            <Reveal key={s.day} delay={i * 90}>
              <div
                ref={(el) => { rowsRef.current[i] = el; }}
                className="sched-row card ew-row"
              >
                <div className="sched-day">
                  <div className="sched-day-name" style={{ color: `var(--${s.color})` }}>{s.day}</div>
                  <div className="sched-day-time">{s.time}</div>
                </div>
                <div className="sched-mid">
                  <h4>{s.title}</h4>
                  <p style={{ marginTop: 6, fontSize: 13.5 }}>{s.desc}</p>
                </div>
                <div className="sched-icon">
                  {s.active
                    ? <span className="badge-live"><span className="dot"/>LIVE</span>
                    : <Icon name="file" size={18} style={{ color: 'var(--text-mute)' }}/>}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .ew-row { position: relative; will-change: transform; }
        .ew-row.sched-pulse::after {
          content: '';
          position: absolute;
          inset: -2px;
          border-radius: inherit;
          pointer-events: none;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.22),
            0 0 40px rgba(255, 255, 255, 0.10),
            0 0 90px rgba(183, 255, 26, 0.08);
          opacity: 0;
          animation: ew-snap-glow 1400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
          z-index: 3;
        }
        @keyframes ew-snap-glow {
          0%   { opacity: 0; }
          28%  { opacity: 1; }
          100% { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
          .ew-row.sched-pulse::after { display: none; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// ELITE PROOF TRAIL — interactive cursor-trail gallery
// (reviews + payout certificates from /assets/recenzii)
// ============================================================
const PROOF_IMAGES = [
  // Payouts (larger) — flag with `big: true`
  { src: 'assets/recenzii/payout-1.png', big: true },
  { src: 'assets/recenzii/payout-2.png', big: true },
  { src: 'assets/recenzii/payout-3.png', big: true },
  { src: 'assets/recenzii/payout-4.png', big: true },
  { src: 'assets/recenzii/image.png', big: true },
  { src: 'assets/recenzii/remix-553f42ff-f22f-4f2a-9ef9-cbd4acbbc3ce.png', big: true },
  // Reviews — chat screenshots, WhatsApp, etc.
  { src: 'assets/recenzii/IMG_0349.jpeg' },
  { src: 'assets/recenzii/IMG_0350.jpeg' },
  { src: 'assets/recenzii/IMG_0351.jpeg' },
  { src: 'assets/recenzii/IMG_0352.jpeg' },
  { src: 'assets/recenzii/IMG_0353.jpeg' },
  { src: 'assets/recenzii/IMG_0354.jpeg' },
  { src: 'assets/recenzii/IMG_0355.jpeg' },
  { src: 'assets/recenzii/IMG_0356.jpeg' },
  { src: 'assets/recenzii/IMG_0358.jpeg' },
  { src: 'assets/recenzii/IMG_0360.jpeg' },
  { src: 'assets/recenzii/IMG_2595.png' },
  { src: 'assets/recenzii/recen2.jpg' },
  { src: 'assets/recenzii/recen2-1.jpg' },
  { src: 'assets/recenzii/recen2-2.jpg' },
  { src: 'assets/recenzii/recen2-3.jpg' },
  { src: 'assets/recenzii/recen-3.jpg' },
  { src: 'assets/recenzii/recen-3-1.jpg' },
  { src: 'assets/recenzii/recen-3-2.jpg' },
  { src: 'assets/recenzii/recen-3-3.jpg' },
  { src: 'assets/recenzii/whatsapp-1.jpg' },
  { src: 'assets/recenzii/whatsapp-2.jpg' },
  { src: 'assets/recenzii/whatsapp-3.jpg' },
  { src: 'assets/recenzii/whatsapp-4.jpg' },
  { src: 'assets/recenzii/whatsapp-5.jpg' },
  { src: 'assets/recenzii/whatsapp-6.jpg' },
  { src: 'assets/recenzii/12CB9C58-84F9-4B3F-8CF9-C4E8F832A13A.jpg' },
  { src: 'assets/recenzii/F5607D19-A142-4AA3-BF43-6F6BB0F782BF.jpg' },
  { src: 'assets/recenzii/6c8bd716-2201-409e-9a82-2faf6ed83647.jpeg' },
  { src: 'assets/recenzii/963a2891-aae9-4559-a798-d9b7930bf937.jpg' },
  { src: 'assets/recenzii/ff.jpg' },
  { src: 'assets/recenzii/gg.jpg' },
  { src: 'assets/recenzii/image0.jpg' },
];

const EliteProofTrail = () => {
  const containerRef = React.useRef(null);
  const refs = React.useRef(PROOF_IMAGES.map(() => React.createRef()));
  const state = React.useRef({ globalIndex: 0, last: { x: 0, y: 0 }, z: 1 });
  const [lightbox, setLightbox] = React.useState(null);
  const MAX_VISIBLE = 5;
  const DISTANCE_DIVISOR = 22;

  const activate = (img, x, y) => {
    const rect = containerRef.current?.getBoundingClientRect();
    if (!rect) return;
    img.style.left = `${x - rect.left}px`;
    img.style.top  = `${y - rect.top}px`;
    if (state.current.z > 40) state.current.z = 1;
    img.style.zIndex = String(state.current.z++);
    img.dataset.status = 'active';
    state.current.last = { x, y };
  };
  const deactivate = (img) => { img.dataset.status = 'inactive'; };
  const distLast = (x, y) => Math.hypot(x - state.current.last.x, y - state.current.last.y);

  const onMove = (e) => {
    const x = e.clientX ?? e.touches?.[0]?.clientX;
    const y = e.clientY ?? e.touches?.[0]?.clientY;
    if (x == null || y == null) return;
    if (distLast(x, y) > window.innerWidth / DISTANCE_DIVISOR) {
      const i = state.current.globalIndex;
      const lead = refs.current[i % refs.current.length].current;
      const tailIdx = (i - MAX_VISIBLE + refs.current.length * 2) % refs.current.length;
      const tail = refs.current[tailIdx]?.current;
      if (lead) activate(lead, x, y);
      if (tail && tail !== lead) deactivate(tail);
      state.current.globalIndex++;
    }
  };

  // ESC to close lightbox
  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [lightbox]);

  return (
    <section className="elite-trail-section">
      <div className="container">
        <div className="elite-trail-head">
          <span className="eyebrow"><span className="dot" />PROOF · LIVE</span>
          <h2>Plimbă cursorul. <span className="acid">Vezi rezultate reale.</span></h2>
          <p className="lead">Capturi din comunitate: payout-uri verificate și mesaje de la traderii Elite. <span className="acid-soft">Click pe orice card pentru a-l vedea mărit.</span></p>
        </div>

        <div
          ref={containerRef}
          className="elite-trail-stage"
          onMouseMove={onMove}
          onTouchMove={(e) => onMove(e.touches[0] || e)}>
          {PROOF_IMAGES.map((it, i) => (
            <img
              key={i}
              ref={refs.current[i]}
              src={it.src}
              alt=""
              loading="lazy"
              draggable={false}
              data-status="inactive"
              className={`elite-trail-img ${it.big ? 'is-big' : ''}`}
              onClick={() => setLightbox(it)}
            />
          ))}
          <div className="elite-trail-hint">
            <Icon name="sparkles" size={18} />
            <span>Move your cursor · Click to zoom</span>
          </div>
          <div className="elite-trail-grain" />
        </div>
      </div>

      {/* Lightbox modal — fullscreen readable view */}
      {lightbox && (
        <div className="elite-trail-lightbox" onClick={() => setLightbox(null)}>
          <button className="elite-trail-close" aria-label="Close" onClick={() => setLightbox(null)}>
            <Icon name="x" size={20} />
          </button>
          <div className="elite-trail-lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <img src={lightbox.src} alt="" className="elite-trail-lightbox-img" />
          </div>
        </div>
      )}

      <style>{`
        .elite-trail-section {
          position: relative;
          padding: 80px 0 60px;
        }
        .elite-trail-head {
          text-align: center;
          max-width: 720px;
          margin: 0 auto 40px;
        }
        .elite-trail-head .eyebrow { justify-content: center; display: inline-flex; }
        .elite-trail-head h2 {
          margin-top: 18px;
          font-size: clamp(32px, 4.2vw, 52px);
          line-height: 1.05;
          letter-spacing: -0.03em;
        }
        .elite-trail-head .acid {
          background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 60%, #8FE000 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .elite-trail-head .lead { margin: 16px auto 0; max-width: 540px; }

        .elite-trail-head .acid-soft {
          color: var(--acid);
          font-weight: 500;
        }
        .elite-trail-stage {
          position: relative;
          height: 760px;
          width: 100%;
          overflow: hidden;
          border-radius: 28px;
          background:
            radial-gradient(ellipse at 30% 20%, rgba(183,255,26,0.10), transparent 55%),
            radial-gradient(ellipse at 70% 80%, rgba(79,231,213,0.07), transparent 55%),
            linear-gradient(180deg, #0c0c10 0%, #050507 100%);
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow:
            0 30px 90px rgba(0,0,0,0.55),
            inset 0 1px 0 rgba(255,255,255,0.06);
          cursor: crosshair;
        }
        .elite-trail-grain {
          position: absolute; inset: 0;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          opacity: 0.18;
          mix-blend-mode: overlay;
          pointer-events: none;
          z-index: 1;
        }
        .elite-trail-hint {
          position: absolute; inset: 0;
          display: flex; align-items: center; justify-content: center;
          gap: 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 13px; letter-spacing: 0.18em;
          color: rgba(255,255,255,0.45);
          text-transform: uppercase;
          pointer-events: none;
          z-index: 2;
          animation: trail-hint-pulse 2.4s ease-in-out infinite;
        }
        .elite-trail-hint svg { color: var(--acid); filter: drop-shadow(0 0 6px var(--acid-glow)); }
        @keyframes trail-hint-pulse {
          0%, 100% { opacity: 1; }
          50%      { opacity: 0.55; }
        }

        /* ===== Card-styled trail images ===== */
        .elite-trail-img {
          position: absolute;
          width: 300px;
          height: 380px;
          object-fit: cover;
          object-position: center top;
          transform: translate(-50%, -50%) scale(0);
          opacity: 0;
          border-radius: 22px;
          padding: 0;
          background: #0a0a0c;
          border: 1px solid rgba(255,255,255,0.14);
          box-shadow:
            0 22px 60px rgba(0,0,0,0.7),
            0 0 0 1px rgba(255,255,255,0.05) inset,
            0 1px 0 rgba(255,255,255,0.12) inset,
            0 0 30px rgba(183,255,26,0.08);
          transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
                      opacity 0.30s ease,
                      box-shadow 0.25s ease;
          pointer-events: none;
          user-select: none;
          z-index: 3;
        }
        .elite-trail-img.is-big {
          width: 420px;
          height: 520px;
          border-color: rgba(183, 255, 26, 0.32);
          box-shadow:
            0 32px 90px rgba(0,0,0,0.8),
            0 0 0 1px rgba(255,255,255,0.06) inset,
            0 1px 0 rgba(255,255,255,0.14) inset,
            0 0 60px rgba(183, 255, 26, 0.22);
        }
        .elite-trail-img[data-status='active'] {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
          pointer-events: auto;
          cursor: zoom-in;
          transition: transform 0.50s cubic-bezier(0.16, 1, 0.30, 1),
                      opacity 0.40s ease,
                      box-shadow 0.25s ease;
        }
        .elite-trail-img[data-status='active'].is-big {
          transform: translate(-50%, -50%) scale(1.02) rotate(-1.2deg);
        }
        .elite-trail-img[data-status='active']:hover {
          box-shadow:
            0 32px 100px rgba(0,0,0,0.85),
            0 0 0 1px rgba(255,255,255,0.18) inset,
            0 1px 0 rgba(255,255,255,0.18) inset,
            0 0 60px rgba(183, 255, 26, 0.30);
        }
        .elite-trail-img[data-status='active'].is-big:hover {
          transform: translate(-50%, -50%) scale(1.06) rotate(-1.2deg);
        }
        .elite-trail-img[data-status='active']:not(.is-big):hover {
          transform: translate(-50%, -50%) scale(1.04);
        }

        /* ===== Lightbox modal ===== */
        .elite-trail-lightbox {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: grid;
          place-items: center;
          background: rgba(0, 0, 0, 0.85);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          animation: trail-lb-fade 0.25s ease forwards;
          cursor: zoom-out;
        }
        @keyframes trail-lb-fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        .elite-trail-lightbox-inner {
          position: relative;
          max-width: 92vw;
          max-height: 88vh;
          padding: 0;
          border-radius: 22px;
          overflow: hidden;
          background: #050507;
          border: 1px solid rgba(255,255,255,0.12);
          box-shadow:
            0 50px 120px rgba(0,0,0,0.8),
            0 0 60px rgba(183,255,26,0.18),
            inset 0 1px 0 rgba(255,255,255,0.10);
          animation: trail-lb-pop 0.35s cubic-bezier(0.16, 1, 0.30, 1) forwards;
          cursor: default;
        }
        @keyframes trail-lb-pop {
          from { transform: scale(0.92); opacity: 0; }
          to   { transform: scale(1);    opacity: 1; }
        }
        .elite-trail-lightbox-img {
          display: block;
          max-width: 92vw;
          max-height: 88vh;
          width: auto;
          height: auto;
          object-fit: contain;
          background: #050507;
        }
        .elite-trail-close {
          position: fixed;
          top: 22px; right: 22px;
          width: 44px; height: 44px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(255,255,255,0.08);
          border: 1px solid rgba(255,255,255,0.18);
          color: #fff;
          cursor: pointer;
          z-index: 10000;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }
        .elite-trail-close:hover {
          background: rgba(255,255,255,0.16);
          border-color: rgba(255,255,255,0.32);
          transform: scale(1.05);
        }

        @media (max-width: 1200px) {
          .elite-trail-img { width: 240px; height: 300px; }
          .elite-trail-img.is-big { width: 340px; height: 420px; }
        }
        @media (max-width: 920px) {
          .elite-trail-stage { height: 580px; }
          .elite-trail-img { width: 200px; height: 250px; border-radius: 18px; }
          .elite-trail-img.is-big { width: 280px; height: 350px; }
        }
        @media (max-width: 540px) {
          .elite-trail-stage { height: 460px; }
          .elite-trail-img { width: 150px; height: 190px; border-radius: 14px; }
          .elite-trail-img.is-big { width: 210px; height: 270px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .elite-trail-img { transition: opacity 0.2s ease; }
          .elite-trail-img[data-status='active'] { transform: translate(-50%, -50%) scale(1); }
          .elite-trail-hint { animation: none; }
          .elite-trail-lightbox, .elite-trail-lightbox-inner { animation: none; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// ELITE ORBITAL — radial timeline of Elite benefits
// 9 nodes orbit a glowing center. Click a node → it scales,
// stops the rotation, shows a glass card with the description,
// and highlights related nodes with a pulse.
// ============================================================
const ORBIT_BENEFITS = [
  { id: 1, icon: 'video',    title: '2× live calls/săpt',     accent: 'acid',
    desc: 'Luni & Vineri, 19:00–21:00 RO. Backtest, market analysis, Q&A și psihologie. Înregistrate complet.',
    energy: 95, status: 'active',   related: [3, 5] },
  { id: 2, icon: 'whatsapp', title: 'WhatsApp 1-on-1',         accent: 'cyan',
    desc: 'Suport direct, răspunsuri rapide la trade-uri și întrebări de execuție în timp real.',
    energy: 88, status: 'active',   related: [3, 6] },
  { id: 3, icon: 'eye',      title: 'Trade reviews',           accent: 'blue',
    desc: 'Sesiuni săptămânale de review pe trade-urile tale, cu feedback structurat pe execuție și mindset.',
    energy: 80, status: 'active',   related: [1, 2, 6] },
  { id: 4, icon: 'chart',    title: 'Backtesting împreună',    accent: 'acid',
    desc: 'Sesiuni structurate de backtesting cu date reale și concluzii actionable — bricks pentru framework-ul tău.',
    energy: 82, status: 'active',   related: [5, 8] },
  { id: 5, icon: 'candle',   title: 'Market analysis',         accent: 'cyan',
    desc: 'Watchlist săptămânal, nivele cheie pre-NY, plan pentru sesiunea curentă. Nu predicții — decizii.',
    energy: 90, status: 'active',   related: [1, 4] },
  { id: 6, icon: 'brain',    title: 'Psihologie & rutină',     accent: 'gold',
    desc: 'Structură mentală, journal frameworks, recovery după drawdown. Capitalul mental e capital.',
    energy: 75, status: 'active',   related: [2, 3] },
  { id: 7, icon: 'shield',   title: 'Prop firm guidance',      accent: 'blue',
    desc: 'Strategie de scaling, când iei payout, cum gestionezi multiple conturi funded fără să le pierzi.',
    energy: 85, status: 'active',   related: [8, 9] },
  { id: 8, icon: 'target',   title: 'Risk setup personal',     accent: 'acid',
    desc: 'Calculatoare custom, plan de risc adaptat capitalului și obiectivelor tale — nu un template generic.',
    energy: 70, status: 'active',   related: [4, 7] },
  { id: 9, icon: 'lock',     title: 'Conținut exclusiv',       accent: 'gold',
    desc: 'Recordings arhivate, materiale interne, frameworks care nu sunt în Discord — doar pentru Elite.',
    energy: 78, status: 'active',   related: [1, 7] },
];

const EliteOrbital = () => {
  const containerRef = React.useRef(null);
  const [expandedId, setExpandedId] = React.useState(null);
  const [rotation, setRotation] = React.useState(0);
  const [autoRotate, setAutoRotate] = React.useState(true);
  const [pulse, setPulse] = React.useState({});

  // Auto-rotate
  React.useEffect(() => {
    if (!autoRotate) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    const id = setInterval(() => {
      setRotation(prev => (prev + 0.3) % 360);
    }, 50);
    return () => clearInterval(id);
  }, [autoRotate]);

  const toggleItem = (id) => {
    if (expandedId === id) {
      setExpandedId(null);
      setAutoRotate(true);
      setPulse({});
      return;
    }
    setExpandedId(id);
    setAutoRotate(false);
    const item = ORBIT_BENEFITS.find(b => b.id === id);
    const p = {};
    (item?.related || []).forEach(rid => { p[rid] = true; });
    setPulse(p);
    // Center the clicked node at top
    const idx = ORBIT_BENEFITS.findIndex(b => b.id === id);
    const targetAngle = (idx / ORBIT_BENEFITS.length) * 360;
    setRotation(270 - targetAngle);
  };

  const onBgClick = (e) => {
    if (e.target === containerRef.current) {
      setExpandedId(null);
      setAutoRotate(true);
      setPulse({});
    }
  };

  const total = ORBIT_BENEFITS.length;
  const RADIUS = 230;

  return (
    <div className="eorb-wrap" ref={containerRef} onClick={onBgClick}>
      {/* Atmospheric glow background */}
      <div className="eorb-bg-glow eorb-bg-glow-acid" />
      <div className="eorb-bg-glow eorb-bg-glow-cyan" />

      <div className="eorb-stage">
        {/* Center pulsing core */}
        <div className="eorb-core">
          <div className="eorb-core-ring eorb-core-ring-1" />
          <div className="eorb-core-ring eorb-core-ring-2" />
          <div className="eorb-core-ring eorb-core-ring-3" />
          <div className="eorb-core-orb">
            <span className="eorb-core-icon"><Icon name="crown" size={26} stroke={2.3}/></span>
            <div className="eorb-core-shine" />
          </div>
          <div className="eorb-core-label">ELITE</div>
        </div>

        {/* Orbit guide */}
        <div className="eorb-orbit-guide" />

        {/* Nodes */}
        {ORBIT_BENEFITS.map((item, index) => {
          const angle = ((index / total) * 360 + rotation) % 360;
          const radian = (angle * Math.PI) / 180;
          const x = RADIUS * Math.cos(radian);
          const y = RADIUS * Math.sin(radian);
          const z = Math.round(100 + 50 * Math.cos(radian));
          const op = Math.max(0.45, Math.min(1, 0.45 + 0.55 * ((1 + Math.sin(radian)) / 2)));

          const isExpanded = expandedId === item.id;
          const isRelated = pulse[item.id];

          return (
            <div
              key={item.id}
              className={`eorb-node eorb-node-${item.accent}
                ${isExpanded ? 'is-expanded' : ''}
                ${isRelated ? 'is-related' : ''}`}
              style={{
                transform: `translate(${x}px, ${y}px)`,
                zIndex: isExpanded ? 200 : z,
                opacity: isExpanded ? 1 : op,
              }}
              onClick={(e) => { e.stopPropagation(); toggleItem(item.id); }}>
              <div className="eorb-node-halo" />
              <div className="eorb-node-dot">
                <Icon name={item.icon} size={18} />
              </div>
              <div className="eorb-node-label">{item.title}</div>

              {isExpanded && (
                <div className="eorb-card" onClick={(e) => e.stopPropagation()}>
                  <div className="eorb-card-thread" />
                  <div className="eorb-card-head">
                    <span className={`eorb-card-tag eorb-card-tag-${item.accent}`}>{item.status === 'active' ? 'ACTIVE' : 'SOON'}</span>
                    <span className="eorb-card-id">#{String(item.id).padStart(2, '0')}</span>
                  </div>
                  <h4>{item.title}</h4>
                  <p>{item.desc}</p>
                  <div className="eorb-card-energy">
                    <div className="eorb-card-energy-row">
                      <span><Icon name="bolt" size={10}/> Intensity</span>
                      <span className="eorb-card-energy-val">{item.energy}%</span>
                    </div>
                    <div className="eorb-card-energy-bar">
                      <div className="eorb-card-energy-fill" style={{ width: `${item.energy}%` }} />
                    </div>
                  </div>
                  {item.related?.length > 0 && (
                    <div className="eorb-card-related">
                      <div className="eorb-card-related-head"><Icon name="chart" size={10}/> Connected</div>
                      <div className="eorb-card-related-list">
                        {item.related.map((rid) => {
                          const r = ORBIT_BENEFITS.find(b => b.id === rid);
                          if (!r) return null;
                          return (
                            <button key={rid} className="eorb-card-related-btn"
                              onClick={(e) => { e.stopPropagation(); toggleItem(rid); }}>
                              {r.title} <Icon name="arrowUR" size={9}/>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <style>{`
        .eorb-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          max-width: 660px;
          margin-left: auto;
          cursor: default;
        }
        @media (max-width: 980px) {
          .eorb-wrap { max-width: 560px; margin: 30px auto 0; }
        }
        .eorb-bg-glow {
          position: absolute;
          width: 70%; aspect-ratio: 1;
          border-radius: 50%;
          filter: blur(60px);
          pointer-events: none;
          animation: eorb-glow-pulse 6s ease-in-out infinite;
        }
        .eorb-bg-glow-acid {
          top: 10%; left: 10%;
          background: radial-gradient(circle, rgba(183,255,26,0.18), transparent 70%);
        }
        .eorb-bg-glow-cyan {
          bottom: 10%; right: 10%;
          background: radial-gradient(circle, rgba(79,231,213,0.15), transparent 70%);
          animation-delay: 2s;
        }
        @keyframes eorb-glow-pulse {
          0%, 100% { opacity: 0.7; transform: scale(1); }
          50%      { opacity: 1;   transform: scale(1.06); }
        }

        .eorb-stage {
          position: absolute;
          inset: 0;
          display: grid; place-items: center;
          perspective: 1000px;
        }

        /* Center core — premium glass */
        .eorb-core {
          position: absolute;
          width: 90px; height: 90px;
          display: grid; place-items: center;
          z-index: 30;
        }
        .eorb-core-ring {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(183,255,26,0.22);
        }
        .eorb-core-ring-1 { width: 104px; height: 104px; animation: eorb-ring-ping 2.4s ease-out infinite; }
        .eorb-core-ring-2 { width: 124px; height: 124px; animation: eorb-ring-ping 2.4s ease-out infinite 0.6s; opacity: 0.45; }
        .eorb-core-ring-3 { width: 148px; height: 148px; animation: eorb-ring-ping 2.4s ease-out infinite 1.2s; opacity: 0.22; }
        @keyframes eorb-ring-ping {
          0%   { transform: scale(0.85); opacity: 0.7; }
          100% { transform: scale(1.4);  opacity: 0;   }
        }
        .eorb-core-orb {
          position: relative;
          width: 84px; height: 84px;
          border-radius: 50%;
          background:
            radial-gradient(circle at 30% 22%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 30%, transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.35) 100%),
            rgba(15, 18, 22, 0.55);
          color: var(--acid);
          display: grid; place-items: center;
          backdrop-filter: blur(18px) saturate(160%);
          -webkit-backdrop-filter: blur(18px) saturate(160%);
          border: 1px solid rgba(255, 255, 255, 0.18);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            inset 0 -1px 0 rgba(0, 0, 0, 0.30),
            0 8px 28px rgba(0, 0, 0, 0.55),
            0 0 18px rgba(183, 255, 26, 0.18);
          animation: eorb-core-breathe 5s ease-in-out infinite;
        }
        @keyframes eorb-core-breathe {
          0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(183, 255, 26, 0.18); }
          50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 10px 32px rgba(0, 0, 0, 0.60), 0 0 26px rgba(183, 255, 26, 0.28); }
        }
        .eorb-core-icon {
          position: relative; z-index: 1;
          display: grid; place-items: center;
          filter: drop-shadow(0 0 12px rgba(183, 255, 26, 0.55));
        }
        .eorb-core-shine {
          position: absolute; inset: 0;
          border-radius: 50%;
          background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.40), transparent 50%);
          pointer-events: none;
        }
        .eorb-core-label {
          position: absolute;
          top: calc(50% + 66px);
          left: 50%;
          transform: translateX(-50%);
          font-family: 'JetBrains Mono', monospace;
          font-size: 12px;
          letter-spacing: 0.32em;
          text-transform: uppercase;
          color: var(--acid);
          text-shadow: 0 0 12px rgba(183, 255, 26, 0.55), 0 2px 6px rgba(0, 0, 0, 0.8);
          pointer-events: none;
          z-index: 30;
        }

        /* Orbit guide ring */
        .eorb-orbit-guide {
          position: absolute;
          width: 460px; height: 460px;
          border-radius: 50%;
          border: 1px dashed rgba(255, 255, 255, 0.06);
        }

        /* Nodes */
        .eorb-node {
          position: absolute;
          width: 44px; height: 44px;
          transition: opacity 0.7s ease, transform 0.7s ease, z-index 0s;
          cursor: pointer;
        }
        .eorb-node-halo {
          position: absolute;
          inset: -10px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(183,255,26,0.18), transparent 70%);
          opacity: 0;
          transition: opacity 0.4s ease;
        }
        .eorb-node-cyan .eorb-node-halo { background: radial-gradient(circle, rgba(79,231,213,0.18), transparent 70%); }
        .eorb-node-blue .eorb-node-halo { background: radial-gradient(circle, rgba(90,200,255,0.18), transparent 70%); }
        .eorb-node-gold .eorb-node-halo { background: radial-gradient(circle, rgba(255,203,82,0.18), transparent 70%); }
        .eorb-node:hover .eorb-node-halo,
        .eorb-node.is-related .eorb-node-halo,
        .eorb-node.is-expanded .eorb-node-halo { opacity: 1; }
        .eorb-node.is-related .eorb-node-halo { animation: eorb-halo-pulse 1.4s ease-in-out infinite; }
        @keyframes eorb-halo-pulse {
          0%, 100% { opacity: 0.4; transform: scale(1); }
          50%      { opacity: 1;   transform: scale(1.15); }
        }

        .eorb-node-dot {
          width: 44px; height: 44px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(10, 10, 12, 0.85);
          border: 1.5px solid rgba(255, 255, 255, 0.18);
          color: rgba(255,255,255,0.85);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
        }
        .eorb-node:hover .eorb-node-dot {
          border-color: rgba(183, 255, 26, 0.55);
          transform: scale(1.1);
        }
        .eorb-node-acid:hover .eorb-node-dot { border-color: rgba(183, 255, 26, 0.6); box-shadow: 0 0 18px rgba(183, 255, 26, 0.35); }
        .eorb-node-cyan:hover .eorb-node-dot { border-color: rgba(79, 231, 213, 0.6); box-shadow: 0 0 18px rgba(79, 231, 213, 0.35); }
        .eorb-node-blue:hover .eorb-node-dot { border-color: rgba(90, 200, 255, 0.6); box-shadow: 0 0 18px rgba(90, 200, 255, 0.35); }
        .eorb-node-gold:hover .eorb-node-dot { border-color: rgba(255, 203, 82, 0.6); box-shadow: 0 0 18px rgba(255, 203, 82, 0.35); }

        .eorb-node.is-expanded .eorb-node-dot {
          transform: scale(1.45);
          background: linear-gradient(180deg, #C8FF35 0%, #6FB300 100%);
          color: #050505;
          border-color: rgba(255, 255, 255, 0.45);
          box-shadow: 0 0 24px rgba(183, 255, 26, 0.55), 0 0 50px rgba(183, 255, 26, 0.30);
        }
        .eorb-node-cyan.is-expanded .eorb-node-dot { background: linear-gradient(180deg, #66EFDE 0%, #2BC9B5 100%); color: #04261F; box-shadow: 0 0 24px rgba(79, 231, 213, 0.55), 0 0 50px rgba(79, 231, 213, 0.30); }
        .eorb-node-blue.is-expanded .eorb-node-dot { background: linear-gradient(180deg, #8BCAFF 0%, #2D81F0 100%); color: #04183A; box-shadow: 0 0 24px rgba(90, 200, 255, 0.55), 0 0 50px rgba(90, 200, 255, 0.30); }
        .eorb-node-gold.is-expanded .eorb-node-dot { background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%); color: #1a0d00; box-shadow: 0 0 24px rgba(255, 203, 82, 0.55), 0 0 50px rgba(255, 203, 82, 0.30); }

        .eorb-node.is-related .eorb-node-dot {
          background: rgba(255, 255, 255, 0.10);
          border-color: rgba(183, 255, 26, 0.55);
          color: #fff;
        }

        .eorb-node-label {
          position: absolute;
          top: 52px; left: 50%;
          transform: translateX(-50%);
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          letter-spacing: 0.08em;
          color: rgba(255, 255, 255, 0.6);
          white-space: nowrap;
          text-transform: uppercase;
          transition: color 0.3s ease, font-size 0.3s ease;
          pointer-events: none;
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
        }
        .eorb-node.is-expanded .eorb-node-label {
          color: #fff;
          font-size: 11px;
        }

        /* Expanded card */
        .eorb-card {
          position: absolute;
          top: 84px;
          left: 50%;
          transform: translateX(-50%);
          width: 280px;
          padding: 18px 20px;
          background: rgba(0, 0, 0, 0.85);
          backdrop-filter: blur(20px) saturate(140%);
          -webkit-backdrop-filter: blur(20px) saturate(140%);
          border: 1px solid rgba(255, 255, 255, 0.14);
          border-radius: 14px;
          box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
          color: rgba(255, 255, 255, 0.9);
          cursor: default;
          animation: eorb-card-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes eorb-card-rise {
          from { opacity: 0; transform: translateX(-50%) translateY(8px); }
          to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        .eorb-card-thread {
          position: absolute;
          top: -10px; left: 50%;
          width: 1px; height: 10px;
          transform: translateX(-50%);
          background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.50) 100%);
        }
        .eorb-card-head {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 8px;
        }
        .eorb-card-tag {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
          padding: 3px 8px;
          border-radius: 999px;
          background: rgba(183, 255, 26, 0.08);
          border: 1px solid rgba(183, 255, 26, 0.32);
          color: var(--acid);
        }
        .eorb-card-tag-cyan { background: rgba(79, 231, 213, 0.08); border-color: rgba(79, 231, 213, 0.32); color: var(--cyan); }
        .eorb-card-tag-blue { background: rgba(90, 200, 255, 0.08); border-color: rgba(90, 200, 255, 0.32); color: var(--blue); }
        .eorb-card-tag-gold { background: rgba(255, 203, 82, 0.08); border-color: rgba(255, 203, 82, 0.32); color: var(--gold); }
        .eorb-card-id {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.45);
        }
        .eorb-card h4 {
          margin: 0;
          font-size: 14.5px;
          letter-spacing: -0.01em;
          color: #fff;
        }
        .eorb-card p {
          margin-top: 8px;
          font-size: 12.5px;
          line-height: 1.55;
          color: rgba(255, 255, 255, 0.65);
        }

        .eorb-card-energy { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
        .eorb-card-energy-row {
          display: flex; justify-content: space-between; align-items: center;
          font-size: 10.5px; color: rgba(255, 255, 255, 0.6);
        }
        .eorb-card-energy-row span:first-child { display: inline-flex; align-items: center; gap: 4px; }
        .eorb-card-energy-val { font-family: 'JetBrains Mono', monospace; color: var(--acid); }
        .eorb-card-energy-bar {
          margin-top: 6px;
          width: 100%; height: 3px;
          background: rgba(255, 255, 255, 0.06);
          border-radius: 999px;
          overflow: hidden;
        }
        .eorb-card-energy-fill {
          height: 100%;
          background: linear-gradient(90deg, var(--acid), var(--cyan));
          border-radius: 999px;
        }

        .eorb-card-related { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
        .eorb-card-related-head {
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 0.14em;
          color: rgba(255, 255, 255, 0.5);
          display: inline-flex; align-items: center; gap: 4px;
          margin-bottom: 6px;
        }
        .eorb-card-related-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .eorb-card-related-btn {
          display: inline-flex; align-items: center; gap: 4px;
          padding: 4px 8px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.10);
          color: rgba(255, 255, 255, 0.75);
          font: inherit;
          font-size: 11px;
          border-radius: 999px;
          cursor: pointer;
          transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .eorb-card-related-btn:hover {
          background: rgba(183, 255, 26, 0.10);
          border-color: rgba(183, 255, 26, 0.35);
          color: #fff;
        }

        @media (prefers-reduced-motion: reduce) {
          .eorb-core-ring, .eorb-core-orb, .eorb-bg-glow, .eorb-node.is-related .eorb-node-halo { animation: none; }
        }
      `}</style>
    </div>
  );
};

// ============================================================
// ELITE CARD FAN — proof images fanned out 3D, click to zoom.
// Replaces the previous cursor-trail with a more controlled,
// premium gallery. Active card is centered & enlarged; the rest
// fan out with subtle rotation and depth.
// ============================================================
const EliteCardFan = () => {
  const items = PROOF_IMAGES.slice(0, 12);
  const len = items.length;
  const [active, setActive] = React.useState(Math.floor(len / 2));
  const [lightbox, setLightbox] = React.useState(null);

  // Geometry — fan with 7 visible cards max
  const MAX_VISIBLE = 3;          // ±3 from active = 7 visible total
  const CARD_W = 380;             // card width
  const CARD_H = 480;             // card height
  const SPACING = 140;            // horizontal step between cards
  const STEP_DEG = 7;             // rotation per step
  const STEP_Y = 20;              // y arc per step
  const DEPTH = 80;               // translateZ step

  const onClickCard = (i) => {
    if (i === active) {
      // Click on active = zoom in
      setLightbox(items[i]);
    } else {
      setActive(i);
    }
  };
  const prev = () => setActive((a) => (a - 1 + len) % len);
  const next = () => setActive((a) => (a + 1) % len);

  // ESC + arrow keys
  React.useEffect(() => {
    const onKey = (e) => {
      if (lightbox) {
        if (e.key === 'Escape') setLightbox(null);
        return;
      }
      if (e.key === 'ArrowLeft')  prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    if (lightbox) document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [lightbox, len]);

  return (
    <section className="ecf-section">
      <div className="container">
        <div className="ecf-head">
          <span className="eyebrow"><span className="dot" />PROOF · GALLERY</span>
          <h2>Capturi din comunitate. <span className="acid">Real, nu marketing.</span></h2>
          <p className="lead">Click pe orice card pentru a-l vedea mărit. Folosește săgețile sau dot-urile pentru a naviga.</p>
        </div>

        <div className="ecf-stage" style={{ height: CARD_H + 90 }}>
          {/* Ambient glows */}
          <div className="ecf-glow ecf-glow-acid" />
          <div className="ecf-glow ecf-glow-cyan" />

          {/* Side nav buttons */}
          <button className="ecf-nav ecf-nav-prev" onClick={prev} aria-label="Previous">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button className="ecf-nav ecf-nav-next" onClick={next} aria-label="Next">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>

          {/* Cards */}
          <div className="ecf-cards" style={{ perspective: '1200px' }}>
            {items.map((item, i) => {
              const rawOff = i - active;
              // shortest signed offset (loop)
              const alt = rawOff > 0 ? rawOff - len : rawOff + len;
              const off = Math.abs(alt) < Math.abs(rawOff) ? alt : rawOff;
              const abs = Math.abs(off);
              if (abs > MAX_VISIBLE) return null;

              const isActive = off === 0;
              const x = off * SPACING;
              const y = abs * STEP_Y - (isActive ? 18 : 0);
              const z = -abs * DEPTH;
              const rotZ = off * STEP_DEG;
              const rotX = isActive ? 0 : 6;
              const scale = isActive ? 1.04 : 0.92;
              const op = abs > MAX_VISIBLE - 1 ? 0.6 : 1;

              return (
                <div key={i}
                  className={`ecf-card ${isActive ? 'is-active' : ''} ${item.big ? 'is-big' : ''}`}
                  style={{
                    transform: `translate3d(${x}px, ${y}px, ${z}px) rotateZ(${rotZ}deg) rotateX(${rotX}deg) scale(${scale})`,
                    zIndex: 100 - abs,
                    opacity: op,
                    width: CARD_W, height: CARD_H,
                  }}
                  onClick={() => onClickCard(i)}>
                  <img src={item.src} alt="" loading="lazy" draggable={false}/>
                  <div className="ecf-card-shade" />
                  <div className="ecf-card-border" />
                  {isActive && (
                    <div className="ecf-card-hint">
                      <span>Click pentru zoom</span>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Dots */}
        <div className="ecf-dots">
          {items.map((it, i) => (
            <button key={i}
              className={`ecf-dot ${i === active ? 'is-on' : ''}`}
              onClick={() => setActive(i)}
              aria-label={`Card ${i + 1}`}/>
          ))}
        </div>
      </div>

      {/* Lightbox modal */}
      {lightbox && (
        <div className="ecf-lightbox" onClick={() => setLightbox(null)}>
          <button className="ecf-lightbox-close" onClick={() => setLightbox(null)} aria-label="Close">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
          <div className="ecf-lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <img src={lightbox.src} alt="" />
          </div>
        </div>
      )}

      <style>{`
        .ecf-section {
          position: relative;
          padding: 80px 0 60px;
        }
        .ecf-head {
          text-align: center;
          max-width: 720px;
          margin: 0 auto 40px;
        }
        .ecf-head .eyebrow { display: inline-flex; justify-content: center; }
        .ecf-head h2 {
          margin-top: 18px;
          font-size: clamp(32px, 4.2vw, 52px);
          line-height: 1.05;
          letter-spacing: -0.03em;
        }
        .ecf-head .acid {
          background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 60%, #8FE000 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .ecf-head .lead { margin: 16px auto 0; max-width: 560px; }

        .ecf-stage {
          position: relative;
          width: 100%;
          overflow: hidden;
          isolation: isolate;
        }
        .ecf-glow {
          position: absolute;
          width: 50%; aspect-ratio: 1;
          border-radius: 50%;
          filter: blur(80px);
          pointer-events: none;
          animation: ecf-glow-pulse 8s ease-in-out infinite;
        }
        .ecf-glow-acid {
          top: 0; left: 18%;
          background: radial-gradient(circle, rgba(183,255,26,0.16), transparent 70%);
        }
        .ecf-glow-cyan {
          bottom: 0; right: 18%;
          background: radial-gradient(circle, rgba(79,231,213,0.12), transparent 70%);
          animation-delay: 2s;
        }
        @keyframes ecf-glow-pulse {
          0%, 100% { opacity: 0.7; transform: scale(1); }
          50%      { opacity: 1;   transform: scale(1.06); }
        }

        /* Cards container — centered, 3D perspective */
        .ecf-cards {
          position: absolute;
          inset: 0;
          display: grid; place-items: center;
          transform-style: preserve-3d;
        }
        .ecf-card {
          position: absolute;
          top: 30px;
          border-radius: 20px;
          overflow: hidden;
          background: #050507;
          border: 1.5px solid rgba(255, 255, 255, 0.10);
          box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
          cursor: pointer;
          transition:
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.4s ease,
            border-color 0.3s ease,
            opacity 0.4s ease;
          will-change: transform;
        }
        .ecf-card img {
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: center top;
          display: block;
          user-select: none;
        }
        .ecf-card-shade {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
          pointer-events: none;
        }
        .ecf-card-border {
          position: absolute; inset: 0;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 60%);
          -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          pointer-events: none;
        }
        .ecf-card.is-active {
          border-color: rgba(183, 255, 26, 0.35);
          box-shadow:
            0 40px 100px rgba(0, 0, 0, 0.75),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 0 60px rgba(183, 255, 26, 0.18);
          cursor: zoom-in;
        }
        .ecf-card.is-active.is-big {
          border-color: rgba(245, 158, 11, 0.38);
          box-shadow:
            0 40px 100px rgba(0, 0, 0, 0.75),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 0 60px rgba(245, 158, 11, 0.22);
        }
        .ecf-card-hint {
          position: absolute;
          bottom: 16px; left: 50%;
          transform: translateX(-50%);
          padding: 7px 14px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--acid);
          background: rgba(0, 0, 0, 0.65);
          border: 1px solid rgba(183, 255, 26, 0.30);
          border-radius: 999px;
          backdrop-filter: blur(8px);
          animation: ecf-hint-pulse 2.4s ease-in-out infinite;
          pointer-events: none;
        }
        @keyframes ecf-hint-pulse {
          0%, 100% { opacity: 0.85; }
          50%      { opacity: 1; }
        }

        /* Nav buttons */
        .ecf-nav {
          position: absolute;
          top: 50%; transform: translateY(-50%);
          width: 48px; height: 48px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(10, 10, 12, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.14);
          color: rgba(255, 255, 255, 0.85);
          cursor: pointer;
          backdrop-filter: blur(8px);
          z-index: 200;
          transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
        }
        .ecf-nav:hover {
          background: rgba(183, 255, 26, 0.10);
          border-color: rgba(183, 255, 26, 0.40);
          color: var(--acid);
          transform: translateY(-50%) scale(1.06);
        }
        .ecf-nav-prev { left: 22px; }
        .ecf-nav-next { right: 22px; }
        @media (max-width: 720px) {
          .ecf-nav-prev { left: 8px; }
          .ecf-nav-next { right: 8px; }
        }

        /* Dots */
        .ecf-dots {
          margin-top: 26px;
          display: flex; justify-content: center; gap: 8px;
          flex-wrap: wrap;
        }
        .ecf-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.20);
          border: none;
          padding: 0;
          cursor: pointer;
          transition: background 0.25s, transform 0.25s;
        }
        .ecf-dot:hover { background: rgba(255, 255, 255, 0.40); }
        .ecf-dot.is-on {
          background: var(--acid);
          box-shadow: 0 0 10px rgba(183, 255, 26, 0.55);
          transform: scale(1.25);
        }

        /* Lightbox */
        .ecf-lightbox {
          position: fixed; inset: 0;
          z-index: 9999;
          display: grid; place-items: center;
          padding: 30px;
          background: rgba(0, 0, 0, 0.85);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          cursor: zoom-out;
          animation: ecf-lb-fade 0.3s ease forwards;
        }
        @keyframes ecf-lb-fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        .ecf-lightbox-inner {
          position: relative;
          max-width: 92vw;
          max-height: 88vh;
          border-radius: 22px;
          overflow: hidden;
          background: #050507;
          border: 1px solid rgba(255, 255, 255, 0.14);
          box-shadow:
            0 50px 120px rgba(0, 0, 0, 0.85),
            0 0 60px rgba(183, 255, 26, 0.18);
          cursor: default;
          animation: ecf-lb-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        @keyframes ecf-lb-pop {
          from { transform: scale(0.94); opacity: 0; }
          to   { transform: scale(1);    opacity: 1; }
        }
        .ecf-lightbox-inner img {
          display: block;
          max-width: 92vw;
          max-height: 88vh;
          width: auto; height: auto;
          object-fit: contain;
          background: #050507;
        }
        .ecf-lightbox-close {
          position: fixed;
          top: 22px; right: 22px;
          width: 44px; height: 44px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.18);
          color: #fff;
          cursor: pointer;
          z-index: 10000;
          backdrop-filter: blur(10px);
          transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        .ecf-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.18);
          border-color: rgba(255, 255, 255, 0.32);
          transform: scale(1.05);
        }

        @media (max-width: 1100px) {
          .ecf-card { width: 320px !important; height: 410px !important; }
        }
        @media (max-width: 720px) {
          .ecf-card { width: 240px !important; height: 320px !important; }
          .ecf-stage { height: 420px !important; }
        }
        @media (prefers-reduced-motion: reduce) {
          .ecf-card { transition: opacity 0.3s ease; }
          .ecf-glow, .ecf-card-hint, .ecf-lightbox-inner { animation: none; }
        }
      `}</style>
    </section>
  );
};

const ElitePage = ({ onNav, onApply, user }) => (
  <>
    <section style={{paddingTop: 60, paddingBottom: 40, position: 'relative', overflow: 'hidden'}}>
      <div className="container" style={{position: 'relative'}}>
        <div className="elite-hero-grid">
          <div className="elite-hero">
            <div className="row" style={{gap:10}}>
              <span className="tag gold"><Icon name="diamond" size={12}/>BY APPLICATION</span>
              <span className="tag" style={{padding:'4px 10px'}}><Icon name="users" size={12}/>Locuri limitate</span>
            </div>
            <h1 style={{ marginTop: 22, maxWidth: 980 }}>
              <span className="acid">Elite</span> Plan.
            </h1>
            <p className="lead" style={{ marginTop: 22, maxWidth: 620 }}>
              Mentorship, live calls, feedback și suport pentru traderii care vor să evolueze mai rapid și să rămână funded.
            </p>
            <div style={{marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
              {!isEliteUser(user) && <Button variant="acid" size="lg" onClick={onApply}>Apply for Elite</Button>}
              <Button variant="ghost" size="lg" icon="arrowDown" onClick={() => {
                document.querySelector('#elite-includes')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
              }}>Vezi ce conține</Button>
            </div>
          </div>
          <EliteOrbital />
        </div>
      </div>
      <style>{`
        .elite-hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 0.95fr;
          gap: 30px;
          align-items: center;
        }
        @media (max-width: 980px) {
          .elite-hero-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>

    <section style={{paddingTop: 20}}>
      <div className="container">
        <SectionHeader
          eyebrow="THE PROBLEM"
          title="De ce majoritatea traderilor eșuează."
          subtitle="Nu pentru că nu sunt deștepți. Pentru că învață haotic, fără sistem și fără cineva care să le revizuie deciziile."
        />
        <div className="grid grid-3">
          {PROBLEMS.map((p, i) => (
            <Reveal key={p.title} delay={i * 50}>
              <div className="card prob-card">
                <div className="prob-icon">
                  <Icon name="x" size={18} stroke={2.5}/>
                </div>
                <h4 style={{marginTop: 18, fontSize: 17}}>{p.title}</h4>
                <p style={{marginTop: 8, fontSize: 13.5, lineHeight: 1.6}}>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    <section id="elite-includes">
      <div className="container">
        <SectionHeader
          eyebrow="WHAT'S INCLUDED"
          title={<>Ce primești în <span className="acid">Elite.</span></>}
          subtitle="9 componente. Toate active. Fără upsell-uri, fără extra-fees."
        />
        <div className="grid grid-3">
          {ELITE_FEATURES.map((f, i) => (
            <Reveal key={f.title} delay={i * 40}>
              <div className="card elite-feat">
                <IconChip icon={f.icon} color={f.color} size="lg"/>
                <h4 style={{marginTop: 22, fontSize: 17}}>{f.title}</h4>
                <p style={{marginTop: 8, fontSize: 13.5, lineHeight: 1.6}}>{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    <section className="elite-for-hidden">
      <div className="container">
        <div className="for-grid">
          <div className="card card-pad-lg" style={{borderColor:'rgba(183,255,26,0.18)', background:'rgba(183,255,26,0.03)'}}>
            <div className="row" style={{gap:10}}>
              <IconChip icon="check" color="acid"/>
              <span className="tag acid">PENTRU TINE DACĂ</span>
            </div>
            <h3 style={{marginTop:22}}>Elite este pentru:</h3>
            <ul className="for-list">
              {[
                'Traderi care deja au început și se simt blocați',
                'Cei care încearcă să treacă o evaluare prop firm',
                'Persoanele care vor structură și plan zilnic',
                'Cei care au nevoie de feedback și accountability',
                'Traderi care vor să învețe NASDAQ serios',
                'Cei dispuși să respecte risk management',
              ].map(t => (
                <li key={t}>
                  <Icon name="check" size={14} style={{color:'var(--acid)', flexShrink:0}}/>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="card card-pad-lg" style={{borderColor:'rgba(255,90,90,0.18)', background:'rgba(255,90,90,0.025)'}}>
            <div className="row" style={{gap:10}}>
              <div className="prob-icon" style={{margin:0, position:'static'}}>
                <Icon name="x" size={18} stroke={2.5}/>
              </div>
              <span className="tag red">NU PENTRU TINE DACĂ</span>
            </div>
            <h3 style={{marginTop:22}}>Elite NU este pentru:</h3>
            <ul className="for-list">
              {[
                'Cei care caută profit garantat',
                'Cei care nu vor să urmeze risk management',
                'Cei care vor semnale fără explicații',
                'Cei care tratează trading-ul ca gambling',
                'Cei care nu au timp pentru live calls',
                'Cei care vor "secrete" și shortcuts',
              ].map(t => (
                <li key={t}>
                  <Icon name="x" size={14} style={{color:'#FF8585', flexShrink:0}}/>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>

    <EliteWeek user={user} onApply={onApply}/>

    <EliteReviews onApply={onApply}/>

    <EliteCardFan />

    <EliteShowcase onApply={onApply}/>

    <section className="elite-pricing-hidden">
      <div className="container">
        <div className="pricing card card-pad-xl eborder gold">
          <div className="pricing-bg">
            <CandleChart density="sparse" opacity={0.3}/>
          </div>
          <div style={{position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 56, alignItems:'center'}} className="pricing-grid">
            <div>
              <div className="eyebrow" style={{marginBottom: 18}}>
                <span className="dot" style={{background:'var(--gold)',boxShadow:'0 0 10px var(--gold-glow)'}}/>
                ELITE · APPLICATION
              </div>
              <h2 style={{fontSize:'clamp(32px, 4.5vw, 56px)'}}>
                Aplici. Discutăm. <span style={{color:'var(--gold)'}}>Începem.</span>
              </h2>
              <p className="lead" style={{marginTop:22}}>
                Elite nu se cumpără cu un click. Aplici, discutăm 15 minute pe Discord/WhatsApp, vedem dacă suntem un fit. Locurile sunt limitate intenționat.
              </p>
              <div className="pricing-feats">
                {['Onboarding 1-on-1', 'Acces imediat la Elite channels', 'Materiale exclusive Elite', 'Cancel anytime'].map(f => (
                  <div key={f} className="row" style={{gap:8, fontSize:13, color:'var(--text-dim)'}}>
                    <Icon name="check" size={13} style={{color:'var(--gold)'}}/>{f}
                  </div>
                ))}
              </div>
            </div>

            <div className="pricing-card">
              <div className="pricing-label">MONTHLY</div>
              <div className="pricing-amount">
                <span className="pricing-currency">€</span>
                <span className="pricing-num">297</span>
                <span className="pricing-period">/lună</span>
              </div>
              <div className="pricing-strike">
                <span style={{textDecoration:'line-through', color:'var(--text-faint)'}}>€397</span>
                <span className="tag gold" style={{fontSize:10}}>EARLY ACCESS</span>
              </div>
              <div className="pricing-divider"/>
              <ul className="for-list" style={{margin: 0, gap: 10}}>
                {['9 componente Elite', '2× live calls/săpt', 'WhatsApp 1-on-1', 'Cancel oricând'].map(f => (
                  <li key={f}><Icon name="check" size={12} style={{color:'var(--gold)'}}/><span>{f}</span></li>
                ))}
              </ul>
              {!isEliteUser(user) && <Button variant="acid" size="lg" onClick={onApply} className="pricing-cta">Apply for Elite</Button>}
              <div style={{textAlign:'center', fontSize:11, color:'var(--text-mute)', marginTop: 12, letterSpacing:'0.06em'}}>
                Răspuns în 24h · 100% confidențial
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="elite-disclaimer-hidden">
      <div className="container">
        <div className="card" style={{padding: '22px 26px', display:'flex', gap: 16, alignItems:'flex-start', borderColor: 'rgba(255,255,255,0.08)'}}>
          <Icon name="warn" size={18} style={{color: 'var(--text-mute)', flexShrink:0, marginTop:2}}/>
          <p style={{fontSize:12, color:'var(--text-mute)', lineHeight: 1.6}}>
            <strong style={{color:'var(--text-dim)'}}>Disclaimer:</strong> Trading-ul implică risc semnificativ. Elite Plan este un program educațional și de mentorship — nu garantăm profit. Rezultatele anterioare ale altor membri nu prevăd rezultate viitoare. Aplicarea înseamnă că ai citit și înțeles termenii.
          </p>
        </div>
      </div>
    </section>

    <style>{`
      .elite-hero-bg {
        position: absolute; inset: -40px;
        opacity: 0.5;
        mask: radial-gradient(ellipse 60% 70% at 50% 30%, #000 30%, transparent 70%);
      }
      .prob-card { padding: 26px; position: relative; }
      .prob-icon {
        width: 36px; height: 36px; border-radius: 50%;
        background: rgba(255,90,90,0.12);
        border: 1px solid rgba(255,90,90,0.3);
        color: #FF8585;
        display: grid; place-items: center;
      }
      .for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
      @media (max-width: 880px) { .for-grid { grid-template-columns: 1fr; } }
      .for-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
      .for-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-dim); }

      .schedule { display: flex; flex-direction: column; gap: 12px; }
      .sched-row {
        display: grid; grid-template-columns: 200px 1fr auto;
        gap: 24px; padding: 22px 26px; align-items: center;
      }
      .sched-day-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em; font-weight: 600; }
      .sched-day-time { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
      .sched-mid h4 { font-size: 17px; }
      .sched-icon { flex-shrink: 0; }
      @media (max-width: 720px) {
        .sched-row { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
      }

      .test-card { padding: 26px; }

      .pricing { position: relative; overflow: hidden; }
      .pricing-bg {
        position: absolute; inset: 0;
        mask: linear-gradient(90deg, transparent, #000 40%);
        opacity: 0.7;
      }
      .pricing-grid { }
      @media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }
      .pricing-feats { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .pricing-card {
        padding: 32px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255,203,82,0.06) 0%, rgba(0,0,0,0.4) 100%);
        border: 1px solid rgba(255,203,82,0.25);
        box-shadow: 0 30px 80px rgba(255,203,82,0.08);
      }
      .pricing-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--gold); }
      .pricing-amount { display: flex; align-items: baseline; gap: 4px; margin-top: 12px; }
      .pricing-currency { font-size: 24px; color: var(--text-dim); }
      .pricing-num {
        font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
        background: linear-gradient(180deg, #FFE3A0 0%, #FFCB52 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      .pricing-period { font-size: 14px; color: var(--text-mute); margin-left: 4px; }
      .pricing-strike { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 13px; }
      .pricing-divider { height: 1px; background: var(--line); margin: 24px 0; }
      .pricing-cta { width: 100%; margin-top: 26px; justify-content: center; }
      .elite-pricing-hidden,
      .elite-disclaimer-hidden { display: none; }
    `}</style>
  </>
);

Object.assign(window, { ElitePage });
