{% extends 'base.html' %}
{% load static %}
{% block title %}
  <title>Home | The Royal Ark Schools</title>
{% endblock title %}

{% block content %}

<style media="screen">
  /* Make video responsive */
  #myVideo {
    width: 100%;
    height: 130vh;              /* Controls height relative to screen */
    object-fit: cover;          /* Prevents distortion, fills nicely */
    display: block;
  }

  /* Large desktops */
  @media (min-width: 1200px) {
    #myVideo {
      height: 125vh;
    }
  }

  /* Tablets */
  @media (max-width: 992px) {
    #myVideo {
      height: 130vh;
    }
  }

  /* Mobile devices */
  @media (max-width: 576px) {
    #myVideo {
      height: 100vh;
    }
  }

.bg-navy{
  background-color: #080F47;
}
</style>

    <div class="">
      <video id="myVideo" autoplay muted playsinline>
        <source src="{{ home_header.video.url }}" type="video/mp4">
      </video>

      <div class="row">
        <div class="col-md-12 text-center">
          <button class="bg-black text-white rounded-pill" id="unmuteBtn">🔊 <strong>Enable Sound</strong>&nbsp</button>
        </div>

      </div>

    </div>

    <marquee class="bg-navy" behavior="scroll" direction="left" scrollamount="6">📍 <span class="text-white">Visit us today or contact</span> <strong class="text-apu-green">09021062859 and 08134324765</strong> <span class="text-white">or click our</span> <a class="text-apu-green" href="{% url 'admissions' %}">admissions page</a> <span class="text-white">for more details!</span></marquee>

    <div class="section2">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="learnmore">
                        <div class=""></div>
                        <div class="learnmore3">
                            <img class="imagecircle" src="{% static 'images/hi-2.png' %}" alt="">
                        </div>
                        <div class="learnmore1">
                            <h5 class="text-black">MISSION</h5>
                            <span class="text-black">
                              To provide quality education that promotes academic excellence, discipline, and strong moral values, while nurturing confident and responsible learners.
                            <br>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="learnmore">
                        <div class=""></div>
                        <div class="learnmore3">
                            <img class="imagecircle" src="{% static 'images/hi-1.png' %}" alt="">
                        </div>
                        <div class="learnmore1">
                            <h5 class="text-black">VISION</h5>
                            <span class="text-black">
                              To be a leading educational institution recognized for excellence in learning, character formation, and leadership development.
                            </span>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section3 bg-navy">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="browse-course">
                        <div class="course-img-home">
                            <a href="#"><img src="images/b-course.png" alt=""></a>
                        </div>
                        <div class="course-dis">
                            <h6 class="text-apu-purple">Nurturing Scholars</h6>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="browse-course">
                        <div class="course-img-home">
                            <a href="#"><img src="images/instruction.png" alt=""></a>
                        </div>
                        <div class="course-dis">
                            <h6 class="text-apu-purple">Transforming Futures</h6>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="browse-course">
                        <div class="course-img-home">
                            <a href="#"><img src="images/Schedule.png" alt=""></a>
                        </div>
                        <div class="course-dis">
                            <h6 class="text-apu-purple">Enriching Community</h6>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="section3 bg-navy">
        <div class="container">
            <div class="row">

                <div class="col-sm-6">

                    <div class="onlinelearning">
                        <h2 class="text-white">WELCOME TO The Royal Ark Schools</h2>
                        <span>
                          <p class="text-white">
                            The Royal Ark Schools is a reputable educational institution committed to providing quality education in a disciplined, supportive, and value-driven environment. Located at 21, Were Avenue, off Egan Road, Iyana Iyesi, Ota, Ogun State, the college is dedicated to nurturing students academically, morally, and socially.
                          </p>
                          <p class="text-white">
                            At The Royal Ark Schools, we believe that every child has unique potential and deserves guidance that inspires excellence, responsibility, and confidence. Our approach to education combines strong academic instruction with character development and leadership training, preparing students for lifelong success.
                          </p>
                        </span>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="onlinelearning1">
                      {% if welcome.image %}
                      <img src="{{welcome.image.url}}" alt="">
                      {% else %}
                      <img src="" alt="">
                      {% endif %}
                      <div class="bottom-right">
                        <img src="{% static 'images/hi-3.png' %}" alt="">
                        <span class="text-black">3 terms<br> in a year</span>
                      </div>
                      <div class="top-left">
                        <img src="{% static 'images/hi-4.png' %}" alt="">
                        <span class="text-black">Creche/Nursery<br>Primary/Secondary</span>
                      </div>
                        <div class="onlinelearning2"></div>


                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="client bg-navy">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <h2 class="text-white">Categories</h2>
                </div>
                <div class="col-sm-2">
                </div>
                <div class="col-sm-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 ">
                    <div class="home_slide">
                        <div class="owl-carousel owl-theme" id="demoslide4">
                          <div class="item">
                              <div class="testimonial">
                                  <div class="client1">
                                      <img src="{% static 'images/rating.png' %}" alt="">
                                      <h4 class="text-apu-purple">NURSERY</h4>
                                      <span>
                                        Our Nursery School provides a warm and breeding environment where young children begin their educational journey. We focus on early childhood development, moral upbringing, and foundational skills through fun and interactive learning.
                                      </span>
                                  </div>

                              </div>
                          </div>
                            <div class="item">
                                <div class="testimonial">
                                    <div class="client1">
                                        <img src="{% static 'images/rating.png' %}" alt="">
                                        <h4 class="text-apu-purple">SECONDARY</h4>
                                        <span>
                                          We develop intellectual growth, moral excellence, as well as skill acquisition, ensuring students receive a well-rounded secondary school education that prepares them for higher learning and future success in both Arabic and Western education.
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="testimonial">
                                    <div class="client1">
                                        <img src="{% static 'images/rating.png' %}" alt="">
                                        <h4 class="text-apu-purple">PRIMARY</h4>
                                        <span>
                                          Our Primary School lays a strong foundation to foster a grooming environment where young learners improve academically, morally, and socially, preparing them for future success in both religious and secular pursuits.
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>


        <div class="joinus">
            <div class="container">
                <div class="row">

                    <div class="col-sm-4">
                        <div class="bestschool">
                            {% if vib.image %}
                            <img src="{{vib.image.url}}" alt="">
                            {% else %}
                            <img src="" alt="">
                            {% endif %}
                            <div class="top-right2"><h6><b>Vibrant Campus</b></h6>Enjoy the journey on a quest for knowledge.</div>
                            <div class="bottom-left2"><h6><b>Inclusive Setting</b></h6>Chart your path to success with personalized experiences</div>
                        </div>
                    </div>
                    <div class="col-sm-8">

                        <div class="joinus1">

                            <h2 class="text-white">
                                Discover, Create, Excel: Join The Royal Ark Schools's Diverse Academic Odyssey.
                            </h2>
                            <span class="text-white">
                                Where dreams take flight: Ignite your ambitions with our supportive educational ecosystem of diverse opportunities. Nurture your aspirations within our inclusive and empowering academic environment.
                            </span>

                            <div class="joinus2"><img src="{% static 'images/radius.png' %}" alt=""></div>

                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="client bg-navy mt-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h2 class="text-white">Gallery</h2>
                    </div>
                </div>
                <div class="row slider-shadow as-carousel" data-slide-show="3" data-lg-slide-show="2" data-md-slide-show="2" data-sm-slide-show="1">
                {% for project in images %}
                <div class="col-md-6 col-xl-4 mb-3">
                  <div class="blog-block">
                    <div class="blog-img">
                      {% if project.image %}
                      <img src="{{project.image.url}}" alt=""/>
                      {% else %}
                      <img src="{% static 'img/no.svg' %}" alt=""/>
                      {% endif %}
                    </div>

                  </div>
                </div>
                {% endfor %}
              </div>
          </div>
        </div>



    <div class="howitworks">
        <div class="container">
            <h2 class="text-white">Enrol your child to become a scholar</h2>
            <div class="row">
                <div class="col-sm-3">
                    <div class="works">
                        <div class="work-img">
                            <img src="{% static 'images/hi-4.png' %}" alt="">
                        </div>
                        <h4 class="text-black">Obtain Form</h4>
                        <span class="text-black">Available at our school premises or online</span>
                    </div>
                    <div class="midarrow">
                        <img src="{% static 'images/right.png' %}" alt="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="works">
                        <div class="work-img">
                            <img src="{% static 'images/learn.png' %}" alt="">
                        </div>
                        <h4 class="text-black">Complete the Form</h4>
                        <span class="text-black">Fill in all required details accurately</span>
                    </div>
                    <div class="midarrow">
                        <img src="{% static 'images/right.png' %}" alt="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="works">
                        <div class="work-img">
                            <img src="{% static 'images/enjoy.png' %}" alt="">
                        </div>
                        <h4 class="text-black">Confirmation</h4>
                        <span class="text-black">Receive admission with enrollment instructions.</span>
                    </div>
                    <div class="midarrow">
                        <img src="{% static 'images/right.png' %}" alt="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="works">
                        <div class="work-img">
                            <img src="{% static 'images/hi-1.png' %}" alt="">
                        </div>
                        <h4 class="text-black">Graduate</h4>
                        <span class="text-black">Complete all the school's classes</span>
                    </div>
                    <div class="midarrow">
                        <img src="{% static 'images/right.png' %}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    </div>

<script type="text/javascript">
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 20,
    loop: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    breakpoints: {
        0: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1200: { slidesPerView: 3 }
    }
});




</script>

<script>
document.getElementById('unmuteBtn').addEventListener('click', function () {
    const video = document.getElementById('myVideo');
    video.muted = false;
    video.play();
});
</script>
{% endblock content%}