<script setup>
import { onMounted } from 'vue'
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
import useDarkMode from '@Stores/DarkMode'

import Logo       from '@Holos/Logo.vue'

/** Definidores */
const darkMode = useDarkMode()

/** Propiedades */
defineProps({
    title: String
})

/** Ciclos */
onMounted(() => {
    darkMode.boot()
});
</script>

<template>
  <div class="min-h-screen flex">
    <!-- Panel Izquierdo - Branding -->
    <div class="hidden lg:flex lg:w-1/2 bg-primary dark:bg-primary-d relative overflow-hidden">
      <!-- Fondo con patron sutil -->
      <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25px 25px, white 2px, transparent 0); background-size: 50px 50px;"></div>
      </div>

      <!-- Contenido centrado -->
      <div class="relative z-10 flex flex-col items-center justify-center w-full px-12 text-white">
        <!-- Logo/Icono -->
        <div class="mb-8">
          <Logo size="xl" />
        </div>

        <!-- Titulo -->
        <h1 class="text-3xl font-bold text-center mb-4">
          Punto de Venta
        </h1>

        <!-- Descripcion -->
        <p class="text-white/70 text-center max-w-sm mb-8">
          Sistema de Gestion de Inventario y Ventas.<br>
        </p>
      </div>
    </div>

    <!-- Panel Derecho - Formulario -->
    <div class="w-full lg:w-1/2 bg-page dark:bg-page-d flex flex-col">
      <!-- Contenido principal -->
      <div class="flex-1 flex items-center justify-center px-6 py-12">
        <div class="w-full max-w-md">
          <!-- Logo mobile -->
          <div class="lg:hidden flex justify-center mb-8">
            <div class="w-16 h-16 bg-primary dark:bg-primary-d rounded-xl flex items-center justify-center">
              <Logo size="sm" />
            </div>
          </div>

          <RouterView />
        </div>
      </div>

      <!-- Footer del panel derecho -->
      <footer class="py-4 px-6 border-t border-primary/10 dark:border-primary-dt/10">
        <div class="flex items-center justify-between text-xs text-page-t/50 dark:text-page-dt/50">
          <span>&copy; {{ new Date().getFullYear() }} {{ APP_COPYRIGHT }}</span>
          <span>v{{ APP_VERSION }}</span>
        </div>
      </footer>
    </div>
  </div>
</template>
