const Footer = () => {
  const { SwissFlag, Logo } = window;
  const cols = [
    {
      h: "Product",
      links: ["The Film", "Colours", "Finishes", "Sample Packs", "Spec Sheet"],
    },
    {
      h: "Trade",
      links: ["Installer Portal", "Become Certified", "Wholesale Pricing", "Training"],
    },
    {
      h: "Company",
      links: ["About OVERCUT", "Engineering", "Press", "Contact"],
    },
  ];

  return (
    <footer className="relative w-full overflow-hidden">
      <div className="relative z-10 px-8 md:px-16 lg:px-20 pt-20 pb-10">
        <div className="card-rise liquid-glass rounded-[1.5rem] p-8 md:p-12">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
            <div className="md:col-span-5">
              <Logo className="h-10 w-auto rounded-xl" />
              <p className="mt-5 max-w-md text-sm text-black/90 font-body font-light leading-snug">
                Swiss-engineered coloured paint protection film. Built by passionate car people, for the cars they actually drive.
              </p>
              <div className="mt-6 inline-flex items-center gap-2 liquid-glass rounded-full px-3 py-1 text-xs text-black font-body">
                Engineered in Switzerland <SwissFlag className="h-3 w-3" />
              </div>
            </div>
            {cols.map((c) => (
              <div key={c.h} className="md:col-span-2">
                <div className="font-mono text-[11px] tracking-[0.15em] uppercase text-black/70 mb-4">
                  {c.h}
                </div>
                <ul className="space-y-2">
                  {c.links.map((l) => (
                    <li key={l}>
                      <a href="#" className="text-sm font-body text-black/90 hover:text-black">{l}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
            <div className="md:col-span-1 flex md:justify-end items-start">
              <a href="#" className="btn-ghost liquid-glass-strong inline-flex items-center justify-center h-12 w-12 rounded-full">
                <span className="font-heading italic text-black text-xl leading-none -mt-0.5">↑</span>
              </a>
            </div>
          </div>
          <div className="mt-12 pt-6 border-t border-black/15 flex flex-col md:flex-row md:items-center md:justify-between gap-3 font-mono text-[11px] tracking-[0.12em] uppercase text-black/70">
            <div>© {new Date().getFullYear()} OVERCUT PPF · Lausanne, CH</div>
            <div className="flex gap-6">
              <a href="#" className="hover:text-black">Terms</a>
              <a href="#" className="hover:text-black">Privacy</a>
              <a href="#" className="hover:text-black">Warranty</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;