import React, { useState } from "react"
import { Link } from "gatsby"
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 = ({data}) => {

    const [menu, setMenu] = useState([
        {id: 0, title: 'Описание', to: 'description'},
        {id: 1, title: 'Цели', to: 'purpose'},
        {id: 2, title: 'Развиваемые компетенции', to: 'skills'},
        {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/mansion-matilda-secrets.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
    }`);
    return(
        <Layout menu={menu}>
            <Hero title='Тайны особняка "Матильда"' img={image.img} time='2-4 часа + анализ до 1,5 часов' formats='офлайн (настольная) // онлайн (платформа ИгроN).' members='команда 5-7 человек. Количество команд не ограничено.'></Hero>
            <section className="py-28" id="description">
                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
                    <p className='mb-8'>Детективы любят все! Особенно, если Вы в них  - не подозреваемый :).</p>
                    <p className='mb-8'>7 игровых дней в ролевой  игре <b>ТАЙНЫ ОСОБНЯКА "МАТИЛЬДА"</b> участники занимаются разгадкой уникального преступления, и шансы на успех зависят от них самих.  Минуты пролетают незаметно в поисках улик и вещдоков, которые ведут к разгадке...</p>
                    <p className='mb-8 font-bold'>...а за это время:</p>
                    <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                        <li className="mb-1">Происходит интеграция команды</li>
                        <li className="mb-1">Настраивается кросс-функциональное взаимодействие</li>
                        <li>Выявляются и прокачиваются лидеры</li>
                    </ul>
                </div>
            </section>
            <section className="py-28 bg-[#0E0808]" id="purpose">
                <div className="container mx-auto text-white text-base max-w-6xl">
                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Цель игры</h2>
                    <p className='mb-8'><b>Игровая:</b> Побеждает команда, разгадавшая игровые преступления быстрее других и набравшая максимальное количество баллов.</p>
                    <p className='mb-8'><b>Учебная:</b> Осознать, что только командная работа позволит получить быстрый и качественный результат.</p>
                </div>
            </section>
            <section className="py-28" id="skills">
                <div className="container mx-auto text-slate-900 max-w-6xl">
                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Развиваемые компетенции и навыки</h2>
                    <div className="flex justify-between items-center">
                        <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>
                        <StaticImage className="w-1/2" src="../../images/games/mansion-matilda-secrets2.jpg"></StaticImage>
                    </div>
                </div>
            </section>
            <section className="py-28 bg-[#0E0808]" id="advantages">
                <div className="container mx-auto text-white text-base max-w-6xl">
                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
                    <p className='mb-8'>Позволяет раскрыться игрокам с аналитическими способностями, проверить свои навыки убеждения и аргументации, стрессоустойчивость</p>
                </div>
            </section>
            <section className="py-28" id="auditory">
                <div className="container mx-auto text-slate-900 max-w-6xl">
                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
                    <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
                        <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='Тайны особняка "Матильда"' />

export default CAPage