import React, { useState } from 'react'
import Title from './UI/Title';
import Price from './Price/Price';

const PriceMain = () => {
    const [prices] = useState([
        {id: 0, tarif: 'Тариф “Лайт”', price: 'от 6300 ₽', conditions: [
            {id: 0, text: 'Выполнение регламентных операций, формирование регистров налогового и бухгалтерского учета', check: true},
            {id: 1, text: 'Контроль оформления первичных документов', check: true},
            {id: 2, text: 'Отражение в 1С первичных документов, полученных от поставщиков и подрядчиков', check: false},
            {id: 3, text: 'Подготовка первичных документов для клиентов Заказчика', check: false},
            {id: 4, text: 'Сверка дебиторской/кредиторской задолженности с контрагентами Заказчика.', check: false},
            {id: 5, text: 'Заполнение таблиц, спец форм по формам Заказчика', check: false},
        ]},
        {id: 1, tarif: 'Тариф “Оптимальный”', price: 'от 8300 ₽', conditions: [
            {id: 0, text: 'Выполнение регламентных операций, формирование регистров налогового и бухгалтерского учета', check: true},
            {id: 1, text: 'Контроль оформления первичных документов', check: true},
            {id: 2, text: 'Отражение в 1С первичных документов, полученных от поставщиков и подрядчиков', check: true},
            {id: 3, text: 'Подготовка первичных документов для клиентов Заказчика', check: true},
            {id: 4, text: 'Сверка дебиторской/кредиторской задолженности с контрагентами Заказчика.', check: false},
            {id: 5, text: 'Заполнение таблиц, спец форм по формам Заказчика', check: false},
        ],
        popular: true},
        {id: 2, tarif: 'Тариф “Статус”', price: 'от 12500 ₽', conditions: [
            {id: 0, text: 'Выполнение регламентных операций, формирование регистров налогового и бухгалтерского учета', check: true},
            {id: 1, text: 'Контроль оформления первичных документов', check: true},
            {id: 2, text: 'Отражение в 1С первичных документов, полученных от поставщиков и подрядчиков', check: true},
            {id: 3, text: 'Подготовка первичных документов для клиентов Заказчика', check: true},
            {id: 4, text: 'Сверка дебиторской/кредиторской задолженности с контрагентами Заказчика.', check: true},
            {id: 5, text: 'Заполнение таблиц, спец форм по формам Заказчика', check: true},
        ]}
    ]);
    return (
        <section className='py-[90px] bg-[#F7F7FF]'>
            <div className="container mx-auto">
                <Title className='mb-[70px]' titleClass='max-w-[570px]' subtitle='Наши новые клиенты ценят нашу лояльность и индивидуальный подход к расчетам.'>Стоимость бухгалтерских услуг</Title>
                <div className="flex justify-between">
                    {prices.map(price=>
                        <Price key={price.id} tarif={price.tarif} price={price.price} conditions={price.conditions} popular={price.popular}/>
                    )}
                </div>
            </div>
        </section>
    )
}

export default PriceMain;