import React from 'react';
import useTranslate from 'gatsby-core-theme/src/hooks/useTranslate/useTranslate';
import styles from './styles.module.scss';

export default function TeatimeAndLunchtimeFrame() {
  return (
    <div className={styles.container}>
      <div className={`${styles.section} ${styles.teatime}`}>
        <h2 className={styles.title}>
          {useTranslate('teatime_frame_title_1', 'What Time Are the UK49s Teatime Results?')}
        </h2>
        <p className={styles.description}>
          {useTranslate(
            'teatime_frame_descripton_1',
            'The Teatime Draw is the second daily lottery draw for the UK49s. It happens every evening from Monday to Sunday.'
          )}
        </p>
        <p className={styles.description}>
          {useTranslate(
            'teatime_frame_descripton_2',
            `Players select between 1 and 5 numbers from a set of 1 to 49. You can also add a bonus "Booster Ball" to increase your chances of winning.`
          )}
        </p>
        <p className={styles.description}>
          {useTranslate(
            'teatime_frame_descripton_3',
            `In the UK, the Teatime Draw takes place at 17:49. The timing in South Africa varies based on daylight savings.`
          )}
        </p>
        <h2 className={styles.title}>
          {useTranslate('teatime_frame_title_2', 'UK49s Teatime Draw in South Africa')}
        </h2>
        <ul className={styles.list}>
          <li className={styles.descrilition}>
            {useTranslate(
              'teatime_frame_list_1',
              `18:49 (SA Time) during daylight savings (Late March to Late October)`
            )}
          </li>
          <li className={styles.descrilition}>
            {useTranslate(
              'teatime_frame_list_2',
              `19:49 PM (SA Time) outside of daylight savings (Late October to Late March)`
            )}
          </li>
        </ul>

        <p className={styles.description}>
          <bold>
            {useTranslate(
              'teatime_frame_bold_text',
              `The evening draw closes at 18:45 during daylight savings and 19:45 outside of daylight savings.`
            )}
          </bold>
        </p>
      </div>
      <div className={`${styles.section} ${styles.lunchtime}`}>
        <h2 className={styles.title}>
          {useTranslate('lunchtime_frame_title_1', 'What Time Are the UK49s Teatime Results?')}
        </h2>
        <p className={styles.description}>
          {useTranslate(
            'lunchtime_frame_descripton_1',
            `The Lunchtime Draw is the first draw of the day for the UK49s. It takes place every afternoon, Monday to Sunday.`
          )}
        </p>
        <p className={styles.description}>
          {useTranslate(
            'lunchtime_frame_descripton_2',
            `Players choose between 1 and 5 numbers from a pool of 1 to 49. You can also opt to include a "Booster Ball" for extra chances.`
          )}
        </p>
        <p className={styles.description}>
          {useTranslate(
            'lunchtime_frame_descripton_3',
            `In the UK, the draw takes place at 12:49. In South Africa, the time of the Lunchtime Draw depends on daylight savings.`
          )}
        </p>
        <h2 className={styles.title}>
          {useTranslate('lunchtime_frame_title_2', 'UK49s Lunchtime Draw in South Africa')}
        </h2>
        <ul className={styles.list}>
          <li className={styles.descrilition}>
            {useTranslate(
              'lunchtime_frame_list_1',
              `13:49 (SA Time) during daylight savings (Late March to Late October)`
            )}
          </li>
          <li className={styles.descrilition}>
            {useTranslate(
              'lunchtime_frame_list_2',
              `14:49 (SA Time) outside of daylight savings (Late October to Late March)`
            )}
          </li>
        </ul>

        <p className={styles.description}>
          <bold>
            {useTranslate(
              'lunchtime_frame_bold_text',
              `The afternoon draw closes at 13:45 during daylight savings and 14:45 outside of daylight savings.`
            )}
          </bold>
        </p>
      </div>
    </div>
  );
}
