import { DoubleCheckWhiteSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { H2, H3, H4, H6, S } from '@/components/ui/typography'
import { Check, CircleAlert } from 'lucide-react'
import { useLocale, useTranslations } from 'next-intl'
import React from 'react'
import { pricingFeautures } from './consts'

const PricingSection = () => {
    const t = useTranslations()

    const locale = useLocale()
    const isFr = locale === "fr"
    return (
        <section className='mt-20'>
            <div className='flex items-center gap-2'>
                <H3 className='!text-[24px] !font-[600] !text-gray-800'>{t("Offer Pricing")}</H3>
                <div className='px-[12px] py-[4px] rounded-[9999px] flex items-center gap-2 bg-[#4FB277]'>
                    <div>
                        <DoubleCheckWhiteSVG />
                    </div>
                    <S className='!text-[14px] !text-[white] !font-[500]'>{t("Fleet management is included in packs")}</S>
                </div>
            </div>
            <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mt-4'>
                {pricingFeautures?.packages[0]?.plans?.map((item, index) => (
                    <CustomCard key={index} className={`p-8 rounded-md shadow-lg shadow-black/5 border-none`}>
                        <div className='flex flex-col gap-4'>
                            <div className='flex flex-col gap-2 min-h-[80px]'>
                                <div className='flex items-center gap-4'>
                                    <H4 className='capitalize'>{isFr ? item?.display_nameFr : item?.display_name}</H4>
                                </div>
                                <S className='!text-[16px] !text-gray-500 !font-[400]'>{isFr ? item?.descriptionFr : item?.description}</S>
                            </div>
                            <div className='flex items-end gap-2'>
                                <H6 className='!font-medium'>{`EUR€`}</H6>
                                <div className='flex items-end'><H2>{item?.original_price}</H2><S className='mb-1 !font-[400] !text-[16px]'>/{t("Vehicle")}</S> <S className='text-gray-500 mb-1 !text-[13px] !font-[400]'>/mo</S></div>
                            </div>
                            <span className='w-full h-[1px] bg-gray-300 my-2'></span>
                            <ul className='flex flex-col gap-2 lg:min-h-[400px]'>
                                {item?.features?.length > 0 &&
                                    <>
                                        <S className='max-xl:!text-[12px]'>{isFr ? item?.featuresTextFr : item?.featuresText}:</S>
                                        {item?.features?.map((feature, i) => (
                                            <li key={i} className='flex items-center gap-1 sm:gap-2'>
                                                <>
                                                    <Check className='text-green-500 min-w-6 h-6' />
                                                    <div className='flex flex-col gap-1 '>
                                                        <H6 className='!font-medium !text-[13px] '>{isFr ? feature.display_nameFr : feature.display_name}</H6>
                                                        {feature.bonus &&
                                                            <H6 className='!font-bold !text-[13px] '>{`${isFr ? feature.bonus_fr : feature.bonus}`}  </H6>
                                                        }
                                                    </div>
                                                </>
                                            </li>
                                        ))}
                                    </>
                                }
                            </ul>
                        </div>
                        <div className='mt-4'>
                            <Button url='#contact' className='h-11 w-full' >{t("Select Offer")}</Button>
                        </div>
                    </CustomCard>
                ))}
            </div>
            <div className="flex items-center gap-2 bg-[#E7F3FD] rounded-sm p-2 px-4 mt-4">
                <CircleAlert className="text-primary" />
                <S className="text-primary !font-normal">{t("A box is required for non-connected vehicles, with installation charged per vehicle")}</S>
            </div>
        </section>
    )
}

export default PricingSection