<script lang="ts" setup>
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import { crossDomainUrl } from '@/utils/resolvers'
import logoWhite from '@images/ezscale_logo_white.png'

interface PageProps {
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const marketingUrl = computed(() => crossDomainUrl(props.value.domains?.marketing))
</script>

<template>
  <VApp>
    <!-- Logo -->
    <a :href="marketingUrl" class="auth-logo d-flex align-center gap-x-3">
      <img :src="logoWhite" alt="EZSCALE" style="height: 38px; width: auto;" />
    </a>

    <VRow no-gutters class="auth-wrapper" style="min-height: 100vh;">
      <!-- Left: Gradient Art -->
      <VCol md="7" class="d-none d-md-flex">
        <div class="auth-left-panel w-100 d-flex align-center justify-center" style="position: relative; overflow: hidden;">
          <!-- Abstract gradient background -->
          <div class="auth-gradient-bg" />

          <!-- Grid pattern overlay -->
          <div class="auth-grid-pattern" />

          <!-- Content -->
          <div class="d-flex flex-column align-center justify-center position-relative" style="z-index: 1; max-width: 480px; padding: 48px;">
            <img
              :src="logoWhite"
              alt="EZSCALE"
              class="mb-8"
              style="max-width: 200px; height: auto;"
            >
            <p class="text-body-1 text-center mb-0" style="color: rgba(255,255,255,0.7); max-width: 400px;">
              Deploy VPS, Dedicated Servers, Web Hosting, and Game Servers in minutes.
              Enterprise-grade infrastructure made simple.
            </p>

            <div class="d-flex ga-8 mt-8">
              <div class="text-center">
                <div class="text-h5 font-weight-bold" style="color: #3b82f6;">99.9%</div>
                <div class="text-caption" style="color: rgba(255,255,255,0.5);">Uptime SLA</div>
              </div>
              <div class="text-center">
                <div class="text-h5 font-weight-bold" style="color: #3b82f6;">Atlanta</div>
                <div class="text-caption" style="color: rgba(255,255,255,0.5);">Datacenter</div>
              </div>
              <div class="text-center">
                <div class="text-h5 font-weight-bold" style="color: #3b82f6;">Dell</div>
                <div class="text-caption" style="color: rgba(255,255,255,0.5);">PowerEdge</div>
              </div>
            </div>
          </div>
        </div>
      </VCol>

      <!-- Right: Auth Form -->
      <VCol cols="12" md="5" class="d-flex flex-column align-center justify-center">
        <VCard flat :max-width="440" class="pa-6 w-100" style="max-width: 440px;">
          <slot />
        </VCard>

        <div class="text-center mt-4 text-caption text-medium-emphasis">
          <Link href="/terms-of-service">Terms</Link>
          <span class="mx-1">&middot;</span>
          <Link href="/privacy-policy">Privacy</Link>
          <span class="mx-1">&middot;</span>
          <Link href="/acceptable-use">Acceptable Use</Link>
        </div>
      </VCol>
    </VRow>
  </VApp>
</template>

<style lang="scss" scoped>
.auth-logo {
  position: absolute;
  top: 24px;
  left: 32px;
  z-index: 10;
  text-decoration: none;
}

.auth-left-panel {
  background: #0f172a;
}

.auth-gradient-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(29, 78, 216, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%);
}

.auth-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.text-caption a {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}
</style>
