---
import qpTimeline from "../../data/qpTimeline.json";
const { events } = qpTimeline;
import Subtitle from "../core/Subtitle.astro";
---

<div class="flex flex-col items-center mt-[10%] mb-[15%]">
    <Subtitle title="Timeline" />

    <div
        class="relative flex items-center justify-between w-full max-w-[65vw] py-[10%] mt-[3%]"
    >
        <div
            class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
        >
        </div>

        {
            events.map((event, index) => (
                <div
                    class="relative flex flex-col items-center"
                    style={`flex: 1`}
                >
                    <div
                        class={`absolute ${
                            index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
                        } flex flex-col items-center`}
                    >
                        <div class="text-center">
                            <div class="font-bold text-ieee-yellow text-[1.4vw]">
                                {event.week}
                            </div>
                            <div class="text-[1.1vw] text-gray-300 max-w-[10vw]">
                                {event.description}
                            </div>
                        </div>
                    </div>

                    <div
                        class={`absolute ${
                            index % 2 === 1
                                ? "h-[5vw] top-1/2"
                                : "h-[5vw] bottom-1/2"
                        } w-[0.1vw] bg-white`}
                    />

                    <div class="absolute top-1/2 transform -translate-y-1/2">
                        <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
                    </div>
                </div>
            ))
        }
    </div>
</div>
