'use client'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Call, Location, Sms } from 'iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import { FC } from 'react'
import { SHOP_CONFIG } from '@/config/const'
import { useGetSiteSetting } from '@/app/privacy/hooks/usePrivacyData'

const Footer: FC = () => {

    const { data: siteSetting } = useGetSiteSetting('all')

    return (
        <div className='mt-12 sm:mt-16 md:mt-24 bg-[#F5F5F5] p-4 sm:p-8 md:p-20 flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-20'>
            <div className='bg-[#F2F2F2] w-full lg:max-w-[450px] p-4 sm:p-6 md:p-7 rounded-2xl border border-border'>
                <div className='flex justify-center'>
                    <Image
                        width={100}
                        height={100}
                        alt='logo'
                        src={siteSetting?.results?.siteSetting?.siteLogo || '/images/logo.png'}
                        className='w-full h-auto max-h-20 max-w-20 object-contain'
                    />
                </div>
                <div dangerouslySetInnerHTML={{ __html: siteSetting?.results?.siteSetting?.footerDescription || '' }} className='mt-6 text-sm text-[#383E43] leading-6'>
                </div>

                <div className='mt-8 sm:mt-12 md:mt-20 text-[#383E43] text-sm'>
                    {siteSetting?.results?.siteSetting?.footerPhone && (
                        <div className='flex gap-3'>
                            <Call color='#383E43' size={20} />
                            <div>تلفن: {siteSetting.results.siteSetting.footerPhone}</div>
                        </div>
                    )}

                    {siteSetting?.results?.siteSetting?.footerEmail && (
                        <div className='flex gap-3 mt-4'>
                            <Sms color='#383E43' size={20} />
                            <div>ایمیل: {siteSetting.results.siteSetting.footerEmail}</div>
                        </div>
                    )}

                    {siteSetting?.results?.siteSetting?.footerAddress && (
                        <div className='flex gap-3 mt-4'>
                            <Location color='#383E43' size={20} className='min-w-5' />
                            <div className='leading-5'>
                                {siteSetting.results.siteSetting.footerAddress}
                            </div>
                        </div>
                    )}

                </div>

                <div className='mt-8 sm:mt-10 md:mt-14 flex justify-end'>
                    <a referrerPolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=669311&Code=e8E4MaqVg7oc9r1JaXktwNRHv8Uk8mK9'>
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                            referrerPolicy='origin'
                            src='https://trustseal.enamad.ir/logo.aspx?id=669311&Code=e8E4MaqVg7oc9r1JaXktwNRHv8Uk8mK9'
                            alt='نماد اعتماد الکترونیکی'
                            className='h-20 w-auto object-contain'
                            loading='lazy'
                        />
                    </a>
                </div>
            </div>
            <div className='flex-1'>
                {siteSetting?.results?.siteSetting?.downloadAppDetails && siteSetting.results.siteSetting.downloadAppDetails.length > 0 && (
                    <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0'>
                        <div className='text-[#383E43] text-sm sm:text-base font-light'>
                            دانلود اپلیکیشن
                        </div>
                        <div className='flex gap-2 flex-wrap'>
                            {siteSetting.results.siteSetting.downloadAppDetails.map((app) => (
                                <Link key={app.id} href={app.url} target="_blank" rel="noopener noreferrer">
                                    <Image
                                        width={132}
                                        height={48}
                                        alt='download app'
                                        src={app.pic}
                                        className='size-10 object-contain'
                                    />
                                </Link>
                            ))}
                        </div>
                    </div>
                )}

                <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0 mt-4 sm:mt-6'>
                    <div className='text-[#383E43] text-sm sm:text-base font-light'>
                        با ثبت ایمیل از آخرین تخفیف ها با خبر شوید
                    </div>
                    <div className='flex gap-2 w-full sm:w-auto'>
                        <div className='bg-[#E5E5E5] h-12 flex gap-3 items-center px-3 rounded-[8px] flex-1 sm:flex-none'>
                            <Sms size={20} color='#383E43' />
                            <Separator className='bg-[#C9C9C9]' style={{ height: 15 }} orientation='vertical' />
                            <input placeholder='آدرس ایمیل' className='bg-transparent outline-none text-sm w-full' />
                        </div>
                        <Button className='h-12 w-[72px] flex-shrink-0'>
                            ثبت
                        </Button>
                    </div>
                </div>

                {siteSetting?.results?.siteSetting?.socialMediaLinks && siteSetting.results.siteSetting.socialMediaLinks.length > 0 && (
                    <div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0 mt-4 sm:mt-6'>
                        <div className='text-[#383E43] text-sm sm:text-base font-light'>
                            ما را در شبکه های اجتماعی دنبال کنید
                        </div>

                        <div className='flex gap-1.5'>
                            {siteSetting.results.siteSetting.socialMediaLinks.map((social) => (
                                <Link key={social.id} href={social.url} target="_blank" rel="noopener noreferrer">
                                    <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center transition-colors'>
                                        <Image
                                            src={social.icon}
                                            alt='social media'
                                            width={20}
                                            height={20}
                                            className='w-5 h-5 object-contain brightness-0 invert'
                                        />
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </div>
                )}

                <div className='mt-8 sm:mt-12 md:mt-20 flex flex-col sm:flex-row justify-between gap-6 sm:gap-0'>
                    <div>
                        <div className='text-sm sm:text-base font-medium'>همراه با {SHOP_CONFIG.fullName}</div>
                        <ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
                            <li>
                                <Link href="/contact" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    تماس با ما
                                </Link>
                            </li>
                            <li>
                                <Link href="/about" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    درباره {SHOP_CONFIG.fullName}
                                </Link>
                            </li>
                            <li>
                                <Link href="/contact" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    فروش در {SHOP_CONFIG.fullName}
                                </Link>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div className='text-sm sm:text-base font-medium'>راهنمای خرید از {SHOP_CONFIG.fullName}</div>
                        <ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
                            <li>
                                <Link href="/guide-order" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    نحوه ثبت سفارش
                                </Link>
                            </li>
                            <li>
                                <Link href="/return-policy" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    قوانین مرجوعی کالا
                                </Link>
                            </li>
                            <li>
                                <Link href="/faq" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    پاسخ به پرسش ها متداول
                                </Link>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div className='text-sm sm:text-base font-medium'>خدمات مشتریان</div>
                        <ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
                            <li>
                                <Link href="/profile" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    حساب کاربری من
                                </Link>
                            </li>
                            <li>
                                <Link href="/cart" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    سبد خرید
                                </Link>
                            </li>
                            <li>
                                <Link href="/privacy" className='text-[#878787] hover:text-primary transition-colors text-sm sm:text-base'>
                                    حریم خصوصی
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Footer