@php
  $activeStep = (int) ($activeStep ?? 1);
@endphp
<nav class="contract-create-stepper mb-4" aria-label="契約書作成の進捗">
  <ol class="contract-create-stepper-list list-unstyled d-flex flex-wrap justify-content-center gap-2 gap-md-4 mb-0">
    @foreach([
      1 => '文書のアップロード',
      2 => '署名依頼情報を入力',
      3 => '署名位置の設定',
      4 => '確認して送信',
    ] as $num => $label)
      <li class="contract-create-step {{ $activeStep === $num ? 'is-active' : ($activeStep > $num ? 'is-done' : '') }}">
        <span class="contract-create-step-dot" aria-hidden="true">
          @if($activeStep > $num)<i class="bi bi-check-lg contract-create-step-check"></i>@endif
        </span>
        <span class="contract-create-step-label">{{ $label }}</span>
      </li>
    @endforeach
  </ol>
  @if(!empty($stepHint))
    <p class="text-center text-muted small mt-2 mb-0">{!! $stepHint !!}</p>
  @endif
</nav>

@once
@push('styles')
<style>
.contract-create-stepper-list { padding: 0; }
.contract-create-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 8.5rem;
  text-align: center;
  color: #adb5bd;
}
.contract-create-step.is-active { color: var(--primary, #6c5ce7); }
.contract-create-step.is-done { color: #6c757d; }
.contract-create-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contract-create-step-check {
  font-size: 0.7rem;
  color: #fff;
  line-height: 1;
}
.contract-create-step.is-active .contract-create-step-dot {
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.contract-create-step.is-done .contract-create-step-dot { background: currentColor; border-color: currentColor; }
.contract-create-step-label { font-size: 0.72rem; line-height: 1.3; }
</style>
@endpush
@endonce