<?php $lang = stb_lang(); ?>
<section class="acd-wrap" id="academy" aria-labelledby="acd-heading">
<style>
/* ═══════════════════════════════════════
   STB ACADEMY — Futuristic animated widget
   ═══════════════════════════════════════ */
.acd-wrap {
  background-color: #060809 !important;
  background-image: 
    radial-gradient(circle at 80% 10%, rgba(20, 224, 163, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 15% 90%, rgba(20, 224, 163, 0.03) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M 50 0 L 0 0 0 50' fill='none' stroke='rgba(20, 224, 163, 0.007)' stroke-width='0.75'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 50px 50px;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
/* Dot-matrix overlay */
.acd-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='rgba(20, 224, 163, 0.015)'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
/* Scan lines texture */
.acd-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(20, 224, 163, 0.008) 3px, rgba(20, 224, 163, 0.008) 4px);
  pointer-events: none;
  z-index: 0;
}

.acd-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

.acd-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}
@media(max-width:768px){.acd-inner{padding:0 20px}}

/* ── Main grid: left text+tabs, right content cards ── */
.acd-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
}
@media(max-width:1024px){.acd-grid{grid-template-columns:1fr;gap:40px}}

/* ══ LEFT ══ */
.acd-left{}
.acd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(20, 224, 163, .8);
  margin-bottom: 16px;
}
.acd-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14e0a3;
  animation: acd-blink 1.4s infinite;
}
@keyframes acd-blink{0%,100%{box-shadow:0 0 6px #14e0a3;opacity:1}50%{opacity:.3;box-shadow:none}}
.acd-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}
.acd-title em {
  font-style: normal;
  background: linear-gradient(135deg, #14e0a3, #0fb87d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.acd-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 32px;
}

/* Category tabs — vertical */
.acd-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 32px;
}
.acd-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
/* Cyber brackets on tabs */
.acd-tab::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-width: 0 1.5px 1.5px 0;
  border-style: solid;
  border-color: #14e0a3;
  opacity: 0;
  transform: translate(3px, 3px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.acd-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #14e0a3;
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 3px 0 0 3px;
  z-index: 3;
}
.acd-tab:hover::after,
.acd-tab.active::after {
  opacity: 0.8;
  transform: translate(0, 0);
}
.acd-tab:hover,
.acd-tab.active {
  background: rgba(20, 224, 163, 0.05);
  border-color: rgba(20, 224, 163, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M 8 0 L 0 0 0 8' fill='none' stroke='rgba(20, 224, 163, 0.015)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 0 12px rgba(20, 224, 163, 0.02);
}
.acd-tab:hover::before,
.acd-tab.active::before {
  opacity: 1;
}
.acd-tab-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.acd-tab:hover .acd-tab-icon,
.acd-tab.active .acd-tab-icon {
  background: rgba(20, 224, 163, .1);
  border-color: rgba(20, 224, 163, .25);
}
.acd-tab-icon svg {
  stroke: rgba(255, 255, 255, .4);
  fill: none;
  width: 17px;
  height: 17px;
  transition: stroke .2s;
}
.acd-tab:hover .acd-tab-icon svg,
.acd-tab.active .acd-tab-icon svg {
  stroke: #14e0a3;
}
.acd-tab-info {
  flex: 1;
}
.acd-tab-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 2px;
  transition: color .2s;
}
.acd-tab:hover .acd-tab-title,
.acd-tab.active .acd-tab-title {
  color: #fff;
}
.acd-tab-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .3);
}
.acd-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(20, 224, 163, .08);
  border: 1px solid rgba(20, 224, 163, .15);
  color: #14e0a3;
  flex-shrink: 0;
}

/* Free badge */
.acd-free-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(20, 224, 163, 0.04);
  background-image: 
    linear-gradient(45deg, rgba(20, 224, 163, 0.01) 25%, transparent 25%, transparent 50%, rgba(20, 224, 163, 0.01) 50%, rgba(20, 224, 163, 0.01) 75%, transparent 75%, transparent),
    radial-gradient(circle at 100% 0%, rgba(20, 224, 163, 0.08) 0%, transparent 40%);
  background-size: 10px 10px, 100% 100%;
  border: 1px solid rgba(20, 224, 163, 0.16);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(20, 224, 163, 0.02);
}
/* Tech corner accents on the badge */
.acd-free-badge::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 50%, rgba(20, 224, 163, 0.25) 50%);
  pointer-events: none;
}
.acd-free-badge::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #14e0a3;
  box-shadow: 0 0 8px #14e0a3;
  animation: acd-badge-pulse 2s infinite;
}
@keyframes acd-badge-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.acd-free-badge svg {
  stroke: #14e0a3;
  fill: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(20, 224, 163, 0.3));
}
.acd-free-badge-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #14e0a3;
  letter-spacing: 0.02em;
}
.acd-free-badge-sub {
  font-size: 11.5px;
  color: rgba(20, 224, 163, 0.65);
  margin-top: 1px;
}

/* ══ RIGHT ══ */
.acd-right{}

/* Featured content card */
.acd-featured {
  background: rgba(13, 15, 17, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px 24px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: all 0.3s var(--ease);
}
.acd-featured:hover {
  border-color: rgba(20, 224, 163, 0.25);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(20, 224, 163, 0.05);
  transform: translateY(-2px);
}
/* Scanning sweep top gradient line */
.acd-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #14e0a3, transparent);
  animation: acd-featured-sweep 4s linear infinite;
}
@keyframes acd-featured-sweep {
  0% { left: -50%; }
  100% { left: 150%; }
}
/* Dot grid mesh */
.acd-feat-grid {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='rgba(20, 224, 163, 0.02)'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 0;
}
/* HUD radar overlay */
.acd-feat-hud {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  transition: transform 0.8s ease;
}
.acd-featured:hover .acd-feat-hud {
  transform: rotate(45deg) scale(1.1);
}
.acd-feat-hud svg {
  width: 100%;
  height: 100%;
}
/* Cyber corners */
.acd-feat-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(20, 224, 163, 0.2);
  border-style: solid;
  transition: border-color 0.3s, opacity 0.3s;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}
.acd-feat-corner.top-left {
  top: 12px;
  left: 12px;
  border-width: 1.5px 0 0 1.5px;
}
.acd-feat-corner.top-right {
  top: 12px;
  right: 12px;
  border-width: 1.5px 1.5px 0 0;
}
.acd-feat-corner.bottom-left {
  bottom: 12px;
  left: 12px;
  border-width: 0 0 1.5px 1.5px;
}
.acd-feat-corner.bottom-right {
  bottom: 12px;
  right: 12px;
  border-width: 0 1.5px 1.5px 0;
}
.acd-featured:hover .acd-feat-corner {
  border-color: #14e0a3;
  opacity: 1;
}

.acd-featured-tag,
.acd-featured-title,
.acd-featured-desc,
.acd-featured-meta {
  position: relative;
  z-index: 1;
}
.acd-featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #14e0a3;
  margin-bottom: 12px;
}
.acd-featured-tag svg{stroke:#14e0a3;fill:none;width:12px;height:12px}
.acd-featured-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}
.acd-featured-desc{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.6;margin-bottom:20px}
.acd-featured-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.acd-meta-pill{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;color:rgba(255,255,255,.4);
}
.acd-meta-pill svg{stroke:rgba(255,255,255,.3);fill:none;width:12px;height:12px}
.acd-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  background: #14e0a3;
  color: #04120e;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(20, 224, 163, 0.3);
  transition: all .25s var(--ease);
  margin-left: auto;
}
.acd-featured-cta:hover{filter:brightness(1.08);color:#04120e;transform:translateY(-1px);box-shadow:0 6px 20px rgba(20, 224, 163, 0.45)}

/* Content list cards */
.acd-list{display:flex;flex-direction:column;gap:10px}
.acd-item {
  background: rgba(13, 15, 17, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all 0.25s var(--ease);
}
.acd-item:hover {
  border-color: rgba(20, 224, 163, 0.25);
  background-color: rgba(13, 15, 17, 0.85);
  background-image: linear-gradient(135deg, rgba(20, 224, 163, 0.01) 25%, transparent 25%, transparent 50%, rgba(20, 224, 163, 0.01) 50%, rgba(20, 224, 163, 0.01) 75%, transparent 75%, transparent);
  background-size: 8px 8px;
  transform: translateX(4px);
}
/* Cyber brackets on list items */
.acd-item::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: rgba(20, 224, 163, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.acd-item:hover::after {
  opacity: 1;
}
.acd-item-badge{
  flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:5px;
  white-space:nowrap;
}
.acd-item-badge.course {background:rgba(200,16,46,.1);color:#C8102E;border:1px solid rgba(200,16,46,.2)}
.acd-item-badge.webinar{background:rgba(20,224,163,.08);color:#14e0a3;border:1px solid rgba(20,224,163,.18)}
.acd-item-badge.article{background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.09)}
.acd-item-title{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.75);flex:1;line-height:1.4}
.acd-item:hover .acd-item-title{color:#fff}
.acd-item-meta{font-size:11.5px;color:rgba(255,255,255,.3);white-space:nowrap}
.acd-item-arr {
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.acd-item-arr svg{stroke:currentColor;fill:none;width:14px;height:14px}
.acd-item:hover .acd-item-arr {
  color: #14e0a3;
  transform: translateX(2px);
}

/* Progress bars on tab switch */
.acd-progress {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}
.acd-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, #14e0a3, #0fb87d);
  transition: width 1s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 0 10px rgba(20, 224, 163, 0.8), 0 0 3px rgba(20, 224, 163, 0.4);
}

/* ── Academy RTL ── */
body.rtl .acd-wrap{direction:rtl}
body.rtl .acd-header{text-align:right}
body.rtl .acd-kicker{flex-direction:row;justify-content:flex-end}
body.rtl .acd-title{text-align:right}
body.rtl .acd-desc{text-align:right}
/* Course list rows — icon on RIGHT */
body.rtl .acd-item{flex-direction:row;text-align:right}
body.rtl .acd-item-icon{margin-right:0;margin-left:12px}
body.rtl .acd-item-text{text-align:right}
body.rtl .acd-item-count{margin-left:0;margin-right:auto}
body.rtl .acd-cta{flex-direction:row-reverse}
body.rtl .acd-cta-btn svg{transform:scaleX(-1)}

body.rtl .acd-tab::before {
  left: auto;
  right: 0;
  border-radius: 0 3px 3px 0;
}
body.rtl .acd-tab::after {
  right: auto;
  left: 6px;
  border-width: 0 0 1.5px 1.5px;
  transform: translate(-3px, 3px);
}
body.rtl .acd-tab:hover::after,
body.rtl .acd-tab.active::after {
  transform: translate(0, 0);
}
body.rtl .acd-item:hover {
  transform: translateX(-4px);
}
body.rtl .acd-item::after {
  right: auto;
  left: 4px;
  border-width: 0 0 1px 1px;
}
body.rtl .acd-item:hover .acd-item-arr {
  transform: translateX(-2px);
}
body.rtl .acd-item-arr svg {
  transform: scaleX(-1);
}
body.rtl .acd-featured-cta {
  margin-left: 0;
  margin-right: auto;
}
body.rtl .acd-featured-hud {
  right: auto;
  left: -30px;
}
</style>

<!-- Background layers -->
<svg class="acd-bg-svg" viewBox="0 0 1440 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
  <defs>
    <linearGradient id="acd-wave-grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgba(20, 224, 163, 0)"/>
      <stop offset="50%" stop-color="rgba(20, 224, 163, 0.08)"/>
      <stop offset="100%" stop-color="rgba(20, 224, 163, 0)"/>
    </linearGradient>
  </defs>
  <!-- Futuristic tech wave / charting curve in background -->
  <path d="M -100,250 Q 300,100 720,300 T 1540,150" fill="none" stroke="url(#acd-wave-grad)" stroke-width="1.5"/>
  <path d="M -100,270 Q 320,120 740,320 T 1560,170" fill="none" stroke="rgba(20, 224, 163, 0.03)" stroke-width="1" stroke-dasharray="4 12"/>
  
  <!-- Travelling glowing light points along the path -->
  <circle r="3" fill="#14e0a3" style="filter: drop-shadow(0 0 4px #14e0a3)">
    <animateMotion dur="12s" repeatCount="indefinite" path="M -100,250 Q 300,100 720,300 T 1540,150" />
  </circle>
  <circle r="2" fill="#14e0a3" opacity="0.6">
    <animateMotion dur="18s" repeatCount="indefinite" begin="-6s" path="M -100,270 Q 320,120 740,320 T 1560,170" />
  </circle>
  
  <!-- Subtle coordinate crosshairs or tech ticks in blank spaces -->
  <path d="M 120,80 L 120,100 M 110,90 L 130,90" stroke="rgba(20, 224, 163, 0.12)" stroke-width="1" />
  <path d="M 1320,500 L 1340,500 L 1340,520" fill="none" stroke="rgba(20, 224, 163, 0.08)" stroke-width="1" />
  <path d="M 1345,525 L 1345,505 L 1325,505" fill="none" stroke="rgba(20, 224, 163, 0.08)" stroke-width="1" />
</svg>

<div class="acd-inner">
  <div class="acd-grid">

    <!-- LEFT -->
    <div class="acd-left">
      <div class="acd-kicker">
        <span class="acd-kicker-dot"></span>
        STB ACADEMY
      </div>
      <h2 class="acd-title" id="acd-heading">
        <?php echo $lang==='fa' ? 'یاد بگیرید. پیشرفت کنید.<br><em>با اطمینان معامله کنید.</em>' : 'Learn. Improve.<br><em>Trade With Confidence.</em>'; ?>
      </h2>
      <p class="acd-desc">
        <?php echo $lang==='fa' ? 'یک اکوسیستم آموزشی کامل برای معامله‌گران در همه سطوح — کاملاً رایگان برای مشتریان STB.' : 'A complete educational ecosystem for traders at every level — completely free for STB clients.'; ?>
      </p>

      <!-- Vertical category tabs -->
      <div class="acd-tabs" role="tablist">
        <?php
        $tabs = [
          ['courses', '<path d="M22 10v6M2 10l10-5 10 5-10 5-10-5z" stroke-width="1.5"/><path d="M6 12v5c0 2.21 2.686 4 6 4s6-1.79 6-4v-5" stroke-width="1.5"/>',
           $lang==='fa' ? 'دوره‌های معاملاتی' : 'Trading Courses',
           $lang==='fa' ? '۵ دوره ساختاریافته' : '5 structured courses',
           $lang==='fa' ? '۵' : '5'],
          ['webinars','<path d="M15 10l4.553-2.069A1 1 0 0121 8.847v6.306a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" stroke-width="1.5"/>',
           $lang==='fa' ? 'وبینارهای زنده' : 'Live Webinars',
           $lang==='fa' ? 'جلسات آینده + آرشیو' : 'Upcoming + on-demand',
           $lang==='fa' ? 'زنده' : 'Live'],
          ['encyclopedia','<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-width="1.5"/>',
           $lang==='fa' ? 'دانشنامه' : 'Encyclopedia',
           $lang==='fa' ? 'واژه‌نامه A تا Z' : 'A–Z glossary',
           $lang==='fa' ? '۴۵۰+' : '450+'],
          ['articles','<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="1.5"/>',
           $lang==='fa' ? 'مقالات بازار' : 'Market Articles',
           $lang==='fa' ? 'تحلیل و استراتژی' : 'Analysis & strategy',
           $lang==='fa' ? 'هفتگی' : 'Weekly'],
        ];
        foreach($tabs as $i=>[$key,$icon,$title,$sub,$count]): ?>
        <div class="acd-tab<?php echo $i===0?' active':''; ?>"
             role="tab"
             aria-selected="<?php echo $i===0?'true':'false'; ?>"
             data-tab="<?php echo $key; ?>"
             onclick="acdTab('<?php echo $key; ?>',this)">
          <div class="acd-tab-icon">
            <svg viewBox="0 0 24 24"><?php echo $icon; ?></svg>
          </div>
          <div class="acd-tab-info">
            <div class="acd-tab-title"><?php echo esc_html($title); ?></div>
            <div class="acd-tab-sub"><?php echo esc_html($sub); ?></div>
            <div class="acd-progress"><div class="acd-progress-fill" data-pct="<?php echo [100,75,60,50][$i]; ?>"></div></div>
          </div>
          <span class="acd-tab-count"><?php echo esc_html($count); ?></span>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Free badge -->
      <div class="acd-free-badge">
        <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/></svg>
        <div>
          <div class="acd-free-badge-text"><?php echo $lang==='fa' ? 'دسترسی رایگان' : '100% Free Access'; ?></div>
          <div class="acd-free-badge-sub"><?php echo $lang==='fa' ? 'برای تمامی مشتریان STB' : 'For all STB account holders'; ?></div>
        </div>
      </div>
    </div>

    <!-- RIGHT -->
    <div class="acd-right" id="acd-right">
      <!-- Content injected by JS based on active tab -->
    </div>

  </div>
</div>

<script>
(function(){
  var lang = '<?php echo $lang; ?>';
  var fa = lang === 'fa';

  var content = {
    courses: {
      featured: {
        tag:   fa ? '\u062f\u0648\u0631\u0647 \u0648\u06cc\u0698\u0647' : 'FEATURED COURSE',
        title: fa ? '\u0622\u0645\u0648\u0632\u0634 \u062a\u062d\u0644\u06cc\u0644 \u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644 \u0645\u0642\u062f\u0645\u0627\u062a\u06cc \u0628\u0631\u0648\u06a9\u0631' : 'Beginner Technical Analysis (Broker)',
        desc:  fa ? '\u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u0646\u0645\u0648\u062f\u0627\u0631\u060c \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0634\u0645\u0639\u06cc\u060c \u062d\u0645\u0627\u06cc\u062a \u0648 \u0645\u0642\u0627\u0648\u0645\u062a \u0648 \u0645\u0639\u0631\u0641\u06cc \u0627\u0646\u062f\u06cc\u06a9\u0627\u062a\u0648\u0631\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc. \u0634\u0631\u0648\u0639 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u062f\u0646\u06cc\u0627\u06cc \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0645\u0639\u0627\u0645\u0644\u0647\u200c\u062e\u0648\u0627\u0646.' : 'Chart basics, candlestick patterns, support and resistance, and the key indicators. The entry point into trading.',
        meta: [
          {icon:'<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke-width="1.5"/>', label: fa ? '\u0633\u0637\u062d \u06f1 \u00b7 \u0645\u0642\u062f\u0645\u0627\u062a\u06cc' : 'Level 1 \u00b7 Beginner'},
        ],
        cta: fa ? '\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f' : 'Start Now',
        href: '/NewSite/academy/',
      },
      items: [
        {badge:'course', title: fa ? '\u062f\u0648\u0631\u0647 \u0639\u0631\u0636\u0647 \u0648 \u062a\u0642\u0627\u0636\u0627 \u2014 S&D' : 'Supply & Demand \u2014 S&D', meta: fa ? '\u0633\u0637\u062d \u06f2 \u00b7 \u0645\u06cc\u0627\u0646\u06cc' : 'Level 2 \u00b7 Intermediate'},
        {badge:'course', title: fa ? '\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u067e\u06cc\u0634\u0631\u0641\u0627\u062a\u0647 RTM' : 'Advanced RTM', meta: fa ? '\u0633\u0637\u062d \u06f3 \u00b7 \u067e\u06cc\u0634\u0631\u0641\u0627\u062a\u0647' : 'Level 3 \u00b7 Advanced'},
        {badge:'course', title: fa ? '\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0648\u0627\u0644\u064a\u0648\u0645 \u062a\u0631\u064a\u062f\u064a\u0646\u06af' : 'Volume Trading', meta: fa ? '\u0633\u0637\u062d \u06f4 \u00b7 \u062d\u0631\u0641\u0627\u0626\u06cc' : 'Level 4 \u00b7 Professional'},
        {badge:'course', title: fa ? '\u062f\u064a\u062a\u0627\u0647\u0627\u06cc \u0627\u0642\u062a\u0635\u0627\u062f\u064a \u062a\u0623\u0628\u064a\u0631\u06af\u0630\u0627\u0631 \u062f\u0631 \u0641\u0627\u0631\u0643\u0633' : 'Market-Moving Economic Data', meta: fa ? '\u0631\u0627\u064a\u063a\u0627\u0646 \u00b7 \u06a9\u0627\u0631\u0628\u0631\u062f\u064a' : 'Free \u00b7 Practical'},
      ],
    },
    webinars: {
      featured: {
        tag:   fa ? '\u0648\u0628\u06cc\u0646\u0627\u0631 \u0628\u0639\u062f\u06cc' : 'NEXT WEBINAR',
        title: fa ? '\u0628\u0631\u0631\u0633\u06cc \u0639\u0645\u06cc\u0642 \u067e\u0644\u062a\u0641\u0631\u0645 MT5 \u2014 \u062c\u0644\u0633\u0647 \u0632\u0646\u062f\u0647' : 'MT5 Platform Deep Dive \u2014 Live Session',
        desc:  fa ? '\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a MT5 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0632\u0646\u062f\u0647. \u0645\u0646\u0627\u0633\u0628 \u062a\u0645\u0627\u0645 \u0633\u0637\u0648\u062d.' : 'Full walkthrough of MT5 capabilities with live trading demonstrations. Suitable for all levels.',
        meta: [
          {icon:'<rect x="3" y="4" width="18" height="18" rx="2" stroke-width="1.5"/><path d="M16 2v4M8 2v4M3 10h18" stroke-width="1.5" stroke-linecap="round"/>', label: fa ? '\u067e\u0646\u062c\u0634\u0646\u0628\u0647 \u06f2\u06f4 \u0627\u0633\u0641\u0646\u062f' : 'Thu 14 Mar'},
          {icon:'<circle cx="12" cy="12" r="10" stroke-width="1.5"/><path d="M12 8v4l3 3" stroke-width="1.5" stroke-linecap="round"/>', label:'14:00 UTC'},
          {icon:'<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke-width="1.5"/><circle cx="9" cy="7" r="4" stroke-width="1.5"/>', label: fa ? '\u0647\u0645\u0647 \u0633\u0637\u0648\u062d' : 'All levels'},
        ],
        cta: fa ? '\u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f' : 'Register Free',
        href: '/NewSite/webinars/',
      },
      items: [
        {badge:'webinar', title: fa ? '\u062a\u062d\u0644\u06cc\u0644 \u0647\u0641\u062a\u06af\u06cc \u0628\u0627\u0632\u0627\u0631 \u0641\u0627\u0631\u06a9\u0633' : 'Weekly Forex Market Analysis', meta: fa ? '\u0647\u0631 \u062f\u0648\u0634\u0646\u0628\u0647 \u00b7 \u06f4\u06f5 \u062f\u0642\u06cc\u0642\u0647' : 'Every Monday \u00b7 45 min'},
        {badge:'webinar', title: fa ? '\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u200c\u0647\u0627\u06cc \u0645\u0639\u0627\u0645\u0644\u0627\u062a\u06cc PAMM' : 'PAMM Trading Strategies', meta: fa ? '\u0636\u0628\u0637 \u0634\u062f\u0647 \u00b7 \u06f1\u0633\u0627\u0639\u062a \u06f2\u06f0\u062f\u0642\u06cc\u0642\u0647' : 'Recorded \u00b7 1h 20m'},
        {badge:'webinar', title: fa ? '\u0637\u0631\u0632 \u0641\u06a9\u0631 \u0645\u0639\u0627\u0645\u0644\u0627\u062a\u06cc: \u0630\u0647\u0646\u06cc\u062a \u0645\u0639\u0627\u0645\u0644\u0647\u200c\u06af\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc' : 'Professional Trader Mindset', meta: fa ? '\u0636\u0628\u0637 \u0634\u062f\u0647 \u00b7 \u06f5\u06f5 \u062f\u0642\u06cc\u0642\u0647' : 'Recorded \u00b7 55 min'},
      ],
    },
    encyclopedia: {
      featured: {
        tag:   fa ? '\u062f\u0627\u06cc\u0631\u0629\u0627\u0644\u0645\u0639\u0627\u0631\u0641' : 'ENCYCLOPEDIA',
        title: fa ? '\u0641\u0631\u0647\u0646\u06af \u062c\u0627\u0645\u0639 \u0627\u0635\u0637\u0644\u0627\u062d\u0627\u062a \u0645\u0639\u0627\u0645\u0644\u0627\u062a\u06cc \u0627\u0632 A \u062a\u0627 Z' : 'Complete Trading Glossary A\u2013Z',
        desc:  fa ? '\u0628\u06cc\u0634 \u0627\u0632 \u06f4\u06f5\u06f0 \u0627\u0635\u0637\u0644\u0627\u062d \u0645\u0639\u0627\u0645\u0644\u0627\u062a\u06cc \u0628\u0627 \u062a\u0639\u0627\u0631\u06cc\u0641 \u062f\u0642\u06cc\u0642\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0645\u0631\u062a\u062b\u0628 \u0628\u0627 MT5.' : 'Over 450 trading terms with precise definitions, practical examples and MT5 context.',
        meta: [
          {icon:'<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13" stroke-width="1.5"/>', label: fa ? '\u06f4\u06f5\u06f0+ \u0627\u0635\u0637\u0644\u0627\u062d' : '450+ Terms'},
          {icon:'<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="1.5"/>', label: fa ? '\u0642\u0627\u0628\u0644 \u062c\u0633\u062a\u062c\u0648' : 'Searchable'},
          {icon:'<path d="M4 6h16M4 12h16M4 18h7" stroke-width="1.5" stroke-linecap="round"/>', label: fa ? '\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647' : 'Categorised'},
        ],
        cta: fa ? '\u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0627\u0646\u0634\u0646\u0627\u0645\u0647' : 'Browse Encyclopedia',
        href: '/encyclopedia/',
      },
      items: [
        {badge:'article', title: fa ? '\u0627\u0633\u067e\u0631\u062d \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u061f' : 'What is Spread and How is it Calculated?', meta: fa ? '\u0645\u0637\u0627\u0644\u0639\u0647 \u06f3 \u062f\u0642\u06cc\u0642\u0647\u200c\u0627\u06cc' : '3 min read'},
        {badge:'article', title: fa ? '\u0644\u0648\u0631\u06cc\u062c: \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u06cc\u0627 \u0631\u06cc\u0633\u06a9\u06cc \u062e\u0637\u0631\u0646\u0627\u06a9\u061f' : 'Leverage: Powerful Tool or Dangerous Risk?', meta: fa ? '\u0645\u0637\u0627\u0644\u0639\u0647 \u06f5 \u062f\u0642\u06cc\u0642\u0647\u200c\u0627\u06cc' : '5 min read'},
        {badge:'article', title: fa ? '\u062a\u0648\u0636\u06cc\u062d \u0627\u062c\u0631\u0627\u06cc STP \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 ECN' : 'STP vs ECN Execution Explained', meta: fa ? '\u0645\u0637\u0627\u0644\u0639\u0647 \u06f4 \u062f\u0642\u06cc\u0642\u0647\u200c\u0627\u06cc' : '4 min read'},
      ],
    },
    articles: {
      featured: {
        tag:   fa ? '\u0645\u0642\u0627\u0644\u0647 \u0647\u0641\u062a\u0647' : 'ARTICLE OF THE WEEK',
        title: fa ? '\u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u06cc\u0633\u06a9 \u2014 \u0686\u0631\u0627 \u0645\u0639\u0627\u0645\u0644\u0647\u200c\u06af\u0631\u0627\u0646 \u0636\u0631\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f' : 'Risk Management \u2014 Why Traders Lose',
        desc:  fa ? '\u062a\u062d\u0644\u06cc\u0644\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0632 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627\u06cc\u062c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u06cc\u0633\u06a9 \u0648 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u062d\u0641\u0627\u0638\u062a \u0627\u0632 \u0633\u0631\u0645\u0627\u06cc\u0647.' : 'A comprehensive analysis of common risk management mistakes and practical methods to protect capital in volatile markets.',
        meta: [
          {icon:'<circle cx="12" cy="12" r="10" stroke-width="1.5"/><path d="M12 8v4l3 3" stroke-width="1.5" stroke-linecap="round"/>', label: fa ? '\u0645\u0637\u0627\u0644\u0639\u0647 \u06f7 \u062f\u0642\u06cc\u0642\u0647\u200c\u0627\u06cc' : '7 min read'},
          {icon:'<path d="M3 3v18h18" stroke-width="1.5"/><polyline points="7 16 11 10 15 14 19 7" stroke-width="1.5"/>', label: fa ? '\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc' : 'Strategy'},
          {icon:'<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>', label: fa ? '\u0647\u0645\u0647 \u0633\u0637\u0648\u062d' : 'All levels'},
        ],
        cta: fa ? '\u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u0627\u0644\u0647' : 'Read Article',
        href: '/NewSite/market-articles/',
      },
      items: [
        {badge:'article', title: fa ? '\u06f5 \u0627\u0644\u06af\u0648\u06cc \u0634\u0645\u0639\u06cc \u06a9\u0647 \u0647\u0631 \u0645\u0639\u0627\u0645\u0644\u0647\u200c\u06af\u0631\u06cc \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u062f' : '5 Candlestick Patterns Every Trader Must Know', meta: fa ? '\u06f6 \u062f\u0642\u06cc\u0642\u0647' : '6 min'},
        {badge:'article', title: fa ? '\u0686\u06af\u0648\u0646\u0647 \u0627\u062e\u0628\u0627\u0631 \u0627\u0642\u062a\u0635\u0627\u062f\u06cc \u0631\u0627 \u0645\u0639\u0627\u0645\u0644\u0647 \u06a9\u0646\u06cc\u0645' : 'How to Trade Economic News Events', meta: fa ? '\u06f8 \u062f\u0642\u06cc\u0642\u0647' : '8 min'},
        {badge:'article', title: fa ? '\u0631\u0648\u0627\u0646\u200c\u0634\u0646\u0627\u0633\u06cc \u0645\u0639\u0627\u0645\u0644\u0627\u062a\u06cc: \u06a9\u0646\u062a\u0631\u0644 \u0627\u062d\u0633\u0627\u0633\u0627\u062a' : 'Trading Psychology: Controlling Emotions', meta: fa ? '\u06f5 \u062f\u0642\u06cc\u0642\u0647' : '5 min'},
      ],
    },
  };

  function renderRight(key) {
    var d = content[key];
    if(!d) return;
    var metaHtml = '';
    d.featured.meta.forEach(function(m){
      metaHtml += '<div class="acd-meta-pill"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none">'+m.icon+'</svg>'+m.label+'</div>';
    });
    var html = '<div class="acd-featured" id="acd-featured">'
      + '<div class="acd-feat-grid"></div>'
      + '<div class="acd-feat-hud"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="rgba(20, 224, 163, 0.03)" stroke-width="0.5" stroke-dasharray="2 3"/><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(20, 224, 163, 0.02)" stroke-width="0.5"/><path d="M 50 5 L 50 95 M 5 50 L 95 50" stroke="rgba(20, 224, 163, 0.025)" stroke-width="0.5"/></svg></div>'
      + '<div class="acd-feat-corner top-left"></div>'
      + '<div class="acd-feat-corner top-right"></div>'
      + '<div class="acd-feat-corner bottom-left"></div>'
      + '<div class="acd-feat-corner bottom-right"></div>'
      + '<div class="acd-featured-tag"><svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-width="1.5"/></svg>'+d.featured.tag+'</div>'
      + '<div class="acd-featured-title">'+d.featured.title+'</div>'
      + '<div class="acd-featured-desc">'+d.featured.desc+'</div>'
      + '<div class="acd-featured-meta">'+metaHtml
      + '<a href="'+d.featured.href+'" class="acd-featured-cta">'+d.featured.cta
      + ' <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round"/></svg></a>'
      + '</div></div>';
    html += '<div class="acd-list">';
    d.items.forEach(function(item){
      html += '<div class="acd-item">'
        + '<span class="acd-item-badge '+item.badge+'">'+item.badge.toUpperCase()+'</span>'
        + '<div class="acd-item-title">'+item.title+'</div>'
        + '<div class="acd-item-meta">'+item.meta+'</div>'
        + '<div class="acd-item-arr"><svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke-width="1.5" stroke-linecap="round"/></svg></div>'
        + '</div>';
    });
    html += '</div>';
    document.getElementById('acd-right').innerHTML = html;
  }

  function animateBars(key) {
    var pcts = {courses:100, webinars:75, encyclopedia:60, articles:50};
    document.querySelectorAll('.acd-progress-fill').forEach(function(b){ b.style.width = '0'; });
    var activeTab = document.querySelector('.acd-tab[data-tab="'+key+'"]');
    if(activeTab) {
      setTimeout(function(){
        activeTab.querySelector('.acd-progress-fill').style.width = (pcts[key]||70)+'%';
      }, 100);
    }
  }

  window.acdTab = function(key, el) {
    document.querySelectorAll('.acd-tab').forEach(function(t){
      t.classList.remove('active'); t.setAttribute('aria-selected','false');
    });
    el.classList.add('active'); el.setAttribute('aria-selected','true');
    renderRight(key);
    animateBars(key);
  };

  renderRight('courses');
  setTimeout(function(){
    var first = document.querySelector('.acd-progress-fill');
    if(first) first.style.width = '100%';
  }, 300);
})();
</script>
</section>
