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

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

const { t } = Astro.props
const bgPattern = "/assets/cta-bg-pattern.svg";
const talkproLogo = "/assets/cta-talkpro-logo.svg";
const androidIcon = "/assets/cta-android-icon.svg";
const appleIcon = "/assets/cta-apple-icon.svg";
const phoneArt = "/assets/cta-phone-art.png";
---

<section id="download" class="download-cta">
  <img alt="" class="download-cta__pattern" src={bgPattern} />

  <div class="download-cta__inner">
    <div class="download-cta__content">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>

      <div class="download-cta__copy">
        <div class="download-cta__heading">
          <p class="download-cta__title">{t.title}</p>
          <div class="download-cta__logo-frame">
            <img alt={t.logoAlt} class="download-cta__logo" src={talkproLogo} />
          </div>
        </div>
        <p class="download-cta__description">
          {t.description}
        </p>
      </div>

      <div class="store-badges">
        <div class="store-badge store-badge--android">
          <img alt={t.androidAlt} class="store-badge__icon" src={androidIcon} />
          <div class="store-badge__copy">
            <p class="store-badge__platform">{t.android}</p>
            <p class="store-badge__label">{t.androidCta}</p>
          </div>
        </div>
        <div class="store-badge store-badge--ios">
          <div class="store-badge__icon-frame">
            <img alt={t.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
          </div>
          <div class="store-badge__copy">
            <p class="store-badge__platform">{t.ios}</p>
            <p class="store-badge__label">{t.iosCta}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="download-cta__phone">
      <div class="download-cta__phone-crop">
        <img alt={t.phoneAlt} class="download-cta__phone-image" src={phoneArt} />
      </div>
    </div>
  </div>
</section>