'use client'

import { ArrowUpRightIcon } from '@/app/assets/svg/icon'
import { SectionLabel, Button, Text } from '@/components/ui'
import { motion } from 'motion/react'
import Image from 'next/image'
import type { PaymentSolutionIcon } from '@/types/home'

interface PaymentServicesProps {
  subTitle: string
  title: string
  description: string
  icons: PaymentSolutionIcon[]
  exploreUrl: string
}

const viewportConfig = { once: false, amount: 0.2 }

export const PaymentServices = ({ subTitle, title, description, icons, exploreUrl }: PaymentServicesProps) => {
    // 17 items: mobile=2cols/9rows, md=3cols/6rows, xl=5cols/4rows
    const verticalLines = [
        'left-1/2 md:left-1/3 xl:left-1/5',
        'hidden md:left-2/3 md:block xl:left-2/5',
        'hidden xl:left-3/5 xl:block',
        'hidden xl:left-4/5 xl:block',
    ]
    const horizontalLines = [
        'top-[11.11%] md:top-[16.67%] xl:top-1/4',
        'top-[22.22%] md:top-[33.33%] xl:top-2/4',
        'top-[33.33%] md:top-[50%] xl:top-3/4',
        'top-[44.44%] md:top-[66.67%] xl:hidden',
        'top-[55.55%] md:top-[83.33%] xl:hidden',
        'top-[66.66%] md:hidden',
        'top-[77.77%] md:hidden',
        'top-[88.88%] md:hidden',
    ]
    return (
        <div className='stack ' id='services'>
            <div className='bg-[#F5F5F5] py-20 md:py-24 xl:py-[150px]  '>
               <div className='container'>
                
              <div className=' flex-col flex-center'>
                  <SectionLabel
                    label={subTitle}
                    textclass='text-center mx-auto'
                    className='flex-center flex-col '
                    titleClassName='max-w-[50rem]'
                    title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="gradient-text-green">') }} />}
                    description={description}
                />
             
                <div className='stackinline w-full  space-y-[50px] '>
                    <div className='relative h-full w-full'>
                        <div className='grid auto-rows-fr grid-cols-2 md:grid-cols-3 xl:grid-cols-5'>
                            {icons.map((item, i) => (
                                <motion.div key={i}
                                              initial={{ opacity: 0, scale: 0.92 }} whileInView={{ opacity: 1, scale: 1 }} viewport={viewportConfig}
                                              transition={{ duration: 0.45, ease: [0.25, 0.1, 0.25, 1], delay: i * 0.1 }}
                                              whileHover={{ y: -6 }}
                                              className='flex flex-col items-center gap-[15px] p-4 md:p-5 group cursor-pointer'>
                                    <Image src={item.payment_solutions_iocn.url} alt={item.payment_solutions_icon} width={100} height={100} className='object-contain transition-transform duration-500 ease-out group-hover:-translate-y-2 group-hover:scale-110 h-[50px] md:h-[100px]' />
                                    <Text size='normal' className='font-semibold text-center transition-all duration-500 group-hover:scale-105' textKey={item.payment_solutions_icon}/>
                                </motion.div>
                            ))}
                        </div>
                        <div className='pointer-events-none absolute inset-0 h-full w-full'>
                            {horizontalLines.map((position) => (
                                <div
                                    key={position}
                                    className={`absolute inset-x-0 ${position} h-px w-full bg-[linear-gradient(270deg,#F5F5F5_0%,#E7E7E7_25%,#E7E7E7_75%,#F5F5F5_100%)]`}
                                />
                            ))}
                            {verticalLines.map((position) => (
                                <div
                                    key={position}
                                    className={`absolute inset-y-0 ${position} h-full w-px self-stretch bg-[linear-gradient(180deg,#F5F5F5_0%,#E7E7E7_32.39%,#E7E7E7_67.52%,#F5F5F5_100%)]`}
                                />
                            ))}
                        </div>
                    </div>
             
                </div>
                
              </div>
                  
               </div>
            </div>
        </div>
    )
}