---
import type { Translations } from '../i18n/translations'

export interface Props {
  t: Translations['trust']
}

const { t } = Astro.props
const iconClasses = [
  'trust-card__icon--one',
  'trust-card__icon--two',
  'trust-card__icon--three',
  'trust-card__icon--four',
]
---

<section id="reliability" class="trust">
  <div class="trust__inner">
    <div class="trust__header">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>
      <p class="trust__title">{t.title}</p>
      <p class="trust__description">
        {t.description}
      </p>
    </div>

    <div class="trust__grid">
      {t.cards.map((card, index) => (
        <>
          <div class="trust-card">
            <div class="trust-card__icon-frame">
              <div class="trust-card__icon-crop">
                <img
                  alt=""
                  class={`trust-card__icon ${iconClasses[index]}`}
                  src={index === 3 ? "/assets/trust-icon-improvement.png" : "/assets/trust-icon-sprite.png"}
                />
              </div>
            </div>
            <div class="trust-card__copy">
              <p class="trust-card__title">{card.title}</p>
              <p class="trust-card__description">{card.desc}</p>
            </div>
          </div>
          {index < t.cards.length - 1 && (
            <div class="trust__divider">
              <div class="trust__divider-frame">
                <img alt="" class="trust__divider-image" src="/assets/trust-divider.svg" />
              </div>
            </div>
          )}
        </>
      ))}
    </div>
  </div>
</section>
