/* eslint-disable jsx-a11y/anchor-is-valid */
import {useEffect} from 'react'
import {Outlet, Link} from 'react-router-dom'
import {toAbsoluteUrl} from '../../../_res/helpers'

const AuthLayout = () => {
  useEffect(() => {
    const root = document.getElementById('root')
    if (root) {
      root.style.height = '100%'
    }
    return () => {
      if (root) {
        root.style.height = 'auto'
      }
    }
  }, [])

  return (
    <div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
      {/* begin::Body */}
      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
        {/* begin::Form */}
        <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
          {/* begin::Wrapper */}
          <div className='w-lg-500px p-10'>
            <Outlet />
          </div>
          {/* end::Wrapper */}
        </div>
        {/* end::Form */}

        {/* begin::Footer */}
        <div className='d-flex flex-center flex-wrap px-5'>
          {/* begin::Links */}
          <div className='d-flex fw-semibold text-primary fs-base'>

            <a href='http://float-www.dev.chiefsoft.net' className='px-5' target='_blank'>
              Home
            </a>


            <a href={process.env.REACT_APP_SITE_TERMS} className='px-5' target='_blank'>
              Terms
            </a>

            <a href={process.env.REACT_APP_SITE_CONTACT_US} className='px-5' target='_blank'>
              Contact Us
            </a>

            <a href={process.env.REACT_APP_SITE_ABOUT_US} className='px-5' target='_blank'>
              About Us
            </a>
          </div>
          {/* end::Links */}
        </div>
        {/* end::Footer */}
      </div>
      {/* end::Body */}

      {/* begin::Aside */}
      <div
        className='position-relative d-flex flex-lg-row-fluid w-lg-50 order-1 order-lg-2'
        // style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
        style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg-new.svg')})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'left top'}}
      >
        {/* overlay div section */}
        {/* <div className='position-absolute w-100 h-100 top-0 left-0' style={{backgroundColor: 'rgba(0, 0, 0, .4)', zIndex: '1'}}></div> */}
        {/* begin::Content */}
        <div className='position-relative d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
          {/* begin::Logo */}
          {/* <Link to='/' className='mb-12'>
            <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
          </Link> */}
          {/* end::Logo */}

          {/* begin::Image */}
          {/* <img
            className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
            src={toAbsoluteUrl('/media/misc/auth-screens.png')}
            alt=''
          /> */}
          {/* <img
            className='mx-auto w-350px w-md-50 w-xl-500px mb-10 mb-lg-20 rounded'
            src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
            alt=''
            style={{boxShadow: '0px 0px 10px white'}}
          /> */}
          {/* end::Image */}
          <div className='w-100 w-md-75 rounded p-3 p-lg-5' style={{backgroundColor: 'rgba(0, 0, 0, .8)', boxShadow: '0px 0px 10px white'}}>
            {/* begin::Title */}
            <h1 className='text-white fs-2qx fw-bolder text-center mb-7 py-3'>
              Fast, Efficient and Productive
            </h1>
            {/* end::Title */}

            {/* begin::Text */}
            {/* <div className='text-white fs-base text-center'>
              In this kind of post,{' '}
              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
                the blogger
              </a>
              introduces a person they’ve interviewed <br /> and provides some background information
              about
              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
                the interviewee
              </a>
              and their <br /> work following this is a transcript of the interview.
            </div> */}
            <div className='text-white fs-base text-center py-3'>
              <p>Improve quality of life for the world's population by <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>building</a> the future global transportation platform.</p>
              <p>Increasing accessibility and personal choices, <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>while reducing</a> travel time traffic congestion, pollution, and loss to local GDP</p>
            </div>
            {/* end::Text */}
          </div>
        </div>
        {/* end::Content */}
      </div>
      {/* end::Aside */}
    </div>
  )
}

export {AuthLayout}