import { siteConfig } from "@/lib/content";
import Link from "next/link";
import { Logo } from "./Logo";

const legalLinks = [
  { href: "/privacy", label: "Privacy" },
  { href: "/terms", label: "Terms" },
];

const linkClass =
  "text-[12px] tracking-wide text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-heading)]";

export function Footer() {
  const year = new Date().getFullYear();
  const phoneHref = siteConfig.contactPhone
    ? `tel:${siteConfig.contactPhone.replace(/[^\d+]/g, "")}`
    : undefined;

  return (
    <footer className="border-t border-[var(--color-border)] bg-[var(--color-surface)]">
      <div className="container-xl">
        <div className="flex flex-col items-start justify-between gap-4 py-4 sm:flex-row sm:items-center sm:gap-6">
          {/* Brand */}
          <Link
            href="/"
            aria-label={siteConfig.name}
            className="inline-flex shrink-0 items-center gap-2.5 transition-opacity hover:opacity-70"
          >
            <Logo size={18} withText={false} link={false} />
            <span className="text-[12px] font-medium tracking-[-0.01em] text-[var(--color-heading)]">
              {siteConfig.name}
            </span>
          </Link>

          {/* Contact — always one line */}
          <div className="flex min-w-0 flex-nowrap items-center gap-x-2.5 overflow-x-auto">
            {siteConfig.contactEmail && (
              <Link
                href={`mailto:${siteConfig.contactEmail}`}
                className={`${linkClass} whitespace-nowrap`}
              >
                {siteConfig.contactEmail}
              </Link>
            )}
            {siteConfig.contactEmail && siteConfig.contactPhone && (
              <span className="shrink-0 text-[var(--color-border)]" aria-hidden>
                ·
              </span>
            )}
            {siteConfig.contactPhone && phoneHref && (
              <Link
                href={phoneHref}
                className={`${linkClass} whitespace-nowrap`}
              >
                {siteConfig.contactPhone}
              </Link>
            )}
          </div>

          {/* Legal + copyright */}
          <div className="flex shrink-0 flex-nowrap items-center gap-x-4">
            {legalLinks.map((link) => (
              <Link key={link.href} href={link.href} className={linkClass}>
                {link.label}
              </Link>
            ))}
            <span className="whitespace-nowrap text-[11px] tracking-wide text-[var(--color-text-muted)]/80">
              © {year} {siteConfig.name}
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}
