<section id="about" class="py-16 bg-gray-50">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-12 items-center">
      <div class="space-y-6" data-aos="fade-right">
        <div class="inline-block px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-sm font-semibold">
          ✨ {{ sections.about.title }}
        </div>
        
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
          {{ sections.about.subtitle }}
        </h2>
        
        <p class="text-base text-gray-600 leading-relaxed">
          {{ sections.about.content }}
        </p>
        
        {% if sections.about.timeline %}
        <div class="space-y-4">
          {% for item in sections.about.timeline %}
          <div class="flex items-start gap-4 p-4 bg-white rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <i class="{{ item.icon | default('ri-calendar-line') }} text-blue-600"></i>
            </div>
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="text-sm font-semibold text-blue-600">{{ item.year }}</span>
                <span class="font-semibold text-gray-900">{{ item.title }}</span>
              </div>
              <p class="text-sm text-gray-600">{{ item.description }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <div class="relative" data-aos="fade-left">
        {% if sections.about.media %}
        <div class="relative">
          <img src="{{ sections.about.media.src }}" 
               alt="{{ sections.about.media.alt }}" 
               class="w-full h-auto rounded-xl shadow-md">
          
          {% if sections.about.media.stat_value %}
          <div class="absolute top-4 right-4 bg-white p-3 rounded-lg shadow-sm">
            <div class="text-lg font-semibold text-blue-600">{{ sections.about.media.stat_value }}</div>
            <div class="text-xs text-gray-500">{{ sections.about.media.stat_label }}</div>
          </div>
          {% endif %}
          
          <div class="absolute -bottom-4 -right-4 w-10 h-10 bg-orange-400 rounded-full opacity-80"></div>
        </div>
        {% endif %}
        
        {% if sections.about.stats %}
        <div class="grid grid-cols-2 gap-4 mt-6">
          {% for stat in sections.about.stats %}
          <div class="text-center p-4 bg-white rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
              <i class="{{ stat.icon | default('ri-bar-chart-line') }} text-blue-600 text-sm"></i>
            </div>
            <div class="text-lg font-semibold text-gray-900">{{ stat.value }}</div>
            <div class="text-xs text-gray-500">{{ stat.label }}</div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
