import Link from "next/link";
import { BrandLogo } from "@/components/brand/BrandLogo";
import { FooterTopographicBand } from "@/components/brand/FooterTopographicBand";
import { FooterNewsletter } from "@/components/layout/FooterNewsletter";
import { site } from "@/content/site";

const footerColumns = [
  {
    title: "Event",
    links: [
      { href: "/", label: "Home" },
      { href: "/payment", label: "Buy tickets" },
      { href: "/pitch-competition", label: "Apply to pitch" },
      { href: "/program", label: "Program" },
    ],
  },
  {
    title: "Experience",
    links: [
      { href: "/speakers", label: "Lineup" },
      { href: "/program", label: "Workshops & panels" },
      { href: "/exhibit", label: "Exhibitor hall" },
      { href: "/pitch-competition", label: "Pitch finals" },
    ],
  },
  {
    title: "Participate",
    links: [
      { href: "/partners", label: "Partners" },
      { href: "/exhibit", label: "Exhibit" },
      { href: "/sponsor", label: "Sponsor" },
      { href: "/contact", label: "Contact" },
      { href: "/privacy", label: "Privacy policy" },
    ],
  },
  {
    title: "Connect",
    links: [
      { href: site.links.legacySite, label: "Legacy site", external: true },
      { href: "mailto:info@grvsummit.com", label: "info@grvsummit.com" },
      { href: site.venue.mapsUrl, label: "Venue map", external: true },
    ],
  },
];

export function SiteFooter() {
  return (
    <footer className="relative mt-24 overflow-hidden bg-[#1a5c38] text-white">
      <FooterTopographicBand />

      <div className="relative z-10 -mt-20 px-4 pb-4 md:px-6">
        <FooterNewsletter />
      </div>

      <div className="relative z-10 mx-auto max-w-6xl px-4 pb-12 pt-20 md:px-6 md:pt-24">
        <div className="mb-12 flex justify-center md:justify-start">
          <BrandLogo href="/" variant="footer" />
        </div>

        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
          {footerColumns.map((col) => (
            <div key={col.title}>
              <h3 className="text-sm font-semibold text-white">{col.title}</h3>
              <ul className="mt-4 space-y-2.5">
                {col.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-sm text-white/75 transition-colors hover:text-white"
                      {...("external" in link && link.external
                        ? { target: "_blank", rel: "noopener noreferrer" }
                        : {})}
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-14 border-t border-white/15 pt-8">
          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
            <p className="text-center text-xs font-medium uppercase tracking-wider text-white/80 sm:text-left">
              {site.shortName} · {site.dates.label} · Presented by {site.presentedBy}
            </p>
            <p className="text-center text-xs text-white/60 sm:text-right">
              © {new Date().getFullYear()} Ethiopian Diaspora Trust Fund. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}