import { footerL, footerR } from "@/constans";
import Logo from "@/app/component/Logo";
import Link from "next/link";

// Icons
import Linkedin from "../../icons/Linkedin";
import Telegram from "../../icons/Telegram";
import Whatsapp from "../../icons/Whatsapp";
import Instagram from "../../icons/Instagram";
import LocationF from "../../icons/LocationF";
import CalendarAddF from "../../icons/CalendarAddF";
import StethoscopeF from "../../icons/StethoscopeF";
import LogoNamad from "./LogoNamad";

const socialMedias = [
    <Linkedin />,
    <Telegram />,
    <Whatsapp />,
    <Instagram />
]

const head = [
    { icon: <LocationF />, text: 'جستجوی پزشک در شهر شما' },
    { icon: <CalendarAddF />, text: 'نوبت گیری سریع و آسان' },
    { icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
]

function Footer() {
    return (
        <div className="pb-[11px]">
            <div className="flex items-center justify-evenly gap-[12px]">
                {head.map((item, idx) => (
                    <div
                        key={idx}
                        className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all 
                        transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
                    >
                        {item.icon}
                        <p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
                    </div>
                ))}
            </div>
            <span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
            <div
                className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px] 
                flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
            >
                {/* Right */}
                <div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
                    {/* Icon */}
                    <Logo />
                    <p
                        className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
                    >724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است.     </p>
                    <div className="hidden lg:flex">
                        <LogoNamad />
                    </div>
                </div>

                {/* Center */}
                <ul className="w-full lg:w-fit flex flex-col gap-3">
                    {footerR.map((item, idx) => (
                        <li
                            key={idx}
                            className={`
                            relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
                            ${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
                            text-[16px] w-fit`}
                        >{item}</li>
                    ))}
                </ul>
                <ul className="w-full lg:w-fit flex flex-col gap-3">
                    {footerL.map((item, idx) => (
                        <li
                            key={idx}
                            className={`
                            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
                            ${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
                            text-[16px] w-fit`}
                        >{item}</li>
                    ))}
                </ul>

                {/* Left */}
                <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
                    <p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
                        همراه با ما باشید:
                    </p>
                    <ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
                        {socialMedias.map((item, idx) => (
                            <li
                                key={idx}
                                className="p-2.5 bg-[#EAECFA] rounded-full w-fit"
                            >
                                <Link
                                    href='/'
                                    className="min-h-fit"
                                >
                                    {item}
                                </Link>
                            </li>
                        ))}
                    </ul>
                </div>
                <div className="flex lg:hidden justify-center w-full mt-2">
                    <LogoNamad />
                </div>
            </div>
            <p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
        </div>
    )
}

export default Footer