<div class="min-h-full bg-background px-4 py-8 sm:px-6 lg:px-8">
  <div class="mx-auto flex min-h-[calc(100vh-8rem)] max-w-4xl items-center justify-center">
    <div class="w-full overflow-hidden rounded-3xl border border-border bg-card/90 shadow-2xl backdrop-blur">
      <div class="border-b border-border bg-gradient-to-br from-primary/20 via-transparent to-blue-500/10 px-6 py-8 sm:px-10">
        <div
          class="inline-flex items-center rounded-full border border-border bg-secondary/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-muted-foreground"
        >
          {{ 'servers.invite.badge' | translate }}
        </div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
          @if (invite()) {
            {{ 'servers.invite.titleJoin' | translate: { name: invite()!.server.name } }}
          } @else {
            {{ 'servers.invite.titleFallback' | translate }}
          }
        </h1>
        <p class="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
          @switch (status()) {
            @case ('redirecting') {
              {{ 'servers.invite.status.redirecting' | translate }}
            }
            @case ('joining') {
              {{ 'servers.invite.status.joining' | translate }}
            }
            @case ('error') {
              {{ 'servers.invite.status.error' | translate }}
            }
            @default {
              {{ 'servers.invite.status.loading' | translate }}
            }
          }
        </p>
      </div>

      <div class="grid gap-6 px-6 py-8 sm:px-10 lg:grid-cols-[1.2fr,0.8fr]">
        <section class="space-y-4">
          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">{{ 'servers.invite.statusSection' | translate }}</h2>
            <p class="mt-3 text-lg font-medium text-foreground">{{ message() }}</p>
          </div>

          @if (invite()) {
            <div class="rounded-2xl border border-border bg-secondary/20 p-5">
              <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">{{ 'servers.invite.serverSection' | translate }}</h2>
              <p class="mt-3 text-xl font-semibold text-foreground">{{ invite()!.server.name }}</p>
              @if (invite()!.server.description) {
                <p class="mt-2 text-sm leading-6 text-muted-foreground">{{ invite()!.server.description }}</p>
              }
              <div class="mt-4 flex flex-wrap gap-2 text-xs">
                @if (invite()!.server.isPrivate) {
                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">{{ 'servers.invite.privateBadge' | translate }}</span>
                }
                @if (invite()!.server.hasPassword) {
                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">{{
                    'servers.invite.passwordBypassBadge' | translate
                  }}</span>
                }
                <span class="rounded-full bg-primary/10 px-2.5 py-1 text-primary">
                  {{ 'servers.invite.expiresBadge' | translate: { date: (invite()!.expiresAt | date: 'medium') } }}
                </span>
              </div>
            </div>
          }
        </section>

        <aside class="space-y-4">
          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">{{ 'servers.invite.nextStepsTitle' | translate }}</h2>
            <ul class="mt-4 space-y-3 text-sm leading-6 text-muted-foreground">
              <li>• {{ 'servers.invite.nextSteps.signalServer' | translate }}</li>
              <li>• {{ 'servers.invite.nextSteps.bypassRestrictions' | translate }}</li>
              <li>• {{ 'servers.invite.nextSteps.bannedStillBlocked' | translate }}</li>
            </ul>
          </div>

          @if (status() === 'error') {
            <button
              type="button"
              (click)="goToSearch()"
              class="inline-flex w-full items-center justify-center rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
            >
              {{ 'servers.invite.backToSearch' | translate }}
            </button>
          }
        </aside>
      </div>
    </div>
  </div>
</div>
