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

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

const { t, download } = Astro.props
const heroBg = assetPath("/assets/hero-bg.png");
const phoneMockup = assetPath("/assets/hero-phone.png");
const androidIcon = assetPath("/assets/cta-android-icon.svg");
const appleIcon = assetPath("/assets/cta-apple-icon.svg");
const defaultApkHref = "https://talkspro.xyz/download";
---

<section id="hero" class="hero">
  <img alt="" class="hero__bg" src={heroBg} />

  <div class="hero__inner">
    <div class="hero__phone-column">
      <div class="hero__phone-frame">
        <div class="hero__phone-crop">
          <img alt={t.phoneAlt} class="hero__phone" src={phoneMockup} />
        </div>
      </div>
    </div>

    <div class="hero__content">
      <div class="hero__badge">
        <p class="hero__badge-text">{t.badge}</p>
      </div>

      <div class="hero__copy">
        <div class="hero__title">
          <p class="hero__title-line">{t.titleLine1}</p>
          <p class="hero__title-line">{t.titleLine2}</p>
        </div>
        <p class="hero__description">
          {t.description}
        </p>
        <div class="hero__actions">
          <a
            href={defaultApkHref}
            class="store-badge store-badge--android store-badge--browser hero__store-badge"
            rel="noopener noreferrer"
            target="_blank"
          >
            <div class="store-badge__icon-frame">
              <img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.android}</p>
              <p class="store-badge__label">{download.androidCta}</p>
            </div>
          </a>
          <a
            href="#"
            class="store-badge store-badge--ios store-badge--apple hero__store-badge"
            data-app-soon="1"
          >
            <div class="store-badge__icon-frame">
              <img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.ios}</p>
              <p class="store-badge__label">{download.iosCta}</p>
            </div>
          </a>
        </div>
      </div>

      <div class="hero__tags">
        {t.tags.map(tag => (
          <div class="hero__tag">
            <span class="hero__tag-text">{tag}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>