import { Link } from "@tanstack/react-router";

import logoGreen from "@/assets/uzia-logo-green.png";

export function SiteFooter() {
  return (
    <footer className="mt-auto bg-plum text-plum-foreground">
      <div className="motif-divider" />
      <div className="mx-auto grid w-full max-w-6xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <img
            src={logoGreen}
            alt="UZIA Academy"
            className="h-9 w-auto brightness-0 invert"
            width={130}
            height={55}
          />

          <p className="mt-4 text-sm opacity-80">
            Practical business capability for African MSMEs. Assess your business across 12 pillars,
            train on 50 applied courses, earn recognised UZIA credentials.
          </p>
        </div>
        <div>
          <p className="text-sm font-semibold">Platform</p>
          <ul className="mt-4 space-y-2.5 text-sm opacity-80">
            <li>
              <Link to="/assessment" className="hover:opacity-100 hover:underline">
                Growth assessment
              </Link>
            </li>
            <li>
              <Link to="/courses" className="hover:opacity-100 hover:underline">
                Course catalogue
              </Link>
            </li>
            <li>
              <Link to="/pricing" className="hover:opacity-100 hover:underline">
                Pricing
              </Link>
            </li>
            <li>
              <Link to="/certificates" className="hover:opacity-100 hover:underline">
                Certificates
              </Link>
            </li>

            <li>
              <Link to="/auth" className="hover:opacity-100 hover:underline">
                Sign in
              </Link>
            </li>
          </ul>
        </div>
        <div>
          <p className="text-sm font-semibold">Credentials</p>
          <ul className="mt-4 space-y-2.5 text-sm opacity-80">
            <li>Level 1 — Foundation</li>
            <li>Level 2 — Professional</li>
            <li>Level 3 — Advanced</li>
            <li>Level 4 — Executive MSME</li>
          </ul>
        </div>
        <div>
          <p className="text-sm font-semibold">Get in touch</p>
          <p className="mt-4 text-sm opacity-80">
            Nairobi, Kenya
            <br />
            hello@uziaacademy.com
          </p>
        </div>
      </div>
      <div className="border-t border-white/10 py-5 text-center text-xs opacity-70">
        © {new Date().getFullYear()} UZIA Academy. All rights reserved.
      </div>
    </footer>
  );
}
