---
import { project } from '~/data/project';

const contribUrl = `https://contrib.rocks/image?repo=${project.repo}`;
const initials = ['AN', 'MS', 'TP', 'JR', 'KH', 'EV', 'DA', 'LP'];
---

<section
  class="border-t hairline"
  style="background-color: var(--color-surface);"
  aria-labelledby="contributors-heading"
>
  <div class="container-x py-16 sm:py-20 text-center">
    <p class="label-eyebrow">Contributors</p>
    <h2 id="contributors-heading"
        class="mt-3 font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight"
        style="letter-spacing: -0.025em;">
      Built with help from {project.stats.contributors} people.
    </h2>
    <p class="mt-4 text-base max-w-xl mx-auto" style="color: var(--color-text-muted);">
      Patches, bug reports, and the occasional very-strong-worded issue. Thank you.
    </p>

    <div class="mt-8 flex flex-col items-center gap-3">
      {/* Primary: contrib.rocks SVG. Auto-syncs from GitHub. */}
      <img
        class="contributors-img max-w-full"
        src={contribUrl}
        alt={`${project.stats.contributors} contributors to ${project.name}`}
        loading="lazy"
        width="600"
        height="80"
        onerror="this.classList.add('failed')"
      />

      {/* Fallback: revealed by .contributors-img.failed adjacent-sibling rule */}
      <div class="contributors-fallback" aria-hidden="true">
        {initials.map((i) => <span>{i}</span>)}
      </div>

      <a
        href={`${project.repoUrl}/graphs/contributors`}
        rel="noopener noreferrer"
        target="_blank"
        class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium hover:opacity-80"
        style="color: var(--color-accent);"
      >
        See all contributors on GitHub →
      </a>
    </div>
  </div>
</section>
