'use client';
import React from 'react';
import '@/shared/ogenix-icons/style.css';
import EmailInput from './EmailInput';
import LogoGridItem from './LogoGridItem';
import ExploreGridItem from './ExploreGridItem';
import ContactGridItem from './ContactGridItem';
import GaleryGridItem from './GaleryGridItem';
import { motion } from 'framer-motion';
import Image from 'next/image';

const Footer = () => {
  return (
    <footer className="mt-[100px] relative">
      <div className="absolute top-0 translate-y-[-30%] left-0 right-0 z-10">
        <div className="custom-container relative">
          <div className="flex justify-between items-center max-md:flex-col max-md:items-stretch gap-1 p-[25px] rounded-[20px] rounded-tl-none bg-primary">
            <div className="flex flex-[1.2] justify-start gap-2 text-white">
              <div className="text-[48px]">
                <span className="icon-folder"></span>
              </div>
              <div>
                <p className="font-caveat text-[20px] font-extrabold">
                  Подпишитесь на рассылку
                </p>
                <h5 className="font-extrabold text-[24px] leading-[25px]">
                  Получайте новости и обновления
                </h5>
              </div>
            </div>
            <div className="flex-1">
              <EmailInput />
            </div>
            <motion.div
              initial={{ left: '-40px' }}
              animate={{ left: '-30px' }}
              transition={{
                duration: 1,
                repeat: Infinity,
                repeatType: 'reverse',
                ease: [0, 0, 1, 1] as const,
              }}
              className="absolute top-[-40px] left-[-40px] size-[100px]"
            >
              <Image
                src={'/images/footer/footer-shape-1.webp'}
                alt="footer-image"
                width={100}
                height={100}
              />
            </motion.div>
            <motion.div
              initial={{ top: '-40px' }}
              animate={{ top: '-30px' }}
              transition={{
                duration: 1,
                repeat: Infinity,
                repeatType: 'reverse',
                ease: [0, 0, 1, 1] as const,
              }}
              className="absolute top-[-40px] right-[-60px] size-[100px]"
            >
              <Image
                src={'/images/footer/footer-shape-2.webp'}
                alt="footer-image"
                width={100}
                height={100}
              />
            </motion.div>
          </div>
        </div>
      </div>
      <div className="bg-accent relative">
        <div className="absolute inset-0 bg-[url(/images/footer/site-footer-bg.webp)] opacity-5"></div>
        <div className="absoute top-[10px] left-0 right-0 h-[60px] bg-repeat-x bg-[url(/images/footer/site-footer-ripped.webp)] z-10 bg-top"></div>
        <div className="custom-container text-white py-[100px] relative z-[9]">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            <div className="lg:col-span-2">
              <LogoGridItem />
            </div>
            <ExploreGridItem />
            <ContactGridItem />
            <GaleryGridItem />
          </div>
        </div>
      </div>
      <div className="bg-accent py-[20px] text-muted text-[14px] ">
        <div className="flex justify-between items-center custom-container">
          <div className="text-center">
            Авторские права © ZHANGZHOU ZHENTIAN FOOD CO., LTD. Все права
            защищены.
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
