import { motion } from 'framer-motion';

type FooterLink = {
  label: string;
  href: string;
  target?: '_blank' | '_self';
};

type FooterColumn = {
  title: string;
  links: FooterLink[];
};

const footerColumns: FooterColumn[] = [
  {
    title: 'GeoMind',
    links: [
      { label: 'Technology', href: '/technology' },
      { label: 'Use Cases', href: '/usecases' },
    ],
  },
  {
    title: 'Company',
    links: [
      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
    ],
  },
];

export const Footer = () => {
  return (
    <footer className="border-t border-slate-200 bg-white">
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
      >
        <div className="flex items-center gap-3">
          <img
            src="/images/geomind_logo.png"
            alt="Geomind logo"
            className="h-12 w-12 rounded-full object-contain shadow-subtle"
          />
          <div>
            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
              GEOMIND
            </p>
            <p className="mt-2 max-w-xs text-sm text-slate-500">
              The datacenter standard for the next era of cloud and AI.
            </p>
          </div>
        </div>
        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-2 lg:ml-auto lg:max-w-md">
          {footerColumns.map((column) => (
            <div key={column.title}>
              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
                {column.title}
              </p>
              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
                {column.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      target={link.target}
                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
                      className="transition-colors duration-300 hover:text-brand-600"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </motion.div>
      <div className="bg-mist py-4">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
          <div className="flex gap-4">
            <a
              href="https://www.linkedin.com/company/tf9/"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-brand-600"
            >
              LinkedIn
            </a>
            <a
              href="https://github.com/threefoldtech"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-brand-600"
            >
              GitHub
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};