import { CookieSettingsButton } from "./CookieConsent";
import { Logo } from "./Logo";
import { SUPPORT_EMAIL, SUPPORT_MAILTO } from "@/lib/site";

export function SiteFooter() {
  return (
    <footer className="mt-20 border-t border-forest/10 bg-brand text-cream">
      <div className="kente-line" />
      <div className="mx-auto grid max-w-6xl gap-8 px-4 py-12 md:grid-cols-4">
        <div className="md:col-span-2">
          <Logo light />
          <p className="mt-4 max-w-md text-sm text-cream/75">
            Ghana-first blueprints for pre-orders, ecommerce, content, dropshipping, marketing, and
            freelancing. Learn the paths that work here — markets, MoMo, WhatsApp, and real suppliers.
          </p>
          <p className="mt-4 text-sm text-cream/80">
            Support:{" "}
            <a className="text-gold-2 hover:text-gold" href={SUPPORT_MAILTO}>
              {SUPPORT_EMAIL}
            </a>
          </p>
        </div>
        <div className="text-sm">
          <p className="font-display text-gold-2">Classroom</p>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/courses">
            All courses
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/blog">
            Blog
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/about">
            About us
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/contact">
            Contact us
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/register">
            Join / Register
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/agent">
            Live coach
          </a>
        </div>
        <div className="text-sm">
          <p className="font-display text-gold-2">Policies</p>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/privacy-policy">
            Privacy policy
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/terms-of-use">
            Terms of use
          </a>
          <a className="mt-2 block text-cream/80 hover:text-gold-2" href="/refund-and-returns">
            Refunds &amp; returns
          </a>
          <CookieSettingsButton className="mt-2 block text-left text-cream/80 hover:text-gold-2" />
        </div>
      </div>
      <p className="border-t border-white/10 px-4 py-4 text-center text-xs text-cream/50">
        © {new Date().getFullYear()} CediForge Academy.{" "}
        <a className="hover:text-gold-2" href="/about">
          About
        </a>
        {" · "}
        <a className="hover:text-gold-2" href="/privacy-policy">
          Privacy
        </a>
        {" · "}
        <a className="hover:text-gold-2" href="/terms-of-use">
          Terms
        </a>
        {" · "}
        <a className="hover:text-gold-2" href="/contact">
          Contact
        </a>
      </p>
    </footer>
  );
}