{% extends "base.html" %}

{% block title %}LibreSignage · Open-source digital signage{% endblock %}

{% block meta_description -%}
  Create, schedule, and publish digital signage to every screen from one
  self-hosted platform.
{%- endblock %}

{% block head %}
  <link
    rel="stylesheet"
    href="{{ url_for('main.static', filename='css/main.css') }}"
  >
{% endblock %}

{% block body %}
  <div class="landing-page">
    <svg class="visually-hidden" aria-hidden="true">
      <symbol id="landing-icon-content" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="16" rx="2"></rect>
        <circle cx="8.5" cy="9" r="1.5"></circle>
        <path d="m5 17 4.5-4 3 2.5 2.5-2 4 3.5"></path>
      </symbol>
      <symbol id="landing-icon-playlist" viewBox="0 0 24 24">
        <path d="M4 6h11M4 12h11M4 18h7"></path>
        <path d="m17 15 4 3-4 3z"></path>
      </symbol>
      <symbol id="landing-icon-calendar" viewBox="0 0 24 24">
        <rect x="3" y="5" width="18" height="16" rx="2"></rect>
        <path d="M16 3v4M8 3v4M3 10h18"></path>
        <path d="m8 15 2 2 5-5"></path>
      </symbol>
      <symbol id="landing-icon-screens" viewBox="0 0 24 24">
        <rect x="2" y="4" width="15" height="12" rx="2"></rect>
        <path d="M7 20h5M9.5 16v4"></path>
        <rect x="17" y="8" width="5" height="10" rx="1"></rect>
      </symbol>
      <symbol id="landing-icon-monitor" viewBox="0 0 24 24">
        <path d="M4 15V9M8 15V5M12 15v-3M16 15V7M20 15v-5"></path>
        <path d="M3 19h18"></path>
      </symbol>
      <symbol id="landing-icon-layout" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="16" rx="2"></rect>
        <path d="M15 4v11M3 15h18"></path>
      </symbol>
    </svg>

    <header class="landing-header">
      <nav class="navbar navbar-expand-lg" aria-label="Main navigation">
        <div class="container">
          <a
            class="navbar-brand d-flex align-items-center gap-2"
            href="{{ url_for('main.index') }}"
            aria-label="LibreSignage home"
          >
            <span class="brand-mark" aria-hidden="true">
              <span></span><span></span><span></span>
            </span>
            <span>LibreSignage</span>
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#landing-navigation"
            aria-controls="landing-navigation"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="landing-navigation">
            <div class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
              <a class="nav-link" href="#features">Features</a>
              <a class="nav-link" href="#workflow">How it works</a>
              <a class="nav-link" href="{{ url_for('main.docs') }}">
                Documentation
              </a>
              {% if g.user %}
                <a
                  class="btn btn-primary ms-lg-3"
                  href="{{ url_for('dashboard.index') }}"
                >
                  Open dashboard
                </a>
              {% else %}
                <a
                  class="btn btn-primary ms-lg-3"
                  href="{{ url_for('auth.login') }}"
                >
                  Sign in
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      </nav>
    </header>

    <main>
      <section class="landing-hero">
        <div class="container">
          <div class="row align-items-center g-5">
            <div class="col-lg-6">
              <span class="hero-eyebrow">
                <span aria-hidden="true"></span>
                Open source. Self-hosted. Yours.
              </span>
              <h1>Digital signage that keeps every screen in sync.</h1>
              <p class="hero-lead">
                Create compelling content, schedule it with confidence, and
                publish to your entire screen network from one straightforward
                control center.
              </p>
              <div class="d-flex flex-wrap gap-3">
                {% if g.user %}
                  <a
                    class="btn btn-primary btn-lg"
                    href="{{ url_for('dashboard.index') }}"
                  >
                    Go to your dashboard
                    <span aria-hidden="true">→</span>
                  </a>
                {% else %}
                  <a
                    class="btn btn-primary btn-lg"
                    href="{{ url_for('auth.login') }}"
                  >
                    Manage your screens
                    <span aria-hidden="true">→</span>
                  </a>
                {% endif %}
                <a class="btn btn-outline-dark btn-lg" href="#features">
                  Explore features
                </a>
              </div>
              <ul class="hero-proof" aria-label="Product highlights">
                <li>MIT licensed</li>
                <li>Offline-ready players</li>
                <li>No vendor lock-in</li>
              </ul>
            </div>
            <div class="col-lg-6">
              <div
                class="product-preview"
                role="img"
                aria-label="Preview of the LibreSignage screen management dashboard"
              >
                <div class="preview-toolbar">
                  <div class="preview-dots" aria-hidden="true">
                    <span></span><span></span><span></span>
                  </div>
                  <span>Screen network</span>
                  <span class="preview-live">All systems live</span>
                </div>
                <div class="preview-body">
                  <aside class="preview-sidebar" aria-hidden="true">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </aside>
                  <div class="preview-content">
                    <div class="preview-heading">
                      <div>
                        <small>GOOD MORNING</small>
                        <strong>Welcome back</strong>
                      </div>
                      <span>Publish changes</span>
                    </div>
                    <div class="preview-stats">
                      <div><strong>24</strong><small>Screens</small></div>
                      <div><strong>22</strong><small>Online</small></div>
                      <div><strong>8</strong><small>Playlists</small></div>
                    </div>
                    <div class="preview-panel">
                      <div class="preview-panel-title">
                        <strong>Managed screens</strong>
                        <span>View all</span>
                      </div>
                      {% for name, location, state in [
                        ("Lobby display", "Main office", "Live"),
                        ("Cafe menu", "Ground floor", "Live"),
                        ("Welcome wall", "Reception", "Syncing")
                      ] %}
                        <div class="preview-screen">
                          <span class="preview-thumbnail" aria-hidden="true"></span>
                          <span>
                            <strong>{{ name }}</strong>
                            <small>{{ location }}</small>
                          </span>
                          <span class="preview-state">{{ state }}</span>
                        </div>
                      {% endfor %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="landing-trust" aria-label="LibreSignage advantages">
        <div class="container">
          <div class="row g-4 text-center">
            <div class="col-md-4">
              <strong>Built for reliability</strong>
              <span>Keep local media playing when the network drops.</span>
            </div>
            <div class="col-md-4">
              <strong>Designed for teams</strong>
              <span>Give admins, editors, and viewers the right access.</span>
            </div>
            <div class="col-md-4">
              <strong>Ready to grow</strong>
              <span>Manage one display or a multi-location fleet.</span>
            </div>
          </div>
        </div>
      </section>

      <section class="landing-section" id="features">
        <div class="container">
          <div class="section-heading">
            <span class="section-kicker">Everything in one place</span>
            <h2>All the tools your screens need.</h2>
            <p>
              From the first upload to the final publish, LibreSignage keeps
              content operations clear and predictable.
            </p>
          </div>
          <div class="row g-4">
            {% for icon, title, description in [
              (
                "content",
                "Flexible content",
                "Use images, video, PDFs, text, QR codes, clocks, feeds, and web content."
              ),
              (
                "playlist",
                "Smart playlists",
                "Arrange reusable content with custom durations, transitions, and reliable looping."
              ),
              (
                "calendar",
                "Precise scheduling",
                "Plan date ranges, weekdays, and dayparts so the right message appears on time."
              ),
              (
                "screens",
                "Fleet management",
                "Organize displays, groups, locations, profiles, and assignments from one dashboard."
              ),
              (
                "monitor",
                "Health monitoring",
                "See connection state, cache readiness, storage details, and offline alerts at a glance."
              ),
              (
                "layout",
                "Multi-zone layouts",
                "Combine independent playlists in flexible screen regions, including ticker zones."
              )
            ] %}
              <div class="col-md-6 col-xl-4">
                <article class="feature-card">
                  <span class="feature-icon" aria-hidden="true">
                    <svg><use href="#landing-icon-{{ icon }}"></use></svg>
                  </span>
                  <h3>{{ title }}</h3>
                  <p>{{ description }}</p>
                </article>
              </div>
            {% endfor %}
          </div>
        </div>
      </section>

      <section class="landing-section workflow-section" id="workflow">
        <div class="container">
          <div class="row align-items-start g-5">
            <div class="col-lg-5">
              <span class="section-kicker">A simpler workflow</span>
              <h2>From idea to every display in three steps.</h2>
              <p class="section-copy">
                LibreSignage gives your team a repeatable publishing process
                without hiding the controls that matter.
              </p>
              <a class="arrow-link" href="{{ url_for('main.docs') }}">
                Read the operator guide <span aria-hidden="true">→</span>
              </a>
            </div>
            <div class="col-lg-7">
              <ol class="workflow-list">
                <li>
                  <span>01</span>
                  <div>
                    <h3>Create your content</h3>
                    <p>
                      Upload media or start with an accessible template, then
                      organize everything in the content library.
                    </p>
                  </div>
                </li>
                <li>
                  <span>02</span>
                  <div>
                    <h3>Build the experience</h3>
                    <p>
                      Arrange playlists, define schedules, and preview the
                      result against each screen’s real display profile.
                    </p>
                  </div>
                </li>
                <li>
                  <span>03</span>
                  <div>
                    <h3>Publish with confidence</h3>
                    <p>
                      Stage assignments, publish the approved revision, and
                      monitor every player from the central dashboard.
                    </p>
                  </div>
                </li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      <section class="landing-cta">
        <div class="container">
          <div class="cta-panel">
            <div>
              <span class="section-kicker">Your screens. Your platform.</span>
              <h2>Take control of your display network.</h2>
              <p>
                Run LibreSignage on your infrastructure and keep your content,
                devices, and workflow under your control.
              </p>
            </div>
            {% if g.user %}
              <a
                class="btn btn-light btn-lg"
                href="{{ url_for('dashboard.index') }}"
              >
                Open dashboard <span aria-hidden="true">→</span>
              </a>
            {% else %}
              <a
                class="btn btn-light btn-lg"
                href="{{ url_for('auth.login') }}"
              >
                Sign in to LibreSignage <span aria-hidden="true">→</span>
              </a>
            {% endif %}
          </div>
        </div>
      </section>
    </main>

    <footer class="landing-footer">
      <div class="container">
        <div class="d-flex flex-column flex-md-row gap-3 justify-content-between">
          <span>LibreSignage · Open-source digital signage</span>
          <div class="d-flex gap-4">
            <a href="{{ url_for('main.docs') }}">Documentation</a>
            {% if g.user %}
              <a href="{{ url_for('dashboard.index') }}">Dashboard</a>
            {% else %}
              <a href="{{ url_for('auth.login') }}">Sign in</a>
            {% endif %}
          </div>
        </div>
      </div>
    </footer>
  </div>
{% endblock %}