<div class="uk-container uk-margin-xlarge-top">
  <div class="uk-cover-container" uk-height-viewport>
    <div class="uk-section uk-text-center uk-margin-xlarge-top">
      <h2 class="uk-margin-small-bottom">
        Interact with E<span class="esm-text-color-red">x</span>ile like never before
      </h2>
      <p class="uk-text-meta">
        Developed exclusively for Arma 3 Exile, ESM is the bridge between Discord and your Exile server(s)
        <p>
          <div class="uk-text-center" uk-margin>
            <%= link_to "Learn More", "#learn-more",
                    class: "uk-button uk-button-secondary uk-margin-left uk-button-large esm-text-color-white uk-margin-top@s",
                    "uk-scroll": "offset: 70"
                %>
          </div>
        </div>
      </div>

      <div id="learn-more">
        <div class="uk-section">
          <h2><%= CommandDetail.total %> Powerful <%= link_to "Commands", wiki_commands_path %></h2>
          <p>
            <span class="uk-text-italic">Do you need to compensate a player but don't feel like starting Arma?</span> Adjust a player's poptabs and respect with <code>!player</code>
            <br>
            <span class="uk-text-italic">Want to give new players a welcome gift? Maybe as a weekly reward?</span> <code>!reward</code> has your back.
            <br>
            <span class="uk-text-italic">Big clan dispute? Do you need to remove someone from your territory that second?</span> Look no further than <code>!remove</code>
            <br>
            From territory management, gambling, and doggos; to compensation, logs, and executing SQF. ESM has commands for players and server admins alike.
            <br>
            All accessible from any device that runs Discord.
            <br>
            <span class="uk-text-italic">Neat, huh?</span>
            <br>
            <%= link_to "Learn More", wiki_commands_path %>
          </p>
        </div>

        <div class="uk-section uk-text-right">
          <h2>Offline XM8 Notifications</h2>
          <p>
            By taking control of the XM8 notification system, ESM adds
            <span
                    uk-tooltip="
                        These new types include
                        <ul class='uk-margin-remove uk-margin-remove-left'>
              <li>Custom</li>
              <li>MarXet Item Sold</li>
              <li>Grind Started</li>
              <li>Hack Started</li>
              <li>Charge Plant Started</li>
              <li>Flag Steal Started<span class='esm-text-color-red'>*</span></li>
            </ul>
            <small><span class='esm-text-color-red'>*</span> optional</small>
            "
            class="esm-text-color-red cursor-pointer"
            >
            6 new notification types
          </span>
          and notifies <span class="esm-text-color-red" uk-tooltip="Players must be registered with ESM"> players using Discord</span>.
          <br>
          Each XM8 notification is completely customizable. The title, the content, and even color can be changed.
          <br>
          <span class="uk-text-italic">Can't settle on one message?</span> ESM allows you to create as many as you want; randomly picking one before sending.
          <br>
          This way you can provide the recipient motivation, feedback, or perhaps even remind them to hydrate...
          <br>
          <span class="uk-text-italic">All while their base is being raided.</span>
          <br>
          <%= link_to "Learn More", wiki_notification_configuration_path %>
        </p>
      </div>

      <div class="uk-section">
        <h2>Fully customizable</h2>
        <p>
          ESM is shipped ready to go and requires only a basic setup process; allowing you to add ESM to your server(s) within minutes.
          <br>
          Each server linked to ESM can be fully customized from its rewards, to logging and payments.
          <br>
          <span class="uk-text-italic">Want to increase the stakes for gambling?</span> You can tweak every part of the <%= link_to "equation", wiki_gambling_path %> to make it <span class="uk-text-italic">just right</span>.
          <br>
          <span class="uk-text-italic">Don't want command to be used? Maybe you want to limit it to a Discord role?</span> With a few exceptions, you can fully customize each command to your liking.
        </p>
      </div>

      <div class="uk-section">
        <div class="uk-text-center" uk-margin>
          <%= link_to "#{image_tag("discord_white.svg", size: "36x41")} Invite to Discord".html_safe, invite_path,
                    class: "uk-button uk-button-primary uk-margin-left uk-button-large esm-text-color-white" %>
          <%= link_to "Get Started", wiki_path,
                    class: "uk-button uk-button-secondary uk-margin-left uk-button-large esm-text-color-white uk-margin-top@s" %>
        </div>
      </div>
    </div>
  </div>