<script setup lang="ts">
/**
 * Desktop Register View
 * Reuses the existing RegisterView form in a centered desktop auth layout.
 */
import RegisterView from '../RegisterView.vue';
</script>

<template>
  <div class="desktop-auth-shell">
    <div class="auth-brand">
      <div class="brand-inner">
        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
        <h1 class="brand-name">THEBET365</h1>
        <p class="brand-tagline">加入我们，开始精彩体育投注</p>
      </div>
    </div>
    <div class="auth-card-wrap">
      <div class="auth-card">
        <RegisterView />
      </div>
    </div>
  </div>
</template>

<style scoped>
.desktop-auth-shell {
  display: flex;
  min-height: 100vh;
  background: var(--desktop-bg);
}

.auth-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
  border-right: 1px solid var(--desktop-border);
  position: relative;
  overflow: hidden;
}

.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 40px;
}

.brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
}

.brand-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--primary-light);
  margin: 0;
}

.brand-tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 600;
}

.auth-card-wrap {
  width: 520px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--desktop-bg);
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}
</style>
