// Footer

const LINK_HREFS = {
  "Product Tour": "#tour",
  Features: "#features",
  Pricing: "#pricing",
  Compare: "#comparison",
  FAQ: "/faq",
  About: "/about",
  Contact: "/contact",
  Terms: "/terms",
  Privacy: "/privacy",
  "DashFolio Automator Privacy": "/automator-privacy",
};

const FOOTER_COLS = [
  { title: "Explore", links: ["Product Tour", "Features", "Pricing", "Compare"] },
  { title: "Resources", links: ["Documentation", "API Reference", "Integrations", "FAQ"] },
  { title: "Company", links: ["About", "Contact"] },
  { title: "Legal", links: ["Terms", "Privacy", "DashFolio Automator Privacy"] },
];

function Footer() {
  return (
    <footer className="border-t border-border1 bg-bg2/50">
      <div className="mx-auto max-w-7xl px-6 md:px-10 py-16">
        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-10">
          <div className="md:max-w-xs">
            <a href="#top" className="flex w-fit items-center" aria-label="DashFolio.ai — home">
              <BrandLogo height={30} />
            </a>
            <p className="mt-1.5 text-[13px] text-mutedfg leading-relaxed">
              Portfolio intelligence for systematic traders. Built in Montréal, used worldwide.
            </p>
            <div className="mt-5 inline-flex items-center gap-1.5 rounded-full border border-border1 bg-card2 px-2.5 py-1 text-[11px] text-mutedfg">
              <span className="h-1.5 w-1.5 rounded-full bg-positive animate-pulse" />
              All systems operational
            </div>
          </div>
          <div className="grid grid-cols-2 sm:flex sm:flex-row gap-10 sm:gap-24 md:gap-32">
            {FOOTER_COLS.map(col => (
              <div key={col.title}>
                <div className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-subtlefg mb-4">{col.title}</div>
                <ul className="space-y-2.5">
                  {col.links.map(l => (
                    <li key={l}>
                      <a href={LINK_HREFS[l] || "#"} className="text-[13px] text-mutedfg hover:text-fg transition-colors">{l}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-14 pt-6 border-t border-border1">
          <div className="text-[11px] text-subtlefg">© 2026 DashFolio All rights reserved.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });