<section id="about" class="py-24 bg-gradient-to-br from-rose-50 via-amber-50 to-yellow-50 relative overflow-hidden">
  <!-- Animated background patterns matching hero v6 -->
  <div class="absolute inset-0 overflow-hidden">
    <!-- Honeycomb pattern -->
    <div class="absolute inset-0 opacity-10">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="honeycomb-about-v5" width="56" height="100" patternUnits="userSpaceOnUse" patternTransform="scale(2) rotate(0)">
            <path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66Z M28 33L56 16L56 50L28 66L0 50L0 16L28 0L56 16L28 33Z" stroke="rgba(245, 158, 11, 0.3)" fill="none"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#honeycomb-about-v5)"/>
      </svg>
    </div>
    
    <!-- Floating elements matching hero v6 -->
    <div class="absolute top-1/4 left-1/5 w-64 h-64 bg-gradient-to-br from-amber-200/30 to-rose-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float"></div>
    <div class="absolute bottom-1/3 right-1/4 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-yellow-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float animation-delay-4000"></div>
  </div>

  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section header with styling matching hero v6 -->
    <div class="text-center mb-16 max-w-3xl mx-auto" data-animate="init">
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800 mb-6">
        <span class="w-2 h-2 rounded-full mr-2 bg-amber-500 animate-pulse"></span>
        {{ sections.about.badge | default('About Us') }}
      </span>
      <h2 class="text-4xl md:text-5xl font-bold text-slate-800 leading-tight mb-6" id="about-heading-v5">
        {{ sections.about.title | default('Our Journey & Mission') }}
      </h2>
      <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-rose-400 mx-auto mb-6 rounded-full" data-animate="underline"></div>
      <p class="text-xl text-slate-600">
        {{ sections.about.subtitle | default('We\'re on a mission to transform how businesses operate with innovative solutions that drive growth.') }}
      </p>
    </div>

    <!-- Timeline section with styling matching hero v6 -->
    <div class="grid md:grid-cols-2 gap-16 items-center">
      <!-- Left column: Timeline -->
      <div class="space-y-12">
        {% if sections.about.timeline %}
          {% for item in sections.about.timeline %}
            <div class="relative pl-10" data-animate="feature" data-delay="{{ loop.index * 100 }}">
              <!-- Timeline connector -->
              <div class="absolute left-0 top-0 h-full w-px bg-gradient-to-b from-amber-300 to-rose-300"></div>
              <!-- Timeline dot -->
              <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-rose-400 shadow-md transform -translate-x-1/2 flex items-center justify-center">
                <span class="text-white text-xs font-bold">{{ loop.index }}</span>
              </div>
              <!-- Content -->
              <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-md p-6 border border-amber-100/50 hover:shadow-lg transition duration-300">
                <h3 class="text-lg font-semibold mb-2 text-slate-800">{{ item.year }} - {{ item.title }}</h3>
                <p class="text-slate-600">{{ item.description }}</p>
              </div>
            </div>
          {% endfor %}
        {% else %}
          <!-- Fallback timeline items -->
          <div class="relative pl-10" data-animate="feature" data-delay="100">
            <div class="absolute left-0 top-0 h-full w-px bg-gradient-to-b from-amber-300 to-rose-300"></div>
            <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-rose-400 shadow-md transform -translate-x-1/2 flex items-center justify-center">
              <span class="text-white text-xs font-bold">1</span>
            </div>
            <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-md p-6 border border-amber-100/50 hover:shadow-lg transition duration-300">
              <h3 class="text-lg font-semibold mb-2 text-slate-800">2018 - Foundation</h3>
              <p class="text-slate-600">Nexlify was founded with a vision to simplify business operations through innovative technology solutions.</p>
            </div>
          </div>
          
          <div class="relative pl-10" data-animate="feature" data-delay="200">
            <div class="absolute left-0 top-0 h-full w-px bg-gradient-to-b from-amber-300 to-rose-300"></div>
            <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-rose-400 shadow-md transform -translate-x-1/2 flex items-center justify-center">
              <span class="text-white text-xs font-bold">2</span>
            </div>
            <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-md p-6 border border-amber-100/50 hover:shadow-lg transition duration-300">
              <h3 class="text-lg font-semibold mb-2 text-slate-800">2020 - Expansion</h3>
              <p class="text-slate-600">Expanded our team and product offerings to serve clients across multiple industries and regions.</p>
            </div>
          </div>
          
          <div class="relative pl-10" data-animate="feature" data-delay="300">
            <div class="absolute left-0 top-0 h-full w-px bg-gradient-to-b from-amber-300 to-rose-300"></div>
            <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-rose-400 shadow-md transform -translate-x-1/2 flex items-center justify-center">
              <span class="text-white text-xs font-bold">3</span>
            </div>
            <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-md p-6 border border-amber-100/50 hover:shadow-lg transition duration-300">
              <h3 class="text-lg font-semibold mb-2 text-slate-800">2023 - Innovation</h3>
              <p class="text-slate-600">Launched our flagship platform with AI-powered features, setting new standards in the industry.</p>
            </div>
          </div>
        {% endif %}
      </div>
      
      <!-- Right column: Image and values -->
      <div class="space-y-8">
        <!-- Main image with decorative elements -->
        <div class="relative animate-fade-in-right">
          <div class="relative rounded-2xl overflow-hidden shadow-2xl border-8 border-white">
            <div class="aspect-video w-full">
              <img 
                src="{{ sections.about.media.src | default('https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') }}" 
                alt="{{ sections.about.media.alt | default('Our team working together') }}" 
                class="w-full h-full object-cover"
                loading="{{ 'lazy' if sections.about.media.lazyLoad else 'eager' }}"
              />
            </div>
          </div>
          
          <!-- Decorative elements matching hero v6 -->
          <div class="absolute -top-6 -right-6 w-32 h-32 bg-gradient-to-bl from-amber-200 to-rose-200 rounded-full opacity-70 -z-10"></div>
          <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-gradient-to-tr from-rose-200 to-yellow-200 rounded-full opacity-70 -z-10"></div>
        </div>
        
        <!-- Values section with styling matching hero v6 -->
        <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-amber-100/50">
          <h3 class="text-xl font-semibold mb-4 text-slate-800 relative pl-6">
            <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-2 h-8 bg-gradient-to-b from-amber-400 to-rose-400 rounded-full"></div>
            Our Values
          </h3>
          
          <div class="grid grid-cols-2 gap-4">
            {% if sections.about.values %}
              {% for value in sections.about.values %}
                <div class="flex items-start space-x-3">
                  <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 flex-shrink-0">
                    <i class="{{ value.icon | default('ri-check-line') }} text-lg"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-slate-800">{{ value.title }}</h4>
                    <p class="text-sm text-slate-600">{{ value.description }}</p>
                  </div>
                </div>
              {% endfor %}
            {% else %}
              <!-- Fallback values -->
              <div class="flex items-start space-x-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 flex-shrink-0">
                  <i class="ri-heart-line text-lg"></i>
                </div>
                <div>
                  <h4 class="font-medium text-slate-800">Integrity</h4>
                  <p class="text-sm text-slate-600">We uphold the highest standards of honesty and ethics.</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 flex-shrink-0">
                  <i class="ri-group-line text-lg"></i>
                </div>
                <div>
                  <h4 class="font-medium text-slate-800">Collaboration</h4>
                  <p class="text-sm text-slate-600">We believe in the power of teamwork and partnership.</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 flex-shrink-0">
                  <i class="ri-lightbulb-line text-lg"></i>
                </div>
                <div>
                  <h4 class="font-medium text-slate-800">Innovation</h4>
                  <p class="text-sm text-slate-600">We constantly seek new and better ways to solve problems.</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 flex-shrink-0">
                  <i class="ri-user-heart-line text-lg"></i>
                </div>
                <div>
                  <h4 class="font-medium text-slate-800">Customer Focus</h4>
                  <p class="text-sm text-slate-600">We put our customers at the center of everything we do.</p>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
        
        <!-- CTA button with styling matching hero v6 -->
        
      </div>
    </div>
  </div>
  
  <style>
    /* Animations matching hero v6 */
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fade-in-right {
      from { opacity: 0; transform: translateX(40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes float {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(20px, -30px) scale(1.05); }
      66% { transform: translate(-10px, 20px) scale(0.95); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    
    .animate-fade-in-up {
      animation: fade-in-up 0.8s ease-out forwards;
    }
    
    .animate-fade-in-right {
      animation: fade-in-right 0.8s ease-out forwards;
    }
    
    .animate-float {
      animation: float 15s ease-in-out infinite;
    }
    
    .animation-delay-4000 {
      animation-delay: 4000ms;
    }
    
    [data-animate="init"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    [data-animate="underline"] {
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.6s ease-out;
    }
    
    [data-animate="feature"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Typing effect for heading matching hero v6
      const heading = document.getElementById('about-heading-v5');
      if (heading) {
        const text = heading.textContent.trim();
        heading.textContent = '';
        let i = 0;
        
        function typeWriter() {
          if (i < text.length) {
            heading.textContent += text.charAt(i);
            i++;
            setTimeout(typeWriter, 50);
          }
        }
        
        // Start typing after a short delay
        setTimeout(typeWriter, 800);
      }
      
      // Custom animation system
      const animateElements = document.querySelectorAll('[data-animate]');
      
      // Initial animation for header
      setTimeout(() => {
        const headerElement = document.querySelector('[data-animate="init"]');
        if (headerElement) {
          headerElement.style.opacity = '1';
          headerElement.style.transform = 'translateY(0)';
        }
        
        // Animate underline after header appears
        setTimeout(() => {
          const underlineElement = document.querySelector('[data-animate="underline"]');
          if (underlineElement) {
            underlineElement.style.transform = 'scaleX(1)';
          }
        }, 500);
      }, 300);
      
      // Intersection Observer for scroll-triggered animations
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const element = entry.target;
            const animationType = element.getAttribute('data-animate');
            const delay = parseInt(element.getAttribute('data-delay') || 0);
            
            setTimeout(() => {
              // Feature cards animation
              if (animationType === 'feature') {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
              }
            }, delay);
            
            observer.unobserve(element);
          }
        });
      }, { threshold: 0.1 });
      
      animateElements.forEach(element => {
        observer.observe(element);
      });
      
      // Parallax effect on scroll matching hero v6
      window.addEventListener('scroll', function() {
        const scrollY = window.pageYOffset;
        const aboutSection = document.getElementById('about');
        if (!aboutSection) return;
        
        // Apply parallax to floating elements
        const floatingElements = aboutSection.querySelectorAll('.absolute.rounded-full');
        floatingElements.forEach((el, index) => {
          const speed = 0.05 + (index * 0.02);
          const yPos = scrollY * speed;
          el.style.transform = `translate3d(0, ${yPos}px, 0)`;
        });
        
        // Apply subtle rotation to timeline dots
        const timelineDots = aboutSection.querySelectorAll('.w-6.h-6.rounded-full');
        timelineDots.forEach((el, index) => {
          const rotSpeed = 0.02 * (index % 2 === 0 ? 1 : -1);
          el.style.transform = `rotate(${scrollY * rotSpeed}deg) translateX(-50%)`;
        });
      });
    });
  </script>
</section>
