{% extends "base.html" %}
{% block title %}Share | BancaNet{% endblock %}
{% block content %}
<div class="share-page">
  <section class="share-banner" aria-label="Compartir">
    <img src="{{ url_for('static', filename='images/share-banner.png') }}?v=2" alt="Compartir y gana" width="2508" height="1411" loading="eager" decoding="async">
  </section>

  <section class="share-card">
    <p class="share-card__label">Codigo de invitacion</p>
    <p class="share-card__code">{{ user.referral_code }}</p>
  </section>

  <section class="share-card">
    <p class="share-card__label">Enlace de invitacion</p>
    <p class="share-card__link">{{ referral_link }}</p>
  </section>

  <section class="share-actions" aria-label="Acciones para compartir">
    <button class="share-card__btn share-card__btn--copy" type="button" data-copy="{{ user.referral_code }}">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
      <span>Copiar codigo</span>
    </button>
    <button class="share-card__btn share-card__btn--copy" type="button" data-copy="{{ referral_link }}">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
      <span>Copiar enlace</span>
    </button>
    <a class="share-card__btn share-card__btn--wa" href="https://wa.me/?text={{ referral_link|urlencode }}" target="_blank" rel="noopener noreferrer">WhatsApp</a>
    <a class="share-card__btn share-card__btn--fb" href="https://www.facebook.com/sharer/sharer.php?u={{ referral_link|urlencode }}" target="_blank" rel="noopener noreferrer">Facebook</a>
  </section>

  <section class="share-lines">
    <h2>Lineas de comision</h2>
    <div class="share-lines__grid">
      <article class="share-line">
        <span class="share-line__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
        </span>
        <span class="share-line__level">Nivel 1</span>
        <strong class="share-line__pct">{{ level_percents[1] }}</strong>
        <p>Tu invitacion directa</p>
      </article>
      <article class="share-line">
        <span class="share-line__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
        </span>
        <span class="share-line__level">Nivel 2</span>
        <strong class="share-line__pct">{{ level_percents[2] }}</strong>
        <p>Invitados de tu nivel 1</p>
      </article>
      <article class="share-line">
        <span class="share-line__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
        </span>
        <span class="share-line__level">Nivel 3</span>
        <strong class="share-line__pct">{{ level_percents[3] }}</strong>
        <p>Invitados de tu nivel 2</p>
      </article>
    </div>
    <p class="share-lines__note">Solo la primera compra de cada invitado genera comision.</p>
  </section>

  <div class="share-announce" id="share-announce" role="dialog" aria-modal="true" aria-label="Anuncio">
    <div class="share-announce__backdrop" data-share-announce-close></div>
    <div class="share-announce__panel">
      <button type="button" class="share-announce__close" data-share-announce-close aria-label="Cerrar">&times;</button>
      <img src="{{ url_for('static', filename='images/share-announce-hq.png') }}?v=3" alt="Anuncio" width="1411" height="2508" decoding="async">
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.querySelectorAll("[data-copy]").forEach((btn) => {
  btn.addEventListener("click", async () => {
    await navigator.clipboard.writeText(btn.dataset.copy);
    const label = btn.querySelector("span");
    if (!label) return;
    const prev = label.textContent;
    label.textContent = "Copiado";
    setTimeout(() => { label.textContent = prev; }, 1400);
  });
});

(function () {
  var modal = document.getElementById("share-announce");
  if (!modal) return;
  function closeAnnounce() {
    modal.hidden = true;
    document.body.classList.remove("share-announce-open");
  }
  modal.hidden = false;
  document.body.classList.add("share-announce-open");
  modal.querySelectorAll("[data-share-announce-close]").forEach(function (el) {
    el.addEventListener("click", closeAnnounce);
  });
})();
</script>
{% endblock %}