---
interface Props {
    sponsors: Record<string, any>[];
}

import { Image } from 'astro:assets';

const { sponsors } = Astro.props;

const sponsorLogos = import.meta.glob('/src/assets/img/sponsors/*.{svg,png,jpg,jpeg,webp}', { eager: true });

const sponsorsByTier = sponsors.reduce((acc, sponsor) => {
    if (!acc[sponsor.tier]) acc[sponsor.tier] = [];
    acc[sponsor.tier].push(sponsor);
    return acc;
}, {} as Record<string, typeof sponsors>);

const tiers = Object.keys(sponsorsByTier);
---

<div class="not-prose">
    <div class="max-w-2xl mx-auto">
        {tiers.map(tier => {
            const tierSponsors = sponsorsByTier[tier];

            return (
                    <div class="first:mt-8 sm:first:mt-10 not-first:mt-12 sm:not-first:mt-16">
                        <h3 id={`${tier}-sponsors-heading`}
                            class:list={[
                                'inline-flex items-center gap-3 mb-6 sm:mb-8 font-chicago text-xs uppercase tracking-wide',
                                { 'text-neutral-900 dark:text-neutral-100': tier === 'platinum' },
                                { 'text-neutral-600 dark:text-neutral-400': tier === 'silver' }
                            ]}>
                            <span aria-hidden="true">★</span>
                            <span>
                                {tier} Sponsor{tierSponsors.length > 1 ? 's' : ''}
                            </span>
                        </h3>

                        <ul class:list={[
                            'grid gap-4 list-none p-0 m-0',
                            { 'grid-cols-1': tier === 'platinum' },
                            { 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3': tier === 'silver' }
                        ]}>
                            {tierSponsors.map((sponsor) => {
                                const logo = (sponsorLogos[sponsor.image] as any)?.default;
                                const isSvg = sponsor.image.endsWith('.svg');
                                const SvgComponent = isSvg ? logo : null;

                                if (!logo) return null;

                                return (
                                        <li>
                                            <a href={sponsor.url} target="_blank" rel="noopener noreferrer" aria-label={`Visit ${sponsor.name} website`}
                                               class:list={[
                                                   'card lg',
                                                   'flex items-center justify-center w-full h-full group relative outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral-500 dark:focus-visible:ring-neutral-400 interact:border-neutral-300 dark:interact:border-neutral-600',
                                                   { 'p-8': tier === 'platinum', 'p-6': tier !== 'platinum' },
                                                   { 'min-h-[180px]': tier === 'platinum' },
                                                   { 'min-h-[120px]': tier === 'silver' }
                                               ]}>
                                                {isSvg ? (
                                                        <SvgComponent
                                                                role="presentation"
                                                                aria-label={`${sponsor.name} Logo`}
                                                                class:list={[
                                                                    'object-contain pointer-events-none',
                                                                    { 'max-h-[80px] w-[360px]': tier === 'platinum' },
                                                                    { 'max-h-[55px] w-[180px]': tier === 'silver' }
                                                                ]}
                                                                width="100%"
                                                        />
                                                ) : (
                                                        <Image
                                                                src={logo}
                                                                alt={`${sponsor.name} Logo`}
                                                                class:list={[
                                                                    'object-contain pointer-events-none',
                                                                    { 'max-h-[80px] w-[360px]': tier === 'platinum' },
                                                                    { 'max-h-[55px] w-[180px]': tier === 'silver' }
                                                                ]}
                                                                width={tier === 'platinum' ? 360 : 180}
                                                                height={tier === 'platinum' ? 80 : 55}
                                                        />
                                                )}
                                            </a>
                                        </li>
                                )})}
                        </ul>
                    </div>
            );
        })}
    </div>
    <div class="flex justify-center w-full mt-12">
        <a href="https://github.com/sponsors/bigskysoftware?o=esb"
           target="_blank"
           rel="noopener noreferrer"
           class="inline-flex items-center justify-center gap-2 h-10 px-6 bg-linear-to-b font-chicago text-sm rounded-lg from-neutral-650 to-neutral-750 dark:from-neutral-150 dark:to-neutral-200 text-white dark:text-neutral-900 interact:from-neutral-600 interact:to-neutral-700 dark:interact:from-neutral-100 dark:interact:to-neutral-150 border border-neutral-700 dark:border-neutral-300 interact:border-neutral-650 dark:interact:border-neutral-400 shadow-3d-neutral-950 dark:shadow-3d-neutral-500 active:translate-y-[0.375cqh] active:shadow-3d-depth-[2px] transition">
            <i class="icon-[mdi--heart] text-red-500" aria-hidden="true"></i>
            Sponsor htmx
        </a>
    </div>
</div>
