<?php $lang = stb_lang(); ?>
<section class="eco-wrap" id="ecosystem" aria-labelledby="eco-heading">
<style>
/* ═══════════════════════════════════════
   STB ECOSYSTEM — Hub centred, 5 cards orbit
   Desktop: radial layout, hub in middle
   Mobile:  vertical stack
═══════════════════════════════════════ */
.eco-wrap{
  background:#04060a;
  padding:96px 0 80px;
  position:relative;overflow:hidden;
}
.eco-wrap::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(200,16,46,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,16,46,.03) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none;
}
.eco-inner{max-width:1100px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
@media(max-width:768px){.eco-inner{padding:0 20px}}

/* Header */
.eco-header{text-align:center;margin-bottom:64px}
.eco-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,16,46,.8);margin-bottom:14px;
}
.eco-kicker::before,.eco-kicker::after{content:'';display:block;width:32px;height:1px;background:rgba(200,16,46,.4)}
.eco-title{font-size:clamp(28px,3.5vw,44px);font-weight:700;color:#fff;margin-bottom:10px}
.eco-title em{font-style:normal;color:#C8102E}
.eco-subtitle{font-size:15px;color:rgba(255,255,255,.45);max-width:500px;margin:0 auto;line-height:1.7}

/* ═══════════════════════════
   RADIAL STAGE — desktop
═══════════════════════════ */
.eco-stage{
  position:relative;
  width:100%;
  /* height set by JS to match content */
  height:560px;
  margin-bottom:48px;
}
@media(max-width:900px){.eco-stage{display:none}}

/* SVG overlay */
.eco-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}

/* Hub — absolutely centred by JS */
.eco-hub{
  position:absolute;
  width:140px;height:140px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#181c24,#0a0d12);
  border:1px solid rgba(200,16,46,.35);
  box-shadow:
    0 0 0 16px rgba(200,16,46,.04),
    0 0 0 32px rgba(200,16,46,.02),
    0 0 60px rgba(200,16,46,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;z-index:10;
  transform:translate(-50%,-50%); /* positioned by JS via left/top */
}
/* Spinning conic ring */
.eco-hub::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(200,16,46,.9) 0deg,rgba(200,16,46,.05) 80deg,
    transparent 140deg,
    rgba(200,16,46,.05) 200deg,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:eco-spin 7s linear infinite;
}
@keyframes eco-spin{to{transform:rotate(360deg)}}
.eco-hub-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(200,16,46,.18);
  animation:eco-ring var(--rd,4s) var(--rde,0s) ease-out infinite;
}
@keyframes eco-ring{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.eco-hub img{
  position:relative;z-index:1;
  filter:brightness(0) invert(1);
  width:70px;height:auto;
  object-fit:contain;
  /* slight glow to match the red theme */
  drop-shadow:0 0 12px rgba(200,16,46,.4);
}

/* Cards — absolutely positioned by JS */
.eco-card {
  position: absolute;
  width: 186px;
  background: rgba(10, 12, 16, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 18px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: border-color .25s, transform .25s, box-shadow .25s;
  z-index: 5;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.eco-card::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 6px; height: 6px;
  border-width: 0 1.5px 1.5px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s, border-color 0.3s;
  pointer-events: none;
}
.eco-card:hover::after, .eco-card.active::after {
  opacity: 1;
  border-color: var(--cc, #C8102E);
}
/* Top accent line */
.eco-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:2px 2px 0 0;
  background:var(--cc,#C8102E);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.eco-card:hover::before,.eco-card.active::before{transform:scaleX(1)}
.eco-card:hover,.eco-card.active{
  border-color:var(--cc,#C8102E);
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px var(--cc,#C8102E);
}
.eco-card-icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  transition:background .25s,border-color .25s;
}
.eco-card:hover .eco-card-icon,.eco-card.active .eco-card-icon{
  background:rgba(200,16,46,.1);border-color:var(--cc,#C8102E);
}
.eco-card-icon svg{stroke:var(--cc,rgba(255,255,255,.35));fill:none;width:19px;height:19px}
.eco-card-name{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.2}
.eco-card-tag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cc,rgba(255,255,255,.3));opacity:.85}

/* ═══════════════════════════
   MOBILE STACK
═══════════════════════════ */
.eco-mobile{display:none}
@media(max-width:900px){.eco-mobile{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}}
.eco-mob-card {
  background: rgba(10, 12, 16, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px; padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: border-color .2s;
  position: relative;
  overflow: hidden;
}
.eco-mob-card::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 6px; height: 6px;
  border-width: 0 1.5px 1.5px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s, border-color 0.3s;
  pointer-events: none;
}
.eco-mob-card:hover::after, .eco-mob-card.active::after {
  opacity: 1;
  border-color: var(--cc, #C8102E);
}
.eco-mob-card:hover, .eco-mob-card.active { border-color: var(--cc, #C8102E); }
.eco-mob-icon{
  width:42px;height:42px;border-radius:10px;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;
}
.eco-mob-icon svg{stroke:var(--cc,rgba(255,255,255,.35));fill:none;width:19px;height:19px}
.eco-mob-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.eco-mob-tag{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cc,rgba(255,255,255,.3));opacity:.85}
.eco-mob-arr{margin-left:auto;color:rgba(255,255,255,.2)}
.eco-mob-arr svg{stroke:currentColor;fill:none;width:15px;height:15px}

/* ═══════════════════════════
   DETAIL PANEL
═══════════════════════════ */
.eco-detail {
  background: rgba(10, 12, 16, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(255, 255, 255, 0.015)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px; padding: 36px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  position: relative; overflow: hidden;
  transition: border-color .3s;
}
@media(max-width:700px){.eco-detail{grid-template-columns:1fr;gap:24px;padding:24px 20px}}
.eco-detail::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--eco-dc,#C8102E),transparent);
  transition:background .4s;
}
.eco-detail-glow{
  position:absolute;top:-60px;right:-60px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--eco-dc-rgb,rgba(200,16,46,.15)),transparent 65%);
  opacity:.5;pointer-events:none;
}
.eco-detail-icon{
  width:50px;height:50px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.eco-detail-icon svg{stroke:var(--eco-dc,#C8102E);fill:none;width:23px;height:23px;transition:stroke .3s}
.eco-detail-name{font-size:22px;font-weight:700;color:#fff;margin-bottom:4px}
.eco-detail-div{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eco-dc,#C8102E);margin-bottom:14px;transition:color .3s}
.eco-detail-desc{font-size:14px;line-height:1.75;color:rgba(255,255,255,.5);margin-bottom:18px}
.eco-detail-feats{display:flex;flex-direction:column;gap:8px}
.eco-detail-feat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.5)}
.eco-detail-feat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--eco-dc,#C8102E);flex-shrink:0}
.eco-detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.eco-stat-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:14px}
.eco-stat-val{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:3px}
.eco-stat-label{font-size:10px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.07em}
.eco-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:10px;
  font-size:13.5px;font-weight:600;
  background:var(--eco-dc,#C8102E);color:#fff;
  text-decoration:none;transition:filter .2s,transform .15s,background .3s;
}
.eco-cta:hover{filter:brightness(1.12);transform:translateY(-1px);color:#fff}
.eco-cta svg{stroke:#fff;fill:none;width:13px;height:13px}
/* Dots */
.eco-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.eco-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.eco-dot.active{transform:scale(1.4);background:var(--eco-dc,#C8102E)}

/* ── Ecosystem RTL ── */
body.rtl .eco-wrap{direction:rtl}
body.rtl .eco-header{text-align:center}
body.rtl .eco-kicker{flex-direction:row-reverse;justify-content:flex-end}
body.rtl .eco-title{text-align:center}
body.rtl .eco-desc{text-align:right}
body.rtl .eco-card{text-align:right}
body.rtl .eco-card-name{text-align:right}
body.rtl .eco-card-sub{text-align:right}
</style>

<!-- Background glow -->
<div style="position:absolute;width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(200,16,46,.07),transparent 65%);filter:blur(60px);pointer-events:none" aria-hidden="true"></div>

<div class="eco-inner">

  <!-- Header -->
  <div class="eco-header">
    <div class="eco-kicker">STB GROUP</div>
    <h2 class="eco-title" id="eco-heading">
      <?php echo $lang==='fa' ? 'اکوسیستم <em>STB</em>' : 'The <em>STB</em> Ecosystem'; ?>
    </h2>
    <p class="eco-subtitle">
      <?php echo $lang==='fa' ? 'پنج دپارتمان یکپارچه با یک چشم‌انداز. از کارگزاری تا آموزش، سرمایه‌گذاری و انجمن  تریدرها.' : 'Five integrated divisions. One vision. From brokerage to education, investment and community.'; ?>
    </p>
  </div>

  <?php
  $divs = [
    ['brokers',   '#C8102E',
     '<path d="M3 3v18h18" stroke-width="1.5"/><polyline points="7 16 11 10 15 14 19 7" stroke-width="1.5"/>',
     'STB Brokers',
     $lang==='fa' ? 'کارگزاری فارکس و CFD' : 'Forex & CFD Brokerage',
     $lang==='fa' ? 'یک کارگزار فارکس و CFD تحت نظارت با سیولت نهادی، اجرای 0.125 ثانیه و 180+ ابزار در MetaTrader 5.' : 'A Trusted Forex & CFD broker with institutional liquidity, 0.125s execution and 180+ instruments on MetaTrader 5.',
     $lang==='fa'?['۱۸۰+ ابزار CFD و اسپات','اجرای ۰.۱۲۵ ثانیه','حساب‌های استاندارد، ECN، پرایم','مورد اعتماد · وجوه تفکیک‌شده']:['180+ CFD & Spot instruments','0.125s avg execution','Standard, ECN, Prime & LP accounts','Trusted · Segregated funds'],
     [['180+','Instruments'],['0.0','Min Spread'],['1:300','Leverage'],['24/7','Support']],
     '/NewSite/trading-accounts/',$lang==='fa' ? 'مشاهده حساب‌ها' : 'View Accounts'],
    ['investment','#C8102E',
     '<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"/>',
     'STB Investment',
     $lang==='fa' ? 'سرمایه‌گذاری مدیریت‌شده' : 'Managed Investment',
     $lang==='fa' ? 'سرمایه خود را به مدیران PAMM تأیید‌شده بسپارید. پایش لحظه‌ای، سود متناسب، شفافیت کامل.' : 'Allocate capital to verified PAMM managers. Real-time tracking, proportional earnings, full transparency.',
     $lang==='fa'?['مدیران PAMM تأیید شده','داشبورد لحظه‌ای','تخصیص و برداشت آزاد','وجوه تفکیک‌شده']:['Verified PAMM managers','Real-time dashboard','Flexible allocation','Fully segregated funds'],
     [['PAMM','Platform'],['Real','Time'],['0%','Hidden Fees'],['Full','Transparency']],
     '/NewSite/pamm/',$lang==='fa' ? 'سرمایه‌گذاری در PAMM' : 'Invest in PAMM'],
    // ['venture',   '#14e0a3',
    //  '<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-width="1.5" stroke-linecap="round"/>',
    //  'STB Venture',
    //  $lang==='fa' ? 'پراپ تریدینگ' : 'Proprietary Trading',
    //  $lang==='fa' ? 'مراحل ارزیابی را پشت سر بگذارید، سرمایه دریافت کنید و تا ۹۰٪ سود را برای خودتان نگه دارید. بدون ریسک سرمایه شخصی.' : 'Pass the evaluation, get funded, keep up to 90% of profits. No personal capital at risk.',
    //  $lang==='fa'?['تقسیم سود تا ۹۰٪','مقیاس تا ۴ میلیون دلار','بدون محدودیت زمانی','پرداخت دو هفتگی']:['Up to 90% profit split','Scale to $4M funded','No time limit','Bi-weekly payouts'],
    //  [['90%','Profit Split'],['$4M','Max Scale'],['10%','Max DD'],['0','Time Limit']],
    //  '/NewSite/venture/',$lang==='fa' ? 'شروع چالش' : 'Start Challenge'],
    ['academy',   '#14e0a3',
     '<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"/>',
     'STB Academy',
     $lang==='fa' ? 'آموزش معاملاتی' : 'Trading Education',
     $lang==='fa' ? 'یک اکوسیستم آموزشی کامل و رایگان. دوره‌ها، وبینارهای زنده، دانشنامه و مقالات - برای همه سطوح.' : 'A complete, free educational ecosystem. Courses, live webinars, encyclopedia and articles — for all levels.',
     $lang==='fa'?['۵ دوره ساختاریافته','وبینارهای زنده','دانشنامه ۴۵۰+ اصطلاح','رایگان برای مشتریان']:['5 structured courses','Live + on-demand webinars','450+ term encyclopedia','Free for all clients'],
     [['5','Courses'],['450+','Terms'],['Live','Webinars'],['Free','Access']],
     '/NewSite/academy/',$lang==='fa' ? 'ورود به آکادمی' : 'Enter Academy'],
    ['society',   '#C8102E',
     '<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"/>',
     'STB Society',
     $lang==='fa' ? 'انجمن و مشارکت' : 'Community & Partnership',
     $lang==='fa' ? 'جامعه خصوصی تریدرها. برنامه IB، همکاری در فروش، سفیر برند و فروشگاه انجمن.' : 'The STB community. IB programme, affiliate, brand ambassador and community shop.',
     $lang==='fa'?['کمیسیون مادام‌العمر IB','CPA، RevShare، ترکیبی','پورتال شریک لحظه‌ای','برنامه سفیر']:['Lifetime IB commissions','CPA, RevShare & Hybrid','Real-time partner portal','Brand Ambassador'],
     [['IB','Programme'],['CPA','RevShare'],['Live','Tracking'],['3+','Tiers']],
     '/NewSite/ib/',$lang==='fa' ? 'شریک تجاری شوید' : 'Become a Partner'],
  ];
  ?>

  <!-- DESKTOP radial stage -->
  <div class="eco-stage" id="eco-stage">
    <svg class="eco-svg" id="eco-svg" aria-hidden="true"></svg>

    <!-- Hub — JS will position this dead centre -->
    <div class="eco-hub" id="eco-hub" onclick="ecoSelect(null)"
         role="button" tabindex="0" aria-label="STB Group">
      <div class="eco-hub-ring" style="width:190px;height:190px;--rd:3.5s;--rde:0s"></div>
      <div class="eco-hub-ring" style="width:190px;height:190px;--rd:3.5s;--rde:-1.75s"></div>
      <img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png"
           alt="STB Group" width="72" height="74"
           style="position:relative;z-index:1;filter:brightness(0) invert(1);object-fit:contain">
    </div>

    <!-- Cards — JS will position these -->
    <?php foreach($divs as $d): ?>
    <div class="eco-card" style="--cc:<?php echo $d[1]; ?>"
         data-id="<?php echo $d[0]; ?>"
         onclick="ecoSelect('<?php echo $d[0]; ?>')"
         role="button" tabindex="0"
         aria-label="<?php echo esc_attr($d[3]); ?>">
      <div class="eco-card-icon">
        <svg viewBox="0 0 24 24"><?php echo $d[2]; ?></svg>
      </div>
      <div class="eco-card-name"><?php echo esc_html($d[3]); ?></div>
      <div class="eco-card-tag"><?php echo esc_html($d[4]); ?></div>
    </div>
    <?php endforeach; ?>
  </div>

  <!-- MOBILE stack -->
  <div class="eco-mobile">
    <?php foreach($divs as $d): ?>
    <div class="eco-mob-card" style="--cc:<?php echo $d[1]; ?>"
         onclick="ecoSelect('<?php echo $d[0]; ?>')"
         role="button" tabindex="0">
      <div class="eco-mob-icon">
        <svg viewBox="0 0 24 24"><?php echo $d[2]; ?></svg>
      </div>
      <div>
        <div class="eco-mob-name"><?php echo esc_html($d[3]); ?></div>
        <div class="eco-mob-tag"><?php echo esc_html($d[4]); ?></div>
      </div>
      <div class="eco-mob-arr"><svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke-width="1.5" stroke-linecap="round"/></svg></div>
    </div>
    <?php endforeach; ?>
  </div>

  <!-- Detail panel -->
  <div class="eco-detail" id="eco-detail" style="--eco-dc:#C8102E">
    <div class="eco-detail-glow" id="eco-glow"></div>
    <div>
      <div class="eco-detail-icon"><svg viewBox="0 0 24 24" id="eco-d-svg" stroke="currentColor" fill="none" width="23" height="23"><?php echo $divs[0][2]; ?></svg></div>
      <div class="eco-detail-name" id="eco-d-name"><?php echo esc_html($divs[0][3]); ?></div>
      <div class="eco-detail-div"  id="eco-d-div"><?php echo esc_html($divs[0][4]); ?></div>
      <div class="eco-detail-desc" id="eco-d-desc"><?php echo esc_html($divs[0][5]); ?></div>
      <div class="eco-detail-feats" id="eco-d-feats">
        <?php foreach($divs[0][6] as $f): ?><div class="eco-detail-feat"><?php echo esc_html($f); ?></div><?php endforeach; ?>
      </div>
    </div>
    <div>
      <div class="eco-detail-stats" id="eco-d-stats">
        <?php foreach($divs[0][7] as $s): ?><div class="eco-stat-box"><div class="eco-stat-val"><?php echo esc_html($s[0]); ?></div><div class="eco-stat-label"><?php echo esc_html($s[1]); ?></div></div><?php endforeach; ?>
      </div>
      <a href="<?php echo esc_url($divs[0][8]); ?>" class="eco-cta" id="eco-d-cta">
        <?php echo esc_html($divs[0][9]); ?>
        <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round"/></svg>
      </a>
    </div>
  </div>

  <!-- Dot nav -->
  <div class="eco-dots" id="eco-dots">
    <?php foreach($divs as $i=>$d): ?>
    <button class="eco-dot<?php echo $i===0?' active':''; ?>"
            onclick="ecoSelect('<?php echo $d[0]; ?>')"
            style="<?php echo $i===0?'--eco-dc:'.$d[1]:''; ?>"
            aria-label="<?php echo esc_attr($d[3]); ?>"></button>
    <?php endforeach; ?>
  </div>

</div>

<script>
(function(){

var DATA = <?php
  $out=[];
  foreach($divs as $d){
    $out[$d[0]]=['color'=>$d[1],'icon'=>$d[2],'name'=>$d[3],'tag'=>$d[4],'desc'=>$d[5],'feats'=>$d[6],'stats'=>$d[7],'url'=>$d[8],'cta'=>$d[9]];
  }
  echo json_encode($out,JSON_UNESCAPED_UNICODE);
?>;

var ORDER   = ['brokers','investment','venture','academy','society'];
var current = 'brokers';
var timer   = null;

/* ──────────────────────────────────────
   LAYOUT: place hub dead centre, cards around it
   Your sketch positions (normalised, from centre):
     brokers    → top centre          angle = -90° (12 o'clock)
     investment → left middle         angle = -150° (10 o'clock)
     venture    → right middle        angle = -30°  (2 o'clock)
     academy    → bottom-left         angle = 150°  (7 o'clock)
     society    → bottom-right        angle = 30°   (5 o'clock)
   radius from hub centre to card centre = 200px
────────────────────────────────────── */
var ANGLES = {
  brokers:    -90,   // top (12 o'clock)
  investment: -162,  // top-left (10 o'clock)
  venture:    -18,   // top-right (2 o'clock)
  academy:    126,   // bottom-left (7 o'clock)
  society:    54,    // bottom-right (5 o'clock)
};
var RADIUS = 230; // px from hub to card centre

function deg2rad(d){ return d * Math.PI / 180; }

function layout(){
  var stage = document.getElementById('eco-stage');
  var hub   = document.getElementById('eco-hub');
  if(!stage||!hub) return;

  var W  = stage.offsetWidth;
  var cx = W / 2;
  // Hub centred: cards extend RADIUS in all directions
  // Max Y extent = RADIUS * max(|sin(angle)|) across all 5 angles
  // pentagon sin values: sin(-90)=-1, sin(-162)=-0.309, sin(-18)=-0.309, sin(126)=0.809, sin(54)=0.809
  // top extent = RADIUS * 1 = RADIUS (brokers going up)
  // bottom extent = RADIUS * 0.809 (academy/society going down)
  var cardH  = 120; // approximate card half-height
  var padV   = 40;
  var topExt = RADIUS + cardH + padV;
  var botExt = Math.round(RADIUS * 0.85) + cardH + padV;
  var stageH = topExt + botExt;
  stage.style.height = stageH + 'px';
  var cy = topExt; // hub y = exactly the top extent from top

  // Position hub
  hub.style.left = cx + 'px';
  hub.style.top  = cy + 'px';

  // Position each card
  ORDER.forEach(function(id){
    var card = document.querySelector('.eco-card[data-id="'+id+'"]');
    if(!card) return;
    var ang = deg2rad(ANGLES[id]);
    var tx  = cx + RADIUS * Math.cos(ang);
    var ty  = cy + RADIUS * Math.sin(ang);
    card.style.left = tx + 'px';
    card.style.top  = ty + 'px';
  });

  drawLines(current);
}

/* ──────────────────────────────────────
   DRAW SVG signal lines hub → cards
────────────────────────────────────── */
function drawLines(activeId){
  var svg   = document.getElementById('eco-svg');
  var stage = document.getElementById('eco-stage');
  var hub   = document.getElementById('eco-hub');
  if(!svg||!stage||!hub) return;

  var cx = parseFloat(hub.style.left);
  var cy = parseFloat(hub.style.top);
  var out = '';

  ORDER.forEach(function(id){
    var card = document.querySelector('.eco-card[data-id="'+id+'"]');
    if(!card) return;
    var tx = parseFloat(card.style.left);
    var ty = parseFloat(card.style.top);
    var d  = DATA[id];
    var col= d.color;
    var isAct = id === activeId;

    // Base dashed line
    out += '<line x1="'+cx+'" y1="'+cy+'" x2="'+tx+'" y2="'+ty+'"'
      +' stroke="rgba(255,255,255,0.07)" stroke-width="1" stroke-dasharray="4 8"/>';

    if(isAct){
      // Bright solid line
      out += '<line x1="'+cx+'" y1="'+cy+'" x2="'+tx+'" y2="'+ty+'"'
        +' stroke="'+col+'" stroke-width="1.5" opacity="0.65"/>';

      // 3 travelling signal dots
      [0, 0.34, 0.67].forEach(function(off){
        var dur   = 1.8;
        var delay = -(off * dur).toFixed(2);
        out += '<circle r="3.5" fill="'+col+'" opacity="0.9">'
          +'<animateMotion dur="'+dur+'s" begin="'+delay+'s" repeatCount="indefinite"'
          +' path="M '+cx+' '+cy+' L '+tx+' '+ty+'"/>'
          +'<animate attributeName="opacity" values="0;1;1;0.2;0" keyTimes="0;0.05;0.9;0.97;1"'
          +' dur="'+dur+'s" begin="'+delay+'s" repeatCount="indefinite"/>'
          +'</circle>';
      });

      // Pulsing card endpoint
      out += '<circle cx="'+tx+'" cy="'+ty+'" r="4.5" fill="'+col+'" opacity="0.8">'
        +'<animate attributeName="r" values="4;7;4" dur="2s" repeatCount="indefinite"/>'
        +'<animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite"/>'
        +'</circle>';
    } else {
      out += '<circle cx="'+tx+'" cy="'+ty+'" r="3" fill="rgba(255,255,255,0.1)"/>';
    }
  });

  // Hub centre pulse
  out += '<circle cx="'+cx+'" cy="'+cy+'" r="5" fill="'+DATA[activeId].color+'">'
    +'<animate attributeName="opacity" values="0.9;0.4;0.9" dur="2s" repeatCount="indefinite"/>'
    +'</circle>';

  svg.innerHTML = out;
}

/* ──────────────────────────────────────
   SELECT DIVISION — update detail + lines
────────────────────────────────────── */
window.ecoSelect = function(id){
  if(!id) id = current;
  current = id;
  var d = DATA[id];
  var col = d.color;

  // Detail panel
  document.getElementById('eco-detail').style.setProperty('--eco-dc', col);
  document.getElementById('eco-glow').style.background =
    'radial-gradient(circle,'+col+'22,transparent 65%)';
  document.getElementById('eco-d-svg').innerHTML  = d.icon;
  document.getElementById('eco-d-name').textContent = d.name;
  document.getElementById('eco-d-div').textContent  = d.tag;
  document.getElementById('eco-d-desc').textContent = d.desc;

  var fe = document.getElementById('eco-d-feats');
  fe.innerHTML = '';
  fe.style.setProperty('--eco-dc', col);
  d.feats.forEach(function(f){ var el=document.createElement('div');el.className='eco-detail-feat';el.textContent=f;fe.appendChild(el); });

  var se = document.getElementById('eco-d-stats');
  se.innerHTML = '';
  d.stats.forEach(function(s){ se.innerHTML+='<div class="eco-stat-box"><div class="eco-stat-val">'+s[0]+'</div><div class="eco-stat-label">'+s[1]+'</div></div>'; });

  var cta = document.getElementById('eco-d-cta');
  cta.href = d.url; cta.style.background = col;
  cta.childNodes[0].textContent = d.cta+' ';

  // Cards highlight
  document.querySelectorAll('.eco-card,.eco-mob-card').forEach(function(c){
    c.classList.toggle('active', c.getAttribute('data-id')===id||c.getAttribute('onclick').includes("'"+id+"'"));
  });

  // Dots
  document.querySelectorAll('.eco-dot').forEach(function(dot,i){
    var isA = ORDER[i]===id;
    dot.classList.toggle('active',isA);
    if(isA) dot.style.setProperty('--eco-dc',col);
  });

  drawLines(id);
};

/* ──────────────────────────────────────
   AUTO CYCLE + keyboard + resize
────────────────────────────────────── */
function startCycle(){
  timer = setInterval(function(){
    ecoSelect(ORDER[(ORDER.indexOf(current)+1)%ORDER.length]);
  },5000);
}

document.querySelectorAll('.eco-card,.eco-dot,.eco-mob-card').forEach(function(el){
  el.addEventListener('keydown',function(e){ if(e.key==='Enter'||e.key===' '){e.preventDefault();el.click();} });
});

document.addEventListener('DOMContentLoaded',function(){
  layout();
  ecoSelect('brokers');
  startCycle();
  window.addEventListener('resize',function(){ layout(); drawLines(current); });
  var stage = document.getElementById('eco-stage');
  if(stage){
    stage.addEventListener('mouseenter',function(){ clearInterval(timer); });
    stage.addEventListener('mouseleave', startCycle);
  }
});

})();
</script>
</section>
