<section id="about" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-white opacity-50"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="about-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#about-dots)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <!-- Left content column -->
      <div class="space-y-8" data-aos="fade-up">
        <h2 class="text-4xl font-bold text-gray-900">{{ sections.about.title }}</h2>
        <p class="text-xl text-gray-600">{{ sections.about.subtitle }}</p>
        <div class="h-1 w-20 bg-indigo-600 rounded-full"></div>
        <div class="prose prose-lg text-gray-600 max-w-none">
          <p>{{ sections.about.content }}</p>
        </div>
        
        <!-- Timeline if available -->
        {% if sections.about.timeline %}
        <div class="mt-12 space-y-8">
          <h3 class="text-2xl font-semibold text-gray-900">Our Journey</h3>
          <div class="relative">
            <!-- Vertical line -->
            <div class="absolute left-4 top-0 h-full w-0.5 bg-indigo-200"></div>
            
            <!-- Timeline items -->
            <div class="space-y-12">
              {% for item in sections.about.timeline %}
              <div class="relative pl-12">
                <!-- Timeline dot -->
                <div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center">
                  <i class="{{ item.icon }}" aria-hidden="true"></i>
                </div>
                
                <!-- Content -->
                <div>
                  <div class="flex items-baseline gap-2">
                    <span class="text-lg font-semibold text-indigo-600">{{ item.year }}</span>
                    <h4 class="text-xl font-semibold text-gray-900">{{ item.title }}</h4>
                  </div>
                  <p class="mt-2 text-gray-600">{{ item.description }}</p>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
        {% endif %}
      </div>
      
      <!-- Right media column -->
      <div class="relative" data-aos="fade-left" data-aos-delay="200">
        {% if sections.about.media %}
        <div class="relative rounded-2xl overflow-hidden shadow-xl">
          <!-- Media with fixed aspect ratio -->
          <div class="aspect-[4/3] w-full">
            <img 
              src="{{ sections.about.media.src }}" 
              alt="{{ sections.about.media.alt }}" 
              class="w-full h-full object-cover"
              loading="lazy"
            />
          </div>
          
          <!-- Overlay content if available -->
          {% if sections.about.media.title or sections.about.media.subtitle %}
          <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 text-white">
            {% if sections.about.media.title %}
            <h3 class="text-2xl font-bold">{{ sections.about.media.title }}</h3>
            {% endif %}
            
            {% if sections.about.media.subtitle %}
            <p class="text-lg">{{ sections.about.media.subtitle }}</p>
            {% endif %}
          </div>
          {% endif %}
          
          <!-- Stats badge if available -->
          {% if sections.about.media.stat_value and sections.about.media.stat_label %}
          <div class="absolute top-4 right-4 bg-indigo-600 text-white rounded-lg px-4 py-2 shadow-lg">
            <div class="text-2xl font-bold">{{ sections.about.media.stat_value }}</div>
            <div class="text-sm">{{ sections.about.media.stat_label }}</div>
          </div>
          {% endif %}
          
          <!-- Achievement badge if available -->
          {% if sections.about.media.achievement %}
          <div class="absolute top-4 left-4 bg-white text-indigo-600 rounded-lg px-4 py-2 shadow-lg">
            <div class="text-sm font-medium">{{ sections.about.media.achievement }}</div>
            {% if sections.about.media.achievement_year %}
            <div class="text-xs text-gray-500">{{ sections.about.media.achievement_year }}</div>
            {% endif %}
          </div>
          {% endif %}
        </div>
        {% endif %}
        
        <!-- Stats grid if available -->
        {% if sections.about.stats %}
        <div class="mt-8 grid grid-cols-2 gap-4">
          {% for stat in sections.about.stats %}
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                <i class="{{ stat.icon }}" aria-hidden="true"></i>
              </div>
              <div>
                <div class="text-3xl font-bold text-gray-900">{{ stat.value }}</div>
                <div class="text-sm text-gray-600">{{ stat.label }}</div>
              </div>
            </div>
            {% if stat.description %}
            <p class="mt-2 text-sm text-gray-500">{{ stat.description }}</p>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
