"use client";

import { AnimatePresence, motion } from "motion/react";
import { usePathname } from "next/navigation";
import MagneticButton from "./MagneticButton";

export default function HomeButton() {
  const pathname = usePathname();
  const isHome = pathname === "/";

  return (
    <AnimatePresence>
      {!isHome && (
        <motion.div
          className="fixed left-6 top-6 z-[9000]"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -20 }}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
        >
          <MagneticButton
            as="a"
            href="/"
            strength={0.3}
            aria-label="Voltar para o início"
            className="group relative inline-flex items-center gap-2.5 overflow-hidden rounded-full border border-[rgba(255,255,255,0.1)] bg-[rgba(10,10,10,0.72)] px-4 py-2.5 text-[11px] font-mono uppercase tracking-[0.1em] text-[rgba(244,242,237,0.76)] backdrop-blur-[16px] transition-all duration-300 hover:border-[rgba(204,255,0,0.5)] hover:text-[var(--slash)]"
          >
            {/* Glow effect */}
            <span
              className="pointer-events-none absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
              style={{
                boxShadow:
                  "inset 0 0 20px rgba(204,255,0,0.06), 0 0 24px rgba(204,255,0,0.15)",
              }}
            />

            {/* Arrow left icon */}
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
              className="relative z-10 -translate-x-0 transition-transform duration-300 group-hover:-translate-x-0.5"
            >
              <path d="M7.5 1.5 L2.5 6 L7.5 10.5" />
            </svg>

            <span className="relative z-10">Home</span>

            {/* Animated neon dot */}
            <motion.span
              className="relative z-10 ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--slash)]"
              animate={{ opacity: [1, 0.3, 1], scale: [1, 0.8, 1] }}
              transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
            />
          </MagneticButton>
        </motion.div>
      )}
    </AnimatePresence>
  );
}