@if (arc) {
  <div class="view-page">
    <header class="view-header">
      <div>
        <h1>
          @if (arc.icon) {
            <lucide-icon [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
          }
          {{ arc.name }}
        </h1>
        <p class="view-subtitle">
          {{ (arc.type === 'HUB' ? 'arcView.subtitleHub' : 'arcView.subtitleLinear') | translate }}
        </p>
      </div>
      <div class="view-actions">
        <button type="button" class="btn-primary" (click)="editMode()">
          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
          {{ 'common.edit' | translate }}
        </button>
        <button type="button" class="btn-danger" (click)="deleteArc()" [title]="'arcView.deleteTitle' | translate">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          {{ 'common.delete' | translate }}
        </button>
      </div>
    </header>
    <!-- Illustrations (rendu editorial magazine) -->
    @if ((arc.illustrationImageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
      </section>
    }
    <!-- Vue Hub (scénario) : liste les quêtes et leurs conditions, sans statut.
    Le statut effectif et les actions de jeu vivent dans l'écran d'une Partie. -->
    @if (arc.type === 'HUB') {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> {{ 'arcView.hubQuestsTitle' | translate }}</h2>
        @if (hubQuests.length === 0) {
          <p class="view-section-empty">
            {{ 'arcView.hubQuestsEmpty' | translate }}
          </p>
        }
        @if (hubQuests.length > 0) {
          <div class="hub-quest-grid" cdkDropList cdkDropListOrientation="mixed"
            (cdkDropListDropped)="dropQuest($event)">
            @for (q of hubQuests; track q.id) {
              <button type="button"
                class="hub-quest-card"
                cdkDrag [cdkDragData]="q"
                (click)="openQuest(q)">
                <div class="hub-quest-card-head">
                  @if (q.icon) {
                    <span class="hub-quest-card-icon">
                      <lucide-icon [img]="resolveCampaignIcon(q.icon)" [size]="18"></lucide-icon>
                    </span>
                  }
                  <span class="hub-quest-card-name">{{ q.name }}</span>
                </div>
                @if (q.description?.trim()) {
                  <p class="hub-quest-card-desc">{{ q.description }}</p>
                }
                @if ((q.prerequisites?.length ?? 0) > 0) {
                  <div class="hub-quest-card-locked-hint">
                    <lucide-icon [img]="AlertCircle" [size]="13"></lucide-icon>
                    <span>{{ 'arcView.unlockConditions' | translate:{ n: q.prerequisites!.length } }}</span>
                    <ul class="hub-quest-card-prereq-list">
                      @for (p of q.prerequisites; track p) {
                        <li>{{ describePrerequisite(p) }}</li>
                      }
                    </ul>
                  </div>
                }
              </button>
            }
          </div>
        }
      </section>
    }
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">📜</span> {{ 'arcView.synopsisTitle' | translate }}</h2>
      @if (arc.description?.trim()) {
        <p class="view-section-body">{{ arc.description }}</p>
      } @else {
        <p class="view-section-empty">{{ 'arcView.notProvided' | translate }}</p>
      }
    </section>
    <div class="view-row">
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">✨</span> {{ 'arcView.themesTitle' | translate }}</h2>
        @if (arc.themes?.trim()) {
          <p class="view-section-body">{{ arc.themes }}</p>
        } @else {
          <p class="view-section-empty">{{ 'arcView.notProvided' | translate }}</p>
        }
      </section>
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">⚖️</span> {{ 'arcView.stakesTitle' | translate }}</h2>
        @if (arc.stakes?.trim()) {
          <p class="view-section-body">{{ arc.stakes }}</p>
        } @else {
          <p class="view-section-empty">{{ 'arcView.notProvided' | translate }}</p>
        }
      </section>
    </div>
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">🎁</span> {{ 'arcView.rewardsTitle' | translate }}</h2>
      @if (arc.rewards?.trim()) {
        <p class="view-section-body">{{ arc.rewards }}</p>
      } @else {
        <p class="view-section-empty">{{ 'arcView.notProvided' | translate }}</p>
      }
    </section>
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">🎬</span> {{ 'arcView.resolutionTitle' | translate }}</h2>
      @if (arc.resolution?.trim()) {
        <p class="view-section-body">{{ arc.resolution }}</p>
      } @else {
        <p class="view-section-empty">{{ 'arcView.notProvided' | translate }}</p>
      }
    </section>
    <!-- Notes MJ (bloc privé rouge discret) -->
    @if (arc.gmNotes?.trim()) {
      <section class="view-section view-section--private">
        <h2 class="view-section-title">
          <span class="view-section-icon">🔒</span>
          {{ 'arcView.gmNotesTitle' | translate }}
        </h2>
        <p class="view-section-body">{{ arc.gmNotes }}</p>
      </section>
    }
    <!-- Pages Lore liées (chips cliquables) -->
    @if (loreId && (arc.relatedPageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> {{ 'arcView.relatedPagesTitle' | translate }}</h2>
        <div class="view-chips">
          @for (relId of arc.relatedPageIds; track relId) {
            <a class="view-chip"
              [routerLink]="['/lore', loreId, 'pages', relId]">
              {{ titleOfRelated(relId) }}
            </a>
          }
        </div>
      </section>
    }
  </div>
}