{% extends "base.html" %}
{#
  Home page: a spotlight, the page's Markdown in a band, then screenshots.
  Spotlight text comes from the page's front matter.
#}
{% block content %}
  <h1 class="sr-only">{{ config.site_name }}</h1>
  <div class="maya-front__spotlight mt-0 lg:mt-20">
    <div class="maya-spotlight">
      <div class="maya-spotlight__media">
        <img src="{{ 'images/home.jpg'|url }}" alt="The Maya theme's home page: a spotlight, service tiles and department links." width="1600" height="1000">
      </div>
      <div class="maya-spotlight__content">
        <h2 class="maya-spotlight__heading">{{ page.meta.heading }}</h2>
        <div class="maya-spotlight__body"><p class="m-0">{{ page.meta.lead }}</p></div>
        <div class="flex flex-wrap gap-12">
          <a class="btn" href="{{ config.extra.project_url }}">Download from drupal.org</a>
          <a class="btn btn--secondary" href="{{ 'installation/'|url }}">Install guide</a>
        </div>
      </div>
    </div>
  </div>

  <div class="maya-zebra">
    <section class="maya-band" aria-label="About Maya">
      <div class="maya-container">
        <div class="docs-home maya-text">
          {{ page.content }}
        </div>
      </div>
    </section>

    <section class="maya-band" aria-labelledby="screens">
      <div class="maya-container">
        <h2 id="screens" class="maya-band__heading">Screens</h2>
        <div class="docs-screens">
          <figure>
            <img src="{{ 'images/page.jpg'|url }}" alt="A content page with breadcrumb, content type label, slab title and body text." loading="lazy" width="1600" height="1222">
            <figcaption>Content pages: label, title and SF.gov body text.</figcaption>
          </figure>
          <figure>
            <img src="{{ 'images/menu-desktop.jpg'|url }}" alt="The main menu with the Services dropdown open." loading="lazy" width="1600" height="778">
            <figcaption>Main menu dropdowns with a "See all" button.</figcaption>
          </figure>
          <figure class="docs-screens__phone">
            <img src="{{ 'images/home-mobile.jpg'|url }}" alt="The home page on a phone." loading="lazy" width="600" height="1299">
            <figcaption>Home page on a phone.</figcaption>
          </figure>
          <figure class="docs-screens__phone">
            <img src="{{ 'images/menu-mobile.jpg'|url }}" alt="The mobile menu open, with search, language switcher and an expanded section." loading="lazy" width="600" height="1299">
            <figcaption>Mobile menu with search and languages.</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <section class="maya-band" aria-labelledby="docs">
      <div class="maya-container">
        <h2 id="docs" class="maya-band__heading">Documentation</h2>
        <div class="maya-quick-links">
          {% for item in nav %}
            {% if item.is_page and not item.is_homepage %}
              <a class="maya-quick-link group" href="{{ item.url|url }}">
                <span class="maya-quick-link__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
                <span class="maya-quick-link__body"><span class="maya-quick-link__heading">{{ item.title }}</span></span>
              </a>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </section>
  </div>
{% endblock %}