---
const supportLinks = [
  {
    label: 'Give a Star',
    href: 'https://github.com/4gray/iptvnator/stargazers',
    description: 'The fastest way to help visibility',
    icon: 'M12 2.5l2.94 5.96 6.58.96-4.76 4.64 1.12 6.56L12 17.53 6.12 20.62l1.12-6.56-4.76-4.64 6.58-.96L12 2.5z',
  },
  {
    label: 'GitHub Sponsors',
    href: 'https://github.com/sponsors/4gray',
    description: 'Monthly support keeps development steady',
    icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
  },
  {
    label: 'Ko-fi',
    href: 'https://ko-fi.com/4gray',
    description: 'One-time donations are always appreciated',
    icon: 'M3 6.5A2.5 2.5 0 0 1 5.5 4h10A2.5 2.5 0 0 1 18 6.5V8h1.5A2.5 2.5 0 0 1 22 10.5v1A2.5 2.5 0 0 1 19.5 14H18v1.5A4.5 4.5 0 0 1 13.5 20h-6A4.5 4.5 0 0 1 3 15.5v-9zm15 5.5h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H18V12z',
  },
];
---

<section class="relative py-28">
  <hr class="section-divider mb-24" />

  <div class="pointer-events-none absolute inset-x-0 top-12 mx-auto h-56 w-[42rem] rounded-full bg-accent-500/[0.05] blur-3xl"></div>

  <div class="relative mx-auto max-w-6xl px-6">
    <div class="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
      <div class="card-dotted relative overflow-hidden rounded-2xl bg-surface-900/35">
        <div class="pointer-events-none absolute -top-12 -right-14 hidden h-52 w-52 opacity-35 mix-blend-screen md:block">
          <img
            src="/iptvnator/illustrations/support-open-source-signal.svg"
            alt=""
            aria-hidden="true"
            class="h-full w-full object-contain"
            loading="lazy"
          />
        </div>

        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Support</span>
        <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl">
          IPTVnator stays <em class="font-medium text-accent-400" style="font-style: italic;">open source</em>
        </h2>
        <p class="mt-5 max-w-2xl text-base leading-relaxed text-surface-300 md:pr-24">
          IPTVnator was built as an open-source project and will remain one. If it helps you, your support keeps the
          project healthy and the motivation high for continued improvements, fixes, and long-term maintenance.
        </p>

        <div class="mt-8 grid gap-3 sm:grid-cols-3">
          {supportLinks.map((item) => (
            <a
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              class="group flex h-full flex-col rounded-xl border border-dashed border-surface-700/70 bg-surface-950/50 p-4 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06]"
            >
              <div class="flex min-h-[3rem] items-center gap-3 text-surface-200">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-accent-500/25 bg-accent-500/10">
                  <svg class="h-5 w-5 text-accent-300 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
                    <path d={item.icon} />
                  </svg>
                </span>
                <span class="text-sm font-semibold text-surface-100">{item.label}</span>
              </div>
              <p class="mt-3 text-sm leading-relaxed text-surface-400">{item.description}</p>
            </a>
          ))}
        </div>
      </div>

      <aside class="card-dotted rounded-2xl bg-surface-900/25">
        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Disclaimer</span>
        <p class="mt-4 text-sm leading-relaxed text-surface-300">
          IPTVnator is a media player application. It does not provide, host, or sell any digital media content,
          playlists, channels, or EPG data.
        </p>
        <p class="mt-3 text-sm leading-relaxed text-surface-400">
          Any channel names, logos, metadata, or playlists shown in screenshots are for demonstration purposes only.
          You are responsible for the sources you use and for complying with local laws and rights.
        </p>
      </aside>
    </div>
  </div>
</section>