"use client";
import { motion } from "motion/react";
import Link from "next/link";

export default function Footer() {
  return (
    <motion.footer
      initial={{ y: -25, opacity: 0 }}
      whileInView={{ y: 0, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.25, delay: 0.2 }}
      className="pt-28 pb-6"
    >
      <div className="mx-auto container max-w-[1110px] px-8">
        <div className="relative mt-8 flex justify-between items-center">
          <div className="absolute -top-8 left-0 w-full border-t border-[#09C04C]"></div>

          <p className="text-white/75">© 2025 Collano Labs</p>

          <div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 flex items-center gap-4">
            <Link href={"/"} className="group flex">
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15.2719 1.58661H18.0831L11.9414 8.60619L19.1666 18.1582H13.5093L9.07834 12.365L4.00827 18.1582H1.19534L7.76451 10.65L0.833313 1.58661H6.63424L10.6395 6.88189L15.2719 1.58661ZM14.2852 16.4756H15.843L5.78781 3.18089H4.1162L14.2852 16.4756Z"
                  fill="white"
                  className="group-hover:fill-[#d1ca0d] duration-200"
                />
              </svg>
            </Link>

            <Link href={"/"} className="group flex">
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.42967 10.5292C9.39247 11.0849 9.87385 11.3627 10.4026 11.3632C10.9312 11.3636 11.4131 11.0866 12.3769 10.5326L18.5204 7.00114C18.7978 6.84173 18.9687 6.54622 18.9687 6.22631C18.9687 5.9064 18.7978 5.6109 18.5204 5.45148L12.3747 1.91871C11.4119 1.3653 10.9306 1.0886 10.4024 1.08881C9.87422 1.08901 9.39308 1.36609 8.43078 1.92025L3.14748 4.96274C3.10831 4.9853 3.08875 4.99656 3.07049 5.00723C1.26576 6.06373 0.150741 7.99253 0.135832 10.0837C0.135681 10.1048 0.135681 10.1274 0.135681 10.1726C0.135681 10.2178 0.135681 10.2403 0.135832 10.2614C0.150708 12.3502 1.26324 14.2772 3.06475 15.3346C3.08296 15.3453 3.1025 15.3565 3.14161 15.3791L6.45105 17.2899C8.37945 18.4033 9.34364 18.96 10.4025 18.9603C11.4613 18.9607 12.4259 18.4046 14.3551 17.2926L17.8486 15.2786C18.8146 14.7217 19.2976 14.4433 19.5628 13.9843C19.828 13.5253 19.828 12.9678 19.828 11.8528V9.69893C19.828 9.3896 19.6605 9.10456 19.3902 8.95403C19.1287 8.8084 18.81 8.81056 18.5505 8.95973L11.3869 13.0776C10.9063 13.3539 10.6659 13.492 10.4022 13.4921C10.1385 13.4922 9.89813 13.3542 9.41733 13.0782L4.56884 10.295C4.32598 10.1556 4.20453 10.0859 4.10699 10.0733C3.88462 10.0446 3.67081 10.1692 3.5861 10.3768C3.54896 10.4679 3.5497 10.6079 3.55121 10.8879C3.55231 11.0941 3.55287 11.1972 3.57213 11.292C3.6153 11.5043 3.72699 11.6966 3.8901 11.8392C3.96293 11.9029 4.05219 11.9544 4.23075 12.0575L9.41459 15.0494C9.89665 15.3276 10.1377 15.4667 10.4023 15.4668C10.667 15.4669 10.9081 15.3279 11.3903 15.0499L17.7441 11.3873C17.9088 11.2924 17.9912 11.2449 18.053 11.2806C18.1147 11.3163 18.1147 11.4113 18.1147 11.6014V12.5784C18.1147 12.8572 18.1147 12.9965 18.0484 13.1113C17.9821 13.226 17.8613 13.2957 17.6198 13.4349L12.3791 16.4558C11.4143 17.0119 10.9319 17.29 10.4024 17.2898C9.8729 17.2895 9.39074 17.011 8.42647 16.454L3.52336 13.6217C3.50779 13.6126 3.50001 13.6082 3.49275 13.6039C2.46469 13.0032 1.83034 11.9042 1.82439 10.7134C1.82435 10.705 1.82435 10.6961 1.82435 10.6781V9.78126C1.82435 9.12394 2.17443 8.5164 2.74312 8.18677C3.24564 7.89548 3.86548 7.8949 4.36853 8.18526L8.42967 10.5292Z"
                  fill="white"
                  className="group-hover:fill-[#d1ca0d] duration-200"
                />
              </svg>
            </Link>
          </div>

          <div className="flex items-center gap-5">
            <Link
              href={"/legal/tos"}
              className="text-white/75 hover:text-[#d1ca0d] duration-200"
            >
              Terms of Service
            </Link>

            <span className="w-[4px] h-[4px] bg-[#d9d9d9]/75 rounded-full"></span>

            <Link
              href={"/legal/privacy-policy"}
              className="text-white/75 hover:text-[#d1ca0d] duration-200"
            >
              Privacy Policy
            </Link>
          </div>
        </div>
      </div>
    </motion.footer>
  );
}