import Training from '../components/training'
import data from '../initial-data.js'
import theme from '../styles/theme'

console.log(data)

const Home = () => (
  <>
    <section>
      <h1>Stay in Shape with u-fit</h1>
      <p>u-fit is a high intensity interval training offered by u-blox.</p>
      <aside>
        <div id='trainingTime'>
          <span className='caption'>When</span>
          <span className='data'>Tuesdays, 11:45-12:30</span>
        </div>
        <div id='trainingEquipment'>
          <span className='caption'>Equipment</span>
          <span className='data'>Towel, water, optional: yoga mat</span>
        </div>
      </aside>
    </section>

    <section id='nextTraining'>
      <h1>Your Next Training</h1>
      <Training {...data.trainings[data.trainings.length - 1]} />
    </section>

    <style jsx>
      {`
        #nextTraining {
          background-image: url('media/man_working_out.jpg');
          background-size: auto 400px;
          background-repeat: no-repeat;
          display: grid;
          grid-template-rows: 48px 1fr;
        }

        #nextTraining > h1 {
          background: rgba(32, 35, 40, 0.8);
          padding: 5px 20px;
          color: ${theme.colors.offWhite};
        }
      `}
    </style>
  </>
)

export default Home