import React, { useState } from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import Button from '../UI/Button';
import ContactFormModal from '../Modals/ContactFormModal';

const RecGame = () => {
    const [modal, setModal] = useState(false);
    return (
        <div className="flex max-lg:flex-col px-20 max-lg:px-3 items-center lg:items-start xl:items-center">
            <StaticImage loading='lazy' src="../../images/bussiness-games.jpg" alt="logo" placeholder="none" className="max-lg:!hidden w-full h-[520px] basis-1/2 rounded-lg mr-5"/>
            <div className="basis-1/2 ml-5 max-lg:ml-0">
                <h3 className='text-2xl max-md:text-xl mb-6 font-semibold text-slate-700 uppercase'>В каких случаях рекомендуется использовать:</h3>
                <StaticImage loading='lazy' src="../../images/bussiness-games.jpg" alt="logo" placeholder="none" className="lg:!hidden w-full rounded-lg mb-6"/>
                <ul className='mb-8 list-disc list-inside text-gray-700 leading-8 max-md:leading-7 pl-3'>
                    <li>Когда необходимо провести обучающее мероприятие на большое количество сотрудников (например, внутренние конференции);</li>
                    <li>Когда необходимо создать ситуацию, позволяющую участникам самим осознать актуальность разбираемой проблематики;</li>
                    <li>Когда необходимо создать условия для апробации участниками тех или иных решений, навыков, стратегий в приближенной к реальности бизнеса среде.</li>
                    <li>Когда необходимо донести до сотрудников специфику работы Компании или одного из ее направлений;</li>
                    <li>Когда сотрудники устали от типовых тренингов и необходимо вернуть позитивное отношение к обучению.</li>
                </ul>
                <Button className='mr-5' onClick={()=> setModal(true)}>Заказать</Button>
            </div>
            <ContactFormModal modal={modal} setModal={setModal}/>
        </div>
    );
}

export default RecGame;