import React, { useState } from 'react'

import { useStaticQuery, graphql } from "gatsby"
import Image from './Image'

const Example = () => {

    const images = useStaticQuery(graphql`
    query {
        verevochny: file(relativePath: {eq: "teambuilding/verevochny.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        team_picture: file(relativePath: {eq: "teambuilding/team-picture.jpeg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        author: file(relativePath: {eq: "teambuilding/author.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        goldberg: file(relativePath: {eq: "teambuilding/goldberg.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        intellectual: file(relativePath: {eq: "teambuilding/intellectual.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        wool: file(relativePath: {eq: "teambuilding/wool.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        team_quez: file(relativePath: {eq: "teambuilding/team-quez.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        ford_boyard: file(relativePath: {eq: "teambuilding/ford-boyard.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        olympic_games: file(relativePath: {eq: "teambuilding/olympic-games.jpeg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        ecologyc: file(relativePath: {eq: "teambuilding/ecologyc.jpeg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        }
    }`);

    const [examples] = useState([
        {id: 1, title: 'Веревочный курс', img: images.verevochny},
        {id: 2, title: 'Тематический «Форд Боярд» ', img: images.ford_boyard},
        {id: 3, title: 'Экологический тимбилдинг', img: images.ecologyc},
        {id: 4, title: 'Интеллектуальный квест', img: images.intellectual},
        {id: 5, title: 'Машина Голдберга (цепная реакция)', img: images.goldberg},
        {id: 6, title: 'Шерстяной тимбилдинг ', img: images.wool},
        {id: 7, title: 'Авторский тимбилдинг', img: images.author},
        {id: 8, title: 'Олимпийские игры', img: images.olympic_games},
        {id: 9, title: 'Командная картина', img: images.team_picture},
        {id: 10, title: 'Командный квиз', img: images.team_quez},
    ]);

    return (
        <section className='pt-32 max-md:pt-16 bg-[#0E0808]'>
            <h2 className='text-3xl max-md:text-2xl mb-20 max-md:mb-10 font-semibold text-white text-center uppercase'>Каталог тимбилдингов</h2>
            <div className="flex flex-wrap">
                {examples.map((example, index) =>
                    <Image initial={{ x: 0, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ delay:index*0.1, duration: 0.5 }} viewport={{ once: true }} key={example.id} title={example.title} image={example.img}></Image>
                )}
            </div>
            <h3 className='text-2xl max-md:text-xl py-6 font-semibold text-white text-center uppercase'>И многое другое! Организуем тимбилдинг "под ключ"</h3>
        </section>
    )
}

export default Example