{% extends "base.html" %}
{% block title %}{{ app_name }} — VPN панель{% endblock %}
{% block body %}
<header class="container site-header">
  <a class="brand" href="/">
    <span class="brand-mark">V</span>
    <span>{{ app_name }}</span>
  </a>
  <nav class="nav">
    <a href="#features">Возможности</a>
    <a href="/admin/login">Админка</a>
  </nav>
</header>

<main>
  <section class="hero container">
    <h1>Веб‑панель для WireGuard и AmneziaWG 2.0</h1>
    <p>
      Управляйте VPN‑сервером через браузер: создавайте доступы, выдавайте конфиги и QR‑коды.
      Без десктопного клиента — обычный сайт на вашем VPS.
    </p>
    <div class="cta-row">
      <a class="btn btn-primary" href="/admin/login">Открыть админку</a>
      <a class="btn btn-ghost" href="#features">Как это устроено</a>
    </div>
  </section>

  <section class="section container" id="features">
    <h2>Один интерфейс для доступов</h2>
    <p class="lead">Сначала WireGuard и AWG 2.0. Остальные протоколы подключим позже.</p>
    <div class="grid-3">
      <article class="feature">
        <h3>Клиенты</h3>
        <p>Создавайте, отключайте и удаляйте доступы. IP выдаётся автоматически из подсети сервера.</p>
      </article>
      <article class="feature">
        <h3>Конфиг и QR</h3>
        <p>Скачайте .conf или отсканируйте QR — готово к подключению в официальных клиентах.</p>
      </article>
      <article class="feature">
        <h3>Dokploy + Postgres</h3>
        <p>Деплой через Docker Compose. Админ задаётся в ENV при первом запуске.</p>
      </article>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container">{{ app_name }} · WireGuard / AmneziaWG 2.0</div>
</footer>
{% endblock %}