"use client";

import GridShape from "@/components/common/GridShape";
import ThemeTogglerTwo from "@/components/common/ThemeTogglerTwo";
import { ThemeProvider } from "@/context/ThemeContext";
import Link from "next/link";
import React from "react";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="relative p-6 bg-white z-1 dark:bg-gray-900 sm:p-0">
      <ThemeProvider>
        <div className="relative flex lg:flex-row w-full h-screen justify-center flex-col dark:bg-gray-900 sm:p-0">
          {children}

          {/* Panel derecho — Branding CursosNirgua */}
          <div className="lg:w-1/2 w-full h-full bg-[#1e2a47] lg:grid items-center hidden overflow-hidden relative">
            {/* Fondo decorativo */}
            <GridShape />
            <div className="absolute inset-0 bg-gradient-to-br from-[#1e2a47] via-[#25355a] to-[#141b30] opacity-95" />

            {/* Círculos decorativos */}
            <div className="absolute top-20 right-20 w-64 h-64 rounded-full bg-[#f04b50]/10 blur-3xl" />
            <div className="absolute bottom-20 left-20 w-48 h-48 rounded-full bg-blue-500/10 blur-3xl" />

            <div className="relative z-10 flex flex-col items-center text-center px-12">
              {/* Logo */}
              <Link href="/" className="flex items-center gap-3 mb-8">
                <div className="w-16 h-16 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center backdrop-blur-sm">
                  <span className="text-white font-extrabold text-3xl">C</span>
                </div>
                <div className="text-left">
                  <div className="text-white font-extrabold text-2xl tracking-tight">CursosNirgua</div>
                  <div className="text-white/50 text-xs font-medium">Panel Administrativo</div>
                </div>
              </Link>

              <h2 className="text-white font-extrabold text-3xl mb-4 leading-snug">
                Gestiona tu institución<br/>
                <span className="text-[#f04b50]">de forma profesional</span>
              </h2>
              <p className="text-white/60 text-sm leading-relaxed max-w-sm">
                Administra cursos, sedes, instructores y estudiantes desde un solo lugar. Rápido, seguro y siempre disponible.
              </p>

              {/* Stats rápidos */}
              <div className="mt-10 grid grid-cols-3 gap-6 w-full max-w-xs">
                <div className="text-center bg-white/5 rounded-xl p-4 border border-white/10">
                  <div className="text-white font-extrabold text-2xl">2</div>
                  <div className="text-white/50 text-xs mt-1">Sedes</div>
                </div>
                <div className="text-center bg-white/5 rounded-xl p-4 border border-white/10">
                  <div className="text-[#f04b50] font-extrabold text-2xl">37+</div>
                  <div className="text-white/50 text-xs mt-1">Cursos</div>
                </div>
                <div className="text-center bg-white/5 rounded-xl p-4 border border-white/10">
                  <div className="text-white font-extrabold text-2xl">20K</div>
                  <div className="text-white/50 text-xs mt-1">Alumnos</div>
                </div>
              </div>
            </div>
          </div>

          <div className="fixed bottom-6 right-6 z-50 hidden sm:block">
            <ThemeTogglerTwo />
          </div>
        </div>
      </ThemeProvider>
    </div>
  );
}