import Link from "next/link";
import { Mail, MapPin, Phone } from "lucide-react";
import { Container } from "./Container";
import { siteConfig, products } from "@/lib/site-config";

const resourceLinks = [
  { href: "/blog", label: "Blog" },
  { href: "/news", label: "News" },
  { href: "/studies", label: "Studies" },
  { href: "/team", label: "Team" },
  { href: "/clinical", label: "Clinical" },
];

const organisationLinks = [
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
  { href: "/privacy", label: "Privacy" },
  { href: "/terms", label: "Terms" },
  { href: "/cookies", label: "Cookies" },
  { href: "/credits", label: "Photo credits" },
];

export function Footer() {
  const { address, phone, email, social } = siteConfig;
  return (
    <footer className="mt-24 border-t border-[var(--color-line)] bg-[#fafbff]">
      <Container className="py-16">
        <div className="grid gap-12 md:grid-cols-6">
          <div className="md:col-span-2">
            <div className="font-display text-[22px] font-extrabold tracking-tight text-[var(--color-ink)]">
              {siteConfig.name}
            </div>
            <p className="mt-3 max-w-sm text-[14px] leading-relaxed text-[var(--color-slate)]">
              {siteConfig.tagline}. Founded {siteConfig.founded}, {siteConfig.location}.
            </p>
            <ul className="mt-5 space-y-2 text-[13px] text-[var(--color-slate)]">
              <li className="flex items-start gap-2">
                <MapPin className="mt-0.5 h-3.5 w-3.5 flex-none text-[var(--color-blue)]" aria-hidden />
                <span>
                  {address.line1}
                  <br />
                  {address.line2}, {address.city} {address.postcode}
                  <br />
                  {address.country}
                </span>
              </li>
              <li className="flex items-center gap-2">
                <Mail className="h-3.5 w-3.5 flex-none text-[var(--color-blue)]" aria-hidden />
                <a href={`mailto:${email}`} className="hover:text-[var(--color-blue)]">
                  {email}
                </a>
              </li>
              <li className="flex items-center gap-2">
                <Phone className="h-3.5 w-3.5 flex-none text-[var(--color-blue)]" aria-hidden />
                <a href={`tel:${phone.replace(/\s+/g, "")}`} className="hover:text-[var(--color-blue)]">
                  {phone}
                </a>
              </li>
            </ul>
            <div className="mt-5 flex items-center gap-3">
              <a
                href={social.facebook}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="OrthoGlobe on Facebook"
                className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] text-[var(--color-slate)] transition-colors hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
              >
                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" aria-hidden fill="currentColor">
                  <path d="M13.5 21.5v-8.27h2.79l.42-3.24H13.5V7.91c0-.94.26-1.58 1.6-1.58h1.71V3.43A22.9 22.9 0 0 0 14.3 3.3c-2.47 0-4.17 1.51-4.17 4.27v2.42H7.34v3.24h2.79v8.27h3.37Z" />
                </svg>
              </a>
              <a
                href={social.x}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="OrthoGlobe on X"
                className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] text-[var(--color-slate)] transition-colors hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
              >
                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" aria-hidden fill="currentColor">
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
                </svg>
              </a>
              <a
                href={social.linkedin}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="OrthoGlobe on LinkedIn"
                className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] text-[var(--color-slate)] transition-colors hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
              >
                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" aria-hidden fill="currentColor">
                  <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM8.34 18.34H5.67V9.67h2.67v8.67ZM7 8.5A1.5 1.5 0 1 1 7 5.5a1.5 1.5 0 0 1 0 3Zm11.34 9.84h-2.67v-4.5c0-1.25-.45-1.67-1.08-1.67s-1.25.4-1.25 1.67v4.5h-2.67V9.67h2.67v1.07a2.84 2.84 0 0 1 2.5-1.25c1.42 0 2.5 1 2.5 3v5.85Z" />
                </svg>
              </a>
            </div>
          </div>
          <div>
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-ink)]">
              Initiatives
            </div>
            <ul className="mt-4 space-y-2 text-sm text-[var(--color-slate)]">
              {products.map((p) => (
                <li key={p.slug}>
                  <Link href={p.href} className="hover:text-[var(--color-blue)]">
                    {p.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-ink)]">
              Resources
            </div>
            <ul className="mt-4 space-y-2 text-sm text-[var(--color-slate)]">
              {resourceLinks.map((l) => (
                <li key={l.href}>
                  <Link href={l.href} className="hover:text-[var(--color-blue)]">
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div className="md:col-span-2">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-ink)]">
              Organisation
            </div>
            <ul className="mt-4 space-y-2 text-sm text-[var(--color-slate)]">
              {organisationLinks.map((l) => (
                <li key={l.href}>
                  <Link href={l.href} className="hover:text-[var(--color-blue)]">
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="mt-14 border-t border-[var(--color-line)] pt-6 text-[12px] text-[var(--color-slate)]">
          © {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
        </div>
      </Container>
    </footer>
  );
}
