import React, { useState } from 'react'

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

const Example = () => {

    const images = useStaticQuery(graphql`
    query {
        img1: file(relativePath: {eq: "facilitations/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
        img2: file(relativePath: {eq: "facilitations/2.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
        img3: file(relativePath: {eq: "facilitations/3.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
        img4: file(relativePath: {eq: "facilitations/4.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
        img5: file(relativePath: {eq: "facilitations/5.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
        img6: file(relativePath: {eq: "facilitations/6.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
            }
        },
    }`);

    const [examples] = useState([
        {id: 1, title: 'Сессии по подведению итогов и ретроспективы', img: images.img1},
        {id: 2, title: 'Креативные, инновационные сессии', img: images.img2},
        {id: 3, title: 'Стратегические сессии', img: images.img3},
        {id: 4, title: 'Сессии по созданию и управлению корпоративной идеологией', img: images.img4},
        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.img5},
        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', img: images.img6},
    ]);

    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>
        </section>
    )
}

export default Example