<script setup>
import { SignIn } from '@clerk/vue'
</script>

<template>
  <div class="min-h-svh flex flex-col items-center justify-center bg-gradient-to-br from-amber-50 to-orange-50 gap-8 p-4">
    <!-- Brand -->
    <div class="text-center space-y-3">
      <div class="mx-auto h-14 w-14 rounded-2xl flex items-center justify-center text-white text-base font-black shadow-lg"
           style="background:#b45309">CA</div>
      <div>
        <h1 class="text-2xl font-black text-foreground">Canifa AI</h1>
        <p class="text-sm text-muted-foreground">Admin Console — Đăng nhập để tiếp tục</p>
      </div>
    </div>
    <!-- Clerk SignIn component -->
    <SignIn :afterSignInUrl="'/home'" />
  </div>
</template>
