import SignupForm from './SignupForm'
import { LoginForm } from '..'
import theme from '../../styles/theme'

const LoginPage = () => {
  return (
    <section className='login-page'>
      <div className='login-tile'>
        <h2>Join the u-fit Community</h2>
        <p>
          u-fit is a short 30-45 minute fitness program. u-blox offers it's employees this training
          for free.
        </p>
        <SignupForm />
      </div>
      <div className='login-tile'>
        <h2>Log in</h2>
        <p>Already signed up? Welcome back!</p>
        <LoginForm />
      </div>

      <style jsx>{`
        .login-page {
          display: grid;
          grid-template-columns: 1fr;
          align-items: center;
          background-color: #f7f7f7;
          border-radius: 8px;
          margin: 0 auto;
          padding: 1em;
          max-width: ${theme.maxWidth};
          box-shadow: ${theme.bsSmall};
        }

        @media (min-width: 768px) {
          .login-page {
            grid-template-columns: 1fr 1fr;
            grid-gap: 4em;
            margin: 2em auto;
            padding: 2em;
          }
          .login-tile {
          }
        }
      `}</style>
    </section>
  )
}

export default LoginPage