<script>
  import { t } from '$lib/translations';
  import arctouch from '$lib/assets/arctouch-logo-white.svg';
  import disney from '$lib/assets/disney-logo-white.svg';
  import ciandt from '$lib/assets/ciandt-logo-white.svg';
  import iebt from '$lib/assets/iebt-logo-white.svg';
</script>

<section id="brands">
  <h1>{$t('brands.title')}</h1>
  <div class="logos-container">
    <img src={disney} alt="Arctouch" width={150} />
    <img src={arctouch} alt="Arctouch" width={200} />
    <img src={iebt} alt="Arctouch" width={100} />
    <img src={ciandt} alt="Arctouch" width={120} />
  </div>
</section>

<style>
  /* =========================
     LAYOUT / STRUCTURE
  ========================= */
  section {
    background-color: var(--color-dark-background);
    padding: 50px;
    text-align: center;
  }

  h1 {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: #f4f4f5;
    font-weight: 300;
  }

  .logos-container {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
  }

  /* =========================
     MOBILE / RESPONSIVE
  ========================= */
  @media (max-width: 810px) {
    .logos-container {
      flex-direction: column;
      align-items: center;
      gap: 70px;
    }
  }
</style>
