{{-- @param array $setupHub ContractSetupHubService::hubForUser の戻り値 --}}
@push('styles')
@include('partials._setup_hub_tile_styles')
<style>
.setup-tile-icon--contract {
  background: linear-gradient(135deg, rgba(111, 66, 193, 0.18), rgba(13, 110, 253, 0.08));
  color: #5a32a3;
}
.setup-tile-icon--seal {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.16), rgba(220, 53, 69, 0.05));
  color: #b02a37;
}
</style>
@endpush

<section class="mb-4" id="contract-setup" aria-labelledby="contract-setup-heading">
  <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
    <div>
      <h2 class="h5 fw-semibold mb-1" id="contract-setup-heading"><i class="bi bi-sliders me-2 text-primary"></i>契約書の準備</h2>
      <p class="text-muted small mb-0">送付前に登録しておく項目です。初期設定と同様、未設定の項目はバッジで分かります。</p>
    </div>
    @if($setupHub['allReady'])
      <span class="badge rounded-pill setup-tile-badge--done px-3 py-2">準備完了</span>
    @else
      <span class="badge rounded-pill setup-tile-badge--attention px-3 py-2">未完了あり</span>
    @endif
  </div>

  @if(! $setupHub['allReady'])
    <div class="alert alert-light border small mb-3">
      <strong>おすすめの順番</strong>：① 会社情報を登録 → ② 印影とメールテンプレートを確認。契約書作成時の<strong>送信担当者</strong>は、登録した会社情報から選べます。
    </div>
  @endif

  <div class="setup-card-grid">
    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--company" aria-hidden="true"><i class="bi bi-building"></i></div>
      <span class="setup-tile-badge setup-tile-badge--{{ $setupHub['companyCard']['variant'] }}">{{ $setupHub['companyCard']['label'] }}</span>
      <h3 class="setup-tile-title">会社情報</h3>
      <p class="setup-tile-desc">
        送信者の会社名・代表者・連絡先を登録します。署名依頼情報（ステップ2）の<strong>送信担当者</strong>候補になり、メールの <span class="font-monospace">%送信者会社名%</span> などにも使います。
        @if($setupHub['defaultBusiness'])
          <span class="d-block mt-2 text-body">既定：<strong>{{ $setupHub['defaultBusiness']->displayName() }}</strong></span>
        @endif
      </p>
      <div class="setup-tile-actions">
        <a href="{{ route('setting.business') }}" class="btn btn-outline-secondary w-100">会社情報を設定</a>
      </div>
    </article>

    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--seal" aria-hidden="true"><i class="bi bi-patch-check"></i></div>
      <span class="setup-tile-badge setup-tile-badge--{{ $setupHub['contractSettingsCard']['variant'] }}">{{ $setupHub['contractSettingsCard']['label'] }}</span>
      <h3 class="setup-tile-title">印影・メールテンプレート</h3>
      <p class="setup-tile-desc">
        契約印の画像（最大3件）と、送付・リマインド・期限切れ時のメール文面（件名・本文）を登録します。新規アカウントでは送付メールの既定文面が入っています。
        @if($setupHub['sealCount'] > 0)
          <span class="d-block mt-2 text-body">印影：<strong>{{ $setupHub['sealCount'] }}</strong> 件登録済み</span>
        @endif
      </p>
      <div class="setup-tile-actions d-grid gap-2">
        <a href="{{ route('contract.settings.edit') }}" class="btn btn-outline-secondary w-100">契約書設定を開く</a>
        @if($setupHub['sealCount'] < \App\Models\ContractSealImage::MAX_PER_USER)
          <a href="{{ route('contract.settings.edit') }}#contract-seals" class="btn btn-link btn-sm text-decoration-none">印影を追加する</a>
        @endif
      </div>
    </article>
  </div>
</section>