{% extends "base.html" %}
{% from "_partials/icon.html" import icon %}
{% from "_partials/forms.html" import error_slot, invalid %}

{% block title %}{{ t("home.title") }}{% endblock %}

{#- Заголовок (прямое и курсивное начертания) виден сразу, без подмены шрифта.
    URL без версии: он должен совпадать с url() в fonts.css. #}
{% block preload %}
  {% if cyrillic %}
  <link rel="preload" href="/static/fonts/cormorant-garamond-cyrillic.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/static/fonts/cormorant-garamond-italic-cyrillic.woff2" as="font" type="font/woff2" crossorigin>
  {% else %}
  {#- Прямой латинский Cormorant уже грузит base.html (логотип); курсив заголовка — здесь. #}
  <link rel="preload" href="/static/fonts/cormorant-garamond-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
  {% endif %}
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ static_url('css/pages/home.css') }}">
  <script type="module" src="{{ static_url('js/forms.js') }}"></script>
  <script type="module" src="{{ static_url('js/city-autocomplete.js') }}"></script>
{% endblock %}

{% block content %}
<section class="hero container" aria-labelledby="hero-title">
  <div class="hero__text">
    <h1 class="hero__title" id="hero-title">{{ t("home.hero_title")|inline }}</h1>
    <p class="hero__lead">{{ t("home.hero_lead")|inline }}</p>
  </div>
  <div class="hero__panel panel">
    {% include "_partials/natal_form.html" %}
  </div>
</section>

{#- «Что мы считаем»: четыре расчёта из первого экрана человеческими словами.
    Не карточки, а список определений на золотых волосках (сетка 2×2, на телефоне одна колонка). -#}
<section class="section what" id="what" aria-labelledby="what-title">
  <div class="container">
    <h2 class="section__title" id="what-title">{{ t("home.what.title") }}</h2>
    <dl class="what__grid">
      {%- for key in ("lagna", "nakshatra", "vimshottari", "sade_sati") %}
      <div class="what__item">
        <dt>{{ t("home.what." ~ key ~ "_term")|inline }}</dt>
        <dd>{{ t("home.what." ~ key ~ "_text")|inline }}</dd>
      </div>
      {%- endfor %}
    </dl>
    <p class="what__note">{{ t("home.what.note") }}</p>
  </div>
</section>

<section class="section tools" id="tools" aria-labelledby="tools-title">
  <div class="container">
    <h2 class="section__title" id="tools-title">{{ t("home.tools.title") }}</h2>
    <div class="tools__grid">
      <article class="tool tool--match">
        {#- 36 — максимум ашта-куты, та же цифра есть в тексте рядом -#}
        <span class="tool__numeral" aria-hidden="true">36</span>
        <h3 class="tool__title">{{ t("home.tools.match_title") }}</h3>
        <p class="tool__text">{{ t("home.tools.match_text")|inline }}</p>
        <a class="tool__link" href="/{{ lang }}/match">{{ t("home.tools.match_link") }}{{ icon("arrow-right", "tool__arrow") }}</a>
      </article>
      <article class="tool tool--panchang">
        <div class="tool__icons" aria-hidden="true">{{ icon("sun-horizon") }}{{ icon("moon") }}</div>
        <h3 class="tool__title">{{ t("home.tools.panchang_title") }}</h3>
        <p class="tool__text">{{ t("home.tools.panchang_text")|inline }}</p>
        <a class="tool__link" href="/{{ lang }}/panchang/">{{ t("home.tools.panchang_link") }}{{ icon("arrow-right", "tool__arrow") }}</a>
      </article>
    </div>
  </div>
</section>

<section class="section method" id="method" aria-labelledby="method-title">
  <div class="container method__inner">
    <h2 class="section__title" id="method-title">{{ t("home.method.title") }}</h2>
    <dl class="method__list">
      {%- for key in ("ephemeris", "check", "privacy") %}
      <div class="method__item">
        <dt>{{ t("home.method." ~ key ~ "_term") }}</dt>
        <dd>{{ t("home.method." ~ key ~ "_text")|inline }}</dd>
      </div>
      {%- endfor %}
    </dl>
  </div>
</section>

{#- Лист ожидания. waitlist приходит после POST /{lang}/waitlist: done — адрес записан,
    values и errors — форма показывается снова с введённым адресом и ошибкой у поля. -#}
{% set wl = waitlist or {} %}
{% set wl_values = wl.get("values") or {} %}
{% set wl_errors = wl.get("errors") or {} %}
{#- tabindex="-1": после отправки браузер открывает страницу на этой секции по якорю в адресе
    и ставит сюда же фокус, поэтому ответ читается сразу, в том числе экранным диктором -#}
<section class="section waitlist" id="waitlist" tabindex="-1" aria-labelledby="waitlist-title">
  <div class="container">
    <div class="waitlist__panel">
      <div class="waitlist__text">
        <h2 class="section__title" id="waitlist-title">{{ t("home.waitlist.title") }}</h2>
        <p>{{ t("home.waitlist.text")|inline }}</p>
      </div>
      {%- if wl.get("done") %}
      <div class="waitlist__done">
        {{- icon("check-circle", "waitlist__done-icon") }}
        <div>
          <p class="waitlist__done-text">{{ t("home.waitlist.done") }}</p>
          <p class="waitlist__done-note">{{ t("home.waitlist.done_note")|inline(href="/" ~ lang ~ "/privacy/") }}</p>
        </div>
      </div>
      {%- else %}
      {#- Якорь в адресе: ответ сервера лежит внизу страницы, и браузер сам открывает её здесь -#}
      <form class="waitlist__form" method="post" action="/{{ lang }}/waitlist#waitlist" data-validate aria-label="{{ t('home.waitlist.form_label') }}">
        <input type="hidden" name="lang" value="{{ lang }}">
        <div class="field">
          <label class="field__label" for="waitlist-email">{{ t("home.waitlist.email") }}</label>
          <div class="waitlist__row">
            <input class="input" id="waitlist-email" name="email" type="email" required
                   autocomplete="email" spellcheck="false" maxlength="254"
                   value="{{ wl_values.get('email', '') }}"
                   aria-describedby="waitlist-email-error"
                   data-msg-missing="{{ t('home.waitlist.email_missing') }}"
                   data-msg-invalid="{{ t('home.waitlist.email_invalid') }}"
                   {{- invalid(wl_errors, "email") }}>
            <button class="button button--secondary" type="submit">{{ t("home.waitlist.submit") }}</button>
          </div>
          {{ error_slot("waitlist-email", wl_errors.get("email")) }}
        </div>
        <div class="field">
          <label class="check" for="waitlist-consent">
            <input class="check__input" id="waitlist-consent" name="consent" type="checkbox" value="yes" required
                   {%- if wl_values.get("consent") %} checked{% endif %}
                   aria-describedby="waitlist-consent-error"
                   data-msg-missing="{{ t('home.waitlist.consent_missing') }}"
                   {{- invalid(wl_errors, "consent") }}>
            <span>{{ t("home.waitlist.consent")|inline(href="/" ~ lang ~ "/privacy/") }}</span>
          </label>
          {{ error_slot("waitlist-consent", wl_errors.get("consent")) }}
        </div>
      </form>
      {%- endif %}
    </div>
  </div>
</section>
{% endblock %}