{% extends "main.html" %}

{% block content %}
  {% set install_links = config.extra.install_links | default({}) %}
  {% set exe_link = install_links.get("exe") %}
  {% set zip_link = install_links.get("zip") %}
  {% set flatpak_link = install_links.get("flatpak") %}
  {% set snap_link = install_links.get("snap") %}
  {% set has_install_links = exe_link or zip_link or flatpak_link or snap_link %}

  {% if i18n_page_locale == "es" %}
    {% set hero_badge = "ASISTENTE LOCAL-FIRST" %}
    {% set hero_title = "Controla tu dinero de forma local" %}
    {% set hero_subtitle = "Registra movimientos y entiende tus finanzas sin enviar tus datos a terceros." %}
    {% set hero_mascot_alt = "Arthur, la mascota de MIRA" %}
    {% set cta_primary = "Descargar MIRA" %}
    {% set cta_secondary = "Guia de inicio" %}
    {% set hero_signals = [
      "100% local y privado",
      "Setup inicial en minutos",
      "Reportes claros para decidir"
    ] %}
    {% set quick_start_title = "Quick Start" %}
    {% set quick_start_subtitle = "Empieza en 3 pasos" %}
    {% set steps = [
      {"title": "Instala MIRA", "action": "Instalacion", "href": "installation/"},
      {"title": "Configura tu primera cuenta", "action": "Primeros pasos", "href": "first_steps/"},
      {"title": "Registra tu primera transaccion", "action": "Flujo ejemplo", "href": "practical_workflows/"}
    ] %}
    {% set preview_title = "Product Preview" %}
    {% set preview_caption = "Panel principal con saldos, actividad reciente y acceso rapido a reportes." %}
    {% set preview_points = [
      "Vista consolidada de saldos por cuenta y movimientos recientes.",
      "Acceso rapido a transacciones, presupuestos y analisis MIRA.",
      "Navegacion directa a flujos guiados para registrar operaciones."
    ] %}
    {% set preview_link_text = "Abrir guia de interfaz" %}
    {% set why_title = "Why MIRA" %}
    {% set why_points = [
      "Agrega ingresos y gastos en segundos con lenguaje natural o formulario.",
      "Trabaja 100% local con base SQLite y sin telemetria externa.",
      "Compara presupuesto vs real para detectar desbalances temprano.",
      "Analiza tendencias mensuales con reportes claros y accionables."
    ] %}
    {% set guides_title = "Guides" %}
    {% set guides = [
      {
        "title": "Getting Started",
        "desc": "Instalacion, primera cuenta y primer registro.",
        "href": "first_steps/",
        "cta": "Abrir"
      },
      {
        "title": "Managing Money",
        "desc": "Presupuestos, categorias, cuentas y conciliacion.",
        "href": "practical_workflows/",
        "cta": "Explorar"
      },
      {
        "title": "Advanced Usage",
        "desc": "Analisis MIRA, IA local opcional y troubleshooting.",
        "href": "mira_analysis/",
        "cta": "Ver mas"
      }
    ] %}
    {% set resources_title = "Resources" %}
    {% set resources = [
      {"label": "FAQ", "href": "faq/"},
      {"label": "Troubleshooting", "href": "troubleshooting/"},
      {"label": "AI JSON Contract", "href": "ai_json_contract/"}
    ] %}
    {% set footer_blurb = "MIRA te ayuda a gestionar tus finanzas personales con privacidad por defecto." %}
    {% set footer_docs = "Documentacion" %}
    {% set footer_repo = "Repositorio" %}
    {% set footer_releases = "Releases" %}
    {% set install_exe = "Instalador Windows (.exe)" %}
    {% set install_zip = "Portable (.zip)" %}
    {% set install_flatpak = "Flatpak" %}
    {% set install_snap = "Snap" %}
    {% set dropdown_aria = "Opciones de descarga de MIRA" %}
  {% else %}
    {% set hero_badge = "LOCAL-FIRST ASSISTANT" %}
    {% set hero_title = "Manage your money fully local" %}
    {% set hero_subtitle = "Track transactions and understand your finances without sending your data to third parties." %}
    {% set hero_mascot_alt = "Arthur, MIRA's mascot" %}
    {% set cta_primary = "Download MIRA" %}
    {% set cta_secondary = "Get Started Guide" %}
    {% set hero_signals = [
      "100% local and private",
      "First setup in minutes",
      "Clear reports for decisions"
    ] %}
    {% set quick_start_title = "Quick Start" %}
    {% set quick_start_subtitle = "Get started in 3 steps" %}
    {% set steps = [
      {"title": "Install MIRA", "action": "Installation", "href": "installation/"},
      {"title": "Set up your first account", "action": "First steps", "href": "first_steps/"},
      {"title": "Record your first transaction", "action": "Example workflow", "href": "practical_workflows/"}
    ] %}
    {% set preview_title = "Product Preview" %}
    {% set preview_caption = "Main dashboard with balances, recent activity, and quick access to reports." %}
    {% set preview_points = [
      "Consolidated balances and recent transactions in one view.",
      "Quick access to transactions, budgets, and MIRA analysis.",
      "Direct navigation to guided workflows for daily operations."
    ] %}
    {% set preview_link_text = "Open interface guide" %}
    {% set why_title = "Why MIRA" %}
    {% set why_points = [
      "Add income and expenses in seconds using natural language or forms.",
      "Run 100% locally with SQLite and no external telemetry.",
      "Compare budget versus actual to catch drift early.",
      "Review monthly trends with focused, actionable reports."
    ] %}
    {% set guides_title = "Guides" %}
    {% set guides = [
      {
        "title": "Getting Started",
        "desc": "Install, set your first account, and create first records.",
        "href": "first_steps/",
        "cta": "Open"
      },
      {
        "title": "Managing Money",
        "desc": "Budgets, categories, accounts, and reconciliation flows.",
        "href": "practical_workflows/",
        "cta": "Explore"
      },
      {
        "title": "Advanced Usage",
        "desc": "MIRA Analysis, optional local AI, and troubleshooting.",
        "href": "mira_analysis/",
        "cta": "See more"
      }
    ] %}
    {% set resources_title = "Resources" %}
    {% set resources = [
      {"label": "FAQ", "href": "faq/"},
      {"label": "Troubleshooting", "href": "troubleshooting/"},
      {"label": "AI JSON Contract", "href": "ai_json_contract/"}
    ] %}
    {% set footer_blurb = "MIRA helps you run personal finance with privacy by default." %}
    {% set footer_docs = "Documentation" %}
    {% set footer_repo = "Repository" %}
    {% set footer_releases = "Releases" %}
    {% set install_exe = "Windows installer (.exe)" %}
    {% set install_zip = "Portable (.zip)" %}
    {% set install_flatpak = "Flatpak" %}
    {% set install_snap = "Snap" %}
    {% set dropdown_aria = "MIRA download options" %}
  {% endif %}

  <div class="mira-landing">
    <section class="mira-section mira-section--hero">
      <div class="mira-shell mira-hero">
        <p class="mira-hero__badge">{{ hero_badge }}</p>
        <img class="mira-hero__mascot" src="{{ 'images/arthur.png' | url }}" alt="{{ hero_mascot_alt }}" width="220" height="220" loading="eager">
        <h1 class="mira-hero__title">{{ hero_title }}</h1>
        <p class="mira-hero__subtitle">{{ hero_subtitle }}</p>
        <div class="mira-hero__actions">
          {% if has_install_links %}
            <div class="mira-install-dropdown" data-mira-install-dropdown>
              <button class="mira-button mira-button--primary mira-install-dropdown__toggle" type="button" aria-expanded="false" aria-label="{{ dropdown_aria }}">
                <span>{{ cta_primary }}</span>
                <span class="mira-install-dropdown__indicator" aria-hidden="true">+</span>
              </button>
              <div class="mira-install-dropdown__menu" hidden>
                {% if exe_link %}
                  <a class="mira-install-dropdown__item" href="{{ exe_link }}">{{ install_exe }}</a>
                {% endif %}
                {% if zip_link %}
                  <a class="mira-install-dropdown__item" href="{{ zip_link }}">{{ install_zip }}</a>
                {% endif %}
                {% if flatpak_link %}
                  <a class="mira-install-dropdown__item" href="{{ flatpak_link }}">{{ install_flatpak }}</a>
                {% endif %}
                {% if snap_link %}
                  <a class="mira-install-dropdown__item" href="{{ snap_link }}">{{ install_snap }}</a>
                {% endif %}
              </div>
            </div>
          {% else %}
            <a class="mira-button mira-button--primary" href="{{ 'installation/' | url }}">{{ cta_primary }}</a>
          {% endif %}
          <a class="mira-button mira-button--ghost" href="{{ 'first_steps/' | url }}">{{ cta_secondary }}</a>
        </div>
        <ul class="mira-hero__signals">
          {% for signal in hero_signals %}
            <li>{{ signal }}</li>
          {% endfor %}
        </ul>
      </div>
    </section>

    <section class="mira-section mira-section--surface">
      <div class="mira-shell mira-quick-start">
        <div class="mira-section__head">
          <h2>{{ quick_start_title }}</h2>
          <p>{{ quick_start_subtitle }}</p>
        </div>
        <ol class="mira-steps">
          {% for step in steps %}
            <li class="mira-step">
              <span class="mira-step__index">{{ loop.index }}</span>
              <div class="mira-step__content">
                <h3>{{ step.title }}</h3>
              </div>
              <a class="mira-step__action" href="{{ step.href | url }}">{{ step.action }}</a>
            </li>
          {% endfor %}
        </ol>
      </div>
    </section>

    <section class="mira-section mira-section--plain">
      <div class="mira-shell mira-preview">
        <div class="mira-section__head">
          <h2>{{ preview_title }}</h2>
          <p>{{ preview_caption }}</p>
        </div>
        <div class="mira-preview__grid">
          <figure class="mira-preview__frame">
            <a href="{{ 'images/mira_dashboard.png' | url }}" target="_blank" rel="noopener">
              <img src="{{ 'images/mira_dashboard.png' | url }}" alt="MIRA dashboard" loading="lazy">
            </a>
            <figcaption>{{ preview_caption }}</figcaption>
          </figure>
          <aside class="mira-preview__details">
            <ul>
              {% for point in preview_points %}
                <li>{{ point }}</li>
              {% endfor %}
            </ul>
            <a href="{{ 'interface_guide/' | url }}">{{ preview_link_text }}</a>
          </aside>
        </div>
      </div>
    </section>

    <section class="mira-section mira-section--surface">
      <div class="mira-shell mira-why-guides">
        <article class="mira-panel">
          <div class="mira-section__head">
            <h2>{{ why_title }}</h2>
          </div>
          <ul class="mira-value-list">
            {% for item in why_points %}
              <li>
                <span class="mira-value-list__icon" aria-hidden="true"></span>
                <span>{{ item }}</span>
              </li>
            {% endfor %}
          </ul>
        </article>

        <article class="mira-panel">
          <div class="mira-section__head">
            <h2>{{ guides_title }}</h2>
          </div>
          <div class="mira-guides-grid">
            {% for guide in guides %}
              <a class="mira-guide-card" href="{{ guide.href | url }}">
                <h3>{{ guide.title }}</h3>
                <p>{{ guide.desc }}</p>
                <span class="mira-guide-card__cta">{{ guide.cta }}</span>
              </a>
            {% endfor %}
          </div>
        </article>
      </div>
    </section>

    <section class="mira-section mira-section--plain">
      <div class="mira-shell">
        <div class="mira-section__head">
          <h2>{{ resources_title }}</h2>
        </div>
        <div class="mira-resources">
          {% for resource in resources %}
            <a class="mira-resource" href="{{ resource.href | url }}">{{ resource.label }}</a>
          {% endfor %}
        </div>
      </div>
    </section>

    <footer class="mira-section mira-section--footer">
      <div class="mira-shell mira-footer">
        <p class="mira-footer__blurb">{{ footer_blurb }}</p>
        <nav class="mira-footer__links" aria-label="Footer links">
          <a href="{{ 'index/' | url }}">{{ footer_docs }}</a>
          <a href="{{ config.repo_url }}" target="_blank" rel="noopener">{{ footer_repo }}</a>
          {% if exe_link %}
            <a href="{{ exe_link }}" target="_blank" rel="noopener">{{ footer_releases }}</a>
          {% endif %}
        </nav>
      </div>
    </footer>
  </div>

  <script>
    (() => {
      const initInstallDropdown = (dropdown) => {
        if (dropdown.dataset.miraInstallDropdownReady === "true") {
          return;
        }

        dropdown.dataset.miraInstallDropdownReady = "true";

        const toggle = dropdown.querySelector(".mira-install-dropdown__toggle");
        const menu = dropdown.querySelector(".mira-install-dropdown__menu");
        const links = Array.from(dropdown.querySelectorAll(".mira-install-dropdown__item"));
        const indicator = dropdown.querySelector(".mira-install-dropdown__indicator");

        if (!toggle || !menu) {
          return;
        }

        const close = () => {
          dropdown.classList.remove("is-open");
          menu.hidden = true;
          toggle.setAttribute("aria-expanded", "false");
          if (indicator) {
            indicator.textContent = "+";
          }
        };

        const open = () => {
          dropdown.classList.add("is-open");
          menu.hidden = false;
          toggle.setAttribute("aria-expanded", "true");
          if (indicator) {
            indicator.textContent = "-";
          }
        };

        toggle.addEventListener("click", () => {
          if (dropdown.classList.contains("is-open")) {
            close();
          } else {
            document.querySelectorAll("[data-mira-install-dropdown].is-open").forEach((node) => {
              if (node !== dropdown) {
                node.classList.remove("is-open");
                const otherToggle = node.querySelector(".mira-install-dropdown__toggle");
                const otherMenu = node.querySelector(".mira-install-dropdown__menu");
                if (otherToggle) {
                  otherToggle.setAttribute("aria-expanded", "false");
                }
                if (otherMenu) {
                  otherMenu.hidden = true;
                }
              }
            });
            open();
          }
        });

        document.addEventListener("click", (event) => {
          if (!dropdown.contains(event.target)) {
            close();
          }
        });

        dropdown.addEventListener("keydown", (event) => {
          if (event.key === "Escape") {
            close();
            toggle.focus();
          }
        });

        links.forEach((link) => {
          link.addEventListener("click", () => {
            close();
          });
        });
      };

      const start = () => {
        document.querySelectorAll("[data-mira-install-dropdown]").forEach(initInstallDropdown);
      };

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", start, { once: true });
      } else {
        start();
      }
    })();
  </script>
{% endblock %}