<?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="hts-wrap" id="how-to-start" aria-labelledby="hts-heading">
<video autoplay loop muted playsinline class="hts-bg-video">
  <source src="<?php echo get_template_directory_uri(); ?>/assets/video/how.mp4" type="video/mp4">
</video>
<style>
/* ═══════════════════════════════════════
   HOW TO START — Futuristic animated steps
═══════════════════════════════════════ */
.hts-wrap{
  background:#060809;padding:96px 0;
  position:relative;overflow:hidden;
}
.hts-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 100%,rgba(200,16,46,.07),transparent 70%);
  pointer-events:none;
  z-index:1;
}
.hts-bg-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  opacity:0.5;
}
.hts-inner{max-width:1280px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
@media(max-width:768px){.hts-inner{padding:0 20px}}

/* Header */
.hts-header{text-align:center;margin-bottom:72px}
.hts-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(200,16,46,.8);margin-bottom:14px;
}
.hts-kicker::before,.hts-kicker::after{content:'';display:block;width:28px;height:1px;background:rgba(200,16,46,.35)}
.hts-title{font-size:clamp(28px,3.5vw,44px);font-weight:700;color:#fff;margin-bottom:12px;line-height:1.15}
.hts-subtitle{font-size:15px;color:rgba(255,255,255,.45);max-width:460px;margin:0 auto}

/* Steps grid */
.hts-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
@media(max-width:768px){
  .hts-steps{grid-template-columns:1fr;gap:0}
}

/* Connector line between steps (desktop) */
.hts-steps::before{
  content:'';
  position:absolute;
  top:52px;left:calc(16.66% + 16px);right:calc(16.66% + 16px);
  height:1px;
  background:linear-gradient(90deg,rgba(200,16,46,.6),rgba(200,16,46,.2),rgba(200,16,46,.6));
  z-index:0;
}
@media(max-width:768px){.hts-steps::before{display:none}}

/* Animated travelling dot on connector */
.hts-connector-dot{
  position:absolute;
  top:46px;left:calc(16.66% + 16px);
  width:12px;height:12px;
  border-radius:50%;
  background:#C8102E;
  box-shadow:0 0 16px rgba(200,16,46,.8);
  z-index:2;
  animation:hts-travel 4s linear infinite;
}
@media(max-width:768px){.hts-connector-dot{display:none}}
@keyframes hts-travel{
  0%  {left:calc(16.66% + 16px);opacity:0}
  5%  {opacity:1}
  95% {opacity:1}
  100%{left:calc(83.33% - 28px);opacity:0}
}

/* Step card */
.hts-step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 32px;
  position:relative;z-index:1;
}
@media(max-width:768px){
  .hts-step{
    flex-direction:row;text-align:left;
    padding:24px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .hts-step:last-child{border-bottom:none}
}

/* Step number orb */
.hts-orb{
  width:104px;height:104px;
  border-radius:50%;
  position:relative;margin-bottom:32px;flex-shrink:0;
}
@media(max-width:768px){.hts-orb{width:64px;height:64px;margin-bottom:0;margin-right:20px}}

/* Rotating conic ring */
.hts-orb::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(200,16,46,.9) 0deg,rgba(200,16,46,.1) 120deg,transparent 180deg,rgba(200,16,46,.1) 240deg,rgba(200,16,46,.9) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:hts-spin var(--spin-dur,8s) linear infinite;
}
/* Different spin speeds per step */
.hts-step:nth-child(1) .hts-orb{--spin-dur:6s}
.hts-step:nth-child(2) .hts-orb{--spin-dur:9s}
.hts-step:nth-child(3) .hts-orb{--spin-dur:7s}
@keyframes hts-spin{to{transform:rotate(360deg)}}

/* Inner circle */
.hts-orb-inner{
  position:absolute;inset:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#0f1116,#0a0c10);
  border:1px solid rgba(200,16,46,.2);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;
}
.hts-orb-num{
  font-family:'Bebas Neue','IBM Plex Sans',sans-serif;
  font-size:30px;line-height:1;color:#fff;letter-spacing:.02em;
}
@media(max-width:768px){.hts-orb-num{font-size:20px}}
.hts-orb-label{
  font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(200,16,46,.7);
}

/* Scan line animation inside orb */
.hts-orb-scan{
  position:absolute;inset:8px;border-radius:50%;overflow:hidden;pointer-events:none;
}
.hts-orb-scan::after{
  content:'';position:absolute;
  left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,16,46,.5),transparent);
  animation:hts-scan 2.5s ease-in-out infinite;
  animation-delay:var(--scan-delay,0s);
}
.hts-step:nth-child(1) .hts-orb-scan{--scan-delay:0s}
.hts-step:nth-child(2) .hts-orb-scan{--scan-delay:-0.8s}
.hts-step:nth-child(3) .hts-orb-scan{--scan-delay:-1.6s}
@keyframes hts-scan{
  0%  {top:-1px;opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{top:100%;opacity:0}
}

/* Step content */
.hts-step-body{}
.hts-step-title{
  font-size:19px;font-weight:700;color:#fff;
  margin-bottom:10px;
}
@media(max-width:768px){.hts-step-title{font-size:16px;margin-bottom:6px}}
.hts-step-desc{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.45)}

/* Step bottom tags */
.hts-step-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-top:16px;
}
@media(max-width:768px){.hts-step-tags{justify-content:flex-start}}
.hts-tag{
  font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:20px;
  background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.18);
  color:rgba(200,16,46,.8);
}

/* Bottom CTA */
.hts-cta{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:64px;flex-wrap:wrap;
}
.hts-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 32px;border-radius:50px;
  font-size:14.5px;font-weight:700;
  background:#C8102E;color:#fff;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(200,16,46,.3);
  transition:all .25s var(--ease);
}
.hts-btn:hover{filter:brightness(1.1);transform:translateY(-1.5px);color:#fff;box-shadow:0 8px 30px rgba(200,16,46,.5)}
.hts-btn-ghost{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hts-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;transform:translateY(-1.5px)}

/* ── How-to-start RTL ── */
body.rtl .hts-wrap{direction:rtl}
body.rtl .hts-header{text-align:center}
body.rtl .hts-kicker{flex-direction:row-reverse;justify-content:flex-end}
/* Steps: reverse order so step 1 appears on RIGHT */
body.rtl .hts-steps{direction:rtl}
body.rtl .hts-step{text-align:right}
/* Mobile: step body right-aligned */
@media(max-width:768px){
  body.rtl .hts-step{text-align:right;flex-direction:row}
  body.rtl .hts-orb{margin-right:0;margin-left:20px}
  body.rtl .hts-step-body{text-align:right}
}
body.rtl .hts-step-title{text-align:center}
body.rtl .hts-step-desc{text-align:center}
/* Tags flow right to left */
body.rtl .hts-tags{flex-direction:row-reverse;justify-content:center}
/* CTA buttons — reverse */
body.rtl .hts-ctas{flex-direction:row-reverse;justify-content:center}
body.rtl .hts-cta-primary{flex-direction:row-reverse}
body.rtl .hts-cta-primary svg{transform:scaleX(-1)}
</style>

<div class="hts-inner">
  <div class="hts-header">
    <div class="hts-kicker"><?php echo $lang==='fa' ? 'چطور شروع کنید' : 'HOW TO START'; ?></div>
    <h2 class="hts-title" id="hts-heading">
      <?php echo $lang==='fa' ? 'سه قدم تا اولین معامله' : 'Three Steps to Your First Trade'; ?>
    </h2>
    <p class="hts-subtitle">
      <?php echo $lang==='fa' ? 'از صفر تا بازارهای جهانی — در کمتر از ۱۰ دقیقه.' : 'From zero to global markets — in under 10 minutes.'; ?>
    </p>
  </div>

  <div class="hts-steps">
    <!-- Travelling dot on connector -->
    <div class="hts-connector-dot" aria-hidden="true"></div>

    <?php
    $steps = $lang==='fa' ? [
      ['۰۱','ثبت‌نام','پروفایل STB خود را در چند دقیقه از طریق فرآیند امن ما ایجاد کنید.',['ایمیل','رمز عبور','کشور']],
      ['۰۲','احراز هویت','مدارک KYC خود را بارگذاری کنید. تأیید سریع — معمولاً کمتر از ۲۴ ساعت.',['پاسپورت','مدرک آدرس','سلفی']],
      ['۰۳','واریز و معامله','از روش دلخواه واریز کنید و فوری به ۳۵۰+ ابزار دسترسی داشته باشید.',['کارت بانکی','رمزارز','حواله']],
    ] : [
      ['01','Register','Create your STB profile in minutes through our secure onboarding process.',['Email','Password','Country']],
      ['02','Verify','Upload your KYC documents. Fast approval — typically under 24 hours.',['Passport','Proof of address','Selfie']],
      ['03','Fund & Trade','Deposit via your preferred method and access 350+ instruments instantly.',['Card','Crypto','Wire transfer']],
    ];
    foreach($steps as $s): ?>
    <div class="hts-step">
      <div class="hts-orb" aria-hidden="true">
        <div class="hts-orb-scan"></div>
        <div class="hts-orb-inner">
          <div class="hts-orb-num"><?php echo $s[0]; ?></div>
          <div class="hts-orb-label">STEP</div>
        </div>
      </div>
      <div class="hts-step-body">
        <div class="hts-step-title"><?php echo esc_html($s[1]); ?></div>
        <div class="hts-step-desc"><?php echo esc_html($s[2]); ?></div>
        <div class="hts-step-tags">
          <?php foreach($s[3] as $tag): ?>
          <span class="hts-tag"><?php echo esc_html($tag); ?></span>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>

  <div class="hts-cta">
    <a href="<?php echo esc_html($register_label_url);?>" class="hts-btn">
      <?php echo $lang==='fa' ? 'شروع کنید — رایگان' : 'Get Started — Free'; ?>
      <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>
    <a href="<?php echo esc_html($register_label_url);?>" class="hts-btn hts-btn-ghost">
      <?php echo $lang==='fa' ? 'ابتدا دمو رایگان را امتحان کنید' : 'Try Free Demo First'; ?>
    </a>
  </div>
</div>
</section>
