veza/apps/web/src/features/auth/components/AuthLayout.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';

import { Card } from '@/components/ui/card';

interface AuthLayoutProps {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  footerLinks?: Array<{ label: string; to: string }>;
  className?: string;
}

export function AuthLayout({
  title,
  subtitle,
  children,
  footerLinks,
  className,
}: AuthLayoutProps) {
  return (
    <div
      className={cn(
        'min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden',
        className,
      )}
      role="main"
      aria-label="Page d'authentification"
    >
      {/* Background gradient */}
      <div className="fixed inset-0 bg-background">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/5" />
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-pulse" />
        <div
          className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl animate-pulse"
          style={{ animationDelay: '2s' }}
        />
        {/* Subtle secondary accent blob */}
        <div
          className="absolute top-2/3 left-1/2 w-72 h-72 bg-secondary/5 rounded-full blur-3xl animate-pulse"
          style={{ animationDelay: '4s' }}
        />
      </div>

      <div className="max-w-md w-full mx-auto space-y-8 relative z-10 animate-auth-enter">
        {/* Logo and Title */}
        <header className="text-center">
          <div className="flex items-center justify-center mb-6">
            <div
              className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center shadow-sm"
              aria-hidden="true"
            >
              <span className="text-primary-foreground font-bold text-2xl">V</span>
            </div>
            <span className="ml-3 font-bold text-3xl text-foreground">Veza</span>
          </div>
          <h1
            id="auth-form-title"
            className="text-3xl font-bold text-foreground mb-2"
          >
            {title}
          </h1>
          {subtitle && (
            <p className="text-sm text-muted-foreground" role="doc-subtitle">
              {subtitle}
            </p>
          )}
        </header>

        {/* Content Card — glass effect */}
        <Card
          variant="surface"
          padding="lg"
          className="w-full bg-card/80 backdrop-blur-md border-border/50 shadow-2xl"
          aria-labelledby="auth-form-title"
        >
          {children}
        </Card>

        {/* Footer Links */}
        {footerLinks && footerLinks.length > 0 && (
          <nav
            className="text-center space-x-4"
            aria-label="Navigation d'authentification"
          >
            {footerLinks.map((link) => (
              <Link
                key={link.to}
                to={link.to}
                className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-fast)] focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background rounded"
              >
                {link.label}
              </Link>
            ))}
          </nav>
        )}
      </div>
    </div>
  );
}