import { Link } from 'react-router-dom'

import { Logo } from './Logo'

const SECTIONS = [
  {
    heading: 'Marketplace',
    links: [
      { to: '/domains', label: 'Browse domains' },
      { to: '/categories', label: 'Categories' },
      { to: '/domains?premium=1', label: 'Premium names' },
      { to: '/domains?sort=recent', label: 'Recently listed' },
    ],
  },
  {
    heading: 'Selling',
    links: [
      { to: '/sell', label: 'Sell a domain' },
      { to: '/pricing', label: 'Plans and fees' },
      { to: '/help/verification', label: 'Ownership verification' },
      { to: '/help/transfers', label: 'Transfer process' },
    ],
  },
  {
    heading: 'Trust',
    links: [
      { to: '/help/buyer-protection', label: 'Buyer protection' },
      { to: '/help/payments', label: 'Secure payments' },
      { to: '/help/disputes', label: 'Dispute resolution' },
      { to: '/help', label: 'Help centre' },
    ],
  },
  {
    heading: 'Company',
    links: [
      { to: '/about', label: 'About' },
      { to: '/terms', label: 'Terms of service' },
      { to: '/privacy', label: 'Privacy policy' },
      { to: '/contact', label: 'Contact' },
    ],
  },
]

export function Footer() {
  return (
    <footer className="mt-auto border-t border-border-subtle bg-surface">
      <div className="container-page py-12">
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
          <div className="lg:col-span-1">
            <Logo />
            <p className="mt-3 max-w-xs text-sm text-text-secondary">
              A marketplace for buying and selling domain names, with verified ownership and
              managed transfers.
            </p>
          </div>

          {SECTIONS.map((section) => (
            <nav key={section.heading} aria-label={section.heading}>
              <h3 className="text-sm font-semibold text-text-primary">{section.heading}</h3>
              <ul className="mt-3 flex flex-col gap-2">
                {section.links.map((link) => (
                  <li key={link.to}>
                    <Link
                      to={link.to}
                      className="rounded text-sm text-text-secondary transition-colors duration-150 hover:text-text-primary"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        <div className="mt-10 flex flex-col gap-3 border-t border-border-subtle pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-text-muted">
            © {new Date().getFullYear()} Domainsansar. All rights reserved.
          </p>

          {/*
            Stated plainly rather than buried in the terms. The platform holds
            funds through a licensed payment provider and is not itself a
            regulated escrow institution -- claiming otherwise would be a
            misrepresentation, not just a marketing flourish.
          */}
          <p className="max-w-xl text-xs text-text-muted">
            Payments are processed and held by licensed payment providers. Domainsansar coordinates
            and verifies domain transfers; it is not a bank or a regulated escrow institution.
          </p>
        </div>
      </div>
    </footer>
  )
}
