<script lang="ts">
  import { onMount } from "svelte";
  import { t } from "$lib/translations";
  import Project from "./Project.svelte";
  import { projects } from "./projects";

  let wrapperClass = "grid gap-8 md:grid-cols-2 lg:grid-cols-3";

  onMount(() => {
    window.ym(88895893, "getClientID", function (clientID) {
      const university_test_group =
        Number(clientID.slice(-1)) % 2 === 0 ? "a" : "b";
      if (university_test_group === "b") {
        wrapperClass = wrapperClass.replace("lg:grid-cols-3", "lg:grid-cols-2")
      }
    });
  });
</script>

<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
  <h2 class="text-3xl mb-4 md:text-4xl">
    {$t("projects.h")}
  </h2>

  <div class={wrapperClass}>
    {#each projects as project}
      <Project {project}></Project>
    {/each}
  </div>
</section>
