import React, { useState } from "react"
import { StaticImage } from "gatsby-plugin-image"
import Layout from "../../components/layout"
import Seo from "../../components/seo"
import Hero from "../../components/Games/GamePage/Hero";
import Contact from "../../components/Contact"
import { useStaticQuery, graphql } from "gatsby"

const CAPage = () => {

    const [menu] = useState([
        {id: 0, title: 'Описание', to: 'description'},
        {id: 1, title: 'Цели', to: 'purposes'},
        {id: 2, title: 'Компетенции', to: 'competentions'},
        {id: 3, title: 'Преимущества', to: 'advantages'},
        {id: 4, title: 'Аудитория', to: 'auditory'},
        {id: 5, title: 'Контакты', to: 'contact'},
    ])
    const image = useStaticQuery(graphql`
    query {
        img: file(relativePath: {eq: "games/call-accepted.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
    }`);
    return(
        <Layout menu={menu}>
            <Hero title="Вызов принят" img={image.img} time='1,5-3 часа' formats='офлайн (настольная игра)' members="4-6 человек за 1 игровым столом."></Hero>
            <section className="py-28 max-md:py-16 max-md:px-3" id="description">
                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
                    <p className='mb-8'>Участники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами. Успех  будет зависеть от правильности распределения задач, подбора сотрудников для их выполнения, выбора стиля руководства. Главным ресурсом справедливо выступают компетентность и мотивированность персонала, которые преобразовываются в производимую работу, могут увеличиваться в процессе обучения и действий руководителя, а также под воздействием «внешних событий».</p>
                </div>
            </section>
            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="purposes">
                <div className="container mx-auto text-white text-base max-w-6xl">
                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Цели игры</h2>
                    <div className="flex justify-between items-center max-md:flex-col">
                        <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
                            <li className="mb-1">Освоение модели ситуационного руководства Херси-Бланшара</li>
                            <li className="mb-1">Практическое прохождение в игровой обстановке управленческого цикла</li>
                            <li>Проработка инструмента «дерево целей». </li>
                        </ol>
                        <StaticImage className="w-1/2 max-md:w-full" alt="challenge-accepted" src="../../images/games/call-accepted2.jpg"></StaticImage>
                    </div>
                </div>
            </section>
            <section className="py-28 max-md:py-16 max-md:px-3" id="competentions">
                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Отрабатываемые компетенции</h2>
                    <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                        <li className="mb-1">Постановка задач и планирование </li>
                        <li className="mb-1">Управление персоналом (подбор, стиль управления, мотивация, ОС)</li>
                        <li className="mb-1">Ведение переговоров и взаимодействие с коллегами</li>
                        <li>Управление временем при работе в режиме многозадачности</li>
                    </ul>
                </div>
            </section>
            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="advantages">
                <div className="container mx-auto text-white text-base max-w-6xl">
                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
                    <ol className='mb-8 list-disc list-inside leading-normal mr-5'>
                        <li className="mb-1">Может использоваться как итоговая (диагностическая) или интегрироваться в обучение управленцев.</li>
                        <li className="mb-1">При параллельном проведении за несколькими столами возможно моделирование конкуренции и отработка управления «распределенным проектом».</li>
                        <li>На базе игры можно организовать турнир управленческого мастерства.</li>
                    </ol>
                </div>
            </section>
            <section className="py-28 max-md:py-16 max-md:px-3 bg" id="auditory">
                <div className="container mx-auto text-slate-900 text-base max-w-5xl">
                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
                    <ol className='mb-8 list-decimal list-inside leading-normal'>
                        <li className="mb-1">Руководители всех уровней</li>
                        <li className="mb-1">Кадровые резервисты на руководителей</li>
                        <li>Кандидаты в кадровый резерв</li>
                    </ol>
                </div>
            </section>
            <Contact id="contact"></Contact>
        </Layout>
    )

}

/**
 * Head export to define metadata for the page
 *
 * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
 */
export const Head = () => <Seo title="Вызов принят" description='Участники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами. Успех будет зависеть от правильности распределения задач, подбора сотрудников для их выполнения, выбора стиля руководства.' />

export default CAPage