<?php $lang=stb_lang(); $B='/NewSite'; $fa=$lang==='fa';
$login_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa':'https://crm.stbbrokers.com/';
$register_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa/register':'https://crm.stbbrokers.com/register/';
?>
<style>
/* ══════════════════════════════════════════════════════════════
   WEBINARS — Coming Soon Masterpiece
══════════════════════════════════════════════════════════════ */
.wb-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#04060a}

/* Audio waveform background */
.wb-waves{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wb-wave{position:absolute;left:0;right:0;height:200px;opacity:.15}
.wb-wave-1{top:30%;animation:wb-wave 6s ease-in-out infinite}
.wb-wave-2{top:45%;animation:wb-wave 8s ease-in-out infinite reverse;opacity:.1}
.wb-wave-3{top:55%;animation:wb-wave 10s ease-in-out infinite;opacity:.08}
@keyframes wb-wave{0%,100%{transform:translateX(-5%) scaleY(1)}50%{transform:translateX(5%) scaleY(1.3)}}

/* Radial stage light */
.wb-stage{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);
  width:400px;height:400px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.06),transparent 60%);
  animation:wb-stage-pulse 6s ease-in-out infinite}
@keyframes wb-stage-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.8}}
.wb-stage-2{background:radial-gradient(circle,rgba(20,224,163,.04),transparent 60%);
  animation-delay:3s;width:300px;height:300px;top:60%}

/* Floating signal bars */
.wb-bars{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;align-items:flex-end;height:60px;pointer-events:none}
.wb-bar{width:3px;border-radius:2px;background:rgba(200,16,46,.3);
  animation:wb-bar-bounce ease-in-out infinite}
@keyframes wb-bar-bounce{0%,100%{height:var(--h1,15px)}50%{height:var(--h2,40px)}}

/* Center */
.wb-center{position:relative;z-index:10;text-align:center;max-width:680px;padding:0 24px}
.wb-icon-wrap{width:80px;height:80px;border-radius:50%;margin:0 auto 24px;
  background:rgba(200,16,46,.06);border:2px solid rgba(200,16,46,.2);
  display:flex;align-items:center;justify-content:center;
  animation:wb-icon-glow 3s ease-in-out infinite;position:relative}
@keyframes wb-icon-glow{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.15)}50%{box-shadow:0 0 40px rgba(200,16,46,.12)}}
.wb-icon-wrap svg{stroke:#C8102E;fill:none;width:36px;height:36px}
/* Broadcast rings */
.wb-icon-wrap::before,.wb-icon-wrap::after{content:'';position:absolute;border-radius:50%;
  border:1px solid rgba(200,16,46,.1);animation:wb-broadcast 3s ease-out infinite}
.wb-icon-wrap::before{inset:-15px;animation-delay:0s}
.wb-icon-wrap::after{inset:-30px;animation-delay:1s;border-color:rgba(200,16,46,.06)}
@keyframes wb-broadcast{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.4);opacity:0}}

.wb-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:30px;
  background:rgba(200,16,46,.06);border:1px solid rgba(200,16,46,.2);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C8102E;
  margin-bottom:24px;animation:wb-badge-glow 3s ease-in-out infinite}
@keyframes wb-badge-glow{0%,100%{box-shadow:none}50%{box-shadow:0 0 24px rgba(200,16,46,.1)}}
.wb-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#C8102E;
  animation:wb-bdot 2s infinite}
@keyframes wb-bdot{0%,100%{box-shadow:0 0 4px rgba(200,16,46,.4)}50%{box-shadow:0 0 12px rgba(200,16,46,.8)}}

.wb-title{font-size:clamp(32px,5.5vw,58px);font-weight:900;color:#fff;line-height:1.08;
  margin-bottom:16px;letter-spacing:-.03em}
.wb-title em{font-style:normal;color:#C8102E}
.wb-sub{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.38);line-height:1.65;
  margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto}

/* Upcoming session cards */
.wb-sessions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.wb-session{padding:14px 20px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);min-width:180px;text-align:center;
  transition:all .25s;position:relative;overflow:hidden}
.wb-session::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sc,#C8102E);opacity:.5}
body.rtl .wb-session::before{left:auto;right:0}
.wb-session:hover{border-color:rgba(200,16,46,.25);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.4)}
.wb-session-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
.wb-session-meta{font-size:11px;color:rgba(255,255,255,.3)}
.wb-session-status{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:4px;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.2);color:#C8102E}

/* CTA */
.wb-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wb-btn-primary{padding:13px 32px;border-radius:12px;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#C8102E,#a00d24);color:#fff;text-decoration:none;
  box-shadow:0 4px 24px rgba(200,16,46,.25);transition:all .25s;position:relative;overflow:hidden}
.wb-btn-primary::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transform:translateX(-100%);transition:transform .6s}
.wb-btn-primary:hover::before{transform:translateX(100%)}
.wb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(200,16,46,.35);color:#fff}
.wb-btn-ghost{padding:13px 28px;border-radius:12px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);text-decoration:none;transition:all .2s}
.wb-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* Canvas */
.wb-canvas-wrap{position:absolute;inset:0;pointer-events:none;z-index:1}
#wb-hero-cvs{width:100%;height:100%;display:block}
</style>

<article class="ip-page" style="background:#04060a">
<div class="wb-hero">
  <div class="wb-waves">
    <div class="wb-wave wb-wave-1"></div>
    <div class="wb-wave wb-wave-2"></div>
    <div class="wb-wave wb-wave-3"></div>
  </div>
  <div class="wb-stage"></div>
  <div class="wb-stage wb-stage-2"></div>
  <!-- Audio bars -->
  <div class="wb-bars" id="wb-bars"></div>
  <!-- Canvas -->
  <div class="wb-canvas-wrap"><canvas id="wb-hero-cvs"></canvas></div>

  <div class="wb-center">
    <div class="wb-icon-wrap">
      <svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" stroke-width="1.5"/><path d="M19 10v2a7 7 0 01-14 0v-2" stroke-width="1.5"/><line x1="12" y1="19" x2="12" y2="23" stroke-width="1.5"/><line x1="8" y1="23" x2="16" y2="23" stroke-width="1.5"/></svg>
    </div>
    <div class="wb-badge"><?php echo $fa?'به زودی':'COMING SOON';?></div>
    <h1 class="wb-title"><?php echo $fa?'وبینارهای <em>زنده</em> STB':'STB Live <em>Webinars</em>';?></h1>
    <p class="wb-sub"><?php echo $fa?'جلسات آموزشی زنده با تحلیلگران حرفه‌ای. تحلیل بازار، استراتژی‌های معاملاتی و پرسش و پاسخ — همه رایگان.':'Live educational sessions with professional analysts. Market analysis, trading strategies, and Q&A — all free.';?></p>

    <!-- Upcoming sessions preview -->
    <div class="wb-sessions">
      <?php $sessions = $fa ? [
        ['تحلیل هفتگی بازار','هر دوشنبه · ۲۰:۰۰','#C8102E'],
        ['استراتژی اسکالپینگ','هر چهارشنبه · ۱۸:۰۰','#14e0a3'],
        ['پرسش و پاسخ زنده','هر جمعه · ۲۱:۰۰','#C8102E'],
      ] : [
        ['Weekly Market Analysis','Every Monday · 8PM GMT','#C8102E'],
        ['Scalping Strategies','Every Wednesday · 6PM GMT','#14e0a3'],
        ['Live Q&A Session','Every Friday · 9PM GMT','#C8102E'],
      ];
      foreach($sessions as $s): ?>
      <div class="wb-session" style="--sc:<?php echo $s[2]; ?>">
        <div class="wb-session-title"><?php echo $s[0]; ?></div>
        <div class="wb-session-meta"><?php echo $s[1]; ?></div>
        <div class="wb-session-status"><?php echo $fa?'برنامه‌ریزی شده':'SCHEDULED';?></div>
      </div>
      <?php endforeach; ?>
    </div>

    <div class="wb-ctas">
      <a href="<?php echo esc_html($register_label_url);?>" class="wb-btn-primary"><?php echo $fa?'ثبت‌نام و اطلاع‌رسانی':'Register & Get Notified';?></a>
      <a href="<?php echo stb_url($B.'/academy/'); ?>" class="wb-btn-ghost"><?php echo $fa?'آکادمی STB':'STB Academy';?></a>
    </div>
  </div>
</div>
</article>

<script>
(function(){
  /* Audio bars */
  var barsEl=document.getElementById('wb-bars');
  if(barsEl){for(var i=0;i<24;i++){
    var b=document.createElement('div');b.className='wb-bar';
    var h1=8+Math.random()*20,h2=20+Math.random()*40;
    b.style.cssText='--h1:'+h1+'px;--h2:'+h2+'px;animation-duration:'+(0.6+Math.random()*1.2)+'s;animation-delay:'+(-Math.random()*2)+'s;background:rgba('+(Math.random()>.5?'200,16,46':'20,224,163')+','+(0.15+Math.random()*0.25)+')';
    barsEl.appendChild(b);
  }}

  /* Canvas — floating audio-style particles */
  var c=document.getElementById('wb-hero-cvs');
  if(c){
    var ctx=c.getContext('2d'),dpr=window.devicePixelRatio||1;
    var animId=null, isVisible=false;
    var observer = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        isVisible = entry.isIntersecting;
        if(isVisible){
          if(!animId) animId = requestAnimationFrame(draw);
        } else {
          if(animId) {
            cancelAnimationFrame(animId);
            animId = null;
          }
        }
      });
    }, {threshold:0.01});
    function resize(){var r=c.parentElement.getBoundingClientRect();c.width=r.width*dpr;c.height=r.height*dpr;c.style.width=r.width+'px';c.style.height=r.height+'px';ctx.setTransform(dpr,0,0,dpr,0,0)}
    resize();window.addEventListener('resize',resize);
    observer.observe(c);
    var t=0;
    function draw(){
      var w=c.width/dpr,h=c.height/dpr;
      ctx.clearRect(0,0,w,h);
      // Waveform lines
      for(var l=0;l<3;l++){
        ctx.beginPath();
        var amp=20+l*12,freq=0.008-l*0.002,phase=t*0.015+l*1.5;
        for(var x=0;x<w;x++){
          var y=h*0.5+Math.sin(x*freq+phase)*amp+Math.sin(x*0.003+phase*0.5)*amp*0.5;
          x===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
        }
        ctx.strokeStyle=l===0?'rgba(200,16,46,0.06)':l===1?'rgba(20,224,163,0.04)':'rgba(255,255,255,0.02)';
        ctx.lineWidth=1.5;ctx.stroke();
      }
      t++;
      if(!isVisible){
        animId = null;
        return;
      }
      animId = requestAnimationFrame(draw);
    }
  }
})();
</script>
