import { motion } from 'motion/react'
import Section from './Section'

const ProductsSection = () => {
    const products = [
        {
            title: 'ПО «Квартплата»',
            img: '/Квартплата.png',
            descriptions: [
                'Автоматизация начислений и приёма платежей физических лиц',
                'Ведение лицевых счётов, работа с задолженностью, интеграция с ГИС ЖКХ'
            ]
        },
        {
            title: 'ПО «Расчёты с юридическими лицами»',
            img: '/Юрлица.png',
            descriptions: [
                'Учёт договоров на поставку коммунальных услуг, автоматический расчёт потребления',
                'Формирование счетов-фактур, учёт централизованных организаций с филиалами'
            ]
        },
        {
            title: 'ПО «СБЫТ»',
            img: '/Сбыт.jpg',
            descriptions: [
                'Консолидация данных, формирование плана реализации и бюджета продаж',
                'Анализ выпадающих доходов, подготовка форм ГКЦ РС(Я) (ТХ-1, ВС-1 и др.)'
            ]
        },
        {
            title: 'ПО «Инженерно-картографическая система» ',
            img: '/ИКС.png',
            descriptions: [
                'Графическое отображение сетей тепло- и водоснабжения, котельных',
                'Графическое отображение сетей тепло- и водоснабжения, котельных',
                'Расчёт параметров объектов, паспортизация сетей на карте'
            ]
        },
        {
            title: 'ПО «Топливо и транспорт — FUEL»',
            img: '/Топливо и Транспорт.jpg',
            descriptions: [
                'Учёт топливных ресурсов котельных, перемещений, остатков топлива',
                'Формирование отчётности, путевых листов, учёт мест накоплений ТКО, аналитика расхода ТЭР',
            ]
        },
        {
            title: 'ПО «АСКУУТЭ» ',
            img: '/АСКУУТЭ.jpg',
            descriptions: [
                'Сбор показаний приборов учёта тепла, контроль поверок оборудования',
                'Интеграция с разнородными системами сбора данных, автоматизация расчётов'
            ]
        }
    ]

    return (
        <Section id='products'>
            <div className='w-full p-2 flex flex-col space-y-8 justify-center'>
                <div className='w-full flex justify-center mb-8'>
                    <span className='px-4 text-3xl sm:text-4xl sm:text-center'>
                        <span className='text-blue-500'>Ключевые программные</span> продукты собственной разработки
                    </span>
                </div>

                <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8'>
                    {products.map(product => (
                        <motion.div
                            whileHover={{
                                scale: '1.05',
                                boxShadow: '0 0 10px #00000050'
                            }}
                            initial={{
                                scale: '1',
                                boxShadow: 'none'
                            }}

                            className='p-2 bg-base-200 rounded-2xl grid grid-rows-[min-content_1fr] w-full h-full'>
                            <div className='rounded-2xl overflow-hidden'>
                                <img className='aspect-video object-cover' src={product.img} />
                            </div>

                            <div className='grid grid-rows-[min-content_auto] gap-4 p-4'>
                                <span className='text-xl'>{product.title}</span>

                                <div className='flex flex-col'>
                                    {product.descriptions.map(description => (
                                        <div className='flex flex-row gap-2'>
                                            <svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
                                            </svg>
                                            <span className='text-base-content/70'>{description}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </Section>
    )
}

export default ProductsSection