{% extends 'base.html' %}
{% load static %}

{% block title %}
  RCCG Region 29 | Bursary & Scholarship Portal
{% endblock %}
{% block extra_head %}
    <style>
    .hero-bg {
        background-image: 
            linear-gradient(rgba(183, 216, 191, 0.92), rgba(219, 178, 166, 0.95)),
            url('{% static "images/bg.jpeg" %}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
    }
    .hero-content {
        position: relative;
        z-index: 2;
    }
    .support-section {
        background: linear-gradient(135deg, #0f5132 0%, #198754 100%);
        border-radius: 1.5rem;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }
    .support-pill {
        display: inline-block;
        background: rgba(255,255,255,0.18);
        color: #fff;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .support-card {
        border: 0;
        border-radius: 1.2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }
    .portal-qr {
      width: 176px;
      height: 176px;
      object-fit: contain;
      image-rendering: pixelated;
    }
</style>
{% endblock %}

{% block content %}
  <section class="py-1" style="background: linear-gradient(135deg, #c1d1e0 0%, #cecfc8 100%);">
    <div class="container-fluid">
      <div class="row hero-bg shadow-lg rounded-top-5 p-1">
        <div class="col-md-6 hero-content d-flex flex-column justify-content-center align-items-center text-center text-md-start">
          <!-- Header Branding -->
          <div class="text-center mb-1">
            <img src="{% static 'images\rccg.jpg' %}" alt="RCCG Logo" class="mb-1 img-fluid rounded-circle" style="max-height: 100px; max-width: 100px;" />
            <h5 class="text-danger fw-bold mb-1">THE REDEEMED CHRISTIAN CHURCH OF GOD</h5>
            <h6 class="text-muted">REGION 29, CROSS RIVER STATE</h6>
            <h5 class="fw-bold text-primary mt-4">CHRISTIAN SOCIAL RESPONSIBILITY</h5>
            <h4 class="fw-bold text-dark mt-2">BURSARY / SCHOLARSHIP <span class="text-success">AWARD PORTAL</span></h4>
            <p class="lead text-muted fw-bolder mt-3">Academic Year 2026 / 2027</p>
          </div>
        </div>
        <div class="col-md-6 text-center justify-content-center align-content-center">
          <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  <div class="carousel-inner">
    {% for image in church_images %}
      <div class="carousel-item{% if forloop.first %} active{% endif %}">
        <img src="{% static 'images/church/' %}{{ image }}" class="d-block w-100 img-fluid" alt="Church service photo {{ forloop.counter }}">
      </div>
    {% endfor %}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
        </div>
      </div>

      <div class="row align-items-center g-5">
        <!-- Left Side - Hero Content -->
        <div class="col-lg-7">
          <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="card-body p-5">
              <h2 class="h3 fw-semibold mb-4">Welcome to the Official Scholarship Portal</h2>

              <p class="lead text-muted mb-4">Supporting academic excellence through Christ-centered education.</p>

              <div class="mb-4">
                <p class="fw-semibold text-success mb-2">Scholarship Opportunities</p>
                {% comment %} <div class="d-flex flex-wrap gap-2">
                  <span class="badge bg-light text-dark">Continue with Google</span>
                  <span class="badge bg-light text-dark">Continue with Microsoft</span>
                </div> {% endcomment %}
              </div>

              <div class="d-flex flex-wrap gap-3 mb-5">
                {% if user.is_authenticated %}
                  <a href="{% url 'cbt:assessment_list' %}" class="btn btn-success btn-lg px-5"><i class="bi bi-clipboard-check me-2"></i> Start Application</a>
                {% else %}
                  <a href="{% url 'account_signup' %}" class="btn btn-success btn-lg px-5">Create Account</a>
                  <a href="{% url 'account_login' %}" class="btn btn-outline-success btn-lg px-5">Sign In</a>
                {% endif %}
              </div>

              <div class="d-flex flex-column flex-sm-row align-items-center gap-3 border-top pt-4 mb-4">
                <img class="portal-qr border rounded-3 p-2 bg-white"
                     src="data:image/png;base64,{{ portal_qr_code }}"
                     alt="QR code linking to {{ portal_url }}"
                     width="176"
                     height="176" />
                <div class="text-center text-sm-start">
                  <h3 class="h6 fw-bold mb-1">Open the portal on your phone</h3>
                  <p class="small text-muted mb-2">Scan to visit the portal, then sign in or create an account.</p>
                  <a class="small link-success" href="{{ portal_url }}">{{ portal_url }}</a>
                </div>
              </div>

              <!-- Trust Indicators -->
              <div class="row text-center g-4">
                <div class="col-4">
                  <i class="bi bi-mortarboard-fill display-5 text-success"></i>
                  <h6 class="mt-2">Academic Excellence</h6>
                </div>
                <div class="col-4">
                  <i class="bi bi-shield-check-fill display-5 text-success"></i>
                  <h6 class="mt-2">Transparent Process</h6>
                </div>
                <div class="col-4">
                  <i class="bi bi-people-fill display-5 text-success"></i>
                  <h6 class="mt-2">Flourishing Branch</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right Side - Form Preview / Benefits -->
        <div class="col-lg-5">
          <div class="card border-0 shadow-lg bg-white">
            <div class="card-header bg-success text-white text-center py-3">
              <strong>2026/2027 SCHOLARSHIP AWARD FORM</strong>
            </div>
            <div class="card-body">
              <ul class="list-unstyled">
                <li class="d-flex mb-3">
                  <i class="bi bi-check-circle-fill text-success me-3 mt-1"></i>
                  <div>
                    <strong>Flourishing Branch</strong><br />
                    <small class="text-muted">Form Ref. No.: ________________</small>
                  </div>
                </li>
                <li class="d-flex mb-3">
                  <i class="bi bi-check-circle-fill text-success me-3 mt-1"></i>
                  <div>Merit-based Bursary Awards</div>
                </li>
                <li class="d-flex mb-3">
                  <i class="bi bi-check-circle-fill text-success me-3 mt-1"></i>
                  <div>Need-based Financial Support</div>
                </li>
                <li class="d-flex">
                  <i class="bi bi-check-circle-fill text-success me-3 mt-1"></i>
                  <div>Christian Leadership Development</div>
                </li>
              </ul>
            </div>
            <div class="card-footer text-center text-muted small py-3">Region 29 • Cross River State</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Quick Stats -->
  <section class="py-2 bg-light rounded-top-5 shadow-lg p-4 mt-3">
    <div class="container">
      <div class="row text-center g-4">
        <div class="col-md-4">
          <h3 class="text-success fw-bold">500+</h3>
          <p class="text-muted">Students Supported</p>
        </div>
        <div class="col-md-4">
          <h3 class="text-success fw-bold">₦45M+</h3>
          <p class="text-muted">Disbursed This Year</p>
        </div>
        <div class="col-md-4">
          <h3 class="text-success fw-bold">98%</h3>
          <p class="text-muted">Renewal Rate</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Donation / Support Section -->
  <section class="py-2">
    <div class="container">
      <div class="support-section text-white p-2 p-lg-5">
        <div class="row align-items-center g-4">
          <div class="col-lg-7">
            <span class="support-pill">Support the Cause</span>
            <h2 class="fw-bold mt-1 mb-2">Help transform lives through education</h2>
            <p class="lead mb-4" style="max-width: 700px;">Your generosity helps provide bursaries, learning materials, and opportunities for students who are committed to academic excellence and Christian service.</p>
            <div class="d-flex flex-wrap gap-3 mb-4">
              <a href="{% url 'core:donation_form' %}" class="btn btn-light text-success fw-semibold px-4">Donate</a>
              <a href="https://wa.me/234" class="btn btn-outline-light px-4" target="_blank" rel="noopener"><i class="bi bi-whatsapp me-2"></i> WhatsApp Support</a>
            </div>

            <div class="card border-0 bg-white bg-opacity-10 text-white">
              <div class="card-body p-4">
                <h6 class="fw-bold mb-3">Bank Transfer Details</h6>
                <p class="small mb-2">
                  <strong>Account Name:</strong> Rccg, Region 29 CSR Bursary
                </p>
                <p class="small mb-2">
                  <strong>Bank:</strong> Micro Finance Bank
                </p>
                <p class="small mb-0">
                  <strong>Account Number:</strong> 1100030192
                </p>
              </div>
            </div>
          </div>

          <div class="col-lg-5">
            <div class="card support-card">
              <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                  <h5 class="fw-bold mb-0">Scholarship Fund</h5>
                  <span class="badge bg-success">Open</span>
                </div>
                <div class="text-center py-3">
                  <div class="display-6 fw-bold text-success">₦2.4M</div>
                  <p class="text-muted mb-0">raised toward this term’s impact fund</p>
                </div>
                <div class="progress mb-3" style="height: 10px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: 68%;"></div>
                </div>
                <ul class="list-unstyled small text-muted mb-0">
                  <li class="mb-2">
                    <i class="bi bi-check-circle-fill text-success me-2"></i>Student bursaries
                  </li>
                  <li class="mb-2">
                    <i class="bi bi-check-circle-fill text-success me-2"></i>Academic resources
                  </li>
                  <li>
                    <i class="bi bi-check-circle-fill text-success me-2"></i>Leadership development
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}