<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
    <div class="max-w-md w-full text-center space-y-6">
      <div class="w-20 h-20 mx-auto bg-[var(--rebreak-primary)] rounded-2xl flex items-center justify-center">
        <UIcon name="i-heroicons-shield-check" class="w-10 h-10 text-white" />
      </div>

      <h1 class="text-3xl font-bold text-gray-900">
        ReBreak Magic
      </h1>
      <p class="text-gray-600">
        Öffne die ReBreak-App auf deinem iPhone, erzeuge einen Pairing-Code und gib ihn hier ein.
      </p>

      <UButton
        to="/pair"
        size="lg"
        color="primary"
        variant="solid"
        block
      >
        Pairing-Code eingeben
      </UButton>

      <p class="text-xs text-gray-400">
        ReBreak Magic für macOS & Windows
      </p>
    </div>
  </div>
</template>
