import Link from "next/link";
import { PERSON, SITE } from "@/lib/site";

export default function Footer() {
  return (
    <footer className="border-t border-ivory/5 bg-obsidian">
      <div className="mx-auto max-w-[1440px] px-6 py-16 md:px-10">
        <div className="grid gap-12 md:grid-cols-12">
          <div className="md:col-span-5">
            <div className="font-display text-3xl font-black text-ivory">
              D<span className="text-gold">M</span>
            </div>
            <p className="mt-4 max-w-sm text-[0.9rem] leading-relaxed text-warmgrey">
              Damian Michael — Managing Director &amp; CEO of {PERSON.companyShort},
              building Africa&apos;s digital backbone from Cape Town.
            </p>
            <div className="mt-6 font-mono text-[0.62rem] uppercase tracking-[0.3em] text-warmgrey">
              Cape Town → Nairobi → The World
            </div>
          </div>

          <nav className="md:col-span-3" aria-label="Site">
            <div className="kicker mb-5">Explore</div>
            <ul className="space-y-3 text-[0.9rem]">
              {[
                { href: "/#prologue", label: "The Prologue" },
                { href: "/#ventures", label: "The Ventures" },
                { href: "/#expertise", label: "The Expertise" },
                { href: "/journal", label: "The Journal" },
                { href: "/#speaking", label: "Speaking & Boardroom" },
                { href: "/about", label: "About Damian" },
              ].map((l) => (
                <li key={l.href}>
                  <Link href={l.href} className="text-ivory/70 transition-colors hover:text-gold">
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <div className="md:col-span-4">
            <div className="kicker mb-5">Connect</div>
            <ul className="space-y-3 text-[0.9rem]">
              <li>
                <a href={`mailto:${SITE.email}`} className="text-ivory/70 transition-colors hover:text-gold">
                  {SITE.email}
                </a>
              </li>
              <li>
                <a
                  href={PERSON.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-ivory/70 transition-colors hover:text-gold"
                >
                  LinkedIn
                </a>
              </li>
              <li>
                <a
                  href={PERSON.companyUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-ivory/70 transition-colors hover:text-gold"
                >
                  Innovo Networks
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-14 flex flex-col gap-3 border-t border-ivory/5 pt-6 text-[0.75rem] text-warmgrey md:flex-row md:items-center md:justify-between">
          <div>© 2026 Damian Michael. All rights reserved.</div>
          <div className="flex gap-6">
            <Link href="/privacy" className="transition-colors hover:text-gold">
              POPIA &amp; Privacy Notice
            </Link>
            <a href="/llms.txt" className="transition-colors hover:text-gold">
              llms.txt
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}