import React, {useState} from 'react'

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

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

    return (
        <section {...props} className='bg-white relative py-32'>
            <div className="container mx-auto px-32 relative">
                <h2 className='text-3xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
                <h3 className='text-xl mb-20 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>
                <div className='flex'>
                    <div className="basis-1/2">
                        <p className='text-base mb-5'><b>Фасилитация</b> (англ. facilitate – облегчать, помогать) – профессиональная организация процесса групповой работы, направленная на обсуждение, прояснение и достижение группой поставленных заказчиком целей, при полной нейтральности фасилитатора к контенту обсуждения.</p>
                        <p className='text-2xl font-semibold text-gray-800 '>Проект проведения любой фасилитационной сессии обычно состоит из 5 этапов:</p>
                        <img className='absolute bottom-0' src={Line} alt="wave"/>
                    </div>
                    <div className="flex justify-end basis-1/2">
                        <div className="flex flex-col">
                            {steps.map((step, count)=>
                                <Step ml={step.ml} title={step.title} ico={step.ico} count={count+1}></Step>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Main