import { motion, useScroll, useTransform } from "motion/react"
import { useRef } from "react";

const ServiceItem = ({ service }: {
    service: {
        id: string;
        title: string;
        descriptions: string[];
    }
}) => {
    const ref = useRef(null)
    const { scrollYProgress } = useScroll({
        target: ref,
        offset: ["end end", "start start"],
    })

    const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
    const scale = useTransform(scrollYProgress, [0, 1], [0.9, 1])


    return (
        <motion.div
            ref={ref}
            style={{
                scale: scale
            }}
            className='group p-8 bg-base-300 rounded-2xl grid grid-cols-[0.5fr_1fr_1fr_1fr] justify-start gap-8'
        >
            <motion.span
                style={{
                    opacity: opacity
                }}
                className='col-span-1 text-5xl sm:text-8xl leading-12 sm:leading-20 text-blue-500 sm:text-base-content/10 sm:group-hover:text-blue-500 transition-colors'>{service.id}</motion.span>
            <span className='col-span-3 sm:col-span-1 text-2xl sm:text-xl'>{service.title}</span>
            <div className='row-start-2 sm:row-start-1 col-span-4 sm:col-start-3 sm:col-span-2 flex flex-col gap-4'>
                {service.descriptions.map(desc => (
                    <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'>{desc}</span>
                    </div>
                ))}
            </div>

        </motion.div>
    )
}

const ServicesSection = () => {
    const services = [
        {
            id: '01',
            title: 'Разработка и сопровождение ПО',
            descriptions: [
                'Адаптация и модификация систем на базе 1С, с использованием СУБД MS SQL и PostgreSQL',
                'Разработка аналитических отчётов и интеграционных решений'
            ]
        },
        {
            id: '02',
            title: 'ИТ-аутсорсинг и инфраструктура',
            descriptions: [
                'Обсуждение АРМ (ПК, моноблоки), серверов и оргтехники',
                'Администрирование локальных сетей и IP-телефонии',
                'Обеспечение ИТ-безопасности (антивирусная защита, резервное копирование)'
            ]
        },
        {
            id: '03',
            title: 'Импортозамещение',
            descriptions: [
                'Поставка оборудования (серверы, периферия) из Единого реестра российской радиоэлектронной продукции (ПП РФ № 878)',
                'Перевод инфраструктуры на отечественное ПО (Astra Linux, P7-Офис и др.)'
            ]
        },
        {
            id: '04',
            title: '1С: Франчайзинг',
            descriptions: [
                'Продажа лицензий, внедрение и доработка конфигураций (1С: Управление холдингом, 1С: ЗУП, 1С: Бухгалтерия)'
            ]
        }
    ]

    return (
        <section id='services' className='max-w-7xl w-full h-auto'>
            <div className='w-full h-auto flex flex-col items-center mb-8'>
                <span className='px-4 text-3xl sm:text-4xl sm:text-center my-8'>
                    <span className='text-blue-500'>Предоставляемые услуги</span> нашей компании
                </span>

                <div className='h-full grid grid-cols-1 sm:grid-cols-3 font-light sm:gap-4 p-2 xl:p-0'>
                    <div className='flex flex-col gap-8'>
                        <div className='bg-blue-500 flex flex-col gap-6 p-10 col-span-1 rounded-2xl overflow-hidden'>
                            <div className='bg-base-300/50 py-2 px-4 flex w-min rounded-3xl'>
                                <span className='text-nowrap text-xs text-white'>Цифровая надёжность</span>
                            </div>
                            <span className='text-4xl text-white'>ООО «КОММИТ»</span>
                            <span className='text-white'>
                                Разработка и сопровождение программного обеспечения для сферы ЖКХ и государственных организаций
                            </span>
                            <div className="flex justify-center p-4">
                                <img className="max-w-48" src='/service.svg' />
                            </div>
                        </div>

                        <div>
                            <span className='text-[1rem] text-base-content/70'>
                                ✳︎ Наши услуги ориентированы на долгосрочную ценность: мы не просто реализуем отдельные задачи, a <span className='text-blue-500'>выстраиваем технологическую основу для роста, масштабирования и развития бизнеса.</span> Надёжность, контроль и ответственность — ключевые принципы нашей работы.
                            </span>
                        </div>
                    </div>

                    <div className='my-8 sm:my-0 flex flex-col gap-4 col-span-2 rounded-2xl overflow-hidden'>
                        {services.map(service => (
                            <ServiceItem service={service} />
                        ))}
                    </div>
                </div>
            </div>
        </section>
    )
}

export default ServicesSection