<script lang="ts">
  import {t} from "$lib/translations";
  import MaterialSymbolsWork from '~icons/material-symbols/work';
  import MaterialSymbolsSchool from '~icons/material-symbols/school';
</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('about.h')}
  </h2>

  <div class="grid md:grid-cols-[1fr_auto] gap-6">
    <div class="max-w-2xl">
      {@html $t('about.text')}
    </div>

    <div class="grid gap-x-2 grid-cols-[auto_1fr] h-fit items-center text-slate-400">
      <div class="flex gap-2 items-center">
        <MaterialSymbolsWork></MaterialSymbolsWork>
        {$t('about.career')}
      </div>
      {$t('about.career_value')}

      <div class="flex gap-2 items-center">
        <MaterialSymbolsSchool></MaterialSymbolsSchool>
        {$t('about.bachelors')}
      </div>
      {$t('about.bachelors_value')}

      <div class="flex gap-2 items-center">
        <MaterialSymbolsSchool></MaterialSymbolsSchool>
        {$t('about.masters')}
      </div>
      {$t('about.masters_value')}
    </div>
  </div>
</section>
