---
import { Image } from "astro:assets";
import Layout from "../layouts/Layout.astro";
import LoginImage from "../assets/images/collaborators/login.webp";
import LoginForm from "../components/Auth/Login.jsx";
---

<Layout title="Ingreso colaboradores Consultoría y Capacitación HSEQ">
  <main
    class="min-h-auto flex items-start lg:items-center justify-center px-4 py-10"
  >
    <div
      class="w-full max-w-6xl max-h-svh bg-white rounded-3xl shadow-xl ring lg:ring-0 overflow-hidden flex flex-col lg:flex-row"
    >
      <div class="hidden lg:flex lg:w-1/2 relative">
        <Image
          src={LoginImage}
          alt={"Login collaborators Banner"}
          class="object-cover w-full h-full"
          quality={"mid"}
          width={900}
          height={700}
          format="avif"
        />
        <div class="absolute inset-0 bg-black/30"></div>
      </div>
      {/* Right side - Login form */}
      <div class="w-full lg:w-1/2 flex items-center justify-center p-8 sm:p-12">
        <LoginForm client:load />
      </div>
    </div>
    {/* Left side - Image (hidden on mobile/tablet, visible on lg+) */}
  </main>
</Layout>