/***********************************************************************************************************************************************************************
 * File Name: Register.jsx
 * Type of Program: Frontend Page
 * Description: Registration page. Accepts optional ?group_code= query param to
 *              auto-enroll new users into a user group on verification.
 *              Route: /register or /register?group_code=XXXX
 * Module: User Credentials
 * Author: lash0000
 * Date Created: May 23, 2026
 ***********************************************************************************************************************************************************************
 * Change History:
 * DATE                AUTHOR            LOG NUMBER     DESCRIPTION
 * May 23, 2026        lash0000          001            Initial creation - STAR Phase 1 Project
 ***********************************************************************************************************************************************************************/
import { Link } from 'react-router-dom'
import { RegisterForm } from '../components/RegisterForm'
import { AuthThemeToggle } from '../components/AuthThemeToggle'
import { MetadataProvider } from '@/contexts/MetadataContext'

// TODO: flip to true once the hero banner asset is ready; grid auto-centers the
// left panel while this is false so no other classes need to change either way.
const SHOW_BANNER = false

export default function Register() {
  return (
    <MetadataProvider
      value={{
        title: 'Register - Philproperties',
        description: 'Create an account to access our online course platform.',
        keywords: 'register, signup, philproperties, training, onboarding, real-estate',
        ogTitle: 'Register - Philproperties',
        ogDescription: 'Create an account to access our online course platform.',
      }}
    >
      <div className={`relative grid min-h-svh ${SHOW_BANNER ? 'lg:grid-cols-2' : ''}`}>
        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
        {/* ── Left panel ── */}
        <div className="flex flex-col gap-4 p-6 md:p-10">
          <div className="flex justify-center">
            <Link to="/" className="flex items-center gap-2 font-medium">
              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 block dark:hidden">
                <img src="/philpro-white.png" alt="Philproperties" />
              </div>
              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 hidden dark:block">
                <img src="/philpro-dark.png" alt="Philproperties" />
              </div>
            </Link>
          </div>

          <div className="flex flex-1 items-center justify-center">
            <div className="w-full max-w-xl">
              <RegisterForm />
            </div>
          </div>
        </div>

        {/* ── Right panel — hero image ── */}
        {SHOW_BANNER && (
          <div className="relative hidden lg:block">
            <img
              src="https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcgzIbC8SR4stTZRKXP3cfbD6e2p9jmdAUQBuox"
              alt="Philproperties"
              className="absolute inset-0 h-full w-full object-cover rounded-3xl p-2"
            />
          </div>
        )}
      </div>
    </MetadataProvider>
  )
}