{% extends "base.html" %}
{% block title %}About Us | {{ settings.event_title }}{% endblock %}
{% block content %}
<div class="about-page-shell">

  <!-- Continuous arena energy layer (decorative only) -->
  <div class="about-energy-layer" aria-hidden="true">
    <i class="ae-streak ae-1"></i>
    <i class="ae-streak ae-2"></i>
    <i class="ae-streak ae-3"></i>
  </div>

  <!-- ══ HERO ══ -->
  <section class="page-head about-hero">
    <div class="about-hero-fx" aria-hidden="true">
      <span class="ahx-glow"></span>
      <span class="ahx-grid"></span>
      <span class="ahx-line ahx-line-a"></span>
      <span class="ahx-line ahx-line-b"></span>
      <span class="ahx-current"></span>
      <div class="ahx-champion">
        <span class="ahx-ring r1"></span>
        <span class="ahx-ring r2"></span>
        <span class="ahx-hex"></span>
        <i class="fas fa-trophy"></i>
      </div>
    </div>
    <div class="wrap reveal about-hero-inner">
      <p class="eyebrow">About Nexora</p>
      <h1>Built For Players Who Want <span class="grad-text">The Main Stage</span></h1>
      <p class="lead">{{ settings.about_intro }}</p>
    </div>
  </section>


  <!-- ══ STORY ══ -->
  <section class="section white about-story">
    <div class="wrap reveal">
      <div class="two-col about-story-grid">
        <div class="about-copy-panel">
          <div class="section-heading">
            <p class="eyebrow">Our Story</p>
            <h2>From A Simple Idea To A Championship</h2>
          </div>
          <p class="lead" style="margin-bottom:16px;">{{ settings.about_body }}</p>
          <p class="lead">
            Nexora started as a simple competitive idea and has grown into a structured championship where registration,
            payment verification, brackets, and results are managed through one clear system. Every season improves the
            format so players can focus on performance.
          </p>
        </div>

        <div class="feature-list about-feature-list">
          <p><span class="tick">&#10003;</span>Transparent registration and payment verification</p>
          <p><span class="tick">&#10003;</span>Separate pricing for individual and group entries</p>
          <p><span class="tick">&#10003;</span>Admin-managed game cards, gallery, and sponsors</p>
          <p><span class="tick">&#10003;</span>Instant email confirmation after every registration</p>
          <p><span class="tick">&#10003;</span>Responsive design for phones, tablets, laptops, and TVs</p>
          <p><span class="tick">&#10003;</span>Prizes, certificates, and official recognition for winners</p>
        </div>
      </div>
    </div>
  </section>



  <!-- ══ RULES + FAQ ══ -->
  <section class="section about-rules">
    <div class="wrap reveal">
      <div class="two-col about-rules-grid">
        <div class="about-copy-panel">
          <div class="section-heading">
            <p class="eyebrow">Rules</p>
            <h2>Tournament Rules</h2>
          </div>
          <div class="feature-list">
            <p><span class="tick">&#10003;</span>Every player must bring original CNIC or student ID on event day</p>
            <p><span class="tick">&#10003;</span>Team rosters cannot be changed after registration approval</p>
            <p><span class="tick">&#10003;</span>Late teams may receive a walkover decision</p>
            <p><span class="tick">&#10003;</span>Cheats, mods, or third-party tools cause instant disqualification</p>
            <p><span class="tick">&#10003;</span>The referee or admin decision is final</p>
            <p><span class="tick">&#10003;</span>Registration fees are non-refundable</p>
          </div>
        </div>

        <div class="about-copy-panel">
          <div class="section-heading">
            <p class="eyebrow">FAQ</p>
            <h2>Common Questions</h2>
          </div>
          <div class="faq-list reveal" data-stagger>
            <details class="faq-item">
              <summary>How do I pay the registration fee?</summary>
              <p>{{ settings.bank_account }} — upload your proof screenshot in the registration form after payment.</p>
            </details>
            <details class="faq-item">
              <summary>How long does payment verification take?</summary>
              <p>Most payments are reviewed within 24 hours. Once approved, your status changes to Paid.</p>
            </details>
            <details class="faq-item">
              <summary>Can I register for more than one game?</summary>
              <p>Yes. Each game requires a separate registration and separate entry fee.</p>
            </details>
            <details class="faq-item">
              <summary>How many members can a team have?</summary>
              <p>Team size depends on the game format selected by the admin.</p>
            </details>
            <details class="faq-item">
              <summary>What is the early bird discount?</summary>
              <p>{{ settings.early_discount }} — deadline {{ settings.early_deadline | pretty_dt }}.</p>
            </details>
            <details class="faq-item">
              <summary>I did not receive a confirmation email. What should I do?</summary>
              <p>Check your spam folder first. If it still does not arrive, contact the organizing team.</p>
            </details>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ══ CONTACT ══ -->
  <section class="section soft about-contact" id="contact">
    <div class="wrap reveal">
      <div class="two-col about-contact-grid">
        <div class="about-copy-panel">
          <div class="section-heading">
            <p class="eyebrow">Contact</p>
            <h2>Get In Touch</h2>
            <p>Send questions, feedback, partnership requests, or event concerns to the organizing team.</p>
          </div>
          <div class="feature-list">
            {% if settings.contact_email %}
            <p><span class="tick"><i class="fas fa-envelope" style="font-size:10px;"></i></span>{{ settings.contact_email
              }}</p>
            {% endif %}
            <p><span class="tick"><i class="fab fa-whatsapp" style="font-size:10px;"></i></span>
              <a href="https://wa.me/923310314962" target="_blank" style="color:inherit;text-decoration:none;">+92 331 0314962</a>
            </p>
            {% if settings.contact_phone %}
            <p><span class="tick"><i class="fas fa-phone" style="font-size:10px;"></i></span>{{ settings.contact_phone }}
            </p>
            {% endif %}
            {% if settings.contact_address %}
            <p><span class="tick"><i class="fas fa-location-dot" style="font-size:10px;"></i></span>{{
              settings.contact_address }}</p>
            {% endif %}
            <p><span class="tick"><i class="fas fa-clock" style="font-size:10px;"></i></span>Event:
              {{ settings.event_date | pretty_dt }}</p>
          </div>
        </div>

        <form class="form-panel about-contact-form" method="post">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <h2>Send A Message</h2>
          <p style="margin:0; font-size:13.5px; color:var(--muted);">Your message is emailed to the organizing team and saved in the admin panel.</p>
          <label>Full Name<input name="name" placeholder="Your name" required></label>
          <label>Email<input type="email" name="email" placeholder="example@email.com" required></label>
          <label>Phone<input name="phone" placeholder="03xx-xxxxxxx" required></label>
          <label>Message<textarea name="message" placeholder="Question, review, complaint, or partnership request..." rows="4"
              required></textarea></label>
          <button class="btn primary block" type="submit"><i class="fas fa-paper-plane"></i> Send Message</button>
        </form>
      </div>
    </div>
  </section>

  <!-- ══ REVIEWS ══ -->
  <section class="section about-community">
    <div class="wrap reveal">
      <div class="section-heading center">
        <p class="eyebrow">Community</p>
        <h2>Latest Messages</h2>
      </div>
      <div class="review-grid reveal" data-stagger>
        {% for contact in contacts %}
        <article class="review-card">
          <div class="review-top">
            <span class="avatar">{{ contact.name[:1] | upper }}</span>
            <strong>{{ contact.name }}</strong>
          </div>
          <p>{{ contact.message }}</p>
        </article>
        {% else %}
        <div class="empty" style="grid-column:1/-1;"><i class="fas fa-comments"></i>Community messages will appear here after users contact the team.</div>
        {% endfor %}
      </div>
    </div>
  </section>

</div>
{% endblock %}