import Link from "next/link";

const DISCOVER_LINKS = [
  { href: "/history", label: "Heritage" },
  { href: "/award", label: "The Award" },
  { href: "/hero", label: "Prof. Quaynor" },
  { href: "/gallery", label: "Ga Samai" },
];

const ENGAGE_LINKS = [
  { href: "/events", label: "Event Calendar" },
  { href: "/sponsors", label: "Sponsorship" },
  { href: "/press", label: "Press Kit" },
  { href: "/contact", label: "Contact" },
];

export default function SiteFooter() {
  return (
    <footer className="bg-ink text-cream pt-20 pb-8 mt-24">
      <div className="wrap">

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(3,1fr)] gap-10 pb-14 border-b border-[rgba(245,237,224,0.18)]">

          {/* Brand */}
          <div>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/Alta%20Kakaloi%20Award%20logo%20single.png"
              alt="Alata Kakalɔi Award"
              className="h-16 w-auto mb-4"
            />
            <div className="font-heading text-[11px] tracking-[0.4em] uppercase text-ochre mb-0.5">
              ◈ Inaugural Edition ◈
            </div>
            <div className="font-heading leading-none text-cream text-[32px]">
              Osu Alata Kakalɔi
            </div>
            <p className="text-[rgba(245,237,224,0.7)] text-[14px] mt-4 max-w-none">
              Bridging the Digital Sea — celebrating the evolution of Osu
              Alata&apos;s resourcefulness, from mastering the sea to navigating
              the Information Superhighway.
            </p>
          </div>

          {/* Discover */}
          <div>
            <h4 className="font-mono text-[11px] tracking-[0.2em] uppercase text-ochre font-medium mb-[18px]">
              Discover
            </h4>
            <ul className="list-none p-0 m-0 flex flex-col gap-2.5 text-[14px]">
              {DISCOVER_LINKS.map(({ href, label }) => (
                <li key={href}>
                  <Link href={href} className="text-cream opacity-80 hover:opacity-100 hover:text-ochre border-none transition-opacity duration-150">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Engage */}
          <div>
            <h4 className="font-mono text-[11px] tracking-[0.2em] uppercase text-ochre font-medium mb-[18px]">
              Engage
            </h4>
            <ul className="list-none p-0 m-0 flex flex-col gap-2.5 text-[14px]">
              {ENGAGE_LINKS.map(({ href, label }) => (
                <li key={href}>
                  <Link href={href} className="text-cream opacity-80 hover:opacity-100 hover:text-ochre border-none transition-opacity duration-150">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Watch Live */}
          <div>
            <h4 className="font-mono text-[11px] tracking-[0.2em] uppercase text-ochre font-medium mb-[18px]">
              Watch Live
            </h4>
            <ul className="list-none p-0 m-0 flex flex-col gap-2.5 text-[14px]">
              <li>
                <a href="#" className="text-cream opacity-80 hover:opacity-100 hover:text-ochre border-none transition-opacity duration-150">
                  YouTube — Hero&apos;s Lecture
                </a>
              </li>
              <li>
                <a href="#" className="text-cream opacity-80 hover:opacity-100 hover:text-ochre border-none transition-opacity duration-150">
                  Facebook — Tech Clinics
                </a>
              </li>
              <li>
                <a href="#" className="text-cream opacity-80 hover:opacity-100 hover:text-ochre border-none transition-opacity duration-150">
                  Subscribe to Bulletin
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="flex flex-col gap-2 text-center sm:flex-row sm:justify-between sm:text-left items-center pt-6 font-mono text-[11px] tracking-[0.14em] uppercase text-[rgba(245,237,224,0.55)]">
          <span>© MMXXVI · Osu Alata Mantse&apos;s Palace</span>
          <span>Never say die until the bones are rotten</span>
          <span>Made in Accra · Connected to the World</span>
        </div>
      </div>
    </footer>
  );
}