<%
  const kpiPresentation = {
    orders: { icon: 'ti-receipt', accent: true },
    activeProducts: { icon: 'ti-package', accent: false },
    providers: { icon: 'ti-briefcase', accent: false },
    clients: { icon: 'ti-users', accent: false },
  };
%>
<section class="pf-section pf-section--kpis" aria-labelledby="pf-kpi-title">
  <header class="pf-section__head" data-final-heading>
    <div>
      <span class="pf-section__eyebrow"><b>01</b><%= t('sections.overviewEyebrow', 'المشهد العام') %></span>
      <h2 id="pf-kpi-title"><%= t('sections.kpisTitle', 'المؤشرات الرئيسية للسوق') %></h2>
      <p><%= t('sections.kpisSubtitle', 'أربع إشارات أساسية تختصر حجم المنصة وحركتها.') %></p>
    </div>
    <span class="pf-live-status"><i aria-hidden="true"></i><%= t('common.realData', 'بيانات مباشرة') %></span>
  </header>

  <div class="pf-kpi-band">
    <% kpis.forEach((kpi) => {
      const presentation = kpiPresentation[kpi.key] || { icon: 'ti-chart-bar', accent: false };
    %>
      <a
        class="pf-kpi <%= presentation.accent ? 'is-accent' : '' %>"
        href="<%= safeText(kpi.href, '#') %>"
        data-final-kpi
        data-kpi-key="<%= safeText(kpi.key, 'metric') %>">
        <div class="pf-kpi__top">
          <span class="pf-kpi__icon"><i class="ti <%= presentation.icon %>" aria-hidden="true"></i></span>
          <span class="pf-trend is-flat"><i class="ti ti-minus" aria-hidden="true"></i>0%</span>
        </div>
        <span class="pf-kpi__label"><%= t(`kpis.${kpi.key}.label`, safeText(kpi.key)) %></span>
        <strong
          class="pf-kpi__value"
          data-count-to="<%= safeNumber(kpi.value) %>"
          data-count-delay="<%= 760 + (kpis.indexOf(kpi) * 90) %>"><%= formatNumber(kpi.value) %></strong>
        <small><%= t(`kpis.${kpi.key}.helper`, '—') %></small>
      </a>
    <% }) %>
  </div>
</section>
