// // Register.tsx
// // ** React Imports
// import { ReactNode, useState } from 'react'

// // ** Next Import
// import Link from 'next/link'

// // ** MUI Components
// import Typography from '@mui/material/Typography'
// import Box, { BoxProps } from '@mui/material/Box'
// import useMediaQuery from '@mui/material/useMediaQuery'
// import { styled, useTheme } from '@mui/material/styles'
// import Tab from '@mui/material/Tab'
// import TabContext from '@mui/lab/TabContext'
// import TabList from '@mui/lab/TabList'
// import TabPanel from '@mui/lab/TabPanel'
// import Card from '@mui/material/Card'
// import CardContent from '@mui/material/CardContent'

// // ** Layout Import
// import BlankLayout from 'src/@core/layouts/BlankLayout'

// // ** Hooks
// import { useSettings } from 'src/@core/hooks/useSettings'

// // ** Demo Imports
// import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'

// // ** Step Components
// import IndividualRegister from 'src/views/pages/auth/register/IndividualRegister'
// import BusinessRegister from 'src/views/pages/auth/register/BusinessRegister'

// // ** Styled Components
// const RegisterIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   width: '100%',
//   maxWidth: 480,
//   height: 'auto',
//   objectFit: 'contain',
//   [theme.breakpoints.down('lg')]: {
//     maxWidth: 400
//   },
//   [theme.breakpoints.down('md')]: {
//     maxWidth: 350
//   }
// }))

// const LeftWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   flex: 1,
//   display: 'flex',
//   position: 'relative',
//   alignItems: 'center',
//   justifyContent: 'center',
//   backgroundColor: 'customColors.bodyBg',
//   borderRadius: theme.spacing(3),
//   margin: theme.spacing(4),
//   padding: theme.spacing(4),
//   [theme.breakpoints.down('md')]: {
//     display: 'none'
//   }
// }))

// const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   width: '100%',
//   display: 'flex',
//   alignItems: 'center',
//   justifyContent: 'center',
//   minHeight: '100vh',
//   padding: theme.spacing(3),
//   [theme.breakpoints.up('md')]: {
//     width: '55%',
//     padding: theme.spacing(4)
//   },
//   [theme.breakpoints.up('lg')]: {
//     width: '50%'
//   }
// }))

// const StyledTab = styled(Tab)(({ theme }) => ({
//   fontSize: '0.95rem',
//   fontWeight: 600,
//   textTransform: 'none',
//   minHeight: 44,
//   [theme.breakpoints.down('sm')]: {
//     fontSize: '0.85rem',
//     minWidth: 100
//   },
//   '&.Mui-selected': {
//     color: theme.palette.primary.main
//   }
// }))

// const RegisterCard = styled(Card)(({ theme }) => ({
//   width: '100%',
//   maxWidth: 650,
//   borderRadius: theme.spacing(2),
//   boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
//   overflow: 'auto',
//   maxHeight: '90vh',
//   [theme.breakpoints.down('sm')]: {
//     maxHeight: '95vh',
//     borderRadius: theme.spacing(1.5),
//     maxWidth: '100%'
//   }
// }))

// const Register = () => {
//   const [tabValue, setTabValue] = useState<string>('individual')
//   const theme = useTheme()
//   const { settings } = useSettings()
//   const { skin } = settings

//   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
//     setTabValue(newValue)
//   }

//   const imageSource = skin === 'bordered' ? 'auth-v2-register-illustration-bordered' : 'auth-v2-register-illustration'

//   return (
//     <Box sx={{ display: 'flex', minHeight: '100vh', backgroundColor: 'background.paper' }}>
//       {/* Left Section with Image */}
//       <LeftWrapper>
//         <Box sx={{ textAlign: 'center', width: '100%' }}>
//           <RegisterIllustration
//             alt='register-illustration'
//             src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
//           />
//           <Box sx={{ mt: 4, px: 3 }}>
//             <Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
//               Join Our Community
//             </Typography>
//             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
//               Create your account and start your journey with us
//             </Typography>
//           </Box>
//           <FooterIllustrationsV2 />
//         </Box>
//       </LeftWrapper>

//       {/* Right Section with Form */}
//       <RightWrapper>
//         <RegisterCard>
//           <Box sx={{ p: { xs: 3, sm: 4, md: 5 } }}>
//             <Box sx={{ textAlign: 'center', mb: 4 }}>
//               <Typography variant="h4" sx={{ fontWeight: 700, mb: 1, fontSize: { xs: '1.5rem', sm: '1.75rem' } }}>
//                 Create Account
//               </Typography>
//               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
//                 Fill in your details to get started
//               </Typography>
//             </Box>

//             <TabContext value={tabValue}>
//               <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
//                 <TabList onChange={handleTabChange} aria-label='registration type tabs' centered>
//                   <StyledTab label='Individual' value='individual' />
//                   <StyledTab label='Business' value='business' />
//                 </TabList>
//               </Box>

//               <TabPanel value='individual' sx={{ p: 0 }}>
//                 <IndividualRegister />
//               </TabPanel>

//               <TabPanel value='business' sx={{ p: 0 }}>
//                 <BusinessRegister />
//               </TabPanel>
//             </TabContext>

//             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1, mt: 4, pt: 2 }}>
//               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
//                 Already have an account?
//               </Typography>
//               <Link href='/login' passHref>
//                 <Typography
//                   component="a"
//                   variant="body2"
//                   sx={{
//                     color: 'primary.main',
//                     fontWeight: 600,
//                     textDecoration: 'none',
//                     cursor: 'pointer',
//                     '&:hover': { textDecoration: 'underline' }
//                   }}
//                 >
//                   Sign in
//                 </Typography>
//               </Link>
//             </Box>
//           </Box>
//         </RegisterCard>
//       </RightWrapper>
//     </Box>
//   )
// }

// Register.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
// Register.guestGuard = true

// export default Register


// Register.tsx
// ** React Imports
// Register.tsx
// ** React Imports
import { ReactNode, useState } from 'react'

// ** Next Import
import Link from 'next/link'

// ** MUI Components
import Typography from '@mui/material/Typography'
import Box, { BoxProps } from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import Tab from '@mui/material/Tab'
import TabContext from '@mui/lab/TabContext'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import Card from '@mui/material/Card'

// ** Layout Import
import BlankLayout from 'src/@core/layouts/BlankLayout'

// ** Hooks
import { useSettings } from 'src/@core/hooks/useSettings'

// ** Demo Imports
import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'

// ** Step Components
import IndividualRegister from 'src/views/pages/auth/register/IndividualRegister'
import BusinessRegister from 'src/views/pages/auth/register/BusinessRegister'

// ** Styled Components
const RegisterIllustration = styled('img')(({ theme }) => ({
  zIndex: 2,
  width: '100%',
  maxWidth: 480,
  height: 'auto',
  objectFit: 'contain',
  [theme.breakpoints.down('lg')]: {
    maxWidth: 400
  },
  [theme.breakpoints.down('md')]: {
    maxWidth: 350
  }
}))

const LeftWrapper = styled(Box)<BoxProps>(({ theme }) => ({
  flex: 1,
  display: 'flex',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'customColors.bodyBg',
  borderRadius: theme.spacing(3),
  margin: theme.spacing(4),
  padding: theme.spacing(4),
  [theme.breakpoints.down('md')]: {
    display: 'none'
  }
}))

const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  minHeight: '100vh',
  padding: theme.spacing(3),
  [theme.breakpoints.up('md')]: {
    width: '55%',
    padding: theme.spacing(4)
  },
  [theme.breakpoints.up('lg')]: {
    width: '50%'
  }
}))

const StyledTab = styled(Tab)(({ theme }) => ({
  fontSize: '0.95rem',
  fontWeight: 600,
  textTransform: 'none',
  minHeight: 44,
  [theme.breakpoints.down('sm')]: {
    fontSize: '0.85rem',
    minWidth: 100
  },
  '&.Mui-selected': {
    color: theme.palette.primary.main
  }
}))

const RegisterCard = styled(Card)(({ theme }) => ({
  width: '100%',
  maxWidth: 650,
  borderRadius: theme.spacing(2),
  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
  overflow: 'auto',
  maxHeight: '90vh',
  [theme.breakpoints.down('sm')]: {
    maxHeight: '95vh',
    borderRadius: theme.spacing(1.5),
    maxWidth: '100%'
  }
}))

const Register = () => {
  const [tabValue, setTabValue] = useState<string>('individual')
  const theme = useTheme()
  const { settings } = useSettings()
  const { skin } = settings

  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
    setTabValue(newValue)
  }

  const imageSource = skin === 'bordered' ? 'auth-v2-register-illustration-bordered' : 'auth-v2-register-illustration'

  return (
    <Box sx={{ display: 'flex', minHeight: '100vh', backgroundColor: 'background.paper' }}>
      {/* Left Section with Image */}
      <LeftWrapper>
        <Box sx={{ textAlign: 'center', width: '100%' }}>
          <RegisterIllustration
            alt='register-illustration'
            src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
          />
          <Box sx={{ mt: 4, px: 3 }}>
            <Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
              Join Our Community
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              Create your account and start your journey with us
            </Typography>
          </Box>
          <FooterIllustrationsV2 />
        </Box>
      </LeftWrapper>

      {/* Right Section with Form */}
      <RightWrapper>
        <RegisterCard>
          <Box sx={{ p: { xs: 3, sm: 4, md: 5 } }}>
            <Box sx={{ textAlign: 'center', mb: 4 }}>
              <Typography variant="h4" sx={{ fontWeight: 700, mb: 1, fontSize: { xs: '1.5rem', sm: '1.75rem' } }}>
                Create Account
              </Typography>
              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                Fill in your details to get started
              </Typography>
            </Box>

            <TabContext value={tabValue}>
              <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
                <TabList onChange={handleTabChange} aria-label='registration type tabs' centered>
                  <StyledTab label='Individual' value='individual' />
                  <StyledTab label='Business' value='business' />
                </TabList>
              </Box>

              <TabPanel value='individual' sx={{ p: 0 }}>
                <IndividualRegister />
              </TabPanel>

              <TabPanel value='business' sx={{ p: 0 }}>
                <BusinessRegister />
              </TabPanel>
            </TabContext>

            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1, mt: 4, pt: 2 }}>
              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                Already have an account?
              </Typography>
              <Link href='/login' passHref>
                <Typography
                  component="a"
                  variant="body2"
                  sx={{
                    color: 'primary.main',
                    fontWeight: 600,
                    textDecoration: 'none',
                    cursor: 'pointer',
                    '&:hover': { textDecoration: 'underline' }
                  }}
                >
                  Sign in
                </Typography>
              </Link>
            </Box>
          </Box>
        </RegisterCard>
      </RightWrapper>
    </Box>
  )
}

Register.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
Register.guestGuard = true

export default Register