<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Навигатор качества жизни</title>
  <meta
    name="description"
    content="Навигатор качества жизни - Life Balance Expert. Цифровой помощник для оценки 42 показателей качества жизни и поиска точек роста на основе математической модели."
  >
  <link rel="icon" type="image/png" href="{{ url_for('static', filename='brand-icon.png') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='brand-icon.png') }}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body class="landing-body{% if is_android_app %} platform-android{% endif %}">
  <div class="page-noise" aria-hidden="true"></div>
  <div class="bg-shape bg-one" aria-hidden="true"></div>
  <div class="bg-shape bg-two" aria-hidden="true"></div>

  <header class="site-header">
    <div class="container header-row">
      <a class="brand" href="#hero" aria-label="Навигатор качества жизни">
        <img src="{{ url_for('static', filename='brand-icon.png') }}" alt="Навигатор качества жизни" width="42" height="42">
        <span class="brand-text">
          <span>Навигатор качества жизни</span>
          <span>Life Balance Expert</span>
        </span>
      </a>

      <div class="header-side">
        <span class="header-badge">Бета-версия {{ version }}</span>

        <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav">
          Меню
        </button>
      </div>

      <nav class="site-nav" id="site-nav" aria-label="Основная навигация">
        <a href="#about">О продукте</a>
        <a href="#concept">Концепция</a>
        <a href="#spheres">8 сфер жизни</a>
        <a href="#format">Формат</a>
        <a href="#contacts">Контакты</a>
        <a class="button button-primary nav-cta" href="{{ url_for('questionnaire') }}">Начать исследование</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero section" id="hero">
      <div class="container hero-grid">
        <div class="hero-copy">
          <h1>Цифровой помощник в поиске жизненного баланса.</h1>
          <p class="hero-lead">
            Интерактивная система помощи в принятии ключевых решений, влияющих на качество жизни человека.
          </p>
          <p class="hero-text">
            Жизнь очень многогранна, и одновременно оценить множество факторов, влияющих на качество жизни – сложная задача.
            Навигатор качества жизни помогает правильно расставить приоритеты для конкретного человека.
          </p>

          <div class="hero-actions">
            <a class="button button-primary" href="{{ browser_questionnaire_url }}"{% if is_android_app %} target="_blank" rel="noreferrer"{% endif %}>Пройти исследование на сайте</a>
            <a class="button button-secondary" href="{{ telegram_url }}" target="_blank" rel="noreferrer">Открыть Телеграм-бот</a>
            {% if is_android_app %}
              <a class="button button-accent" href="{{ url_for('questionnaire') }}">Продолжить в приложении</a>
            {% else %}
              <a class="button button-accent" href="{{ android_apk_url }}">Скачать приложение для Android</a>
            {% endif %}
          </div>

          <div class="hero-stats" aria-label="Ключевые показатели">
            {% for stat in stats %}
              <article class="stat-card">
                <strong>{{ stat.value }}</strong>
                <span>{{ stat.label }}</span>
              </article>
            {% endfor %}
          </div>
        </div>

        <div class="hero-visual" aria-hidden="true">
          <div class="hero-diagram-rotation">
            <svg class="hero-diagram-svg" viewBox="0 0 560 560" role="presentation">
              <g class="hero-orbit-grid">
                <circle class="hero-orbit-line hero-orbit-line-one" cx="280" cy="280" r="128"></circle>
                <circle class="hero-orbit-line hero-orbit-line-two" cx="280" cy="280" r="164"></circle>
                <circle class="hero-orbit-line hero-orbit-line-three" cx="280" cy="280" r="200"></circle>
                <circle class="hero-orbit-line hero-orbit-line-four" cx="280" cy="280" r="236"></circle>
              </g>
              <g class="hero-sector-group">
                {% for sphere in spheres %}
                  <path
                    class="hero-sector-path hero-sector-{{ loop.index }}"
                    data-index="{{ loop.index0 }}"
                    data-start-angle="{{ (loop.index0 * 45) + 3 }}"
                    data-end-angle="{{ (loop.index0 * 45) + 42 }}"
                    data-level="{{ (loop.index0 % 5) + 1 }}"
                  ></path>
                {% endfor %}
              </g>
            </svg>
          </div>

          <div class="hero-core-logo">
            <img src="{{ url_for('static', filename='brand-icon.png') }}" alt="" width="196" height="196">
          </div>

          {% for orbit in hero_orbits %}
            <div class="hero-icon-ring hero-icon-ring-{{ loop.index }}">
              <div class="hero-icon-orbit">
                {% for item in orbit %}
                  <div class="hero-icon-node" style="--item-angle: {{ item.angle }}deg;">
                    <div class="hero-icon-counter">
                      <div class="hero-icon-badge" aria-label="{{ item.title }}">{{ item.emoji }}</div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </section>

    <section class="section" id="about">
      <div class="container">
        <div class="section-head">
          <p class="eyebrow">О продукте</p>
          <h2>Что такое Навигатор качества жизни и зачем это нужно?</h2>
        </div>
        <div class="principles-grid">
          {% for item in highlights %}
            <article class="info-card info-card-{{ item.accent }}">
              <p class="card-eyebrow">{{ item.eyebrow }}</p>
              <h3>{{ item.title }}</h3>
              <p>{{ item.text }}</p>
            </article>
          {% endfor %}
        </div>
      </div>
    </section>

    <section class="section section-alt" id="concept">
      <div class="container concept-grid">
        <div class="section-head">
          <p class="eyebrow">Концепция</p>
          <h2>Во что инвестировать свое время и деньги, чтобы повысить качество жизни?</h2>
        </div>
        <article class="concept-card">
          <p>{{ concept_text }}</p>
        </article>
      </div>
    </section>

    <section class="section" id="spheres">
      <div class="container">
        <div class="section-head">
          <p class="eyebrow">8 сфер жизни</p>
          <h2>Система оценивает ключевые модули качества жизни.</h2>
          <p>На первом уровне модель рассматривает 42 показателя в 8 основных сферах и помогает увидеть зоны наибольшего потенциала роста.</p>
        </div>
        <div class="spheres-grid">
          {% for sphere in spheres %}
            <article class="sphere-card">
              <div class="sphere-icon" aria-hidden="true">{{ sphere.emoji }}</div>
              <h3>{{ sphere.title }}</h3>
              <p>{{ sphere.text }}</p>
            </article>
          {% endfor %}
        </div>
      </div>
    </section>

    <section class="section section-alt" id="flow">
      <div class="container">
        <div class="section-head">
          <p class="eyebrow">Как это работает</p>
          <h2>От быстрых вопросов к персональной модели роста.</h2>
        </div>
        <div class="timeline-grid">
          {% for step in steps %}
            <article class="timeline-card">
              <span class="timeline-step">{{ step.step }}</span>
              <h3>{{ step.title }}</h3>
              <p>{{ step.text }}</p>
            </article>
          {% endfor %}
        </div>
      </div>
    </section>

    <section class="section" id="format">
      <div class="container">
        <div class="section-head">
          <p class="eyebrow">Формат</p>
          <h2>Браузер, Телеграм-бот и мобильное приложение.</h2>
        </div>
        <div class="products-grid">
          {% for item in formats %}
            <article class="product-card landing-card">
              <div class="product-topline">
                <div class="product-badge">
                  <div class="product-badge-square">{{ item.title[0] }}</div>
                  <div class="product-badge-name">{{ item.title }}</div>
                </div>
              </div>
              <p class="product-description">{{ item.text }}</p>
              <div class="product-actions">
                {% if item.title == "Браузерная версия" %}
                  <a class="button button-accent" href="{{ browser_questionnaire_url }}"{% if is_android_app %} target="_blank" rel="noreferrer"{% endif %}>Открыть анкету в браузере</a>
                {% elif item.title == "Телеграм-бот" %}
                  <a class="button button-accent" href="{{ telegram_url }}" target="_blank" rel="noreferrer">Перейти в Telegram</a>
                {% elif item.title == "Мобильное приложение" %}
                  {% if is_android_app %}
                    <a class="button button-accent" href="{{ url_for('questionnaire') }}">Продолжить в приложении</a>
                  {% else %}
                    <a class="button button-accent" href="{{ android_apk_url }}">Скачать приложение для Android</a>
                  {% endif %}
                  <button class="button button-ghost" type="button" disabled>Скоро для iOS</button>
                {% else %}
                  <a class="button button-accent" href="{{ windows_app_url }}">Скачать приложение для Windows</a>
                {% endif %}
              </div>
            </article>
          {% endfor %}
        </div>
      </div>
    </section>

  </main>

  <footer class="site-footer" id="contacts">
    <div class="container footer-shell">
      <div class="footer-row">
        <div class="footer-brand">
          <img src="{{ url_for('static', filename='brand-icon.png') }}" alt="" width="28" height="28">
          <span>Навигатор качества жизни</span>
        </div>
        <div class="footer-contacts">
          <a href="https://lb.expert" target="_blank" rel="noreferrer">lb.expert</a>
          <a href="tel:+74993919100">+7 499 391-91-00</a>
        </div>
        <div class="footer-links">
          <span class="footer-legal">Лицензионное соглашение</span>
          <span class="footer-legal">Политика обработки персональных данных</span>
        </div>
      </div>
      <p class="footer-cookie">
        Мы используем файлы cookie, для персонализации сервисов и повышения удобства пользования системой.{% if not is_android_app %} Если вы не согласны на их использование, поменяйте настройки браузера.{% endif %}
      </p>
    </div>
  </footer>

  <script>
    const menuToggle = document.querySelector('.menu-toggle');
    const siteNav = document.querySelector('#site-nav');
    if (menuToggle && siteNav) {
      menuToggle.addEventListener('click', () => {
        const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
        menuToggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
        siteNav.classList.toggle('site-nav-open', !expanded);
      });
    }

    const sectorGroup = document.querySelector('.hero-sector-group');
    if (sectorGroup) {
      const centerX = 280;
      const centerY = 280;
      const innerRadius = 98;
      const outerRadius = 236;
      const levelMap = [0.18, 0.36, 0.56, 0.78, 1];
      const sectors = Array.from(sectorGroup.querySelectorAll('.hero-sector-path'));

      const polarPoint = (angle, radius) => {
        const radians = ((angle - 90) * Math.PI) / 180;
        return {
          x: centerX + Math.cos(radians) * radius,
          y: centerY + Math.sin(radians) * radius,
        };
      };

      const describeSector = (startAngle, endAngle, radius) => {
        const innerStart = polarPoint(startAngle, innerRadius);
        const innerEnd = polarPoint(endAngle, innerRadius);
        const outerStart = polarPoint(startAngle, radius);
        const outerEnd = polarPoint(endAngle, radius);
        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
        return [
          `M ${innerStart.x.toFixed(2)} ${innerStart.y.toFixed(2)}`,
          `L ${outerStart.x.toFixed(2)} ${outerStart.y.toFixed(2)}`,
          `A ${radius.toFixed(2)} ${radius.toFixed(2)} 0 ${largeArcFlag} 1 ${outerEnd.x.toFixed(2)} ${outerEnd.y.toFixed(2)}`,
          `L ${innerEnd.x.toFixed(2)} ${innerEnd.y.toFixed(2)}`,
          `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x.toFixed(2)} ${innerStart.y.toFixed(2)}`,
          'Z',
        ].join(' ');
      };

      const renderSectors = () => {
        sectors.forEach((sector) => {
          const levelIndex = Math.max(0, Math.min(levelMap.length - 1, Number(sector.dataset.level) - 1));
          const radius = innerRadius + (outerRadius - innerRadius) * levelMap[levelIndex];
          const startAngle = Number(sector.dataset.startAngle);
          const endAngle = Number(sector.dataset.endAngle);
          sector.setAttribute('d', describeSector(startAngle, endAngle, radius));
        });
      };

      const updateSectors = () => {
        sectors.forEach((sector) => {
          const currentLevel = Number(sector.dataset.level) || 3;
          const stepVariants = [-1, -1, 0, 1, 1];
          const delta = stepVariants[Math.floor(Math.random() * stepVariants.length)];
          const nextLevel = Math.max(1, Math.min(5, currentLevel + delta));
          sector.dataset.level = String(nextLevel);
        });
        renderSectors();
      };

      renderSectors();

      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (!prefersReducedMotion) {
        const sectorTimer = window.setInterval(updateSectors, 1800);
        window.addEventListener('pagehide', () => window.clearInterval(sectorTimer), { once: true });
      }
    }
  </script>
</body>
</html>

