import { getPartners } from '../services/partners-service.js';
import { createElement } from '../utils/dom.js';
import { observeReveals } from '../animations/reveal-observer.js';
import { shouldReduceEffects } from '../utils/device-capability.js';

function createPartnerItem(partner) {
    const item = createElement('div', 'partner-item');
    let imgHTML;

    if (partner.logo) {
        if (partner.logoSmall) {
            imgHTML = `<img src="${partner.logoSmall}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async"
                fetchpriority="low"
                srcset="${partner.logoSmall} 64w, ${partner.logo} 128w" sizes="64px">`;
        } else {
            imgHTML = `<img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async"
                fetchpriority="low">`;
        }
    } else {
        imgHTML = '';
    }

    const inner = partner.link
        ? `<a href="${partner.link}" target="_blank" rel="noopener noreferrer">${imgHTML}</a>`
        : imgHTML;
    item.innerHTML = inner;
    return item;
}

export async function initPartnersSection() {
    const grid = document.getElementById('partners-grid');
    if (!grid) return;

    try {
        const partners = await getPartners();
        grid.innerHTML = '';
        partners.forEach((partner) => grid.appendChild(createPartnerItem(partner)));

        if (shouldReduceEffects()) {
            grid.classList.add('in-view');
        } else {
            observeReveals(grid);
        }
    } catch (error) {
        grid.innerHTML = '';
    }
}