import logoMobile from '@/assets/logoMobile.svg';
import { Button } from '@/components/ui/button';
import { InstagramLogoIcon, LinkedInLogoIcon } from '@radix-ui/react-icons';
import { ArrowUpIcon } from 'lucide-react';
import { Link } from 'react-router-dom';

// function FooterSec({
//   title,
//   links,
// }: {
//   title?: string;
//   links: { link: string; text: string }[];
// }) {
//   return (
//     <>
//       {title && (
//         <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
//           {title}
//         </h2>
//       )}
//       <ul className="text-gray-500 dark:text-gray-400 font-medium">
//         {links.map(({ link, text }, index) => (
//           <li key={index}>
//             <Link to={link} className="hover:underline">
//               {text}
//             </Link>
//           </li>
//         ))}
//       </ul>
//     </>
//   );
// }

function Footer() {
  const scrollUp = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <footer className="bg-white dark:bg-gray-900">
      <hr className="mb-6 border-gray-200 sm:mx-auto dark:border-gray-700 md:mb-0" />
      <div className="px-[3.5rem] lg:px-[5.25rem] xl:px-[8.25rem] mx-auto w-full  py-6 lg:py-8">
        <div className="md:flex md:justify-between">
          <div className="mb-6 md:mb-0 flex items-center sm:items-start justify-between">
            <Link to="/" className="flex items-center">
              <img draggable="false" src={logoMobile} alt="Snai3i Logo" />
            </Link>
            <Button
              className=" sm:hidden w-10 h-10 p-2 mr-5"
              // className=" sm:hidden w-10 h-10 p-2 mr-5"
              onClick={scrollUp}
            >
              <ArrowUpIcon className="h-10 w-10" />
            </Button>
          </div>
          {/* <div className="grid grid-cols-1 gap-8 sm:gap-3 sm:grid-cols-3"> */}
          {/* <FooterSec
              links={[
                { text: 'About', link: '#' },
                { text: 'Spark', link: '#' },
                { text: 'Storm', link: '#' },
                { text: 'Market', link: '#' },
                { text: 'Event', link: '#' },
              ]}
            />
            <FooterSec
              links={[
                { text: 'Privacy Policy', link: '#' },
                { text: 'Terms & Conditions', link: '#' },
              ]}
            /> */}
          <div className="flex justify-end">
            <Button
              className="hidden sm:inline-flex w-10 h-10 p-2 "
              onClick={scrollUp}
            >
              <ArrowUpIcon className="h-10 w-10" />
            </Button>
          </div>
          {/* </div> */}
        </div>
      </div>
      <hr className="mb-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:mb-8" />
      <div className="px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] mx-auto w-full pb-6 lg:pb-8">
        <div className=" flex flex-col items-center sm:flex-row sm:justify-between">
          <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
            © 2024{' '}
            <Link to="/" className="hover:underline">
              Snai3i™
            </Link>
            . All Rights Reserved.
          </span>
          <div className="flex justify-center md:justify-start mt-4 space-x-1 sm:justify-center sm:mt-0">
            <Link
              to="https://www.facebook.com/snai3i.dz"
              className="text-primary hover:text-primaryBlue dark:hover:text-white border border-textPrimary hover:border-primary rounded-full p-2"
            >
              <svg
                className="w-4 h-4"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 8 19"
              >
                <path
                  fillRule="evenodd"
                  d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
                  clipRule="evenodd"
                />
              </svg>
              <span className="sr-only">Facebook page</span>
            </Link>
            <Link
              to="https://www.instagram.com/snai3i.dz/"
              className="text-primary hover:text-primaryBlue dark:hover:text-white border border-textPrimary hover:border-primary rounded-full p-2"
            >
              <InstagramLogoIcon className="w-4 h-4" />
              <span className="sr-only">Instagram page</span>
            </Link>
            <Link
              to="https://www.linkedin.com/company/snai3i"
              className="text-primary hover:text-primaryBlue dark:hover:text-white border border-textPrimary hover:border-primary rounded-full p-2"
            >
              <LinkedInLogoIcon className="w-4 h-4 fill-current" />
              <span className="sr-only">LinkedIn page</span>
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;

// import { motion } from "framer-motion";

// export const sentenceVariants = {
//   hidden: {},
//   // change staggerChildren variable to speed up or slow down typing.
//   visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
// };

// export const letterVariants = {
//   hidden: { opacity: 0 },
//   visible: { opacity: 1, transition: { opacity: { duration: 0 } } }
// };

// export const Typewriter = ({ text, ...rest }) => (
//   <motion.p
//     key={text}
//     variants={sentenceVariants}
//     initial="hidden"
//     animate="visible"
//     {...rest}
//   >
//     {text.split("").map((char, i) => (
//       <motion.span key={`${char}-${i}`} variants={letterVariants}>
//         {char}
//       </motion.span>
//     ))}
//   </motion.p>
// );