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

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

{% block metas %}
  {%- set _ogImage = 'https://' ~ app.request.host ~ asset('/images/mine-1600x627.png') -%}
  <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') | replace({'http://': 'https://'}) }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:locale" content="en_US"/>
  <meta property="og:title" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta property="og:description"
        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta property="og:image:alt" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta name="twitter:description"
        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block header %}
  <section id="hero-auth">
    <div class="hero-auth">
      {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        <a href="{{ path('MineSeekerBundle_profile') }}" class="hero-auth-btn hero-auth-btn--profile">
          {% if app.user.avatarPath %}
            <img src="{{ app.user.avatarPath|imagine_filter('avatar_thumb') }}"
                 alt="{{ app.user.username }}"
                 class="hero-auth-avatar">
          {% else %}
            <span class="hero-auth-avatar hero-auth-avatar--initials">{{ app.user.username|slice(0, 2)|upper }}</span>
          {% endif %}
          {{ app.user.username }}
        </a>
        <a href="{{ path('MineSeekerBundle_profile_security') }}" class="hero-auth-btn hero-auth-btn--security">
          <i class="fas fa-lock"></i> Security
        </a>
        <form method="post" action="{{ path('MineSeekerBundle_logout') }}">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"/>
          <button type="submit" class="hero-auth-btn hero-auth-btn--out">
            <i class="fas fa-right-from-bracket"></i> Sign out
          </button>
        </form>
      {% else %}
        <a href="{{ path('MineSeekerBundle_login') }}" class="hero-auth-btn">
          <i class="fas fa-right-to-bracket"></i> Sign in
        </a>
        <a href="{{ path('MineSeekerBundle_register') }}" class="hero-auth-btn hero-auth-btn--register">
          <i class="fas fa-user-plus"></i> Register
        </a>
      {% endif %}
    </div>
  </section>

  <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">
          Welcome back, <strong>{{ 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>
      <p class="hero-donate-text">Love this game?</p>
      <a href="https://ko-fi.com/splendidbear" target="_blank" rel="noopener" class="hero-donate">
        Buy me a coffee
      </a>
    </div>

  </section>
{% endblock %}

{% block body %}
  <section class="feature-block">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--stats">
        <i class="fas fa-chart-bar"></i>
        <i class="fas fa-trophy"></i>
        <i class="fas fa-clock-rotate-left"></i>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">For registered players</p>
        <h2 class="feature-block__title">Track your legacy</h2>
        <p class="feature-block__body">
          Create a free account and every game you play gets recorded.
          Watch your win rate climb, revisit past battles, and prove your dominance
          on the board — one detonation at a time. Share your greatest victories with friends,
          replay epic showdowns, and celebrate your legendary moments.
        </p>
        {% if not is_granted("IS_AUTHENTICATED_REMEMBERED") %}
          <a href="{{ path('MineSeekerBundle_register') }}" class="feature-block__cta">
            <i class="fas fa-user-plus"></i> Create free account
          </a>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="feature-block feature-block--reverse feature-block--msn">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--msn">
        <img src="{{ asset('images/msn-logo.png') }}" alt="MSN Messenger" class="msn-logo"/>
        <img src="{{ asset('images/msn-minesweeper.png') }}" alt="MSN Messenger Minesweeper" class="msn-screenshot"/>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">Our inspiration</p>
        <h2 class="feature-block__title">Born from a legend</h2>
        <p class="feature-block__body">
          Remember the minesweeper hidden inside Microsoft's MSN Messenger?
          That tiny two-player gem sparked countless friendships and rivalries
          in the early 2000s. We loved it — so we rebuilt it for today.
          Real-time, multiplayer, and no MSN account required.
        </p>
      </div>
    </div>
  </section>

  <section class="feature-block feature-block--privacy">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--privacy">
        <i class="fas fa-shield"></i>
        <i class="fas fa-lock"></i>
        <i class="fas fa-eye-slash"></i>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">Your data, your control</p>
        <h2 class="feature-block__title">Privacy by Design</h2>
        <p class="feature-block__body">
          We believe in transparency and simplicity. Your <strong>username</strong> is your identity here—
          we never expose your email publicly. Forgot your password? No problem. We keep no social integrations,
          no third-party tracking, and absolutely zero AI-generated content. Just a pure, clean game experience.
        </p>
      </div>
    </div>
  </section>

  <section class="feature-block feature-block--reverse feature-block--practice">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--practice">
        <i class="fas fa-laptop"></i>
        <i class="fab fa-linux"></i>
        <i class="fab fa-apple"></i>
        <i class="fab fa-windows"></i>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">Train & Compete</p>
        <h2 class="feature-block__title">Multiplayer Online, Solo Practice</h2>
        <p class="feature-block__body">
          Love the challenge of real-time battles? Here, you'll compete live against friends and players worldwide.
          Want to sharpen your skills solo first? Download our standalone versions for Windows, macOS, and Linux.
          Practice on your own time, then bring your A-game online.
        </p>
        <div class="practice-links">
          <a
            href="https://flathub.org/en/apps/org.gnome.Mines"
            target="_blank"
            rel="noopener"
            class="practice-link"
          >
            <img
              src="{{ asset('images/another-games/gnome-mines.png') }}"
              alt="Mines"
              class="practice-link-icon"
            />
            Linux (Flatpak) &bull; GNOME Mines
          </a>
          <a
            href="https://apps.microsoft.com/detail/9wzdncrfhwcn?hl=en-US&gl=HU"
            target="_blank"
            rel="noopener"
            class="practice-link"
          >
            <img
              src="{{ asset('images/another-games/microsoft-minesweeper.png') }}"
              alt="Microsoft Minesweeper"
              class="practice-link-icon"
            />
            Windows &bull; Microsoft Minesweeper
          </a>
          <a
            href="https://apps.apple.com/us/app/minesweeper/id1404304731"
            target="_blank"
            rel="noopener"
            class="practice-link"
          >
            <img
              src="{{ asset('images/another-games/apple-minesweeper.png') }}"
              alt="Minesweeper"
              class="practice-link-icon"
            />
            Apple &bull; Minesweeper
          </a>
        </div>
      </div>
    </div>
  </section>

  <div class="tech-section">
    <p class="tech-label">Built with</p>
    <div class="tech-logos">
      <a href="https://symfony.com" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
      </a>
      <a href="https://howlerjs.com" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
      </a>
      <a href="https://tanstack.com/query" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
      </a>
      <a href="https://mercure.rocks" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
      </a>
      <a href="https://vitejs.dev" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
      </a>
      <a href="https://bun.sh" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
      </a>
      <a href="https://www.jetbrains.com/phpstorm" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
      </a>
      <a href="https://archlinux.org" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/archlinux.svg') }}" alt="Arch Linux"/>
      </a>
    </div>
    <p class="tech-oss">
      <i class="fa fa-heart"></i>
      This game would not exist without the incredible open-source community. <br>
      Thank you to every contributor, maintainer, and creator behind these projects.
    </p>
  </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_rules') }}">Game Rules</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 %}