import { Container } from '../components/Container'
import { Wordmark } from '../components/Wordmark'
import { fmt, useI18n } from '../i18n'
import { DESKTOP_RELEASE_HUB_URL } from '../release'

export function Footer() {
  const { t } = useI18n()

  const links = [
    { href: './privacy/', label: t.footer.privacy },
    { href: './terms/', label: t.footer.terms },
    { href: './delete-account/', label: t.footer.deleteAccount },
  ]

  return (
    <footer className="border-t border-white/10 py-12">
      <Container className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
        <div>
          <Wordmark />
          <p className="mt-3 text-sm text-neutral-400">{t.footer.description}</p>
          <p className="mt-6 text-sm text-neutral-400">{fmt(t.footer.copyright, { year: new Date().getFullYear() })}</p>
        </div>

        <ul className="flex flex-wrap gap-x-6 gap-y-1 text-sm">
          {links.map((link) => (
            <li key={link.href}>
              <a href={link.href} className="inline-block py-2 text-neutral-300 transition-colors hover:text-white">
                {link.label}
              </a>
            </li>
          ))}
          <li>
            <a
              href={DESKTOP_RELEASE_HUB_URL}
              target="_blank"
              rel="noopener"
              className="inline-block py-2 text-neutral-300 transition-colors hover:text-white"
            >
              {t.footer.releaseNotes}
              <span className="sr-only"> ({t.a11y.opensInNewTab})</span>
            </a>
          </li>
        </ul>
      </Container>
    </footer>
  )
}