"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowUp } from "lucide-react";

const linkClass =
  "font-sans text-sm font-normal text-[#374151] hover:text-blue-500 transition-colors whitespace-nowrap";
const legalClass =
  "font-sans text-sm text-[#4b5563] hover:text-blue-500 transition-colors whitespace-nowrap";

const NAV_LINKS = [
  { href: "/blog", label: "Blog" },
  { href: "/questions", label: "SeaQA" },
  { href: "/contact-us", label: "Contact" },
];

const LEGAL_LINKS = [
  { href: "/legal#privacy-policy", label: "Privacy" },
  { href: "/legal#terms-conditions", label: "Terms" },
  { href: "/legal#refund", label: "Refund" },
  { href: "/legal#disclaimer", label: "Disclaimer" },
];

const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });

const BrandMark = ({ className = "" }: { className?: string }) => (
  <div className={`flex items-center gap-2 ${className}`}>
    <Image
      src="/assets/images/logo-blue.svg"
      alt="MySeaTime"
      width={99}
      height={30}
      className="h-7 w-auto object-contain"
    />
    <span className="font-sans text-sm text-[#4b5563]">© 2026 myseatime</span>
  </div>
);

const NavLinks = ({ className = "" }: { className?: string }) => (
  <nav className={`flex items-center ${className}`}>
    {NAV_LINKS.map((l) => (
      <Link key={l.label} href={l.href} className={linkClass}>
        {l.label}
      </Link>
    ))}
  </nav>
);

const LegalLinks = ({ className = "" }: { className?: string }) => {
  const pathname = usePathname();

  // Already on /legal: a Next.js <Link> hash change is a soft pushState nav,
  // which does NOT emit a `hashchange` event — so the legal page's listener
  // never fires. Set the hash directly to trigger it (and the section scroll).
  const handleClick =
    (href: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
      if (pathname !== "/legal") return;
      e.preventDefault();
      window.location.hash = href.split("#")[1] ?? "";
    };

  return (
    <div
      className={`flex items-center text-sm text-[#4b5563] font-sans ${className}`}
    >
      {LEGAL_LINKS.map((l, i) => (
        <span key={l.label} className="contents">
          {i > 0 && <span className="mx-2 text-[#d1d5db]">|</span>}
          <Link href={l.href} onClick={handleClick(l.href)} className={legalClass}>
            {l.label}
          </Link>
        </span>
      ))}
    </div>
  );
};

const BackToTop = ({ className = "" }: { className?: string }) => (
  <button
    type="button"
    onClick={scrollToTop}
    aria-label="Back to top"
    className={`h-9 w-9 rounded-full bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center transition-colors shadow-sm ${className}`}
  >
    <ArrowUp className="h-4 w-4" />
  </button>
);

export default function Footer() {
  return (
    <>
      <footer className="bg-white border-t border-[#e5e7eb]">
        <div className="px-4 sm:px-10 py-4">
          {/* Mobile / tablet: stacked */}
          <div className="flex flex-col items-center gap-4 lg:hidden">
            <BrandMark />
            <NavLinks className="gap-6" />
            <LegalLinks className="flex-wrap justify-center" />
          </div>

          {/* Desktop: single row */}
          <div className="hidden lg:flex items-center gap-8">
            <BrandMark className="shrink-0" />
            <NavLinks className="gap-8 mx-auto" />
            <LegalLinks className="shrink-0" />
          </div>
        </div>
      </footer>

      {/* Floating back-to-top */}
      <BackToTop className="fixed bottom-6 right-6 z-50 shadow-lg" />
    </>
  );
}