{% extends 'base.html.twig' %}

{% block title %} - The Game{% endblock %}

{% block metas %}
  <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:title" content="MineSeeker"/>
  <meta property="og:description" content="A multiplayer minesweeper game"/>
  <meta property="og:image"
        content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
{% endblock %}

{% block header %}
  <section
    class="hero{% if app.request.attributes.get('_route') != 'MineSeekerBundle_homepage' %} hero--compact{% endif %}">

    <a class="hero-logo" href="{{ path('MineSeekerBundle_homepage') }}">
      <img src="{{ asset('images/mine-logo-txt.png') }}" alt="MineSeeker"/>
    </a>

    <div class="hero-body">
      {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        <p class="hero-sub">
          {% if app.user.facebookId is defined and app.user.facebookId is not null %}
            <img class="hero-avatar"
                 src="http://graph.facebook.com/{{ app.user.facebookId }}/picture?type=square&width=80&height=80"
                 alt=""/>
          {% endif %}
          Welcome back, <strong>{{ app.user.realName is not null ? app.user.realName : app.user.username }}</strong>
        </p>
        <h1>Ready for another round?</h1>
      {% else %}
        <p class="hero-sub">Multiplayer minesweeper &mdash; reimagined</p>
        <h1>No account needed.<br>Just play.</h1>
      {% endif %}
      <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="hero-cta">Play Now</a>
    </div>

  </section>
{% endblock %}

{% block body %}
  <div class="tech-section">
    <p class="tech-label">Built with</p>
    <div class="tech-logos">
      <img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
      <img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
      <img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
      <img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
      <img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
      <img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
      <img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
    </div>
  </div>
{% endblock %}

{% block footer %}
  <div class="footer-inner">
    <div class="footer-brand">
      <img src="{{ asset('images/mine-logo-logo.png') }}" alt="MineSeeker" class="footer-logo"/>
      <p class="footer-name">MineSeeker</p>
      <p class="footer-tagline">Multiplayer minesweeper &mdash; reimagined</p>
    </div>
    <nav class="footer-nav">
      <p class="footer-nav-label">Navigate</p>
      <ul>
        <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
        <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
        <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
        <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="footer-copy">
    <p>&copy; {{ "now"|date("Y") }} MineSeeker &nbsp;&bull;&nbsp; All rights reserved &nbsp;&bull;&nbsp;
      <a href="https://www.splendidbear.org">www.splendidbear.org</a>
    </p>
  </div>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ vite_entry_link_tags('homeStyle') }}
{% endblock %}