@extends('front.layouts.layout')
@section('content')
    <!-- Hero Section -->
    <section id="hero" 
    class="vh-100 d-flex align-items-center justify-content-center text-center bg-dark text-white"
     style="background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url('{{ asset('images/7.jpeg') }}') center center no-repeat;
    background-size: cover;"

    >
        <div>
            <img src="{{ asset('images/logo1.jpg') }}" class="mb-4 rounded-circle w-25" alt="Logo">
            <h1 class="display-6 fw-bold color-british">Welcome to Horizon International School</h1>
            <p class="lead">Where education meets creativity to build the future generation Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Vitae corporis maxime inventore repellendus atque cum necessitatibus id omnis
                aliquam. Quae.</p>
        </div>
    </section>
    <!-- Vision Section -->
    <section id="vision" class="py-5">
        <div class="container text-center">
            <h1 class="fw-bold mb-4 color-british">Our Vision</h1>
            <p class="mb-5">We aim to create an innovative and inspiring learning environment that fosters creativity and
                excellence.</p>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 shadow cursor-pointer">
                        <div class="card-body">
                            <i class="bi bi-eye fs-1 color-british mb-3"></i>
                            <h5 class="card-title fw-bold">Clarity</h5>
                            <p class="card-text">We strive to shape a clear future with well-planned steps and ambitious
                                goals.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow cursor-pointer">
                        <div class="card-body">
                            <i class="bi bi-gear fs-1 color-british mb-3"></i>
                            <h5 class="card-title fw-bold">Technology</h5>
                            <p class="card-text">We keep pace with modern developments to ensure advanced and up-to-date
                                education.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow cursor-pointer">
                        <div class="card-body">
             <i class="bi bi-globe2 fs-1 color-british mb-3"></i>
                            <h5 class="card-title fw-bold">Communication</h5>
                            <p class="card-text">We build bridges of communication between generations and communities to
                                strengthen collaboration.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


     <!-- about school -->
   <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-5 pt-5 h-100" style="min-height: 400px;">
                        <img class="position-absolute w-100 h-100" src="{{ asset('images/9.jpeg') }}" alt="" style="object-fit: cover;">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp pt-5" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h3 class="color-british text-uppercase mb-2 ">About school</h3>
                        <p class="fs-5" style="color: black">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium error voluptatibus placeat maxime quas ullam, ex necessitatibus laboriosam odio provident nisi. Dolorem voluptatum vitae maxime, magni accusamus dolorum eius laboriosam.
                          Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
                     
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Gallery Section -->
<section id="gallery" class="py-5 bg-light">
  <div class="container text-center">
    <h1 class="fw-bold mb-4 color-british">Our Gallery</h1>
    <p class="mb-5">Explore moments from our school activities, achievements, and events.</p>
    <div class="row g-4">
      <!-- Image Item -->
      <div class="col-sm-6 col-md-3">
        <div class="card border-0 shadow-sm cursor-pointer"
         data-bs-toggle="modal" data-bs-target="#galleryModal"
          data-image="{{ asset('images/9.jpeg') }}">
          <img src="{{ asset('images/9.jpeg') }}" class="card-img-top rounded w-100 image-school" alt="Gallery 1">
        </div>
      </div>
      <!-- Image Item -->
      <div class="col-sm-6 col-md-3">
        <div class="card border-0 shadow-sm cursor-pointer"
         data-bs-toggle="modal" data-bs-target="#galleryModal"
          data-image="{{ asset('images/5.jpeg') }}">
          <img src="{{ asset('images/5.jpeg') }}" class="card-img-top rounded w-100 image-school" alt="Gallery 1">
        </div>
      </div>
      <!-- Image Item -->
      <div class="col-sm-6 col-md-3">
        <div class="card border-0 shadow-sm cursor-pointer"
         data-bs-toggle="modal" data-bs-target="#galleryModal"
          data-image="{{ asset('images/7.jpeg') }}">
          <img src="{{ asset('images/7.jpeg') }}" class="card-img-top rounded w-100 image-school" alt="Gallery 1">
        </div>
      </div>
      <!-- Image Item -->
      <div class="col-sm-6 col-md-3">
        <div class="card border-0 shadow-sm cursor-pointer"
         data-bs-toggle="modal" data-bs-target="#galleryModal"
          data-image="{{ asset('images/7.jpeg') }}">
          <img src="{{ asset('images/7.jpeg') }}" class="card-img-top rounded w-100 image-school" alt="Gallery 1">
        </div>
      </div>

    </div>
  </div>
</section>
<!-- Single Reusable Gallery Modal -->
<div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-white border-0 text-center position-relative">
      
      <!-- Close Button -->
      <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>

      <!-- Image -->
      <img id="galleryModalImage" src="" class="rounded image-school-popup" alt="Gallery Large">
    </div>
  </div>
</div>
    <!-- Contact Us Section -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <h1 class="fw-bold text-center mb-4 color-british">Contact Us</h1>
            <p class="text-center mb-5">We would love to hear from you! Reach out for inquiries or more information.</p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form class="p-4 shadow rounded bg-white">
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone</label>
                            <input type="text" id="phone" class="form-control" placeholder="Enter your Phone Number">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" id="email" class="form-control" placeholder="Enter your email">
                        </div>
                         <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <input type="text" id="subject" class="form-control" placeholder="Enter your Subject">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Your Message</label>
                            <textarea id="message" class="form-control" rows="5"
                                placeholder="Write your message"></textarea>
                        </div>
                        <button type="submit" class="btn bg-british w-100 text-white">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection