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

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

const { t, siteLinks } = Astro.props
const bgPattern = assetPath("/assets/cta-bg-pattern.svg");
const talkproLogo = assetPath("/assets/cta-talkpro-logo.svg");
const androidIcon = assetPath("/assets/cta-android-icon.svg");
const appleIcon = assetPath("/assets/cta-apple-icon.svg");
const phoneArt = assetPath("/assets/cta-phone-art.png");
const defaultApkHref = "https://talkspro.xyz/download";
const siteLinksJson = JSON.stringify(siteLinks);
---

<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">
        <a
          class="store-badge store-badge--android store-badge--browser"
          href={defaultApkHref}
          rel="noopener noreferrer"
          target="_blank"
        >
          <div class="store-badge__icon-frame">
            <img alt={t.androidAlt} class="store-badge__android-icon" src={androidIcon} />
          </div>
          <div class="store-badge__copy">
            <p class="store-badge__platform">{t.android}</p>
            <p class="store-badge__label">{t.androidCta}</p>
          </div>
        </a>
        <a
          class="store-badge store-badge--ios store-badge--apple"
          href="#"
          data-app-soon="1"
        >
          <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>
        </a>
      </div>
      <p
        id="site-links-meta"
        class="download-cta__links-meta"
        hidden
      />
    </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>

<script type="application/json" id="site-links-i18n" set:html={siteLinksJson} />