import Link from 'next/link'
import Image from 'next/image'
import fb from '../../../public/assets/layout/fb.svg'
import is from '../../../public/assets/layout/is.svg'
import tw from '../../../public/assets/layout/tw.svg'
import lk from '../../../public/assets/layout/lk.svg'
import yt from '../../../public/assets/layout/yt.svg'
import footer from '../../../public/assets/layout/footer.svg'

export default function Footer () {
    return (
        <footer className="tracking-[0.2px] w-[100vw] mt-20 sm:mt-10">
            <section className='text-[#252B42] grid grid-cols-4 justify-items-center lg:grid-cols-3 sm:flex sm:flex-col sm:justify-items-start sm:gap-10'>
                <div className='flex flex-col gap-5 sm:gap-3 sm:items-center sm:mx-5'>
                    <Link href="https://www.scriptor.fr/services/redaction-de-memoire-de-recherche">
                        <h2 className='font-bold text-xl'>Mémoire</h2>
                    </Link>
                    <ul className="flex text-lg flex-col gap-2.5 md:text-base sm:flex-row sm:gap-x-7 sm:gap-y-2 sm:flex-wrap sm:justify-center">
                        <li><Link href="https://www.scriptor.fr/services/redaction-de-memoire-dec-expertise-comptable">Mémoire DEC</Link></li>
                        <li><Link href="https://www.scriptor.fr/services/redaction-de-memoire-vae">VAE</Link></li>
                        <li><Link href="https://www.scriptor.fr/services/dossier-raep">Dossier RAEP</Link></li>
                        <li><Link href="https://www.scriptor.fr/services/tfe-infirmier">TFE Infirmier</Link></li>
                        <li><Link href="https://www.scriptor.fr/services/redaction-de-these" className='hover:text-[#2A3955] transition-all duration-300'>Thèse</Link></li>
                    </ul>
                </div>
                <div className='flex flex-col gap-5 sm:gap-3 sm:items-center sm:mx-5'>
                    <Link href="https://www.scriptor.fr/expertises/tutorat">
                        <h2 className='font-bold text-xl'>Tutorat</h2>
                    </Link>
                    <ul className="flex text-lg flex-col gap-2.5 md:text-base sm:flex-row sm:gap-x-7 sm:gap-y-2 sm:flex-wrap sm:justify-center">
                        <li><Link href="https://www.scriptor.fr/expertises/aide-a-la-redaction">Aide à la rédaction</Link></li>
                        <li><Link href="https://www.scriptor.fr/expertises/preparation-a-loral">{`Préparation à l'oral`}</Link></li>
                        <li><Link href="https://www.scriptor.fr/expertises/mise-en-page">Mise en page</Link></li>
                        <li><Link href="https://www.scriptor.fr/expertises/sur-mesure" className='hover:text-[#2A3955] transition-all duration-300'>Nos services</Link></li>
                    </ul>
                </div>
                <div className='flex flex-col gap-5 sm:gap-3 sm:items-center sm:mx-5'>
                    <Link href="https://www.scriptor.fr/equipe">
                        <h2 className='font-bold text-xl'>Qui sommes-nous</h2>
                    </Link>
                    <ul className="flex text-lg flex-col gap-2.5 md:text-base sm:flex-row sm:gap-x-7 sm:gap-y-2 sm:flex-wrap sm:justify-center">
                        <li><Link href="https://www.scriptor.fr/faq">FAQ</Link></li>
                        <li><Link href="https://www.scriptor.fr/category/boite-outils">Boite à outils</Link></li>
                    </ul>
                </div>
                <Image
                    src={footer}
                    alt="Logo"
                    className="lg:hidden" />
            </section>
            <section className='bg-[#409FC3] py-4 grid grid-cols-4 justify-items-center mt-16 md:flex md:justify-between md:px-5 md:mt-10'>
                <h1 className='text-lg font-bold text-white'>Scriptor</h1>
                <div className="flex gap-[10px] items-center col-start-4">
                    <Link href=""><Image src={fb} alt="Facebook" className='min-w-[24px]' /></Link>
                    <Link href=""><Image src={yt} alt="Youtube" className='min-w-[24px]' /></Link>
                    <Link href=""><Image src={lk} alt="Linkedin" className='min-w-[24px]' /></Link>
                    <Link href=""><Image src={tw} alt="Twitter" className='min-w-[24px]' /></Link>
                    <Link href=""><Image src={is} alt="Instagram" className='min-w-[24px]' /></Link>
                </div>
            </section>
        </footer>
    )
}