/**
 * SiteFooter
 *
 * Shared footer component for all public-facing pages.
 * Contains company info, address, services links, and company links.
 */

import Link from "next/link";
import { Logo } from "@/components/atoms/logo";
import { Phone, MapPin } from "lucide-react";

const FOOTER_LINK_CLASS = "text-muted-foreground hover:text-foreground transition-colors";

const SERVICE_LINKS = [
  { href: "/services/internet", label: "Internet" },
  { href: "/services/sim", label: "SIM & eSIM" },
  { href: "/services/vpn", label: "VPN" },
];

const COMPANY_LINKS = [
  { href: "/about", label: "About Us" },
  { href: "/support", label: "Support" },
  { href: "/contact", label: "Contact" },
  { href: "/blog", label: "Blog" },
];

function FooterLinkColumn({
  title,
  links,
}: {
  title: string;
  links: { href: string; label: string }[];
}) {
  return (
    <div>
      <h3 className="text-sm font-semibold text-foreground mb-4 font-heading">{title}</h3>
      <ul className="space-y-2 text-sm">
        {links.map(link => (
          <li key={link.href}>
            <Link href={link.href} className={FOOTER_LINK_CLASS}>
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function SiteFooter() {
  return (
    <footer className="relative border-t border-border/40 bg-muted/30">
      {/* Subtle gradient separator */}
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
      <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          {/* Company Info */}
          <div className="md:col-span-2">
            <Link href="/" className="inline-flex items-center gap-2.5 mb-4">
              <span className="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 text-primary">
                <Logo size={18} />
              </span>
              <span className="text-base font-bold text-foreground">Assist Solutions</span>
            </Link>
            <p className="text-sm text-muted-foreground mb-4 max-w-sm">
              Serving Japan&apos;s international community with reliable IT solutions since 2002.
            </p>
            <div className="space-y-2 text-sm text-muted-foreground">
              <div className="flex items-start gap-2">
                <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" />
                <span>
                  3F Azabu Maruka Bldg., 3-8-2 Higashi Azabu,
                  <br />
                  Minato-ku, Tokyo 106-0044
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4 flex-shrink-0" />
                <span>
                  <a href="tel:0120-660-470" className="hover:text-foreground transition-colors">
                    0120-660-470
                  </a>{" "}
                  (Toll Free)
                </span>
              </div>
            </div>
          </div>

          <FooterLinkColumn title="Services" links={SERVICE_LINKS} />
          <FooterLinkColumn title="Company" links={COMPANY_LINKS} />
        </div>

        {/* Bottom Bar */}
        <div className="pt-8 border-t border-border/40 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} Assist Solutions Corp. All rights reserved.
          </div>
          <div className="text-xs text-muted-foreground">
            Notified Telecommunication Carrier: A-19-9538
          </div>
        </div>
      </div>
    </footer>
  );
}
