import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Call, Instagram, Location, Sms, Youtube, Whatsapp } from 'iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import { FC } from 'react'
import { SHOP_CONFIG } from '@/config/const'

const Footer: FC = () => {
    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='/images/logo.png'
                        className='w-full h-auto max-h-20 max-w-20 object-contain'
                    />
                </div>
                <div className='mt-6 text-sm text-[#383E43] '>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
                </div>

                <div className='mt-8 sm:mt-12 md:mt-20 text-[#383E43] text-sm'>
                    <div className='flex gap-3'>
                        <Call color='#383E43' size={20} />
                        <div>تلفن: 67341</div>
                    </div>

                    <div className='flex gap-3 mt-4'>
                        <Sms color='#383E43' size={20} />
                        <div>کدپستی: 1136834843</div>
                    </div>
                    <div className='flex gap-3 mt-4'>
                        <Location color='#383E43' size={20} className='min-w-5' />
                        <div className='leading-5'>
                            تهران، میدان امام خمینی، خیابان فردوسی، خیابان سرهنگ سخائی
                            نبش کوچه بهنیا، پلاک40، طبقه چهارم، واحد12
                        </div>
                    </div>

                </div>

                <div className='mt-8 sm:mt-10 md:mt-14 flex justify-end'>
                    <div className='size-10 bg-amber-200'></div>
                </div>
            </div>
            <div className='flex-1'>
                <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'>
                        <Link href="https://apps.apple.com/app/id123456789" target="_blank" rel="noopener noreferrer">
                            <Image
                                width={132}
                                height={48}
                                alt='download from app store'
                                src='/images/appstore.png'
                                className='w-24 sm:w-[132px] h-auto hover:opacity-80 transition-opacity'
                            />
                        </Link>
                        <Link href="https://play.google.com/store/apps/details?id=com.danak.shop" target="_blank" rel="noopener noreferrer">
                            <Image
                                width={142}
                                height={48}
                                alt='download from google play'
                                src='/images/googleplay.png'
                                className='w-24 sm:w-[142px] h-auto hover:opacity-80 transition-opacity'
                            />
                        </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>

                <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'>
                        <Link href="https://instagram.com/danakshop" target="_blank" rel="noopener noreferrer">
                            <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center transition-colors'>
                                <Instagram size={20} color='#fff' />
                            </div>
                        </Link>
                        <Link href="https://wa.me/989123456789" target="_blank" rel="noopener noreferrer">
                            <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center transition-colors'>
                                <Whatsapp size={20} color='#fff' />
                            </div>
                        </Link>
                        <Link href="https://youtube.com/@danakshop" target="_blank" rel="noopener noreferrer">
                            <div className='size-10 bg-[#878787] hover:bg-primary rounded-full flex justify-center items-center transition-colors'>
                                <Youtube size={20} color='#fff' />
                            </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