<div class="guide-page max-w-5xl mx-auto pb-12">

  <!-- HERO -->
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-brand via-brand-light to-brand-dark
              p-8 md:p-10 mb-10 shadow-xl ring-1 ring-white/5">
    <div class="absolute -top-24 -end-24 w-80 h-80 rounded-full bg-accent/10 blur-3xl"></div>
    <div class="absolute -bottom-20 -start-20 w-64 h-64 rounded-full bg-teal-400/10 blur-3xl"></div>
    <div class="relative z-10 text-center">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-accent/15 ring-2 ring-accent/30 mb-4">
        <i class="pi pi-truck text-accent text-3xl"></i>
      </div>
      <h1 class="text-3xl md:text-4xl font-extrabold text-white mb-3 tracking-tight">
        {{ 'PURCHASES_GUIDE.TITLE' | translate }}
      </h1>
      <p class="text-white/50 text-sm md:text-base max-w-2xl mx-auto leading-relaxed m-0">
        {{ 'PURCHASES_GUIDE.SUBTITLE' | translate }}
      </p>
      <div class="flex items-center justify-center gap-4 mt-6">
        <a routerLink="/purchases/dashboard"
           class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white/10 text-white text-sm font-bold
                  no-underline hover:bg-white/20 border border-white/10 transition-all">
          <i class="pi pi-arrow-right text-xs"></i> {{ 'PURCHASES_GUIDE.BACK_TO_DASHBOARD' | translate }}
        </a>
      </div>
    </div>
  </div>

  <!-- FLOW DIAGRAM -->
  <div class="bg-surface rounded-2xl border border-surface-border p-6 mb-10 shadow-sm">
    <h2 class="text-lg font-extrabold text-text-primary mb-3 flex items-center gap-2">
      <i class="pi pi-sitemap text-teal-500"></i>
      {{ 'PURCHASES_GUIDE.FLOW_TITLE' | translate }}
    </h2>
    <p class="text-sm text-text-muted leading-relaxed m-0 mb-5">
      {{ 'PURCHASES_GUIDE.FLOW_DESC' | translate }}
    </p>

    <!-- Visual flow -->
    <div class="flow-diagram">
      @for (phase of phases; track phase.number; let last = $last) {
        <button (click)="togglePhase(phase.number)"
                class="flow-step"
                [class.active]="expandedPhase() === phase.number">
          <span class="flow-num" [class]="phase.numberBg">{{ phase.number }}</span>
          <span class="flow-label">{{ phase.title | translate }}</span>
        </button>
        @if (!last) {
          <i class="pi pi-arrow-left flow-arrow"></i>
        }
      }
    </div>
  </div>

  <!-- ROADMAP TIMELINE -->
  <div class="roadmap">
    @for (phase of phases; track phase.number; let last = $last) {
      <div class="roadmap-phase" [class.expanded]="expandedPhase() === phase.number">

        <!-- Timeline connector -->
        <div class="timeline-track">
          <div class="timeline-node" [class]="phase.numberBg">
            <span class="text-white font-extrabold text-sm">{{ phase.number }}</span>
          </div>
          @if (!last) {
            <div class="timeline-line"></div>
          }
        </div>

        <!-- Phase Card -->
        <div class="phase-card" (click)="togglePhase(phase.number)">
          <!-- Header -->
          <div class="phase-header">
            <div class="flex items-center gap-3 flex-1 min-w-0">
              <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center shadow-lg"
                   [class]="phase.iconBg">
                <i [class]="phase.icon" class="text-white text-lg"></i>
              </div>
              <div class="flex-1 min-w-0">
                <h3 class="text-base font-extrabold text-text-primary m-0 leading-tight">
                  {{ phase.title | translate }}
                </h3>
                <p class="text-xs text-text-muted m-0 mt-0.5 leading-relaxed">
                  {{ phase.desc | translate }}
                </p>
              </div>
            </div>
            <i class="pi text-text-muted text-sm shrink-0 transition-transform duration-300"
               [class.pi-chevron-down]="expandedPhase() !== phase.number"
               [class.pi-chevron-up]="expandedPhase() === phase.number"></i>
          </div>

          <!-- Expandable Content -->
          @if (expandedPhase() === phase.number) {
            <div class="phase-body" (click)="$event.stopPropagation()">

              <!-- What & Why -->
              <div class="mb-5">
                <h4 class="text-sm font-extrabold text-text-primary mb-2 flex items-center gap-2">
                  <i class="pi pi-question-circle text-blue-500 text-xs"></i>
                  {{ 'PURCHASES_GUIDE.WHAT_AND_WHY' | translate }}
                </h4>
                <p class="text-xs text-text-muted leading-relaxed m-0 whitespace-pre-line">{{ phase.details | translate }}</p>
              </div>

              <!-- Scenarios -->
              <div class="mb-5">
                <h4 class="text-sm font-extrabold text-text-primary mb-2 flex items-center gap-2">
                  <i class="pi pi-lightbulb text-amber-500 text-xs"></i>
                  {{ 'PURCHASES_GUIDE.SCENARIOS' | translate }}
                </h4>
                <p class="text-xs text-text-muted leading-relaxed m-0 whitespace-pre-line">{{ phase.scenarios | translate }}</p>
              </div>

              <!-- Accounting Impact -->
              <div class="mb-5">
                <h4 class="text-sm font-extrabold text-text-primary mb-2 flex items-center gap-2">
                  <i class="pi pi-book text-emerald-500 text-xs"></i>
                  {{ 'PURCHASES_GUIDE.ACCOUNTING_IMPACT' | translate }}
                </h4>
                <p class="text-xs text-text-muted leading-relaxed m-0 whitespace-pre-line">{{ phase.accounting | translate }}</p>
              </div>

              <!-- Module Links -->
              <div>
                <h4 class="text-sm font-extrabold text-text-primary mb-3 flex items-center gap-2">
                  <i class="pi pi-link text-teal-500 text-xs"></i>
                  {{ 'PURCHASES_GUIDE.MODULES' | translate }}
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                  @for (link of phase.links; track link.route) {
                    <a [routerLink]="link.route"
                       class="group flex items-start gap-2.5 p-3 rounded-xl border border-surface-border
                              bg-surface-muted/30 no-underline transition-all duration-200"
                       [class]="phase.linkHover">
                      <div class="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center" [class]="phase.linkBg">
                        <i [class]="link.icon" class="text-xs"></i>
                      </div>
                      <div class="min-w-0">
                        <span class="text-xs font-bold text-text-primary block">{{ link.label | translate }}</span>
                        <span class="text-[0.65rem] text-text-muted leading-relaxed">{{ link.desc | translate }}</span>
                      </div>
                    </a>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- STATUS REFERENCE -->
  <div class="mt-10 bg-gradient-to-br from-teal-500/5 to-teal-500/0 rounded-2xl border border-teal-500/20 p-6 mb-10">
    <h2 class="text-lg font-extrabold text-text-primary mb-4 flex items-center gap-2">
      <i class="pi pi-tags text-teal-500"></i>
      {{ 'PURCHASES_GUIDE.STATUSES_TITLE' | translate }}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      @for (s of [
        { key: 'draft', icon: 'pi-file', color: 'bg-gray-500/10 text-gray-600' },
        { key: 'pending_approval', icon: 'pi-clock', color: 'bg-orange-500/10 text-orange-600' },
        { key: 'approved', icon: 'pi-check-circle', color: 'bg-green-500/10 text-green-600' },
        { key: 'confirmed', icon: 'pi-check', color: 'bg-teal-500/10 text-teal-600' },
        { key: 'posted', icon: 'pi-bolt', color: 'bg-emerald-500/10 text-emerald-700' },
        { key: 'partially_received', icon: 'pi-box', color: 'bg-blue-500/10 text-blue-600' },
        { key: 'received', icon: 'pi-check-square', color: 'bg-indigo-500/10 text-indigo-600' },
        { key: 'partially_paid', icon: 'pi-wallet', color: 'bg-amber-500/10 text-amber-700' },
        { key: 'paid', icon: 'pi-money-bill', color: 'bg-green-500/10 text-green-700' },
        { key: 'cancelled', icon: 'pi-ban', color: 'bg-red-500/10 text-red-600' }
      ]; track s.key) {
        <div class="flex items-start gap-2.5 p-3 rounded-xl bg-surface border border-surface-border">
          <div class="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center" [class]="s.color">
            <i class="pi" [class]="s.icon" style="font-size: 0.8rem"></i>
          </div>
          <div>
            <span class="text-xs font-bold text-text-primary block">{{ 'PURCHASES_GUIDE.STATUS_' + s.key.toUpperCase() | translate }}</span>
            <span class="text-[0.65rem] text-text-muted leading-relaxed">{{ 'PURCHASES_GUIDE.STATUS_' + s.key.toUpperCase() + '_DESC' | translate }}</span>
          </div>
        </div>
      }
    </div>
  </div>

  <!-- TIPS -->
  <div class="bg-gradient-to-br from-amber-500/5 to-amber-500/0 rounded-2xl border border-amber-500/20 p-6">
    <h2 class="text-lg font-extrabold text-text-primary mb-4 flex items-center gap-2">
      <i class="pi pi-star text-amber-500"></i>
      {{ 'PURCHASES_GUIDE.TIPS_TITLE' | translate }}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      @for (tip of [1,2,3,4,5,6]; track tip) {
        <div class="flex items-start gap-2.5 p-3 rounded-xl bg-surface border border-surface-border">
          <div class="shrink-0 w-7 h-7 rounded-lg bg-amber-500/10 flex items-center justify-center">
            <span class="text-amber-600 text-xs font-extrabold">{{ tip }}</span>
          </div>
          <p class="text-xs text-text-muted leading-relaxed m-0">{{ 'PURCHASES_GUIDE.TIP_' + tip | translate }}</p>
        </div>
      }
    </div>
  </div>

</div>
