---
const LIFECYCLES = ["Konseptualisasi", "Engineering Design", "Instalasi Presisi", "Komisioning"];
---

<style>
    section {
        flex-grow: 1;
    }
    h2 {
        font-size: 18px;
        font-weight: 500;
        color: var(--color-primary);
    }

    ul {
        --gap: clamp(1.5rem, 0.156vw, 2.5rem);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gap);
        margin-top: 2rem;
        position: relative;
    }

    .circle {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-primary);
        color: var(--color-primary-content);
        font-weight: 700;
        border-radius: 2rem;
    }

    li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        position: relative;
    }

    li:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 50%;
        width: calc(100% + var(--gap));
        top: 1rem;
        border-top: 1px dashed var(--color-primary);
        z-index: -1;
    }

    @media (max-width: 639px) {
        ul {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 2rem;
        }

        li:nth-child(even)::before {
            display: none;
        }
    }
</style>
<section>
    <h2>Siklus Hidup Proyek</h2>
    <div class="wrap">
        <ul>
            {
                LIFECYCLES.map((cycle, i) => (
                    <li>
                        <div class="circle">{i + 1}</div>
                        <p>{cycle}</p>
                    </li>
                ))
            }
        </ul>
    </div>
</section>