import { LOGOTYPE_SVG } from './logotype';

const linkClass =
  'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:underline inline-flex gap-1 items-center';
const headerClass = 'text-gray-900 dark:text-gray-200 font-bold text-sm tracking-wide mb-1';

function column(title: string, links: [string, string, boolean][]): string {
  const items = links
    .map(([href, label, external]) =>
      `<a href="${escapeHtml(href)}" class="${linkClass}"${external ? ' target="_blank" rel="noopener noreferrer"' : ''}>${escapeHtml(label)}</a>`,
    )
    .join('\n            ');
  return `<div class="flex flex-col gap-1">
            <div class="${headerClass}">${escapeHtml(title)}</div>
            ${items}
          </div>`;
}

function escapeHtml(s: string): string {
  return s
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

export const FOOTER_HTML = `<footer class="w-full mt-16 bg-white dark:bg-gray-800">
  <div class="container py-8">
    <div class="flex flex-col gap-10 lg:flex-row lg:items-start">
      <a href="https://tangled.org" class="no-underline hover:no-underline">${LOGOTYPE_SVG}</a>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6 lg:flex-1">
        ${column('Legal', [
          ['https://tangled.org/terms', 'Terms of Service', false],
          ['https://tangled.org/privacy', 'Privacy Policy', false],
        ])}
        ${column('Resources', [
          ['https://blog.tangled.org', 'Blog', true],
          ['https://docs.tangled.org', 'Docs', true],
          ['https://tangled.org/@tangled.org/core', 'Source', false],
          ['https://tangled.org/brand', 'Brand', false],
        ])}
        ${column('Social', [
          ['https://chat.tangled.org', 'Discord', true],
          ['https://web.libera.chat/#tangled', 'IRC', true],
          ['https://bsky.app/profile/tangled.org', 'Bluesky', true],
          ['https://x.com/tangled_org', 'Twitter (X)', true],
        ])}
        ${column('Contact', [
          ['mailto:team@tangled.org', 'team@tangled.org', false],
          ['mailto:security@tangled.org', 'security@tangled.org', false],
        ])}
      </div>
    </div>
    <div class="text-xs text-gray-500 dark:text-gray-400 mt-8">&copy; 2026 Tangled Labs Oy. All rights reserved.</div>
  </div>
</footer>`;