<?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="brk-wrap" id="broker" aria-labelledby="brk-heading">
<style>
/* ═══════════════════════════════════════════
   STB BROKER — Clean Professional Layout
   Split Grid Structure (Inspired by PAMM)
   Scoped to .brk-wrap
═══════════════════════════════════════════ */
.brk-wrap {
  background: #060809;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.brk-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.brk-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.brk-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 10%, #060809 90%),
              linear-gradient(to bottom, #060809 0%, transparent 20%, transparent 80%, #060809 100%);
}

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

/* ── 2-COLUMN GRID ── */
.brk-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 64px;
}
@media (max-width: 1024px) {
  .brk-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ── LEFT COLUMN ── */
.brk-text-content {
  display: flex;
  flex-direction: column;
}
.brk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 18, 51, 0.9);
  margin-bottom: 16px;
}
.brk-kicker-line { width: 24px; height: 1px; background: rgba(220, 18, 51, 0.5); }
.brk-title {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.brk-title em {
  font-style: normal;
  color: #dc1233;
}
.brk-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40px;
  max-width: 520px;
}

/* Trust Metrics Grid (2x2) */
.brk-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
}
@media(max-width:480px){ .brk-trust-grid { grid-template-columns: 1fr; } }
.brk-trust-item {
  background: rgba(20, 22, 26, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.brk-trust-item:hover {
  background: rgba(25, 28, 33, 0.6);
  border-color: rgba(220, 18, 51, 0.2);
  transform: translateY(-2px);
}
.brk-trust-val {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.brk-trust-val span {
  color: #dc1233;
  font-size: 20px;
}
.brk-trust-label {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Buttons */
.brk-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.brk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: #dc1233;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.brk-btn-primary:hover {
  background: #f01438;
  box-shadow: 0 8px 25px rgba(220, 18, 51, 0.3);
  color: #fff;
  transform: translateY(-2px);
}
.brk-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.brk-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

.brk-reg-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(20, 224, 163, 0.05);
  border: 1px solid rgba(20, 224, 163, 0.15);
  width: fit-content;
}
.brk-reg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #14e0a3; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(20, 224, 163, 0.5);
  position: relative;
}
.brk-reg-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(20, 224, 163, 0.4);
  animation: brk-pulse-ring 2s infinite ease-out;
}
@keyframes brk-pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
.brk-reg-text { font-size: 13px; font-weight: 500; color: #14e0a3; margin:0;}
.brk-reg-sub { font-size: 11px; color: rgba(20, 224, 163, 0.6); margin: 2px 0 0 0;}

/* ── RIGHT COLUMN (CARDS) ── */
.brk-visual-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.brk-card {
  background: rgba(20, 22, 26, 0.5);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(220, 18, 51, 0.3);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transition: all 0.4s ease;
}
.brk-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(220, 18, 51, 0.08), transparent 60%);
  pointer-events: none;
}
.brk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px rgba(0,0,0,0.5), 0 0 40px rgba(220, 18, 51, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(220, 18, 51, 0.8);
}

/* Exec Speed Card */
.brk-exec-header {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}
.brk-exec-speed {
  font-size: 64px; font-weight: 800; color: #fff;
  line-height: 1; margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.brk-exec-speed em { font-style: normal; font-size: 32px; color: #dc1233; }

.brk-exec-vis {
  position: relative; height: 32px; display: flex; align-items: center; margin-bottom: 32px;
}
.brk-exec-track {
  flex: 1; height: 1px; background: rgba(255,255,255,0.1);
  position: relative; overflow: hidden; margin: 0 16px;
}
.brk-exec-track::after {
  content: ''; position: absolute; top: -1px; left: -20%; width: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, #dc1233, transparent);
  animation: brk-sweep 1.5s ease-in-out infinite;
}
@keyframes brk-sweep { 0% { left: -30%; } 100% { left: 110%; } }
.brk-exec-icon { width: 24px; height: 24px; color: rgba(255,255,255,0.3); }
.brk-exec-icon.red { color: #dc1233; }
.brk-exec-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }

.brk-exec-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media(max-width:540px) { .brk-exec-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.brk-exec-stat-val { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.brk-exec-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }

/* Instruments Card */
.brk-inst-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media(max-width:540px) { .brk-inst-grid-inner { grid-template-columns: 1fr; } }
.brk-inst-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.brk-inst-icon {
  width: 32px; height: 32px; color: rgba(220,18,51,0.8);
  background: rgba(220,18,51,0.1); padding: 6px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brk-inst-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.brk-inst-info h4 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px 0; }
.brk-inst-info h4 span { color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 400; margin-left: 8px; }
.brk-inst-info p { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.5; }

/* ── BOTTOM FEATURES ── */
.brk-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media(max-width:1024px) { .brk-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:540px) { .brk-feat-grid { grid-template-columns: 1fr; } }
.brk-feat-panel {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
  transition: border-color 0.3s ease;
}
.brk-feat-panel:hover { border-top-color: #dc1233; }
.brk-feat-icon { width: 24px; height: 24px; color: #dc1233; margin-bottom: 16px; }
.brk-feat-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.brk-feat-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.brk-feat-sub { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.6; }


/* RTL Support */
body.rtl .brk-wrap { direction: rtl; }
body.rtl .brk-kicker { flex-direction: row-reverse; justify-content: flex-end; }
body.rtl .brk-title, body.rtl .brk-desc { text-align: right; }
body.rtl .brk-reg-status { flex-direction: row-reverse; }
body.rtl .brk-reg-text, body.rtl .brk-reg-sub { text-align: right; margin-right: 12px; margin-left:0; }
body.rtl .brk-exec-header, body.rtl .brk-exec-speed, body.rtl .brk-exec-stat-val, body.rtl .brk-exec-stat-label { text-align: right; }
body.rtl .brk-inst-info h4 { text-align: right; }
body.rtl .brk-inst-info h4 span { margin-right: 8px; margin-left: 0; }
body.rtl .brk-inst-info p { text-align: right; }
body.rtl .brk-feat-title, body.rtl .brk-feat-sub { text-align: right; }
</style>

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

<div class="brk-inner">

  <div class="brk-grid">
    <!-- LEFT -->
    <div class="brk-text-content">
      <div class="brk-kicker">
        <span class="brk-kicker-line"></span>
        STB BROKERS
        <span class="brk-kicker-line"></span>
      </div>
      <h2 class="brk-title" id="brk-heading">
        <?php echo $lang==='fa' ? 'زیرساخت‌هایی که<br><em>متخصصان انتخاب می‌کنند</em>' : 'Infrastructure That<br><em>Professionals Choose</em>'; ?>
      </h2>
      <p class="brk-desc">
        <?php echo $lang==='fa' ? 'متصل به بهترین نهادهای مالی، اجرای سریع در ۰.۱۲۵ ثانیه و ۳۵۰+ ابزار روی MetaTrader 5. بدون دخل و تصرف در قیمت.' : 'A Trusted Forex & CFD broker with institutional liquidity, real 0.125s execution, and 350+ instruments on MetaTrader 5. No dealing desk.'; ?>
      </p>

      <div class="brk-trust-grid">
        <?php $metrics = $lang==='fa' ? [
          ['۳۵۰<span>+</span>','ابزار معاملاتی'],
          ['۰.۰','اسپرد خام (پیپ)'],
          ['۱:۴۰۰','حداکثر اهرم'],
          ['۲۴<span>/۷</span>','پشتیبانی حرفه‌ای'],
        ] : [
          ['350<span>+</span>','Instruments'],
          ['0.0','Raw Spread (pips)'],
          ['1:400','Max Leverage'],
          ['24<span>/7</span>','Pro Support'],
        ];
        foreach($metrics as $m): ?>
        <div class="brk-trust-item">
          <div class="brk-trust-val"><?php echo $m[0]; ?></div>
          <div class="brk-trust-label"><?php echo esc_html($m[1]); ?></div>
        </div>
        <?php endforeach; ?>
      </div>

      <div class="brk-btns">
        <a href="<?php echo esc_html($register_label_url);?>" class="brk-btn-primary"><?php echo $lang==='fa' ? 'افتتاح حساب واقعی' : 'Open Live Account'; ?></a>
        <a href="<?php echo esc_html($register_label_url);?>" class="brk-btn-secondary"><?php echo $lang==='fa' ? 'شبیه‌ساز رایگان' : 'Try Free Demo'; ?></a>
      </div>

      <div class="brk-reg-status">
        <div class="brk-reg-dot"></div>
        <div>
          <div class="brk-reg-text"><?php echo $lang==='fa' ? 'مورد اعتماد و فعال' : 'Trusted &amp; Active'; ?></div>
          <div class="brk-reg-sub"><?php echo $lang==='fa' ? 'وجوه مشتریان تفکیک‌شده · محافظت از موجودی منفی' : 'Client funds segregated · Negative Balance Protection'; ?></div>
        </div>
      </div>
    </div>

    <!-- RIGHT -->
    <div class="brk-visual-content">
      
      <!-- Exec Card -->
      <div class="brk-card">
        <div class="brk-exec-header"><?php echo $lang==='fa' ? 'سرعت اجرای سفارش' : 'Order Execution Speed'; ?></div>
        <div class="brk-exec-speed">0.125<em>s</em></div>
        
        <div class="brk-exec-vis">
          <div class="brk-exec-icon red"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" stroke-width="2"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2" stroke-width="1.5" stroke-linecap="round"/></svg></div>
          <div class="brk-exec-track"></div>
          <div class="brk-exec-icon"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>

        <div class="brk-exec-stats">
          <div><div class="brk-exec-stat-val">STP/ECN</div><div class="brk-exec-stat-label"><?php echo $lang==='fa' ? 'نوع اجرا' : 'Execution Type'; ?></div></div>
          <div><div class="brk-exec-stat-val">NDD</div><div class="brk-exec-stat-label"><?php echo $lang==='fa' ? 'بدون دخالت' : 'No Dealing Desk'; ?></div></div>
          <div><div class="brk-exec-stat-val">Tier-1</div><div class="brk-exec-stat-label"><?php echo $lang==='fa' ? 'نقدینگی' : 'Liquidity'; ?></div></div>
          <div><div class="brk-exec-stat-val">&lt;1ms</div><div class="brk-exec-stat-label"><?php echo $lang==='fa' ? 'تأخیر' : 'Latency'; ?></div></div>
        </div>
      </div>

      <!-- Instruments Card -->
      <div class="brk-card">
        <div class="brk-exec-header"><?php echo $lang==='fa' ? 'کلاس‌های دارایی' : 'Asset Classes'; ?></div>
        <div class="brk-inst-grid-inner">
          <?php
          $inst = $lang==='fa' ? [
            ['forex','60+','فارکس','جفت‌های اصلی، فرعی و اگزوتیک'],
            ['indices','10+','شاخص‌ها','US30، NAS100، DAX40 و بیشتر'],
            ['commodities','10+','کالاها','طلا، نقره، نفت خام'],
            ['crypto','50+','رمزارز','BTC، ETH و CFDهای اصلی'],
            ['equities','200+','سهام','AAPL، NVDA، TSLA، AMZN'],
            ['spot','5+','اسپات','BTC، ETH، طلا — بدون سواپ'],
          ] : [
            ['forex','60+','Forex','Majors, minors & exotics'],
            ['indices','10+','Indices','US30, NAS100, DAX40 & more'],
            ['commodities','10+','Commodities','Gold, Silver, Crude Oil'],
            ['crypto','50+','Crypto','BTC, ETH & major CFDs'],
            ['equities','200+','Equities','AAPL, NVDA, TSLA, AMZN'],
            ['spot','5+','Spot','BTC, ETH, Gold — zero swap'],
          ];

          function get_inst_icon($id) {
            switch($id) {
              case 'forex': return '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>';
              case 'indices': return '<polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/>';
              case 'commodities': return '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>';
              case 'crypto': return '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>';
              case 'equities': return '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>';
              case 'spot': return '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/>';
              default: return '<circle cx="12" cy="12" r="10"/>';
            }
          }

          foreach($inst as $item): ?>
          <div class="brk-inst-item">
            <div class="brk-inst-icon"><svg viewBox="0 0 24 24"><?php echo get_inst_icon($item[0]); ?></svg></div>
            <div class="brk-inst-info">
              <h4><?php echo esc_html($item[2]); ?> <span><?php echo esc_html($item[1]); ?></span></h4>
              <p><?php echo esc_html($item[3]); ?></p>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>

    </div>
  </div> <!-- /brk-grid -->

  <!-- Bottom Features Grid -->
  <div class="brk-feat-grid">
    <?php $feats = $lang==='fa' ? [
        [
          'icon' => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
          'title' => 'امنیت تضمین‌شده',
          'sub' => 'وجوه تفکیک‌شده مشتریان و محافظت در برابر موجودی منفی.'
        ],
        [
          'icon' => '<path d="M3 3v18h18"/><polyline points="7 16 11 10 15 14 19 7"/>',
          'title' => 'نقدینگی عمیق',
          'sub' => 'اتصال به ارائه‌دهندگان نقدینگی ردیف یک با اجرای بدون لغزش.'
        ],
        [
          'icon' => '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
          'title' => 'پلتفرم MetaTrader 5',
          'sub' => 'دسترسی کامل به ابزارهای تحلیل و پشتیبانی از ربات‌های معاملاتی.'
        ],
        [
          'icon' => '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
          'title' => 'کارمزدهای شفاف',
          'sub' => 'بدون هزینه‌های پنهان. کمیسیون‌های رقابتی با اسپرد خام.'
        ],
      ] : [
        [
          'icon' => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
          'title' => 'Trusted & Secure',
          'sub' => 'Segregated client funds and Negative Balance Protection.'
        ],
        [
          'icon' => '<path d="M3 3v18h18"/><polyline points="7 16 11 10 15 14 19 7"/>',
          'title' => 'Deep Liquidity',
          'sub' => 'Tier-1 providers with low latency execution and zero slippage.'
        ],
        [
          'icon' => '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
          'title' => 'MetaTrader 5',
          'sub' => 'Full market depth, analysis tools, and algo trading support.'
        ],
        [
          'icon' => '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
          'title' => 'Transparent Fees',
          'sub' => 'No hidden costs. Fixed low commissions with raw interbank pricing.'
        ],
      ];
      foreach($feats as $f): ?>
      <div class="brk-feat-panel">
        <div class="brk-feat-icon"><svg viewBox="0 0 24 24"><?php echo $f['icon']; ?></svg></div>
        <div class="brk-feat-title"><?php echo esc_html($f['title']); ?></div>
        <div class="brk-feat-sub"><?php echo esc_html($f['sub']); ?></div>
      </div>
      <?php endforeach; ?>
  </div>

</div>
</section>
