---
import { Image } from "astro:assets";

const PARTNERS = [
    { name: "RIPENART INDONESIA", slug: "ripenart" },
    { name: "ENGINEERING SOLUTION AUTOMATION", slug: "esautomation" },
    { name: "NADESCO", slug: "nadesco" },
    { name: "MORI PRESISI", slug: "moripresisi" },
    { name: "MARUKA INDONESIA", slug: "maruka" },
    { name: "OKAYA INDONESIA", slug: "okaya" },
    { name: "NETUREN INDONESIA", slug: "neturen" },
    { name: "PMT PHOENIX INDONESIA", slug: "phoenix" },
    { name: "METALINDO PIMA SARANAL", slug: "mps" },
];

// Logos are optional: drop `<slug>.png|svg|webp|jpg` into `src/assets/`
// and it is picked up here automatically. Until then the name renders as a
// wordmark, so the section never blocks on missing brand assets.
const logos = import.meta.glob<{ default: ImageMetadata }>("../assets/*.{png,svg,webp,jpg,jpeg}", {
    eager: true,
});

const logoFor = (slug: string) => Object.entries(logos).find(([path]) => path.includes(`/${slug}.`))?.[1].default;
---

<style>
    section {
        flex: 1;
        min-width: 0;
    }

    h2 {
        font-size: 18px;
        color: var(--color-primary);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    h3 {
        font-size: 22px;
    }

    ul {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 1.5rem 2rem;
        align-items: center;
    }

    li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
    }

    img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(1);
        opacity: 0.75;
        transition:
            filter 200ms ease-in-out,
            opacity 200ms ease-in-out;
    }

    li:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    .wordmark {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: color-mix(in oklch, var(--color-base-100), var(--color-base-content) 45%);
        text-align: center;
        line-height: 1.1;
    }
</style>

<section>
    <h2>MITRA TERPERCAYA</h2>
    <h3>Membangun Masa Depan yang Lebih Kuat Bersama</h3>

    <ul>
        {
            PARTNERS.map((partner) => {
                const logo = logoFor(partner.slug);
                return (
                    <li>
                        {logo ? (
                            <Image src={logo} alt={partner.name} height={48} />
                        ) : (
                            <span class="wordmark">{partner.name}</span>
                        )}
                    </li>
                );
            })
        }
    </ul>
</section>