<%
  const pipeline = hero.pipeline && typeof hero.pipeline === 'object'
    ? hero.pipeline
    : { total: 0, stages: [] };
  const stages = Array.isArray(pipeline.stages) ? pipeline.stages : [];
%>
<section class="pf-hero" data-final-hero>
  <div class="pf-hero__intro">
    <span class="pf-eyebrow" data-hero-part>
      <i aria-hidden="true"></i>
      <%= t('hero.eyebrow', 'مركز عمليات كم تسوى') %>
    </span>
    <span class="pf-hero__edition" data-hero-part>
      <b>KT</b>
      MARKETPLACE COMMAND
    </span>
    <h1 data-hero-part><%= t('hero.title', 'إدارة السوق من مكان واحد') %></h1>
    <p data-hero-part><%= t('hero.subtitle', 'تابع الطلبات، المنتجات، المزادات، ومقدمي الخدمة بوضوح وسرعة.') %></p>

    <div class="pf-hero__chips" data-hero-part>
      <span>
        <i class="ti ti-calendar-event" aria-hidden="true"></i>
        <%= safeText(meta.dateLabel) %>
      </span>
    </div>

    <nav class="pf-hero-actions" aria-label="<%= t('quickActions.title', 'إجراءات سريعة') %>" data-hero-part>
      <a href="/dashboard/orders/new">
        <i class="ti ti-receipt" aria-hidden="true"></i>
        <%= t('quickActions.newOrders', 'الطلبات الجديدة') %>
      </a>
      <a href="/dashboard/providers/all">
        <i class="ti ti-user-check" aria-hidden="true"></i>
        <%= t('quickActions.providers', 'مراجعة مقدمي الخدمة') %>
      </a>
      <a href="/dashboard/auctions/wait">
        <i class="ti ti-gavel" aria-hidden="true"></i>
        <%= t('quickActions.auctions', 'مراجعة المزادات') %>
      </a>
    </nav>
  </div>

  <div class="pf-today" data-hero-part data-hero-visual>
    <header class="pf-today__head">
      <div>
        <span><%= t('hero.todayEyebrow', 'تشغيل اليوم') %></span>
        <strong><%= t('hero.todayTitle', 'نبض السوق المباشر') %></strong>
      </div>
    </header>

    <div class="pf-today__spotlight">
      <div class="pf-today__health">
        <span><%= t('hero.health', 'كفاءة عمليات السوق') %></span>
        <strong>
          <b data-count-to="<%= safeNumber(hero.healthPercent) %>" data-count-delay="620"><%= formatNumber(hero.healthPercent) %></b>
          <em>%</em>
        </strong>
      </div>
      <div class="pf-today__volume">
        <span><%= t('hero.todayMovement', 'حركة اليوم') %></span>
        <strong>
          <b data-count-to="<%= safeNumber(hero.todayOrders) %>" data-count-delay="700"><%= formatNumber(hero.todayOrders) %></b>
          <%= t('common.orders', 'طلباً') %>
        </strong>
      </div>
    </div>

    <div class="pf-today__pipeline-wrap" data-pipeline>
      <div>
        <span><%= t('pipeline.title', 'توزيع حركة الطلبات') %></span>
        <small><%= t('pipeline.today', 'منذ بداية اليوم') %></small>
      </div>
      <div class="pf-today__pipeline" aria-label="<%= t('pipeline.title', 'توزيع حركة الطلبات') %>">
        <% stages.forEach((stage) => { %>
          <i class="is-<%= stage.tone %>" style="--pf-progress:<%= safeNumber(stage.percent) %>%"></i>
        <% }) %>
      </div>
      <div class="pf-today__legend">
        <% stages.forEach((stage) => { %>
          <span><%= t(`status.orders.${stage.key}`, safeText(stage.key)) %></span>
        <% }) %>
      </div>
    </div>
  </div>
</section>
