<?php $lang = stb_lang(); 
$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/';
?>
<section class="stb-section acc-wrap" id="accounts" aria-labelledby="acc-heading">
<style>
/* ══════════════════════════════════
   ACCOUNTS SECTION — unified layout
══════════════════════════════════ */
.acc-wrap {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.acc-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.acc-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}
.acc-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, var(--bg) 90%),
              linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
}
.acc-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='0.75' fill='rgba(255, 255, 255, 0.02)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
.acc-wrap .stb-wrap {
  position: relative;
  z-index: 2;
}

/* ── Top header — full width ── */
.acc-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.acc-header .stb-h2{margin-bottom:14px}
.acc-header .stb-body{color:var(--muted)}

/* ── Tab switcher ── */
.acc-tabs{
  display:flex;justify-content:center;gap:4px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:50px;padding:4px;
  width:fit-content;margin:0 auto 48px;
}
.acc-tab{
  padding:10px 32px;border-radius:50px;
  font-size:13.5px;font-weight:700;
  color:var(--muted);border:none;background:none;
  cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;
}
.acc-tab.active{
  background:var(--red);color:#fff;
  box-shadow:0 4px 15px var(--red-glow);
}
.acc-tab:not(.active):hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ── Panel: retail accounts ── */
.acc-panel{display:none}
.acc-panel.active{display:block}

/* Retail: 2-col — cards left, details right */
.acc-retail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
@media(max-width:860px){.acc-retail-grid{grid-template-columns:1fr}}

/* Account cards — left column */
.acc-cards{display:flex;flex-direction:column;gap:10px}
.acc-card {
  background: rgba(13, 15, 17, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.acc-card::before, .acc-card::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-color: rgba(200, 16, 46, 0.35);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
  pointer-events: none;
}
.acc-card::before {
  top: 10px; left: 10px;
  border-width: 1.5px 0 0 1.5px;
}
.acc-card::after {
  bottom: 10px; right: 10px;
  border-width: 0 1.5px 1.5px 0;
}
.acc-card:hover::before, .acc-card:hover::after,
.acc-card.active::before, .acc-card.active::after {
  opacity: 1;
  border-color: var(--red);
}
body.rtl .acc-card::before {
  left: auto; right: 10px;
  border-width: 1.5px 1.5px 0 0;
}
body.rtl .acc-card::after {
  right: auto; left: 10px;
  border-width: 0 0 1.5px 1.5px;
}
.acc-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(13, 15, 17, 0.85);
  transform: translateY(-1px);
}
.acc-card.active {
  border-color: rgba(200, 16, 46, 0.5);
  background: rgba(200, 16, 46, 0.05);
  box-shadow: inset 0 0 20px rgba(200, 16, 46, 0.04);
}
.acc-card-left{}
.acc-card-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px}
.acc-card-meta{font-size:13px;color:var(--muted);line-height:1.5}
.acc-card-right{display:flex;align-items:center;gap:10px}
.acc-card-badge{
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  background:rgba(200,16,46,.12);color:var(--red);
  border:1px solid rgba(200,16,46,.25);white-space:nowrap;
}
.acc-card-arr{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s;
}
.acc-card:hover .acc-card-arr,.acc-card.active .acc-card-arr{background:rgba(200,16,46,.15)}
.acc-card-arr svg{stroke:var(--muted);fill:none;width:14px;height:14px}
.acc-card.active .acc-card-arr svg{stroke:var(--red)}

/* Detail panel — right column */
.acc-detail {
  background: rgba(13, 15, 17, 0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='rgba(255, 255, 255, 0.02)'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  position: sticky;
  top: calc(var(--hh) + 20px);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.acc-detail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 16, 46, 0.4), transparent);
}
.acc-detail-name{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.acc-detail-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.acc-detail-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:24px;
}
.acc-spec{
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;padding:14px;
}
.acc-spec-val{font-size:18px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.01em}
.acc-spec-label{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.acc-detail-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.acc-detail-feat{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;color:var(--muted);
}
.acc-detail-feat svg{stroke:var(--green);fill:none;width:14px;height:14px;flex-shrink:0}

/* ── Institutional panel ── */
.acc-inst-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:900px){.acc-inst-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.acc-inst-grid{grid-template-columns:1fr}}

.acc-inst-card {
  background: rgba(13, 15, 17, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 0;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.acc-inst-card::before, .acc-inst-card::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(200, 16, 46, 0.35);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
  pointer-events: none;
}
.acc-inst-card::before {
  top: 14px; left: 14px;
  border-width: 1.5px 0 0 1.5px;
}
.acc-inst-card::after {
  bottom: 14px; right: 14px;
  border-width: 0 1.5px 1.5px 0;
}
body.rtl .acc-inst-card::before {
  left: auto; right: 14px;
  border-width: 1.5px 1.5px 0 0;
}
body.rtl .acc-inst-card::after {
  right: auto; left: 14px;
  border-width: 0 0 1.5px 1.5px;
}
.acc-inst-card:hover {
  border-color: rgba(20, 224, 163, 0.25);
  transform: translateY(-3px);
  background: rgba(13, 15, 17, 0.85);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(20, 224, 163, 0.05);
}
.acc-inst-card:hover::before, .acc-inst-card:hover::after,
.acc-inst-card.featured::before, .acc-inst-card.featured::after {
  opacity: 1;
  border-color: var(--red);
}
.acc-inst-card.featured {
  border-color: rgba(200, 16, 46, 0.25);
  background: linear-gradient(155deg, rgba(200, 16, 46, 0.05), rgba(13, 15, 17, 0.65)),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='rgba(200, 16, 46, 0.05)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 12px 12px;
}
.acc-inst-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.15);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.acc-inst-icon svg{stroke:var(--red);fill:none;width:20px;height:20px}
.acc-inst-name{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.acc-inst-meta{font-size:13px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:18px}
.acc-inst-min{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--soft);
  padding:5px 0;border-top:1px solid var(--border);
  width:100%;margin-top:auto;
}
.acc-inst-min svg{stroke:var(--soft);fill:none;width:12px;height:12px}

/* ── CTA row ── */
.acc-cta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-top:40px;
  padding:28px 32px;
  background:rgba(13, 15, 17, 0.65);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:24px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.acc-cta-text{font-size:15px;color:var(--muted)}
.acc-cta-text strong{color:var(--text);display:block;font-size:18px;margin-bottom:4px}
.acc-cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── Accounts RTL ── */
body.rtl .acc-wrap{direction:rtl}
body.rtl .acc-header{text-align:right}
body.rtl .acc-card{text-align:right;align-items:flex-end}
body.rtl .acc-card-name{text-align:right}
body.rtl .acc-spec{flex-direction:row-reverse}
body.rtl .acc-spec-label{text-align:right}
body.rtl .acc-spec-val{text-align:left}
body.rtl .acc-detail-feat{flex-direction:row-reverse;text-align:right;justify-content:flex-end}
body.rtl .acc-detail-feat svg{margin-right:0;margin-left:8px}
body.rtl .acc-cta-row{flex-direction:row-reverse;justify-content:flex-end}
</style>

<div class="acc-video-bg">
  <video autoplay loop muted playsinline>
    <source src="<?php echo get_template_directory_uri(); ?>/assets/video/server.mp4" type="video/mp4">
  </video>
  <div class="acc-video-overlay"></div>
</div>

<div class="stb-wrap">

  <!-- Full-width header -->
  <div class="acc-header">
    <span class="stb-kicker"><?php echo $lang==='fa' ? 'حساب‌های معاملاتی' : 'TRADING ACCOUNTS'; ?></span>
    <h2 class="stb-h2" id="acc-heading">
      <?php echo $lang==='fa' ? 'حساب مناسب برای هر معامله‌گر' : 'The Right Account for Every Trader'; ?>
    </h2>
    <p class="stb-body">
      <?php echo $lang==='fa' ? 'از مبتدی تا سازمانی — هر حساب با شرایط شفاف، اسپرد خام و پشتیبانی اختصاصی.' : 'From beginner to institutional — every account with transparent conditions, raw spreads and dedicated support.'; ?>
    </p>
  </div>

  <!-- Tab switcher -->
  <div class="acc-tabs" role="tablist">
    <button class="acc-tab active" onclick="accTab('retail',this)" role="tab" aria-selected="true" data-panel="retail">
      <?php echo $lang==='fa' ? 'سرمایه دار خ‍‍‍‍‍‍‍‍رد (کم بودجه)' : 'Retail'; ?>
    </button>
    <button class="acc-tab" onclick="accTab('inst',this)" role="tab" aria-selected="false" data-panel="inst">
      <?php echo $lang==='fa' ? 'سرمایه دار سازمانی و کلان' : 'Institutional & HNW'; ?>
    </button>
  </div>

  <!-- ── RETAIL PANEL ── -->
  <div class="acc-panel active" id="acc-panel-retail">
    <div class="acc-retail-grid">

      <!-- Account cards -->
      <div class="acc-cards" id="acc-cards">
        <?php
        $accounts = $lang==='fa' ? [
          ['standard','حساب استاندارد','حداقل ۲۰$ · اسپرد پایین · مناسب مبتدیان','',''],
          ['ecn',     'حساب ECN',      'حداقل ۵۰$ · اسپرد خام ۰.۰ پیپ · معامله‌گران فعال',$lang==='fa' ? 'پرطرفدار' : 'Popular','featured'],
          ['prime',   'حساب پرایم',   'حداقل ۲٬۰۰۰$ · شرایط ممتاز · پیشرفته','',''],
          ['zero_mini','حساب Zero','حداقل ۱۵$ · اسپرد صفر · کمیسیون رقابتی','',''],
        ] : [
          ['standard','Standard Account','$20 min deposit · Low spreads · Beginner-friendly','',''],
          ['ecn',     'ECN Account',     '$50 min deposit · Raw 0.0 pip spreads · Active traders','Popular','featured'],
          ['prime',   'Prime Account',   '$2,000 min deposit · Premium conditions · Advanced','',''],
          ['zero_mini','Zero Account','$15 min deposit · Zero spreads · Competitive commission','',''],
        ];
        foreach($accounts as $i=>[$key,$name,$meta,$badge,$cls]): ?>
        <div class="acc-card<?php echo $cls?' '.$cls:''; ?><?php echo $i===0?' active':''; ?>"
             onclick="accSelect('<?php echo $key; ?>',this)"
             tabindex="0" role="button"
             aria-label="<?php echo esc_attr($name); ?>">
          <div class="acc-card-left">
            <div class="acc-card-name"><?php echo esc_html($name); ?></div>
            <div class="acc-card-meta"><?php echo esc_html($meta); ?></div>
          </div>
          <div class="acc-card-right">
            <?php if($badge): ?><span class="acc-card-badge"><?php echo esc_html($badge); ?></span><?php endif; ?>
            <div class="acc-card-arr">
              <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke-width="1.5" stroke-linecap="round"/></svg>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Detail panel -->
      <div class="acc-detail" id="acc-detail">
        <div class="acc-detail-name" id="acc-d-name">
          <?php echo $lang==='fa' ? 'حساب استاندارد' : 'Standard Account'; ?>
        </div>
        <div class="acc-detail-tag" id="acc-d-tag">
          <?php echo $lang==='fa' ? 'ایده‌آل برای تازه‌کاران' : 'Ideal for beginners'; ?>
        </div>
        <div class="acc-detail-specs" id="acc-d-specs"></div>
        <div class="acc-detail-features" id="acc-d-feats"></div>
        <a href="<?php echo esc_html($register_label_url);?>" class="stb-btn stb-btn-red" style="width:100%;justify-content:center">
          <?php echo $lang==='fa' ? 'افتتاح حساب' : 'Open Account'; ?>
        </a>
      </div>

    </div>
  </div>

  <!-- ── INSTITUTIONAL PANEL ── -->
  <div class="acc-panel" id="acc-panel-inst">
    <div class="acc-inst-grid">
      <?php
      $inst = $lang==='fa' ? [
        ['lp',    'LP Account',           'نقدینگی خام و اجرای سازمانی با مدیر حساب اختصاصی برای مشتریان با سرمایه بالا.',                true,  '$100,000','<path d="M18 20V10M12 20V4M6 20v-6" stroke-width="1.8" stroke-linecap="round"/>'],
        ['pamm',  'PAMM',                 'سرمایه‌گذاری در مدیران تأیید شده با ردیابی لحظه‌ای و وجوه کاملاً تفکیک‌شده.',               false, '$500',    '<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"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke-width="1.5"/>'],
        ['copy',  'کپی تریدینگ',          'معاملات معامله‌گران حرفه‌ای تأیید شده را به صورت خودکار و لحظه‌ای روی حساب خود کپی کنید.',  false, '$100',    '<path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'],
      ] : [
        ['lp',    'LP Account',           'Raw institutional pricing and execution with a dedicated relationship manager for HNW clients.',  true,  '$100,000','<path d="M18 20V10M12 20V4M6 20v-6" stroke-width="1.8" stroke-linecap="round"/>'],
        ['pamm',  'PAMM',                 'Invest in verified professional managers with real-time tracking and fully segregated funds.',      false, '$500',    '<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"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke-width="1.5"/>'],
        ['copy',  'Copy Trading',         'Automatically mirror the trades of verified professional traders on your account in real time.',  false, '$100',    '<path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'],
      ];
      foreach($inst as [$key,$name,$meta,$featured,$min,$icon_path]): ?>
      <div class="acc-inst-card<?php echo $featured?' featured':''; ?>">
        <div class="acc-inst-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none"><?php echo $icon_path; ?></svg>
        </div>
        <div class="acc-inst-name"><?php echo esc_html($name); ?></div>
        <div class="acc-inst-meta"><?php echo esc_html($meta); ?></div>
        <?php if($min): ?>
        <div class="acc-inst-min">
          <svg viewBox="0 0 24 24"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke-width="1.5" stroke-linecap="round"/></svg>
          <?php echo $lang==='fa' ? 'حداقل سپرده:' : 'Min deposit:'; ?> <?php echo $min; ?>
        </div>
        <?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>

  <!-- CTA bar — shared for both tabs -->
  <div class="acc-cta-row">
    <div class="acc-cta-text">
      <strong><?php echo $lang==='fa' ? 'آماده معامله هستید؟' : 'Ready to start trading?'; ?></strong>
      <?php echo $lang==='fa' ? 'ثبت‌نام در کمتر از ۵ دقیقه. بدون کارمزد پنهان.' : 'Register in under 5 minutes. No hidden fees.'; ?>
    </div>
    <div class="acc-cta-btns">
      <a href="<?php echo esc_html($register_label_url);?>" class="stb-btn stb-btn-red">
        <?php echo $lang==='fa' ? 'افتتاح حساب واقعی' : 'Open Live Account'; ?>
      </a>
      <a href="<?php echo esc_html($register_label_url);?>" class="stb-btn stb-btn-ghost">
        <?php echo $lang==='fa' ? 'شبیه‌ساز رایگان' : 'Try Free Demo'; ?>
      </a>
    </div>
  </div>

</div>

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

  var details = {
    standard: {
      name:  fa ? 'حساب استاندارد' : 'Standard Account',
      tag:   fa ? 'ایده‌آل برای مبتدی‌ها' : 'Ideal for beginners',
      specs: [
        [fa ? 'حداقل واریز' : 'Min Deposit','$20'],
        [fa ? 'اسپرد' : 'Spread', fa ? 'از ۰.۷ پیپ' : 'From 0.7 pip'],
        [fa ? 'لوریج' : 'Leverage','1:100 - 1:400'],
        [fa ? 'کمیسیون' : 'Commission', fa ? 'وجود ندارد' : '$0'],
      ],
      feats: fa
        ? ['MetaTrader 5','واریز حداقل ۲۰$','محافظت از موجودی منفی','پشتیبانی ۲۴/۷']
        : ['MetaTrader 5','$20 minimum deposit','Negative Balance Protection','24/7 Support'],
    },
    ecn: {
      name:  fa ? 'حساب ECN' : 'ECN Account',
      tag:   fa ? 'مناسب معامله‌گران حرفه‌ای' : 'For active traders',
      specs: [
        [fa ? 'حداقل واریز' : 'Min Deposit','$50'],
        [fa ? 'اسپرد' : 'Spread', fa ? 'از ۰.۲ پیپ' : 'From 0.2 pip'],
        [fa ? 'لوریج' : 'Leverage','1:100 - 1:400'],
        [fa ? 'کمیسیون' : 'Commission','$6/lot'],
      ],
      feats: fa
        ? ['اسپرد خام بدون مارکاپ','اجرای STP/ECN','کتاب عمق بازار','مناسب اسکالپینگ و EA']
        : ['Raw spreads, no markup','STP/ECN execution','Market Depth book','Scalping & EA friendly'],
    },
    prime: {
      name:  fa ? 'حساب Prime' : 'Prime Account',
      tag:   fa ? 'شرایط پریمیوم' : 'Premium conditions',
      specs: [
        [fa ? 'حداقل واریز' : 'Min Deposit','$2,000'],
        [fa ? 'اسپرد' : 'Spread', fa ? 'از 0 پیپ' : 'From 0 pip'],
        [fa ? 'لوریج' : 'Leverage','1:100 - 1:300'],
        [fa ? 'کمیسیون' : 'Commission','$6/lot'],
      ],
      feats: fa
        ? ['مدیر حساب اختصاصی','اولویت در پشتیبانی','دسترسی به کپی تریدینگ رایگان']
        : ['Dedicated account manager','Priority support','Free Copy Trading access'],
    },
    zero_mini: {
      name:  fa ? 'حساب Zero' : 'Zero Account',
      tag:   fa ? 'اسپرد صفر، مناسب معامله‌گران خرد' : 'Zero spreads, ideal for retail traders',
      specs: [
        [fa ? 'حداقل واریز' : 'Min Deposit','$15'],
        [fa ? 'اسپرد' : 'Spread', fa ? 'صفر' : 'Zero'],
        [fa ? 'لوریج' : 'Leverage', fa ? 'پویا / تا ۱:۲۰۰' : 'Dynamic / Up to 1:200'],
        [fa ? 'کمیسیون' : 'Commission', fa ? 'شروع از ۵$ / هر طرف' : 'From $5 / side'],
      ],
      feats: fa
        ? ['اسپرد صفر بدون مارکاپ','معامله جفت‌ارزها، فلزات، کریپتو و شاخص‌ها','محافظت از موجودی منفی','پشتیبانی ۲۴/۷']
        : ['Zero spreads, no markup','Trade FX, Metals, Crypto & Indices','Negative Balance Protection','24/7 Support'],
    },
  };

  function renderDetail(key) {
    var d = details[key];
    if(!d) return;
    document.getElementById('acc-d-name').textContent = d.name;
    document.getElementById('acc-d-tag').textContent  = d.tag;

    var specs = '';
    d.specs.forEach(function(s){
      specs += '<div class="acc-spec"><div class="acc-spec-val">'+s[1]+'</div><div class="acc-spec-label">'+s[0]+'</div></div>';
    });
    document.getElementById('acc-d-specs').innerHTML = specs;

    var feats = '';
    d.feats.forEach(function(f){
      feats += '<div class="acc-detail-feat"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'+f+'</div>';
    });
    document.getElementById('acc-d-feats').innerHTML = feats;
  }

  window.accSelect = function(key, el) {
    document.querySelectorAll('.acc-card').forEach(function(c){ c.classList.remove('active'); });
    el.classList.add('active');
    renderDetail(key);
  };

  window.accTab = function(panel, btn) {
    document.querySelectorAll('.acc-tab').forEach(function(t){
      t.classList.remove('active'); t.setAttribute('aria-selected','false');
    });
    btn.classList.add('active'); btn.setAttribute('aria-selected','true');
    document.querySelectorAll('.acc-panel').forEach(function(p){ p.classList.remove('active'); });
    document.getElementById('acc-panel-'+panel).classList.add('active');
  };

  renderDetail('standard');

  document.addEventListener('keydown', function(e){
    if((e.key==='Enter'||e.key===' ') && e.target.classList.contains('acc-card')){
      e.target.click();
    }
  });
})();
</script>
</section>
