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

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

const { t } = Astro.props
const underline = "/assets/why-underline.svg";
const icons = [
  "/assets/why-icon-simple.svg",
  "/assets/why-icon-familiar.svg",
  "/assets/why-icon-connected.svg",
  "/assets/why-icon-modern.svg",
]
const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-card__icon--square', 'why-card__icon--modern']
---

<section class="why">
  <div class="why__inner">
    <div class="why__intro">
      <div class="why__copy">
        <div class="section-eyebrow">
          <span class="section-eyebrow__text">{t.eyebrow}</span>
        </div>
        <div class="why__text">
          <div class="why__title">
            <p class="why__title-line">{t.titleLine1}</p>
            <p class="why__title-line">{t.titleLine2}</p>
          </div>
          <div class="why__underline">
            <div class="why__underline-frame">
              <img alt="" class="why__underline-image" src={underline} />
            </div>
          </div>
          <p class="why__description">
            {t.description}
          </p>
        </div>
      </div>

      <div class="why__illustration">
        <img alt={t.illustrationAlt} class="why__illustration-image" src="/assets/why-illustration.png" />
      </div>
    </div>

    <div class="why__grid">
      {t.cards.map((card, index) => (
        <div class="why-card">
          <div class="why-card__icon-frame">
            <img alt="" class={`why-card__icon ${iconClasses[index]}`} src={icons[index]} />
          </div>
          <div class="why-card__copy">
            <p class="why-card__title">{card.title}</p>
            <p class="why-card__description">{card.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>