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

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

const { t } = Astro.props
const halftone = "/assets/core-halftone-bg.png";
const icons = [
  "/assets/core-icon-private.png",
  "/assets/core-icon-groups.png",
  "/assets/core-icon-channels.png",
  "/assets/core-icon-voice.png",
  "/assets/core-icon-video.png",
  "/assets/core-icon-media.png",
]
---

<section id="features" class="features">
  <img alt="" class="features__bg" src={halftone} />

  <div class="features__header">
    <div class="section-eyebrow">
      <span class="section-eyebrow__text">{t.eyebrow}</span>
    </div>
    <p class="features__title">{t.title}</p>
    <p class="features__description">
      {t.description}
    </p>
  </div>

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