import { Link } from "@tanstack/react-router";
import { Mark } from "@/components/site/logo";
import { FIRM, NAV } from "@/lib/content";

export function Footer() {
  return (
    <footer className="bg-ink text-fg">
      <div className="site-wrap py-16 md:py-20">
        <div className="grid gap-12 md:grid-cols-12 md:gap-8">
          <div className="md:col-span-5">
            <div className="flex items-center gap-3">
              <Mark className="size-6" />
              <span className="text-sm font-semibold tracking-[0.22em] uppercase">
                {FIRM.legal}
              </span>
            </div>
            <p className="mt-6 max-w-sm text-[0.95rem] leading-relaxed text-muted">
              Independent advisory on defence policy, industry, and research.
              Headquartered in Singapore, working across the Indo-Pacific.
            </p>
            <p className="mt-6 text-sm text-muted">
              <a
                href={`mailto:${FIRM.email}`}
                className="text-fg underline decoration-line underline-offset-4 transition-colors duration-150 hover:text-steel"
              >
                {FIRM.email}
              </a>
            </p>
          </div>

          <div className="md:col-span-3">
            <p className="label-kicker">Navigate</p>
            <ul className="mt-4 space-y-2">
              <li>
                <Link
                  to="/"
                  className="text-sm text-muted no-underline transition-colors duration-150 hover:text-fg"
                >
                  Home
                </Link>
              </li>
              {NAV.map((item) => (
                <li key={item.to}>
                  <Link
                    to={item.to}
                    className="text-sm text-muted no-underline transition-colors duration-150 hover:text-fg"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="md:col-span-4">
            <p className="label-kicker">Singapore</p>
            <address className="mt-4 not-italic text-sm leading-relaxed text-muted">
              {FIRM.addressLines.map((line) => (
                <span key={line} className="block">
                  {line}
                </span>
              ))}
              <span className="mt-3 block">{FIRM.phone}</span>
              <span className="block">{FIRM.hours}</span>
            </address>
          </div>
        </div>

        <hr className="hairline my-10" />

        <div className="flex flex-col gap-4 text-[0.75rem] leading-relaxed text-subtle md:flex-row md:items-start md:justify-between">
          <p className="max-w-xl">
            Daciora Consulting is an independent firm. We do not represent any
            government. This website and all correspondence with the firm are
            unclassified. Do not send classified or restricted material to{" "}
            {FIRM.email}.
          </p>
          <p className="shrink-0">
            © {new Date().getFullYear()} {FIRM.legal}. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}
