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

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

const { t } = Astro.props
const heroBg = "/assets/hero-bg.png";
const phoneMockup = "/assets/hero-phone.png";
---

<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="#download" class="hero__button hero__button--primary">
            <span class="hero__button-label">{t.download}</span>
          </a>
          <a href="#features" class="hero__button hero__button--secondary">
            <span class="hero__button-label">{t.explore}</span>
          </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>