"use client";
import React, { useRef } from "react";
import { motion, useInView } from "framer-motion";
import Link from "next/link";

export const Footer = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-10px" });

  return (
    <footer className="border-t border-zinc-200 py-12 dark:border-zinc-800">
      <div className="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 10 }}
          animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
          transition={{ duration: 0.6 }}
          className="flex flex-col gap-3 text-sm text-zinc-500 dark:text-zinc-400"
        >
          <div className="mb-4 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">
            <Link
              href="/#projects"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Projects
            </Link>
            <Link
              href="/blogs"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Blog
            </Link>
            <Link
              href="/components"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Components
            </Link>
            <Link
              href="/freelance-web-developer-hyderabad"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Freelance Services
            </Link>
            <Link
              href="/react-developer-hyderabad"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              React Developer
            </Link>
            <Link
              href="/mern-stack-developer-hyderabad"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              MERN Stack
            </Link>
            <Link
              href="/web-application-development"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Web Apps
            </Link>
            <Link
              href="/landing-page-development"
              className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
            >
              Landing Pages
            </Link>
          </div>

          {/* Developer Credit */}
          <p>
            Website developed and maintained by{" "}
            <Link
              href="https://github.com/danurag1906"
              target="_blank"
              className="font-medium text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-200"
            >
              Anurag Daliya
            </Link>
          </p>

          {/* Design Inspiration */}
          <p className="text-xs">
            Design inspired by{" "}
            <Link
              href="https://ramx.in/"
              target="_blank"
              className="font-medium text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
            >
              RamX
            </Link>{" "}
            and{" "}
            <Link
              href="https://chanhdai.com/"
              target="_blank"
              className="font-medium text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
            >
              Chanh Dai
            </Link>
          </p>
        </motion.div>
      </div>
    </footer>
  );
};