// ============================================================
// LIVE ARENA PAGE — Coming Soon
// ============================================================

const LivePage = ({ onNav }) => {
  // Countdown to a fictional date
  const TARGET = React.useMemo(() => {
    const t = new Date();
    t.setMonth(t.getMonth() + 1);
    t.setDate(1);
    t.setHours(18, 0, 0, 0);
    return t.getTime();
  }, []);

  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const diff = Math.max(0, TARGET - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);

  return (
    <>
      <section style={{paddingTop: 80, paddingBottom: 40, position: 'relative', overflow: 'hidden'}}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 80% 60% at 50% 20%, rgba(90,200,255,0.10), transparent 60%)',
          pointerEvents: 'none'
        }}/>
        <div className="container" style={{position:'relative'}}>
          <div className="eyebrow">
            <span className="dot" style={{background:'var(--blue)', boxShadow:'0 0 10px var(--blue-glow)'}}/>
            LIVE ARENA · COMING SOON
          </div>
          <h1 style={{ marginTop: 18, maxWidth: 960 }}>
            Un spațiu dedicat <span style={{color:'var(--blue)'}}>execuției live.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 620 }}>
            Sesiuni live, watchlists actualizate, market analysis în timp real și evenimente speciale doar pentru membrii Live Arena.
          </p>
        </div>
      </section>

      <section style={{paddingTop: 20}}>
        <div className="container">
          <div className="live-card card card-pad-xl eborder blue">
            <div className="live-card-grid">
              <div>
                <div className="row" style={{gap:10, marginBottom:24}}>
                  <span className="badge-live"><span className="dot"/>OFFLINE</span>
                  <span className="tag blue"><Icon name="bolt" size={12}/>Q3 2026</span>
                </div>
                <h2 style={{fontSize:'clamp(32px, 4vw, 52px)'}}>
                  Lansare în:
                </h2>
                <div className="countdown">
                  <div className="cd-cell"><div className="cd-num">{String(d).padStart(2,'0')}</div><div className="cd-lbl">ZILE</div></div>
                  <div className="cd-sep">:</div>
                  <div className="cd-cell"><div className="cd-num">{String(h).padStart(2,'0')}</div><div className="cd-lbl">ORE</div></div>
                  <div className="cd-sep">:</div>
                  <div className="cd-cell"><div className="cd-num">{String(m).padStart(2,'0')}</div><div className="cd-lbl">MIN</div></div>
                  <div className="cd-sep">:</div>
                  <div className="cd-cell pulse"><div className="cd-num" style={{color:'var(--blue)'}}>{String(s).padStart(2,'0')}</div><div className="cd-lbl">SEC</div></div>
                </div>
                <p style={{marginTop: 28, maxWidth: 460}}>
                  Live Arena vine cu sesiuni de execuție în timp real, watchlists zilnice și evenimente speciale.
                  Fii primul anunțat.
                </p>
                <div style={{marginTop:28, display:'flex', gap: 12, flexWrap:'wrap'}}>
                  <Button variant="ghost"><Icon name="discord" size={16}/>Join Discord pentru notificare</Button>
                  <Button variant="acid" onClick={() => onNav('elite')}>Vezi Elite Plan</Button>
                </div>
              </div>

              <div className="live-preview">
                <div className="live-preview-top">
                  <div className="row" style={{gap:6}}>
                    <span className="window-dot" style={{background:'#FF5A5A'}}/>
                    <span className="window-dot" style={{background:'#FFCB52'}}/>
                    <span className="window-dot" style={{background:'#62E875'}}/>
                  </div>
                  <span style={{fontSize:11, color:'var(--text-mute)', fontFamily:'JetBrains Mono'}}>live.tyrone.pro</span>
                  <div className="badge-live" style={{transform:'scale(0.85)'}}><span className="dot"/>SOON</div>
                </div>
                <div className="live-preview-body">
                  <CandleChart density="dense" opacity={0.6}/>
                  <div className="locked-overlay">
                    <Icon name="lock" size={28} style={{color:'var(--blue)'}}/>
                    <div style={{marginTop:14, fontWeight:600, fontSize:15}}>Live sesiune blocată</div>
                    <div style={{marginTop:6, fontSize:12, color:'var(--text-mute)'}}>Disponibilă la lansare</div>
                  </div>
                </div>
                <div className="live-preview-foot">
                  <div className="lpf-item">
                    <Icon name="users" size={13} style={{color:'var(--blue)'}}/>
                    <span>0 / 200</span>
                  </div>
                  <div className="lpf-item">
                    <Icon name="clock" size={13} style={{color:'var(--text-mute)'}}/>
                    <span>—</span>
                  </div>
                  <div className="lpf-item">
                    <Icon name="candle" size={13} style={{color:'var(--text-mute)'}}/>
                    <span>NQ · MNQ</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <SectionHeader
            eyebrow="WHAT'S COMING"
            title="Ce va conține Live Arena"
            subtitle="Toate sesiunile arhivate în Member Area. Acces în funcție de tipul de membership."
          />
          <div className="grid grid-3">
            {[
              { icon:'video',   color:'blue', title:'Sesiuni live execuție', desc:'Sesiuni programate de open London + NY, cu execuție în timp real și voice over.' },
              { icon:'eye',     color:'cyan', title:'Watchlists zilnice',    desc:'Nivele cheie, sesiunile importante, evenimente economice — totul înainte de open.' },
              { icon:'chart',   color:'acid', title:'Market analysis live',  desc:'Breakdown-uri pe CPI, FOMC, NFP — analizate împreună în direct.' },
              { icon:'flame',   color:'gold', title:'Evenimente speciale',   desc:'Sesiuni Q&A cu invitați, backtest workshops, prop firm AMAs.' },
              { icon:'users',   color:'blue', title:'Trader networking',     desc:'Voice rooms permanente, breakout sessions, conexiuni reale între membri.' },
              { icon:'sparkle', color:'gold', title:'Live + replay',         desc:'Toate sesiunile arhivate, taggable, căutabile, descărcabile (Elite).' },
            ].map((f, i) => (
              <Reveal key={f.title} delay={i * 50}>
                <div className="card" style={{padding: 28}}>
                  <IconChip icon={f.icon} color={f.color} size="lg"/>
                  <h4 style={{marginTop: 22, fontSize: 18}}>{f.title}</h4>
                  <p style={{marginTop: 10, fontSize: 14, lineHeight: 1.6}}>{f.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .live-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
        @media (max-width: 920px) { .live-card-grid { grid-template-columns: 1fr; gap: 36px; } }

        .countdown { display: flex; align-items: flex-end; gap: 8px; margin-top: 24px; }
        .cd-cell {
          padding: 14px 16px;
          min-width: 76px;
          border-radius: 14px;
          background: rgba(0,0,0,0.4);
          border: 1px solid var(--line);
          text-align: center;
        }
        .cd-cell.pulse { border-color: rgba(90,200,255,0.3); box-shadow: 0 0 18px rgba(90,200,255,0.15); }
        .cd-num {
          font-family: 'JetBrains Mono', monospace;
          font-size: 32px; font-weight: 700;
          letter-spacing: -0.02em;
          line-height: 1;
        }
        .cd-lbl {
          font-size: 10px; letter-spacing: 0.16em; color: var(--text-mute);
          margin-top: 8px;
        }
        .cd-sep { font-size: 28px; color: var(--text-faint); padding-bottom: 28px; font-family: 'JetBrains Mono', monospace; }

        .live-preview {
          border-radius: 18px;
          background: rgba(0,0,0,0.45);
          border: 1px solid var(--line-2);
          overflow: hidden;
        }
        .live-preview-top {
          display: flex; align-items: center; justify-content: space-between; gap: 14px;
          padding: 12px 16px;
          background: rgba(255,255,255,0.02);
          border-bottom: 1px solid var(--line);
        }
        .window-dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.6; }
        .live-preview-body {
          position: relative; height: 240px;
          background: var(--bg);
        }
        .live-preview-body .bg-chart { position: absolute; inset: 0; }
        .locked-overlay {
          position: absolute; inset: 0;
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.85));
          backdrop-filter: blur(2px);
        }
        .live-preview-foot {
          display: flex; gap: 18px; padding: 14px 18px;
          border-top: 1px solid var(--line);
          background: rgba(0,0,0,0.3);
        }
        .lpf-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
      `}</style>
    </>
  );
};

Object.assign(window, { LivePage });