import React, {useState} from 'react'

import Step from './Step/Step'
import Line from '../../images/line.svg'

const Main = ({props}) => {
    const [steps] = useState([
        {id: 0, title: "Составление технического задания", ml: '0'},
        {id: 1, title: "Детализация запроса", ml: '20'},
        {id: 2, title: "Подготовительный этап", ml: '40'},
        {id: 3, title: "Проведении сессии", ml: '60'},
        {id: 4, title: "Заключительный этап", ml: '80'},
    ]);

    return (
        <section {...props} className='bg-white relative py-32 max-md:py-16'>
            <div className="container mx-auto px-32 max-lg:px-3 relative">
                <h2 className='text-3xl max-md:text-2xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
                <h3 className='text-xl max-md:text-lg mb-20 max-md:mb-10 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>
                <div className='flex max-lg:flex-col'>
                    <div className="basis-1/2">
                        <p className='text-base mb-5'><b>Фасилитация</b> (англ. facilitate – облегчать, помогать) – профессиональная организация процесса групповой работы, направленная на обсуждение, прояснение и достижение группой поставленных заказчиком целей, при полной нейтральности фасилитатора к контенту обсуждения.</p>
                        <p className='text-2xl max-md:text-xl max-lg:mb-8 font-semibold text-gray-800 '>Проект проведения любой фасилитационной сессии обычно состоит из 5 этапов:</p>
                        <img className='absolute bottom-0 max-lg:hidden max-xl:w-[540px] max-2xl:w-[720px]' src={Line} alt="wave"/>
                    </div>
                    <div className="flex justify-end max-lg:justify-start basis-1/2">
                        <div className="flex flex-col">
                            {steps.map((step, count)=>
                                <Step initial={{ y: -50, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ delay:count*0.1, duration: 0.5 }} viewport={{ once: true }} key={step.id} ml={step.ml} title={step.title} ico={step.ico} count={count+1}></Step>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Main