<script setup lang="ts">
/**
 * PC auth shell — admin-style card: large logo left, form slot right (theme-2).
 */
import LocaleSwitcher from '../LocaleSwitcher.vue';

withDefaults(
  defineProps<{
    wide?: boolean;
  }>(),
  { wide: false },
);
</script>

<template>
  <div class="desktop-auth-page">
    <div class="ambient-glow ambient-glow--1" aria-hidden="true"></div>
    <div class="ambient-glow ambient-glow--2" aria-hidden="true"></div>

    <div class="auth-wrap">
      <div class="auth-card" :class="{ 'auth-card--wide': wide }">
        <div class="form-lang">
          <LocaleSwitcher compact />
        </div>
        <div class="form-body">
          <aside class="form-brand">
            <img src="/logo.png" alt="TheBet365" class="logo-large" />
          </aside>
          <div class="form-fields">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.desktop-auth-page {
  position: relative;
  min-height: 100dvh;
  background: linear-gradient(160deg, #f5f7fa 0%, #e8edf2 55%, #f5f7fa 100%);
  overflow: hidden;
}

.desktop-auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(0, 102, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}

.ambient-glow--1 {
  width: 360px;
  height: 360px;
  top: 8%;
  left: 10%;
  background: radial-gradient(circle, rgba(0, 91, 159, 0.22) 0%, transparent 70%);
}

.ambient-glow--2 {
  width: 320px;
  height: 320px;
  bottom: 10%;
  right: 8%;
  background: radial-gradient(circle, rgba(0, 102, 204, 0.16) 0%, transparent 70%);
}

.auth-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px 20px;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 720px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 102, 204, 0.06);
  overflow: hidden;
}

.auth-card--wide {
  max-width: 820px;
}

.form-lang {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 0;
}

.form-body {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  align-items: stretch;
}

.form-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-8);
  background: linear-gradient(180deg, rgba(0, 102, 204, 0.05) 0%, rgba(232, 237, 242, 0.65) 100%);
  border-right: 1px solid var(--border);
}

.logo-large {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 91, 159, 0.18));
}

.form-fields {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 24px;
}

@media (max-width: 640px) {
  .auth-wrap {
    align-items: flex-start;
    padding: 18px;
  }

  .auth-card,
  .auth-card--wide {
    max-width: 420px;
  }

  .form-body {
    grid-template-columns: 1fr;
  }

  .form-brand {
    padding: 20px 24px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .logo-large {
    max-width: 180px;
  }

  .form-fields {
    padding: 18px 20px 22px;
  }
}
</style>
