{{ define "main" }}
{{ $lang := .Site.Language.Lang }}
<section class="hero">
  <div class="hero-copy">
    <h1>{{ .Params.hero.title }}</h1>
    <p class="tagline">{{ .Params.hero.tagline }}</p>
    <p class="lead">{{ .Params.hero.lead }}</p>
    {{ .Content }}
    {{ with .Site.GetPage "/about" }}
    <p><a class="text-link" href="{{ .RelPermalink }}">{{ T "aboutCta" }} →</a></p>
    {{ end }}
    {{ partial "store-badges.html" . }}
  </div>
  {{ $shot := resources.Get (printf "screenshots/%s/home.png" $lang) | fingerprint }}
  {{ with $shot }}
  <div class="hero-shot">
    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane" loading="eager" /></div>
  </div>
  {{ end }}
</section>

<section class="status">
  <span class="badge-beta">{{ T "statusBadge" }}</span>
  <div>
    <h2>{{ T "statusTitle" }}</h2>
    <p>{{ T "statusBody" }}</p>
  </div>
</section>

<section class="pillars">
  {{ range .Params.pillars }}
  <article class="pillar">
    <div class="pillar-icon" aria-hidden="true">{{ .icon }}</div>
    <h2>{{ .title }}</h2>
    <p>{{ .body }}</p>
  </article>
  {{ end }}
</section>

{{ $screens := slice "home" "inventory" "market" "calendar" "detail" }}
<section class="shots">
  <h2>{{ T "screenshotsTitle" }}</h2>
  <div class="shot-row">
    {{ range $s := $screens }}
      {{ $img := resources.Get (printf "screenshots/%s/%s.png" $lang $s) | fingerprint }}
      {{ with $img }}
      <figure class="phone-fig">
        <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
        <figcaption>{{ T (printf "screenCap%s" (title $s)) }}</figcaption>
      </figure>
      {{ end }}
    {{ end }}
  </div>
  {{ $rtl := resources.Get "screenshots/rtl/inventory.png" | fingerprint }}
  {{ with $rtl }}
  <div class="rtl-note">
    <div class="phone phone-sm"><img src="{{ .RelPermalink }}" alt="Tane RTL" loading="lazy" dir="rtl" /></div>
    <div>
      <h3>{{ T "rtlNoteTitle" }}</h3>
      <p>{{ T "rtlNoteBody" }}</p>
    </div>
  </div>
  {{ end }}
</section>

<section class="values">
  <h2>{{ .Params.values.title }}</h2>
  <ul>
    {{ range .Params.values.points }}<li>{{ . }}</li>{{ end }}
  </ul>
</section>

<section class="faq">
  <h2>{{ T "faqTitle" }}</h2>
  <dl>
    <dt>{{ T "faqFreeQ" }}</dt><dd>{{ T "faqFreeA" }}</dd>
    <dt>{{ T "faqAccountQ" }}</dt><dd>{{ T "faqAccountA" }}</dd>
    <dt>{{ T "faqOfflineQ" }}</dt><dd>{{ T "faqOfflineA" }}</dd>
    <dt>{{ T "faqLegalQ" }}</dt><dd>{{ T "faqLegalA" }} <a href="{{ "/legal/seeds/" | relLangURL }}">→</a></dd>
    <dt>{{ T "faqDataQ" }}</dt><dd>{{ T "faqDataA" }} <a href="{{ "/legal/privacy/" | relLangURL }}">→</a></dd>
  </dl>
</section>

<section class="collab">
  <h2>{{ T "collabTitle" }}</h2>
  <p class="lead">{{ T "collabIntro" }}</p>
  <div class="collab-grid">
    <article>
      <h3>{{ with .Site.Params.weblateURL }}<a href="{{ . }}">{{ T "collabTranslateT" }}</a>{{ else }}{{ T "collabTranslateT" }}{{ end }}</h3>
      <p>{{ T "collabTranslateB" }}</p>
    </article>
    <article>
      <h3>{{ T "collabTestT" }}</h3>
      <p>{{ T "collabTestB" }}</p>
    </article>
    <article>
      <h3>{{ with .Site.Params.sourceURL }}<a href="{{ . }}">{{ T "collabCodeT" }}</a>{{ else }}{{ T "collabCodeT" }}{{ end }}</h3>
      <p>{{ T "collabCodeB" }}</p>
    </article>
    <article>
      <h3>{{ T "collabFundT" }}</h3>
      <p>{{ T "collabFundB" }}</p>
    </article>
  </div>
  <p><a class="badge" href="mailto:{{ .Site.Params.email }}">{{ T "collabContact" }}</a></p>
</section>

<section class="get-it" id="get">
  <h2>{{ T "getItTitle" }}</h2>
  {{ partial "store-badges.html" . }}
</section>
{{ end }}