"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { cn } from "@/lib/utils";

const NAV_LINKS = [
  {
    name: "Home",
    href: "",
    image:
      "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&q=100&w=2000",
  },
  {
    name: "Projects",
    href: "",
    image:
      "https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=100&w=2000",
  },
  {
    name: "Experience",
    href: "",
    image:
      "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=100&w=2000",
  },
  {
    name: "About",
    href: "",
    image:
      "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=100&w=2000",
  },
];

export const FooterNavigation = () => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  return (
    <section
      className={cn(
        "relative flex flex-col overflow-hidden border-t border-zinc-200 bg-white md:flex-row dark:border-zinc-800 dark:bg-black",
      )}
    >
      {/* Left: Image Container (1/2) - Takes full section height */}
      <div
        className={cn(
          "relative min-h-[400px] w-full overflow-hidden border-r border-zinc-200 bg-zinc-100 md:min-h-0 md:w-1/2 dark:border-zinc-800 dark:bg-zinc-900",
        )}
      >
        <AnimatePresence mode="popLayout">
          {hoveredIndex !== null ? (
            <motion.div
              key={hoveredIndex}
              initial={{ y: "100%", scale: 1.3, opacity: 0 }}
              animate={{ y: 0, scale: 1, opacity: 1 }}
              exit={{ y: "-100%", scale: 1.3, opacity: 0 }}
              transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
              className={cn("absolute inset-0")}
            >
              <Image
                src={NAV_LINKS[hoveredIndex].image}
                alt={NAV_LINKS[hoveredIndex].name}
                fill
                className={cn("object-cover")}
              />
            </motion.div>
          ) : (
            <motion.div
              key="default"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className={cn(
                "absolute inset-0 flex items-center justify-center p-8 text-center",
              )}
            >
              <p className={cn("font-medium text-zinc-400 dark:text-zinc-600")}>
                Hover over a link to explore
              </p>
            </motion.div>
          )}
        </AnimatePresence>

        <div
          className={cn(
            "pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent",
          )}
        />
      </div>

      {/* Right: Content Container (1/2) */}
      <div
        className={cn(
          "flex w-full flex-col justify-between px-8 py-20 md:w-1/2 md:px-16 lg:px-24",
        )}
      >
        {/* Navigation Links */}
        <nav className={cn("w-full text-right")}>
          <ul className={cn("flex flex-col gap-4")}>
            {NAV_LINKS.map((link, index) => (
              <li key={link.name}>
                <Link
                  href={link.href}
                  onMouseEnter={() => setHoveredIndex(index)}
                  onMouseLeave={() => setHoveredIndex(null)}
                  className={cn(
                    "group relative flex items-center justify-end overflow-hidden py-px",
                  )}
                >
                  <motion.div
                    initial="initial"
                    whileHover="hovered"
                    className={cn("relative flex items-center justify-end")}
                  >
                    <motion.span
                      variants={{
                        initial: { y: 0 },
                        hovered: { y: "-120%" },
                      }}
                      transition={{
                        duration: 0.5,
                        ease: [0.22, 1, 0.36, 1],
                      }}
                      className={cn(
                        "inline-block cursor-pointer text-5xl font-bold tracking-tighter text-zinc-900 md:text-7xl lg:text-8xl dark:text-white",
                      )}
                    >
                      {link.name}
                    </motion.span>
                    <motion.span
                      variants={{
                        initial: { y: "120%" },
                        hovered: { y: 0 },
                      }}
                      transition={{
                        duration: 0.5,
                        ease: [0.22, 1, 0.36, 1],
                      }}
                      className={cn(
                        "absolute inset-0 inline-block cursor-pointer text-5xl font-bold tracking-tighter text-zinc-900 md:text-7xl lg:text-8xl dark:text-white",
                      )}
                    >
                      {link.name}
                    </motion.span>
                  </motion.div>
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        {/* Copyright & Socials - Positioned at bottom right */}
        <div className={cn("mt-20 flex flex-col items-end gap-8 text-right")}>
          <div
            className={cn(
              "flex flex-wrap justify-end gap-x-8 gap-y-4 text-sm font-medium",
            )}
          >
            {["Twitter", "GitHub", "LinkedIn", "Instagram"].map((social) => (
              <Link
                key={social}
                href="/"
                className={cn(
                  "text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
                )}
              >
                {social}
              </Link>
            ))}
          </div>

          <div
            className={cn(
              "flex w-full flex-col items-end gap-1 border-t border-zinc-100 pt-8 dark:border-zinc-900",
            )}
          >
            <p
              className={cn(
                "text-base font-bold tracking-tight text-zinc-900 dark:text-zinc-100",
              )}
            >
              Anurag Daliya
            </p>
            <p
              className={cn(
                "text-xs tracking-widest text-zinc-500 uppercase dark:text-zinc-400",
              )}
            >
              © {new Date().getFullYear()} All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};
Footer Navigation
