/**
 * ThinkSchool Public Website — Global Footer Component
 * 5-column editorial footer with verified product navigation, legal links, and brand identification.
 */
function Footer() {
  const navConfig = window.NAVIGATION_CONFIG || {};
  const siteConfig = window.SITE_CONFIG || {};
  const footer = navConfig.footer || {};
  const columns = footer.columns || [];
  const brand = siteConfig.brand || {};

  return (
    <footer className="bg-zinc-950 border-t border-white/10 pt-16 pb-12 text-zinc-400 font-body">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-10 pb-12 border-b border-white/10">
          {/* Brand Info Column */}
          <div className="lg:col-span-2 space-y-4">
            <a href="/" className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-zinc-900 border border-white/10 p-1 flex items-center justify-center">
                <img src="/ASSETS/logo.png" alt="ThinkSchool Logo" className="w-full h-full object-contain" />
              </div>
              <span className="font-heading italic text-xl text-white">ThinkSchool</span>
            </a>

            <p className="text-xs sm:text-sm text-zinc-400 leading-relaxed max-w-sm">
              {footer.tagline ||
                "The modern multi-tenant operating system for progressive schools and educational institutions."}
            </p>

            <div className="pt-2 text-xs text-zinc-500 space-y-1 font-mono">
              <div>Domain: {brand.domain || "thinkschool.in"}</div>
              <div>Direct ERP: {brand.appUrl || "app.thinkschool.live"}</div>
              {brand.supportEmail && <div>Email: {brand.supportEmail}</div>}
            </div>
          </div>

          {/* Navigation Columns */}
          {columns.map((col, idx) => (
            <div key={idx} className="space-y-3">
              <h4 className="text-xs font-mono uppercase tracking-wider text-zinc-200 font-semibold">
                {col.title}
              </h4>
              <ul className="space-y-2 text-xs sm:text-sm">
                {col.links.map((link, linkIdx) => (
                  <li key={linkIdx}>
                    <a
                      href={link.href}
                      target={link.isExternal ? "_blank" : undefined}
                      rel={link.isExternal ? "noopener noreferrer" : undefined}
                      className="text-zinc-400 hover:text-white transition-colors inline-flex items-center gap-1"
                    >
                      <span>{link.label}</span>
                      {link.isExternal && <Icon name="external-link" size={10} className="opacity-60" />}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom Bar: Copyright & Legal */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-zinc-500">
          <div>
            © {new Date().getFullYear()} {brand.legalName || brand.name || "ThinkSchool"}. All rights reserved.
          </div>
          <div className="text-center sm:text-right font-mono text-[11px] text-zinc-600">
            {footer.legalNotice}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;