Footer 2

"use client"

// third-party
import { motion, type Variants } from "framer-motion"

// assets
import { ChevronRight } from "lucide-react"

// types
const footerColumns = [
  {
    title: "About Us",
    links: ["Our Story", "Our Team", "Careers", "Press & Media", "Contact Us"],
  },
  {
    title: "Services",
    links: [
      "Web Design",
      "App Development",
      "SaaS Solutions",
      "UI/UX Consultations",
      "Digital Marketing",
    ],
  },
  {
    title: "Resources",
    links: [
      "Blog",
      "Documentation",
      "Community",
      "Help Center",
      "API Reference",
    ],
  },
  {
    title: "Extra",
    links: [
      "Terms & Conditions",
      "Privacy Policy",
      "FAQ",
      "Support Center",
      "System Status",
    ],
  },
]

const socialIcons = [
  {
    label: "Facebook",
    bgClass: "bg-[#1877f2]",
    svg: (
      <svg
        className="h-6 w-6"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_255_10818)">
          <path
            d="M17.1538 4C17.3611 4.00003 17.5611 4.07196 17.716 4.20217C17.8709 4.33238 17.9698 4.5118 17.9941 4.7064L18 4.8V8C18 8.19595 17.9239 8.38507 17.7862 8.5315C17.6484 8.67793 17.4587 8.77147 17.2528 8.7944L17.1538 8.8H14.6154V9.6H17.1538C17.2743 9.60004 17.3934 9.6244 17.503 9.67144C17.6127 9.71849 17.7106 9.78713 17.7899 9.87278C17.8693 9.95844 17.9284 10.0591 17.9634 10.1681C17.9983 10.2771 18.0082 10.3919 17.9924 10.5048L17.9755 10.5944L17.1293 13.7944C17.0873 13.9524 16.9953 14.0945 16.8656 14.2017C16.7358 14.309 16.5745 14.3762 16.4033 14.3944L16.3077 14.4H14.6154V19.2C14.6154 19.3959 14.5393 19.5851 14.4015 19.7315C14.2638 19.8779 14.0741 19.9715 13.8682 19.9944L13.7692 20H10.3846C10.1774 20 9.97733 19.928 9.82245 19.7978C9.66758 19.6676 9.56863 19.4882 9.54438 19.2936L9.53846 19.2V14.4H7.84615C7.6389 14.4 7.43887 14.328 7.28399 14.1978C7.12912 14.0676 7.03017 13.8882 7.00592 13.6936L7 13.6V10.4C7.00003 10.2041 7.07612 10.0149 7.21384 9.8685C7.35156 9.72207 7.54133 9.62853 7.74715 9.6056L7.84615 9.6H9.53846V8.8C9.53841 7.5581 10.0475 6.36451 10.9587 5.47002C11.8699 4.57553 13.1124 4.04977 14.425 4.0032L14.6154 4H17.1538Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="clip0_255_10818">
            <rect className="h-8 w-8" fill="currentColor" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "Twitter",
    bgClass: "bg-[#101411]",
    svg: (
      <svg
        className="h-6 w-6"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_255_10822)">
          <path
            d="M5.31529 2.09988C6.10629 1.98688 7.21529 2.24488 8.64829 3.06588L8.92029 3.22688L9.08029 3.32688L9.47729 3.24388C10.9911 2.95137 12.5442 2.9243 14.0673 3.16388L14.5233 3.24388L14.9193 3.32688L15.0803 3.22688C16.4653 2.38688 17.5673 2.05688 18.4023 2.07888L18.5663 2.08688L18.7133 2.10388L18.7893 2.11788L18.8393 2.12888L18.9833 2.17588C19.2191 2.27334 19.4087 2.45721 19.5133 2.68988C19.9225 3.60158 20.0603 4.61188 19.9103 5.59988L19.8633 5.86688L19.8173 6.06288L19.9403 6.22588C20.5143 7.02088 20.8703 7.95388 20.9703 8.93288L20.9933 9.22788L21.0003 9.49988C21.0003 13.3549 19.3413 15.3829 16.3563 16.1799L16.1113 16.2409L15.9793 16.2699L15.9933 16.4309L16.0013 16.5879L16.0053 16.9529L16.0033 17.1659L16.0003 20.9999C16.0003 21.2448 15.9103 21.4812 15.7476 21.6643C15.5848 21.8473 15.3605 21.9642 15.1173 21.9929L15.0003 21.9999H9.00029C8.75536 21.9998 8.51896 21.9099 8.33592 21.7472C8.15289 21.5844 8.03595 21.3601 8.00729 21.1169L8.00029 20.9999V20.2659C6.18229 20.5259 4.97029 19.8419 3.89029 18.3879L3.35529 17.6219C3.07529 17.2259 2.90029 17.0429 2.76629 16.9779L2.71829 16.9589C2.47071 16.8784 2.26425 16.7046 2.14281 16.4743C2.02137 16.244 1.99452 15.9755 2.06796 15.7257C2.14141 15.476 2.30936 15.2647 2.53611 15.1368C2.76287 15.0089 3.03056 14.9745 3.28229 15.0409C3.92429 15.2289 4.35629 15.6089 4.85229 16.2799L5.39029 17.0489C6.15029 18.1279 6.75029 18.5079 7.99929 18.2399L8.00029 17.5619L7.98229 17.3939C7.95276 17.1202 7.94574 16.8447 7.96129 16.5699L7.97829 16.3849L7.99729 16.2649L7.88929 16.2409C4.91329 15.5309 3.18629 13.6679 3.01429 10.1019L3.00429 9.79188L3.00029 9.49988C3.00145 8.41646 3.31686 7.35663 3.90829 6.44888L4.06029 6.22688L4.18229 6.06388L4.13729 5.86788C3.95701 4.98944 4.00696 4.07931 4.28229 3.22588L4.38229 2.94388L4.48829 2.69088C4.59269 2.4584 4.78191 2.27455 5.01729 2.17688L5.16129 2.12988L5.31529 2.09988Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="clip0_255_10822">
            <rect className="h-8 w-8" fill="currentColor" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "LinkedIn",
    bgClass: "bg-[#0072b1]",
    svg: (
      <svg
        className="h-6 w-6"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H18C18.5304 20 19.0391 19.7893 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 18V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579ZM8.99935 10.9993C8.99935 10.4471 8.55163 9.99935 7.99935 9.99935C7.44706 9.99935 6.99935 10.4471 6.99935 10.9993V15.9993C6.99935 16.5516 7.44706 16.9993 7.99935 16.9993C8.55163 16.9993 8.99935 16.5516 8.99935 15.9993V10.9993ZM16.1204 10.8783C15.5578 10.3156 14.795 9.99935 13.9993 9.99935C13.5478 9.99935 13.1082 10.1043 12.7083 10.2952C12.5272 10.1128 12.2767 9.99935 11.9993 9.99935C11.4471 9.99935 10.9993 10.4471 10.9993 10.9993V15.9993C10.9993 16.5516 11.4471 16.9993 11.9993 16.9993C12.5516 16.9993 12.9993 16.5516 12.9993 15.9993V12.9993C12.9993 12.7341 13.1048 12.4799 13.2923 12.2923C13.4799 12.1048 13.7341 11.9993 13.9993 11.9993C14.2646 11.9993 14.5188 12.1048 14.7064 12.2923C14.8939 12.4799 14.9993 12.7341 14.9993 12.9993V15.9993C14.9993 16.5516 15.4471 16.9993 15.9993 16.9993C16.5516 16.9993 16.9993 16.5516 16.9993 15.9993V12.9993C16.9993 12.2037 16.6831 11.4409 16.1204 10.8783ZM8.99935 7.99935C8.99935 7.44706 8.55163 6.99935 7.99935 6.99935C7.44706 6.99935 6.99935 7.44706 6.99935 7.99935V8.00911C6.99935 8.5614 7.44706 9.00911 7.99935 9.00911C8.55163 9.00911 8.99935 8.5614 8.99935 8.00911V7.99935Z"
          fill="currentColor"
        />
      </svg>
    ),
  },
]

// Animation Variants
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.1,
    },
  },
}

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
}

//  ------------------------------ | FOOTER - 2 | ------------------------------  //

export default function Footer1() {
  return (
    <footer className="relative overflow-hidden">
      <div className="absolute inset-0 z-10 bg-linear-to-t from-pink-100 to-pink-50 dark:from-pink-950 dark:to-pink-900"></div>

      <div className="relative z-30 container mx-auto px-6 py-24 sm:py-32 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.1 }}
          variants={containerVariants}
          className="grid grid-cols-12 gap-6"
        >
          <motion.div
            variants={itemVariants}
            className="col-span-12 lg:col-span-3"
          >
            <div className="flex flex-col gap-3 sm:gap-4">
              <div className="flex flex-row items-center gap-3">
                <motion.div
                  whileHover={{ rotate: 180, scale: 1.1 }}
                  transition={{ duration: 0.5 }}
                >
                  <svg
                    className="size-8 fill-pink-500"
                    viewBox="0 0 256 256"
                    id="Flat"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g opacity="0.1">
                      <path d="M73.87573,111.39355l-.009-.03369L42.51636,148.98047a7.99958,7.99958,0,0,0-1.66358,6.85693l12.3628,55.63281a8,8,0,0,0,12.80713,4.51172L96,192C78.36523,161.44922,72.74268,134.47656,73.87573,111.39355Z" />
                    </g>
                    <g opacity="0.1">
                      <path d="M181.52239,110.6714l.009-.03369,31.35034,37.6206a7.99958,7.99958,0,0,1,1.66358,6.85693l-12.3628,55.63282a8,8,0,0,1-12.80712,4.51172l-29.9773-23.98194C177.03289,160.72706,182.65544,133.75441,181.52239,110.6714Z" />
                    </g>
                    <g>
                      <path d="M144,216H112a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Z" />
                      <circle cx="128" cy="96" r="12" />
                      <path d="M219.62891,143.85889l-30.23658-36.28418a124.52267,124.52267,0,0,0-7.98022-34.8833c-11.61719-30.21192-32.15625-49.999-43.36523-59.10547a16.07708,16.07708,0,0,0-20.07813-.0669C106.61328,22.61621,85.81055,42.38867,74.07617,72.605A122.76188,122.76188,0,0,0,65.979,108.32861L36.37109,143.85889A16.10066,16.10066,0,0,0,33.043,157.57275l12.36328,55.63282a15.98523,15.98523,0,0,0,25.61328,9.023L98.80566,200h58.38868l27.78515,22.22852a15.91184,15.91184,0,0,0,9.96485,3.51709,16.0905,16.0905,0,0,0,5.34668-.91944,15.90581,15.90581,0,0,0,10.30273-11.62012L222.957,157.57373A16.102,16.102,0,0,0,219.62891,143.85889ZM127.9668,26.01074C198.25391,83.126,169.43359,157.01074,155.25,184H100.67871C52.6709,96.27734,109.22559,41.02637,127.9668,26.01074ZM61.02539,209.73486l-12.36328-55.6333,17.92651-21.5122q3.40906,28.0371,19.14038,57.38281Zm133.94922,0-24.74976-19.7998q15.53064-29.55175,18.74341-57.87695l18.36963,22.04345Z" />
                    </g>
                  </svg>
                </motion.div>
                <span className="text-lg font-medium text-slate-900 sm:text-xl dark:text-mauve-100">
                  SaaSify
                </span>
              </div>
              <p className="text-slate-600 dark:text-mauve-400">
                Built for modern teams to organize projects, automate workflows,
                and collaborate. Make smarter, data-driven decisions.
              </p>
            </div>
          </motion.div>

          <div className="col-span-12 lg:col-span-9">
            <div className="grid grid-cols-12 gap-6">
              {footerColumns.map((col) => (
                <motion.div
                  key={col.title}
                  variants={itemVariants}
                  className="col-span-12 sm:col-span-6 lg:col-span-3"
                >
                  <div className="flex flex-col gap-3 sm:gap-6">
                    <div className="text-lg font-medium text-slate-900 dark:text-mauve-100">
                      {col.title}
                    </div>
                    <ul className="space-y-2 sm:space-y-2.5">
                      {col.links.map((link) => (
                        <li key={link}>
                          <motion.a
                            href="#"
                            whileHover={{ x: 4 }}
                            transition={{ duration: 0.2 }}
                            className="group flex items-center gap-1.5 text-base text-slate-600 transition-all duration-300 ease-in-out hover:gap-2.5 hover:font-medium hover:text-pink-500 dark:text-mauve-400 dark:hover:text-pink-300"
                          >
                            <ChevronRight className="size-4 transition-all duration-300 ease-in-out group-hover:translate-x-0.5" />
                            {link}
                          </motion.a>
                        </li>
                      ))}
                    </ul>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.7 }}
        className="relative z-30"
      >
        <div className="container mx-auto mask-b-from-0% mask-b-to-96 mask-exclude mask-match px-6 text-center lg:px-8">
          <motion.span
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.3 }}
            className="inline-block text-[18cqw] leading-none font-light text-pink-600 select-none"
          >
            SaaSify
          </motion.span>
        </div>
      </motion.div>

      <div className="relative z-30 border-t border-pink-200 dark:border-pink-800">
        <div className="container mx-auto px-6 py-5 lg:px-8">
          <div className="flex flex-col-reverse items-center gap-2 lg:flex-row lg:gap-6">
            <div className="basis-full lg:basis-2/4">
              <p className="text-center text-slate-600 lg:text-left dark:text-mauve-400">
                Copyright © 2026 SaaSify. All Rights Reserved
              </p>
            </div>
            <div className="basis-full lg:basis-2/4">
              <div className="flex justify-center gap-2 lg:justify-end">
                {socialIcons.map(({ label, bgClass, svg }) => (
                  <motion.a
                    key={label}
                    href="#"
                    aria-label={label}
                    whileHover={{ y: -4, scale: 1.12 }}
                    whileTap={{ scale: 0.92 }}
                    transition={{ type: "spring", stiffness: 400, damping: 17 }}
                    className={`inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-100 dark:text-mauve-100 ${bgClass} transition-all duration-500 hover:-translate-y-1`}
                  >
                    {svg}
                  </motion.a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}