{% extends 'Game/index.html.twig' %}

{% block title %} - Contact{% endblock %}

{% block metas %}
  {%- set _ogImage = 'https://' ~ app.request.host ~ asset('/images/mine-1600x627.png') -%}
  <meta property="og:url" content="{{ url('MineSeekerBundle_contact') | replace({'http://': 'https://'}) }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:title" content="Contact · MineSeeker"/>
  <meta property="og:description" content="Get in touch with the MineSeeker team."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Contact · MineSeeker"/>
  <meta name="twitter:description" content="Get in touch with the MineSeeker team."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block body %}
  <div class="txt">
    <h2 style="text-align: center;">Contact and user support</h2>

    {% for message in app.flashes('contact_success') %}
      <div class="auth-card auth-card--sent" style="margin: 20px auto; max-width: 600px;">
        <div class="auth-sent-icon"><i class="far fa-envelope"></i></div>
        <h3 style="color: #667eea; margin: 16px 0;">Message Sent!</h3>
        <p class="auth-sent-note">{{ message }}</p>
        <a href="{{ path('MineSeekerBundle_homepage') }}" class="auth-submit" style="text-decoration:none; margin-top:16px;">
          Back to Home
        </a>
      </div>
    {% else %}
      <p style="text-align: center; color: #666; margin-bottom: 30px;">
        Have a question, feedback, or need support? We'd love to hear from you!
      </p>

      <div class="auth-card" style="max-width: 600px; margin: 0 auto;">
        {{ form_start(form, {attr: {class: 'auth-form'}}) }}

        <div class="auth-field">
          <label for="{{ form.name.vars.id }}" class="auth-label">Name *</label>
          <div class="auth-input-wrap">
            <i class="fas fa-user auth-input-icon"></i>
            {{ form_widget(form.name, {
              attr: {
                class: 'auth-input' ~ (not form.name.vars.valid ? ' auth-input--error' : ''),
                placeholder: 'Your name',
                autofocus: true,
              }
            }) }}
          </div>
          {% if not form.name.vars.valid %}
            {% for error in form.name.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label for="{{ form.email.vars.id }}" class="auth-label">Email *</label>
          <div class="auth-input-wrap">
            <i class="fas fa-envelope auth-input-icon"></i>
            {{ form_widget(form.email, {
              attr: {
                class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
                placeholder: 'your.email@example.com',
              }
            }) }}
          </div>
          {% if not form.email.vars.valid %}
            {% for error in form.email.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label for="{{ form.content.vars.id }}" class="auth-label">Message *</label>
          <div class="auth-input-wrap">
            <i class="fas fa-comment-dots auth-input-icon" style="top: 16px;"></i>
            {{ form_widget(form.content, {
              attr: {
                class: 'auth-input' ~ (not form.content.vars.valid ? ' auth-input--error' : ''),
                placeholder: 'Tell us what\'s on your mind...',
                rows: 6,
                style: 'min-height: 150px; resize: vertical;'
              }
            }) }}
          </div>
          {% if not form.content.vars.valid %}
            {% for error in form.content.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label class="auth-checkbox-label" style="display: flex; align-items: flex-start; cursor: pointer; user-select: none;">
            {{ form_widget(form.consent, {
              attr: {
                class: 'auth-checkbox',
                style: 'margin-right: 10px; margin-top: 3px;'
              }
            }) }}
            <span style="flex: 1; font-size: 14px; line-height: 1.5; color: #666;">
              I have read the <a href="{{ path('MineSeekerBundle_privacy') }}" target="_blank" style="color: #667eea; text-decoration: none;">Privacy and Data Processing Policy</a> and I consent to the processing of my data. *
            </span>
          </label>
          {% if not form.consent.vars.valid %}
            {% for error in form.consent.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <button type="submit" class="auth-submit">
          <i class="fas fa-paper-plane"></i> Send Message
        </button>

        {{ form_end(form) }}
      </div>
    {% endfor %}
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
  {{ vite_entry_script_tags('contact', { dependency: 'react' }) }}
  <div id="contact-form-wrapper"
       data-site-key="{{ recaptcha_site_key }}"
       data-recaptcha-field-id="{{ form.recaptcha.vars.id }}">
  </div>
{% endblock %}