import Link from "next/link";
import { GeometricMessBackground } from "@/components/brand/GeometricMessBackground";
import { FooterNewsletter } from "@/components/layout/FooterNewsletter";
import { FooterSocialLinks } from "@/components/layout/FooterSocialLinks";
import { FooterSurface } from "@/components/layout/FooterSurface";
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="site-footer section-white relative overflow-hidden bg-white pt-8 text-[#30614c] md:pt-10">
      <GeometricMessBackground />

      <div className="relative z-10 space-y-6 px-4 pb-12 md:space-y-8 md:px-6">
        <FooterNewsletter />

        <div className="mx-auto max-w-6xl">
          <FooterSurface>
            <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-[#37a47a]">{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-[#5b5b5b] transition-colors hover:text-[#30614c]"
                          {...("external" in link && link.external
                            ? { target: "_blank", rel: "noopener noreferrer" }
                            : {})}
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>

            <div className="mt-10 flex flex-col gap-6 border-t border-[#37a47a]/12 pt-8 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-widest text-[#37a47a]">
                  Follow us
                </p>
                <FooterSocialLinks className="mt-4" />
              </div>
            </div>
          </FooterSurface>

          <FooterSurface className="mt-6 py-5 md:py-6">
            <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-[#5b5b5b] sm:text-left">
                {site.shortName} · {site.dates.label} · Presented by {site.presentedBy}
              </p>
              <p className="text-center text-xs text-[#5c6b62] sm:text-right">
                © {new Date().getFullYear()} Ethiopian Diaspora Trust Fund. All rights reserved.
              </p>
            </div>
          </FooterSurface>
        </div>
      </div>
    </footer>
  );
}
