---
import { Image } from "astro:assets";
import SubHeader from "./SubHeader.astro";

const CLIENTS = [
    { name: "Daihatsu", slug: "daihatsu" },
    { name: "Nissan", slug: "nissan" },
    { name: "Mitusbisi Motors", slug: "mitsubishi" },
    { name: "Isuzu", slug: "isuzu" },
    { name: "Kawasaki", slug: "kawasaki" },
    { name: "Pertamina", slug: "pertamina" },
    { name: "Asosiasi Penyelenggara Jaringan Telekomunikasi", slug: "apjatel" },
    { name: "GM", slug: "gm" },
    { name: "Rinnai", slug: "rinnai" },
    { name: "Pomi Indo Karya", slug: "pomi" },
    { name: "PLN", slug: "pln" },
    { name: "Indofood CBP", slug: "indofoodcbp" },
    { name: "Ajinomoto", slug: "ajinomoto" },
    { name: "Amerta Indah Otsuka", slug: "otsuka" },
];

// 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 {
        width: var(--max-width);
        margin: 0 auto;
        padding: 4rem 0;
    }

    h2 {
        font-size: 34px;
        font-weight: 500;
        line-height: 1.2;
    }

    .description {
        margin-top: 1.5rem;
        max-width: 32rem;
        line-height: 1.7;
        color: color-mix(in oklch, var(--color-base-100), var(--color-base-content) 60%);
    }

    ul {
        margin-top: 3rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        border-top: 1px solid color-mix(in oklch, var(--color-base-100), var(--color-base-content) 12%);
        border-left: 1px solid color-mix(in oklch, var(--color-base-100), var(--color-base-content) 12%);
    }

    li {
        border-right: 1px solid color-mix(in oklch, var(--color-base-100), var(--color-base-content) 12%);
        border-bottom: 1px solid color-mix(in oklch, var(--color-base-100), var(--color-base-content) 12%);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 8rem;
        padding: 2rem;
    }

    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: 20px;
        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>
    <SubHeader text="KLIEN KAMI" />
    <h2>Dipercaya oleh Perusahaan Terkemuka</h2>
    <p class="description">
        Kami bermitra dengan perusahaan manufaktur, energi, dan infrastruktur di seluruh Indonesia untuk memberikan
        solusi teknik yang andal.
    </p>

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