byom-customer-dashboard/src/app/register/page.tsx

'use client'

import RegistrationForm from '@/components/forms/registrationForm'
import Image from 'next/image'
import byom from '@/app/assets/byom.png'
import { useTheme } from '@/contexts/themecontext'
import { Moon, Sun } from 'lucide-react'

export default function OwnerRegistrationPage() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900' : 'bg-gray-50'} flex flex-col items-center justify-center relative p-4 transition-colors duration-300`}>
      {/* Theme Toggle */}
      <button
        onClick={toggleTheme}
        className={`absolute top-4 right-4 p-3 rounded-xl ${
          theme === 'dark' 
            ? 'bg-gray-800 hover:bg-gray-700' 
            : 'bg-white hover:bg-gray-100'
        } transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105`}
        aria-label="Toggle theme"
      >
        {theme === 'dark' ? (
          <Sun className="w-5 h-5 text-yellow-500" />
        ) : (
          <Moon className="w-5 h-5 text-gray-600" />
        )}
      </button>

      <div className={`w-full max-w-md ${theme === 'dark' ? 'bg-gray-800/50 backdrop-blur-xl' : 'bg-white/80 backdrop-blur-xl'} rounded-2xl shadow-2xl p-8 transition-all duration-300`}>
        {/* Logo */}
        <div className="flex justify-center mb-8 transform hover:scale-105 transition-transform duration-300">
          <Image 
            src={byom} 
            alt="BYOM" 
            width={200} 
            className={`${theme === 'dark' ? '' : 'invert'} transition-all duration-300 drop-shadow-lg`}
          />
        </div>

        {/* Welcome Text */}
        <div className="text-center mb-8">
          <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'} mb-3 tracking-tight`}>
            Créez votre compte
          </h1>
          <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'} text-lg`}>
            Configurez votre espace de travail et commencez
          </p>
        </div>

        {/* Registration Form */}
        <RegistrationForm type="owner" />
      </div>
    </div>
  );
}