<template>
  <div class="min-h-screen flex bg-gradient-to-br from-purple-950 to-black">
    <!-- Left side - Logo & Description -->
    <div class="hidden lg:flex lg:w-1/2 flex-col items-center justify-center p-12">
      <h1 class="text-7xl font-bold bg-gradient-to-r from-purple-600 to-violet-400 bg-clip-text text-transparent">
        GenLiteX
      </h1>
      <p class="mt-6 text-2xl text-center text-gray-300 max-w-xl">
        Generative Artificial Intelligent for Technology Development Lifecycle Platform
      </p>
    </div>

    <!-- Right side - Login Form -->
    <div class="w-full lg:w-1/2 flex flex-col justify-between p-8 lg:p-12">
      <div class="max-w-md w-full mx-auto mt-8">
        <div class="mb-8">
          <h2 class="text-3xl font-semibold text-white mb-2">Login</h2>
          <p class="text-gray-400">Glad you're back!</p>
        </div>

        <form @submit.prevent="handleLogin" class="space-y-6">
          <div>
            <input
                type="text"
                v-model="username"
                placeholder="Username"
                class="w-full px-4 py-3 rounded-lg bg-gray-900/50 border border-gray-700 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500"
            />
          </div>

          <div>
            <input
                type="password"
                v-model="password"
                placeholder="Password"
                class="w-full px-4 py-3 rounded-lg bg-gray-900/50 border border-gray-700 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500"
            />
          </div>

          <div class="flex items-center">
            <input
                type="checkbox"
                id="remember"
                v-model="rememberMe"
                class="w-4 h-4 rounded border-gray-700 bg-gray-900/50 text-purple-500 focus:ring-purple-500"
            />
            <label for="remember" class="ml-2 text-gray-400">Remember me</label>
          </div>

          <button
              type="submit"
              class="w-full py-3 rounded-lg bg-purple-500 hover:bg-purple-600 text-white font-medium transition-colors"
          >
            Login
          </button>

          <div class="text-center">
            <a href="#" class="text-purple-400 hover:text-purple-300">Forgot password ?</a>
          </div>

          <div class="text-center text-gray-400">
            Don't have an account ?
            <a href="#" class="text-purple-400 hover:text-purple-300">Signup</a>
          </div>
        </form>

        <!-- Language Selector -->
        <div class="mt-8 flex items-center justify-center gap-2">
          <span class="text-gray-400">Language:</span>
          <select
              v-model="language"
              class="px-3 py-1.5 rounded bg-gray-900/50 border border-gray-700 text-gray-300 focus:outline-none focus:border-purple-500"
          >
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
          </select>
        </div>
      </div>

      <!-- Footer -->
      <div class="mt-auto pt-8">
        <div class="flex justify-center gap-6 text-sm text-gray-400">
          <a href="#" class="hover:text-purple-400">Terms & Conditions</a>
          <a href="#" class="hover:text-purple-400">Support</a>
          <a href="#" class="hover:text-purple-400">Customer Care</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const rememberMe = ref(false)
const language = ref('en')

const handleLogin = () => {
  // Handle login logic here
  console.log({
    username: username.value,
    password: password.value,
    rememberMe: rememberMe.value
  })
}
</script>