{% load static %}

<section id="about" class="about section">

  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="row align-items-stretch g-5">

      <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center">

        <div class="content">

          <div class="d-flex align-items-center gap-2 mb-3" data-aos="fade-right" data-aos-delay="150">
            <span style="display:inline-block;width:36px;height:2px;background:var(--accent-color);border-radius:2px;"></span>
            <span style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-color);font-family:var(--nav-font);">About Us</span>
          </div>

          <h2 class="section-heading mb-3" data-aos="fade-right" data-aos-delay="200"
              style="font-size:2.4rem;font-weight:700;line-height:1.25;color:var(--heading-color);">
            Nepal's Leading Digital Agency <br>
            <span style="color:var(--accent-color);">Complete IT Solutions Since 2003</span>
          </h2>

          <p class="mb-3" data-aos="fade-right" data-aos-delay="250"
             style="font-size:1.05rem;line-height:1.8;color:color-mix(in srgb, var(--default-color));">
            Radiant InfoTech Nepal Pvt. Ltd. is an established boutique digital agency committed to providing the best range of digital services. We deliver comprehensive IT solutions including web applications, software development, online marketing, graphic design, and digital signature certificates to businesses, institutions, and government organizations across Nepal and beyond.
          </p>

          <div class="row g-3 mb-4" data-aos="fade-right" data-aos-delay="300">
            <div class="col-6">
              <div class="d-flex align-items-start gap-2">
                <i class="bi bi-check-circle-fill mt-1" style="color:var(--accent-color);font-size:1rem;flex-shrink:0;"></i>
                <span style="font-size:0.95rem;color:var(--default-color);">Web &amp; Software Development</span>
              </div>
            </div>
            <div class="col-6">
              <div class="d-flex align-items-start gap-2">
                <i class="bi bi-check-circle-fill mt-1" style="color:var(--accent-color);font-size:1rem;flex-shrink:0;"></i>
                <span style="font-size:0.95rem;color:var(--default-color);">Digital Signature Solutions</span>
              </div>
            </div>
            <div class="col-6">
              <div class="d-flex align-items-start gap-2">
                <i class="bi bi-check-circle-fill mt-1" style="color:var(--accent-color);font-size:1rem;flex-shrink:0;"></i>
                <span style="font-size:0.95rem;color:var(--default-color);">E-Commerce Platforms</span>
              </div>
            </div>
            <div class="col-6">
              <div class="d-flex align-items-start gap-2">
                <i class="bi bi-check-circle-fill mt-1" style="color:var(--accent-color);font-size:1rem;flex-shrink:0;"></i>
                <span style="font-size:0.95rem;color:var(--default-color);">IT Support &amp; Maintenance</span>
              </div>
            </div>

          </div>

          <div class="stats-grid mb-4" data-aos="fade-up" data-aos-delay="350"
               style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
            <div class="stat-item text-center p-3"
                 style="background:var(--surface-color);border-radius:10px;border:1px solid color-mix(in srgb, var(--default-color), transparent 90%);transition:all 0.3s ease;"
                 onmouseover="this.style.borderColor='var(--accent-color)';this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 24px color-mix(in srgb, var(--accent-color), transparent 80%)'"
                 onmouseout="this.style.borderColor='color-mix(in srgb, var(--default-color), transparent 90%)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
              <div class="stat-number" style="font-size:2rem;font-weight:700;color:var(--accent-color);line-height:1;" id="aboutYearsExperience">22+</div>
              <div class="stat-label mt-1" style="font-size:0.78rem;text-transform:uppercase;letter-spacing:1px;color:color-mix(in srgb, var(--default-color), transparent 30%);font-weight:600;">Years Experience</div>
            </div>
            <div class="stat-item text-center p-3"
                 style="background:var(--surface-color);border-radius:10px;border:1px solid color-mix(in srgb, var(--default-color), transparent 90%);transition:all 0.3s ease;"
                 onmouseover="this.style.borderColor='var(--accent-color)';this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 24px color-mix(in srgb, var(--accent-color), transparent 80%)'"
                 onmouseout="this.style.borderColor='color-mix(in srgb, var(--default-color), transparent 90%)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
              <div class="stat-number" style="font-size:2rem;font-weight:700;color:var(--accent-color);line-height:1;">500+</div>
              <div class="stat-label mt-1" style="font-size:0.78rem;text-transform:uppercase;letter-spacing:1px;color:color-mix(in srgb, var(--default-color), transparent 30%);font-weight:600;">Clients &amp; Projects</div>
            </div>
            <div class="stat-item text-center p-3"
                 style="background:var(--surface-color);border-radius:10px;border:1px solid color-mix(in srgb, var(--default-color), transparent 90%);transition:all 0.3s ease;"
                 onmouseover="this.style.borderColor='var(--accent-color)';this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 24px color-mix(in srgb, var(--accent-color), transparent 80%)'"
                 onmouseout="this.style.borderColor='color-mix(in srgb, var(--default-color), transparent 90%)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
              <div class="stat-number" style="font-size:2rem;font-weight:700;color:var(--accent-color);line-height:1;">40+</div>
              <div class="stat-label mt-1" style="font-size:0.78rem;text-transform:uppercase;letter-spacing:1px;color:color-mix(in srgb, var(--default-color), transparent 30%);font-weight:600;">Team Members</div>
            </div>
          </div>

          <div class="d-flex flex-wrap gap-3 mt-2" data-aos="fade-up" data-aos-delay="400">
            <a href="{% url 'about_us' %}"
               style="display:inline-flex;align-items:center;gap:10px;background:var(--accent-color);color:var(--contrast-color);padding:13px 28px;border-radius:6px;font-weight:600;font-size:0.95rem;font-family:var(--nav-font);text-decoration:none;transition:all 0.3s ease;border:2px solid var(--accent-color);"
               onmouseover="this.style.background='transparent';this.style.color='var(--accent-color)';this.style.transform='translateY(-2px)';"
               onmouseout="this.style.background='var(--accent-color)';this.style.color='var(--contrast-color)';this.style.transform='translateY(0)';">
              Know More About Us
              <i class="bi bi-arrow-right" style="font-size:1rem;transition:transform 0.3s;"></i>
            </a>
            <a href="{% url 'services' %}"
               style="display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--heading-color);padding:13px 28px;border-radius:6px;font-weight:600;font-size:0.95rem;font-family:var(--nav-font);text-decoration:none;transition:all 0.3s ease;border:2px solid color-mix(in srgb, var(--default-color), transparent 75%);"
               onmouseover="this.style.borderColor='var(--accent-color)';this.style.color='var(--accent-color)';this.style.transform='translateY(-2px)';"
               onmouseout="this.style.borderColor='color-mix(in srgb, var(--default-color), transparent 75%)';this.style.color='var(--heading-color)';this.style.transform='translateY(0)';">
              Explore Services
              <i class="bi bi-grid-3x3-gap" style="font-size:1rem;"></i>
            </a>
          </div>

        </div>
      </div>

      <div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="200">
        <div class="image-section position-relative" style="height:100%;min-height:480px;">

          <div class="main-image" style="height:500px;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px color-mix(in srgb, var(--default-color), transparent 80%);">
            <img src="{% static 'img/gallery/building.jpg' %}"
                 alt="Radiant InfoTech Nepal Building"
                 style="width:full;height:50px;object-fit:cover;min-height:480px;transition:transform 0.5s ease;"
                 onmouseover="this.style.transform='scale(1.04)'"
                 onmouseout="this.style.transform='scale(1)'">
          </div>

          <div class="floating-badge" data-aos="zoom-in" data-aos-delay="500"
               style="position:absolute;bottom:30px;left:-20px;background:var(--surface-color);border-radius:12px;padding:16px 20px;box-shadow:0 10px 40px color-mix(in srgb, var(--default-color), transparent 75%);border:1px solid color-mix(in srgb, var(--accent-color), transparent 80%);max-width:220px;">
            <div class="badge-content d-flex align-items-center gap-3">
              <div style="width:44px;height:44px;border-radius:50%;background:color-mix(in srgb, var(--accent-color), transparent 88%);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="bi bi-award-fill" style="color:var(--accent-color);font-size:1.3rem;"></i>
              </div>
              <div class="badge-text">
                <span class="badge-title d-block" style="font-weight:700;font-size:0.85rem;color:var(--heading-color);line-height:1.2;">Licensed CA</span>
                <span class="badge-subtitle d-block" style="font-size:0.75rem;color:color-mix(in srgb, var(--default-color), transparent 30%);margin-top:2px;">Digital Signature Authority</span>
              </div>
            </div>
          </div>

          <div data-aos="zoom-in" data-aos-delay="600"
               style="position:absolute;top:30px;right:-15px;background:var(--accent-color);color:var(--contrast-color);border-radius:12px;padding:16px 20px;box-shadow:0 8px 30px color-mix(in srgb, var(--accent-color), transparent 60%);max-width:180px;text-align:center;">
            <div style="font-size:1.8rem;font-weight:700;line-height:1;" id="aboutYearsDisplay">23+</div>
            <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-top:4px;opacity:0.9;">Years of IT<br>Excellence</div>
          </div>

        </div>
      </div>

    </div>
  </div>

</section>

<script>
  const ESTABLISHMENT_YEAR = 2003;
  const currentYear = new Date().getFullYear();
  const yearsOfExperience = currentYear - ESTABLISHMENT_YEAR;
  
  const aboutYearsExperience = document.getElementById('aboutYearsExperience');
  const aboutYearsDisplay = document.getElementById('aboutYearsDisplay');
  
  if (aboutYearsExperience) {
    aboutYearsExperience.textContent = yearsOfExperience + '+';
  }
  
  if (aboutYearsDisplay) {
    aboutYearsDisplay.textContent = yearsOfExperience + '+';
  }
</script>