---
const supportLinks = [
  { label: 'Star on GitHub', href: 'https://github.com/4gray/iptvnator/stargazers' },
  { label: 'GitHub Sponsors', href: 'https://github.com/sponsors/4gray' },
  { label: 'Ko-fi', href: 'https://ko-fi.com/4gray' },
];
---

<section class="relative pb-8">
  <div class="mx-auto max-w-6xl px-6">
    <div class="flex flex-col gap-6 rounded-xl border border-surface-800 bg-surface-900/40 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-7">
      <div class="max-w-xl">
        <h2 class="font-display text-xl font-semibold tracking-tight text-surface-50">IPTVnator stays open source</h2>
        <p class="mt-1.5 text-sm leading-relaxed text-surface-400">
          MIT-licensed since 2020. If it saves you an evening, a star or a coffee keeps the updates coming.
        </p>
      </div>
      <div class="flex flex-wrap gap-2.5">
        {
          supportLinks.map((link) => (
            <a
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center rounded-lg border border-surface-700 px-4 py-2.5 text-sm font-medium text-surface-100 transition-colors duration-200 hover:border-surface-500 hover:bg-surface-900"
            >
              {link.label}
            </a>
          ))
        }
      </div>
    </div>
  </div>
</section>