"use client";

import { usePathname } from "next/navigation";
import { company, navLinks } from "@/constants";

export default function Footer() {
  const year = new Date().getFullYear();
  const isHome = usePathname() === "/";

  // Anchor links go home + scroll when not on the homepage; page links navigate.
  const handleClick = (e: React.MouseEvent, href: string) => {
    if (!href.startsWith("#")) return; // normal navigation for page links
    e.preventDefault();
    if (href === "#top") {
      // Always scroll to the top of the current page
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    if (isHome) {
      const element = document.querySelector(href);
      if (element) {
        const top = element.getBoundingClientRect().top + window.scrollY - 30;
        window.scrollTo({ top, behavior: "smooth" });
      }
    } else {
      window.location.href = `/${href}`;
    }
  };

  return (
    <footer className="bg-navy-950 text-white">
      <div className="container-x py-16">
        <div className="grid gap-12 lg:grid-cols-12">
          {/* Brand */}
          <div className="lg:col-span-5">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/logo-white.svg"
              alt={`${company.name} logo`}
              className="h-9 w-auto"
              width={210}
              height={48}
            />
            <p className="mt-5 max-w-sm text-sm leading-relaxed text-white/60">
              {company.name}&nbsp;delivers aviation solutionsand autonomous
              drone technology — built to outperform, where reliability
              isn&apos;t optional.
            </p>
            <p className="mt-4 text-sm font-semibold uppercase tracking-[0.2em] text-gold">
              {company.slogan}
            </p>
          </div>

          {/* Nav */}
          <div className="lg:col-span-3">
            <h2 className="text-sm font-semibold uppercase tracking-wider text-white/90">
              Company
            </h2>
            <ul className="mt-4 space-y-3">
              {navLinks.map((link) => (
                <li key={link.href}>
                  <a
                    href={link.href}
                    onClick={(e) => handleClick(e, link.href)}
                    className="text-sm text-white/60 transition-colors hover:text-gold"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="lg:col-span-4">
            <h2 className="text-sm font-semibold uppercase tracking-wider text-white/90">
              Get in touch
            </h2>
            <ul className="mt-4 space-y-3 text-sm text-white/60">
              <li>
                <a
                  href={`mailto:${company.email}`}
                  className="transition-colors hover:text-gold"
                >
                  {company.email}
                </a>
              </li>
              <li>
                <a
                  href={`tel:${company.phone.replace(/[^\d+]/g, "")}`}
                  className="transition-colors hover:text-gold"
                >
                  {company.phone}
                </a>
              </li>
              <li className="pt-1 leading-relaxed">
                {company.addressLines.map((line) => (
                  <span key={line} className="block">
                    {line}
                  </span>
                ))}
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row">
          <p className="text-xs text-white/50">
            {year} {company.name}. All rights reserved.
          </p>
          <div className="flex items-center gap-6">
            <a
              href="#top"
              onClick={(e) => handleClick(e, "#top")}
              className="text-xs font-semibold text-white/60 transition-colors hover:text-gold"
            >
              Back to top ↑
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}