@extends('frontend.app')
@section('frontend_app')
    <!----Page Banner-->
      <section>
          <div class="relative bg-cover bg-center h-48" style="background-image: url('{{ asset('assets/images/pages/bg_contact_us.webp') }}');">
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
            <div class="relative z-10 max-w-4xl mx-auto h-full flex flex-col justify-center items-center px-4">
              <h2 class="text-3xl font-semibold mb-4 text-center text-white">About Us</h2>
              <div class="text-white text-sm flex items-center space-x-2">
                <i class="fas fa-home text-white"></i>
                <a href="{{ url('/') }}" class="hover:underline">Home</a>
                <span class="text-gray-300">/</span>
                <span class="font-semibold">About Us</span>
              </div>
            </div>
          </div>
    </section>
 
    <!---About us Section-->
    <!-- Left Text, Right Image Section -->
    <section class="max-w-6xl mx-auto px-4 py-16">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div>
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Real Estates</h2>
                <p class="text-gray-600 mb-4  text-[18px]">
                    At  Real Estates, we believe that finding the perfect property shouldn’t be stressful — it should be exciting. With over a decade of experience in the real estate industry, we specialize in connecting people with homes, investment properties, and commercial spaces that meet their needs and exceed expectations.
                </p>
                <p class="text-gray-600 mb-4 text-[18px]">
                    <b>Our mission is simple:</b> to deliver personalized, transparent, and reliable real estate solutions across residential, commercial, and industrial segments.  our team of professional consultants is here to guide you every step of the way.
                </p>
                <p  class="text-gray-600 mb-4 text-[18px]">
                    Located in the heart of Chandigarh, our expertise covers prime localities including Mohali, Panchkula, Zirakpur, and surrounding areas. From luxury apartments and builder floors to plotted developments and retail outlets, we offer a diverse portfolio of handpicked properties tailored to your lifestyle and investment goals.
                </p>
                <ul class="list-disc text-gray-700 space-y-2 text-[18px]" style="padding-left: 1.5rem;">
                    <li>Trusted by thousands of clients</li>
                    <li>Local market expertise</li>
                    <li>Dedicated customer support</li>
                </ul>
              </div>
            <div>
               <img src="{{ asset('assets/images/pages/Welcome_to_Real_Estates.webp') }}" alt="Office" class="w-full rounded-xl shadow-md object-cover" />
            </div>
        </div>
    </section>

<!-- Stats Section with Background -->
<section id="statsSection" class="relative bg-fixed bg-cover bg-center bg-no-repeat py-24" style="background-image: url('{{ asset('assets/images/pages/about_happy_section.webp') }}');">
  <!-- Dark Overlay -->
  <div class="absolute inset-0 bg-black bg-opacity-50"></div>
  
  <!-- Content -->
  <div class="relative z-10 max-w-6xl mx-auto px-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 text-center text-white">

      <!-- Stat 1 -->
      <div>
        <i class="fas fa-briefcase text-4xl text-white mb-4"></i>
        <h3 class="text-3xl font-bold mb-2 counter" data-count="15">0</h3>
        <p class="text-lg font-medium">Years of Experience</p>
      </div>

      <!-- Stat 2 -->
      <div>
        <i class="fas fa-ruler-combined text-4xl text-white mb-4"></i>
        <h3 class="text-3xl font-bold mb-2 counter" data-count="500000">0</h3>
        <p class="text-lg font-medium">Sqft Of Real Estate Sold</p>
      </div>

      <!-- Stat 3 -->
      <div>
        <i class="fas fa-users text-4xl text-white mb-4"></i>
        <h3 class="text-3xl font-bold mb-2 counter" data-count="1200">0</h3>
        <p class="text-lg font-medium">Happy Clients</p>
      </div>

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

<!-- Mission and Vision Section with Images and Icons -->
<section class="py-20 bg-gray-100">
  <div class="max-w-6xl mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">

      <!-- Mission -->
      <div class="bg-white p-8 shadow-lg rounded-2xl text-center">
        <!-- Icon -->
        <i class="fas fa-bullseye text-4xl  text-[var(--primary-color)] mb-4"></i>
        <!-- Title -->
        <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Mission</h2>
        <!-- Content -->
        <p class="text-gray-600 text-lg leading-relaxed">
          Our mission is to deliver exceptional real estate experiences by providing personalized solutions and unwavering commitment to our clients' needs. We strive to foster lasting relationships built on trust, transparency, and results.
        </p>
      </div>

      <!-- Vision -->
      <div class="bg-white p-8 shadow-lg rounded-2xl text-center">
        <!-- Icon -->
        <i class="fas fa-eye text-4xl text-[var(--primary-color)] mb-4"></i>
        <!-- Title -->
        <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Vision</h2>
        <!-- Content -->
        <p class="text-gray-600 text-lg leading-relaxed">
          Our vision is to be recognized as a leading real estate brand that redefines the property buying and selling journey. We aim to set benchmarks in quality, innovation, and client satisfaction across every project we undertake.
        </p>
      </div>

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

<!-- Counter Animation Script -->
<script>
  function animateCounter(el, countTo) {
    let current = 0;
    const increment = countTo / 100;
    const interval = setInterval(() => {
      current += increment;
      if (current >= countTo) {
        el.textContent = countTo.toLocaleString() + '+';
        clearInterval(interval);
      } else {
        el.textContent = Math.floor(current).toLocaleString();
      }
    }, 20);
  }

  function runCounters() {
    const counters = document.querySelectorAll(".counter");
    counters.forEach(counter => {
      const countTo = parseInt(counter.getAttribute("data-count"));
      animateCounter(counter, countTo);
    });
  }

  let hasRun = false;
  window.addEventListener("scroll", () => {
    const statsSection = document.getElementById("statsSection");
    const rect = statsSection.getBoundingClientRect();
    if (!hasRun && rect.top < window.innerHeight) {
      hasRun = true;
      runCounters();
    }
  });
</script>

@endsection