import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';

import { Logo } from '@/components/site/logo';

const columns = [
  {
    heading: 'Products',
    links: ['Previews', 'Edge Network', 'Analytics', 'Storage', 'Firewall'],
  },
  {
    heading: 'Resources',
    links: ['Docs', 'Guides', 'Changelog', 'Templates', 'Status'],
  },
  {
    heading: 'Company',
    links: ['About', 'Careers', 'Blog', 'Customers', 'Contact'],
  },
  {
    heading: 'Legal',
    links: ['Privacy', 'Terms', 'Security', 'DPA', 'Cookies'],
  },
];

export function Footer() {
  return (
    <footer className="border-t border-white/10">
      <div className="mx-auto max-w-6xl px-6 py-16">
        <div className="grid gap-10 md:grid-cols-[1.5fr_repeat(4,1fr)]">
          <div>
            <Logo />
            <p className="mt-4 max-w-xs text-sm text-white/45">
              The frontend cloud for teams that ship.
            </p>
          </div>
          {columns.map((column) => (
            <div key={column.heading}>
              <h4 className="text-sm font-medium text-white/80">
                {column.heading}
              </h4>
              <ul className="mt-4 space-y-3">
                {column.links.map((link) => (
                  <li key={link}>
                    <a
                      href="#"
                      className="text-sm text-white/45 transition-colors hover:text-white"
                    >
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-8 text-sm text-white/40 sm:flex-row sm:items-center">
          <span>© 2026 Vertex, Inc. All rights reserved.</span>
          <div className="flex items-center gap-2">
            <a
              href="https://github.com"
              aria-label="GitHub"
              className="inline-flex size-8 items-center justify-center rounded-md text-white/45 transition-colors hover:bg-white/5 hover:text-white"
            >
              <RiGithubFill className="size-4" aria-hidden="true" />
            </a>
            <a
              href="https://x.com"
              aria-label="X (Twitter)"
              className="inline-flex size-8 items-center justify-center rounded-md text-white/45 transition-colors hover:bg-white/5 hover:text-white"
            >
              <RiTwitterXFill className="size-4" aria-hidden="true" />
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}