{% extends "base.html" %} {% block main %}

<!-- Hero Section -->
<!-- Hero Section -->
<!-- Hero Section -->
<section
  class="hero-section"
  style="padding: 60px 40px; background-color: #ffffff"
>
  <div
    style="
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      max-width: 1400px;
      margin: 0 auto;
    "
  >
    <!-- 🎥 Left: Full-width Video -->
    <div style="flex: 1 1 700px; min-width: 400px">

      <video
        controls
        poster="{{ url_for('static', filename='images/video-poster.jpg') }}"
        style="
          width: 100%;
          height: auto;
          border-radius: 12px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        "
      >
        <source
          src="{{ url_for('static', filename='video/Untitled_video.mp4') }}"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- 📝 Right: Hero Text, also expanded -->
    <div style="flex: 1 1 600px; min-width: 350px">
      <h1
        id="dynamic-headline"
        data-aos="fade-up"
        style="
          font-size: 2.5rem;
          color: #007bff;
          font-weight: 700;
          margin-bottom: 20px;
        "
      >
        From Dev to Ops — Faster
      </h1>
      <p
        style="
          font-size: 1.25rem;
          line-height: 1.8;
          color: #333;
          font-weight: 500;
          margin-bottom: 30px;
        "
        data-aos="fade-up"
        data-aos-delay="200"
      >
        We specialize in delivering Cloud and DevOps consulting services
        tailored to your unique business needs.
      </p>

      <a
        href="{{ url_for('services') }}"
        class="btn btn-primary"
        data-aos="zoom-in"
        data-aos-delay="400"
        style="
          padding: 14px 28px;
          font-weight: 600;
          font-size: 16px;
          border-radius: 8px;
        "
      >
        Explore Our Services
      </a>
    </div>
  </div>
</section>

<!-- 🔥 Background Video Section -->

<!-- 🔥 Background Video Section -->
<section
  class="video-hero-section"
  style="
    position: relative;
    height: 100vh;
    overflow: hidden;
    text-align: center;
  "
>
  <!-- 🌐 Background Video with Poster -->
  <video
    autoplay
    muted
    loop
    playsinline
    aria-hidden="true"
    poster="{{ url_for('static', filename='images/video-poster.jpg') }}"
    style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    "
  >
    <source
      src="{{ url_for('static', filename='video/myvideo.mp4.mp4') }}"
      type="video/mp4"
    />
    Your browser does not support the video tag.
  </video>

  <!-- 💡 Optional Dark Overlay -->
  <div
    style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    "
  ></div>

  <!-- ✨ Content Over Video -->
  <div
    style="position: relative; z-index: 1; padding: 120px 20px; color: white"
  >
    <h1 data-aos="fade-up">Innovation That Scales Globally</h1>
    <p data-aos="fade-up" data-aos-delay="200">
      Automation. Performance. Security. Delivered from the cloud to the edge.
    </p>
    <a
      href="{{ url_for('contact_form') }}"
      class="btn btn-primary mt-3"
      data-aos="zoom-in"
      data-aos-delay="400"
    >
      Request a Consultation
    </a>
  </div>
</section>

<!-- 🔥 Background Video Section -->

<!-- add demo -->
<section style="background: #f8f9fa; padding: 60px 20px; text-align: center">
  <h2
    style="
      color: #1b1b1b;
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 10px;
    "
  >
    Drive More Sales and Deliver an Effortless Experience
  </h2>
  <h1
    style="
      color: #005f73;
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 20px;
    "
  >
    Live Chat Customer Service Software
  </h1>
  <p
    style="color: #333; font-size: 18px; max-width: 700px; margin: 0 auto 30px"
  >
    JWT’s highly effective solution for cross-channel interactive customer
    interactions.
  </p>
  <a
    href="/contact-form"
    style="
      display: inline-block;
      background-color: #005f73;
      color: white;
      padding: 15px 30px;
      border-radius: 30px;
      font-weight: 600;
      text-decoration: none;
    "
  >
    Request A Demo
  </a>
</section>

<main>
  <!-- Moving Image Section  1 -->
  <!-- Horizontal Moving Images -->
  <section class="moving-images-row">
    <div class="moving-image-box">
      <img
        src="{{ url_for('static', filename='images/pexels-tiger-lily-7108466.jpg') }}"
        alt="Tiger Lily"
        class="moving-image"
      />
    </div>
    <div class="moving-image-box">
      <img
        src="{{ url_for('static', filename='images/pexels-divinetechygirl-1181341.jpg') }}"
        alt="Techy Girl"
        class="moving-image"
      />
    </div>
    <div class="moving-image-box">
      <img
        src="{{ url_for('static', filename='images/pexels-divinetechygirl-1181472.jpg') }}"
        alt="Techy Girl"
        class="moving-image"
      />
    </div>
    <div class="moving-image-box">
      <img
        src="{{ url_for('static', filename='images/pexels-fotios-photos-16129703.jpg') }}"
        alt="Techy Girl"
        class="moving-image"
      />
    </div>
  </section>

  <!-- Services Highlights -->
  <section class="services-highlight">
    <h3>Our Key Services</h3>
    <div class="service-cards">
      <div class="card">
        <h4>Cloud Consulting</h4>
        <p>
          Cloud migration, strategy, and optimization tailored for your
          business.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
      <div class="card">
        <h4>DevOps Solutions</h4>
        <p>
          CI/CD pipelines, automated infrastructure, and efficient delivery.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
      <div class="card">
        <h4>Security & Compliance</h4>
        <p>
          Ensure security and compliance across your cloud and on-premise
          environments.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
    </div>
  </section>

  <!--add testimony-->
  <section class="testimonials-carousel">
    <h3>What Our Clients Say</h3>
    <div class="carousel">
      <div class="testimonial active">
        <p>JWT helped us streamline our cloud migration. Highly recommend!</p>
        <span>– <strong>Jane D.</strong></span>
      </div>
      <div class="testimonial">
        <p>Professional, reliable, and skilled team.</p>
        <span>– <strong>TechCorp Inc.</strong></span>
      </div>
      <div class="testimonial">
        <p>Their DevOps support transformed our infrastructure!</p>
        <span>– <strong>DevOps Solutions</strong></span>
      </div>
    </div>
  </section>

  <!-- 🌐 Background Video with Poster -->
  <!-- 🔥 Embedded Video Section BELOW Testimonials -->
  <section
    class="client-video-section"
    style="
      position: relative;
      height: 500px;
      overflow: hidden;
      margin-top: 40px;
    "
  >
    <video
      autoplay
      muted
      loop
      playsinline
      aria-hidden="true"
      poster="{{ url_for('static', filename='images/video-poster.jpg') }}"
      style="width: 100%; height: 100%; object-fit: cover"
    >
      <source
        src="{{ url_for('static', filename='video/7989443-hd_1920_1080_25fps.mp4') }}"
        type="video/mp4"
      />
      Your browser does not support the video tag.
    </video>
  </section>

  <!-- me added -->
  <!-- Impact Stats Section -->

  <section
    class="stats-section"
    style="background: #f9f9f9; padding: 60px 20px; text-align: center"
  >
    <h2 data-aos="fade-up" style="margin-bottom: 40px">
      Our Impact in Numbers
    </h2>

    <div
      class="stats-grid"
      style="
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;
        max-width: 4000px;
        margin: 0 auto;
        padding: 0 20px;
      "
    >
      <div class="stat" data-aos="fade-up" data-aos-delay="100">
        <div
          class="counter"
          data-target="1000"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Projects Delivered</p>
      </div>

      <div class="stat" data-aos="fade-up" data-aos-delay="200">
        <div
          class="counter"
          data-target="9900"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Happy Clients</p>
      </div>

      <div class="stat" data-aos="fade-up" data-aos-delay="300">
        <div
          class="counter"
          data-target="1000"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Supported Regions</p>
      </div>
    </div>
  </section>

  <!-- 🔥 Intro Video with Narration -->

  <!-- Quick Links Section -->
  <section class="quick-links">
    <h3>Quick Links for more</h3>
    <ul>
      <li><a href="{{ url_for('services') }}">View Our Services</a></li>
      <li><a href="{{ url_for('contact_form') }}">Contact Form</a></li>
    </ul>
  </section>

  <!-- Quick Links Section -->

  <!-- Global Impact Map Section -->
  <section style="background: #ffffff; padding: 60px 20px; text-align: center">
    <h2
      style="
        color: #1b1b1b;
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 20px;
      "
    >
      Global Impact of These Trends
    </h2>
    <img
      src="{{ url_for('static', filename='images/worldmap.jpeg') }}"
      alt="Global Impact Map"
      style="
        max-width: 90%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      "
      data-aos="zoom-in"
    />
  </section>

  <!-- Subscription Section -->
  <section
    style="
      background-color: rgb(16, 194, 210);
      color: white;
      padding: 40px 20px;
      text-align: center;
    "
  >
    <h2 style="margin-bottom: 20px">
      Subscribe to get info's concerning our services & trainings
    </h2>
    <form
      style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px"
      action="/subscribe"
      method="post"
    >
      <input
        type="email"
        name="email"
        required
        placeholder="e.g., email@example.com"
        style="
          padding: 12px 20px;
          width: 300px;
          border: 2px solidrgb(13, 161, 70);
          border-radius: 5px;
          font-size: 16px;
        "
      />
      <button
        type="submit"
        style="
          padding: 12px 25px;
          background-color: rgb(13, 161, 65);
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
        "
      >
        Subscribe
      </button>
    </form>
  </section>

  <!-- Subscription Section -->
</main>

{% endblock main %}
