<section id="about" class="py-24 bg-white">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16 items-start">
      <div class="space-y-8" data-aos="fade-up">
        <div class="space-y-4">
          <div class="w-12 h-px bg-primary"></div>
          <h2 class="text-4xl font-light text-gray-900 leading-tight">
            {{ sections.about.title }}
          </h2>
          <p class="text-lg text-gray-600">
            {{ sections.about.subtitle }}
          </p>
        </div>
        
        <div class="prose prose-lg text-gray-700 max-w-none">
          <p>{{ sections.about.content }}</p>
        </div>
        
        {% if sections.about.timeline %}
        <div class="space-y-8 pt-8">
          <h3 class="text-2xl font-light text-gray-900">Company Timeline</h3>
          <div class="space-y-6">
            {% for item in sections.about.timeline %}
            <div class="flex gap-6" data-aos="slide-right" data-aos-delay="{{ loop.index0 * 100 }}">
              <div class="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                <i class="{{ item.icon | default('ri-calendar-line') }} text-primary"></i>
              </div>
              <div class="flex-1 pb-6 border-b border-gray-100 last:border-0">
                <div class="flex items-center gap-4 mb-2">
                  <span class="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded">{{ item.year }}</span>
                  <h4 class="text-lg font-medium text-gray-900">{{ item.title }}</h4>
                </div>
                <p class="text-gray-600">{{ item.description }}</p>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>
      
      <div class="space-y-8" data-aos="fade-up" data-aos-delay="200">
        {% if sections.about.media %}
        <div class="relative">
          <img src="{{ sections.about.media.src }}" 
               alt="{{ sections.about.media.alt }}" 
               class="w-full h-auto rounded-lg shadow-lg">
          
          {% if sections.about.media.stat_value %}
          <div class="absolute top-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-lg shadow-lg border border-gray-100">
            <div class="text-2xl font-light text-gray-900">{{ sections.about.media.stat_value }}</div>
            <div class="text-sm text-gray-600">{{ sections.about.media.stat_label }}</div>
          </div>
          {% endif %}
          
          {% if sections.about.media.achievement %}
          <div class="absolute bottom-6 left-6 bg-primary text-white p-4 rounded-lg shadow-lg">
            <div class="font-medium">{{ sections.about.media.achievement }}</div>
            {% if sections.about.media.achievement_year %}
            <div class="text-sm opacity-90">{{ sections.about.media.achievement_year }}</div>
            {% endif %}
          </div>
          {% endif %}
        </div>
        {% endif %}
        
        {% if sections.about.stats %}
        <div class="grid grid-cols-2 gap-6">
          {% for stat in sections.about.stats %}
          <div class="bg-gray-50 p-6 rounded-lg border border-gray-100" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
            <div class="flex items-center gap-4">
              <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <i class="{{ stat.icon | default('ri-bar-chart-line') }} text-primary"></i>
              </div>
              <div>
                <div class="text-2xl font-light text-gray-900">{{ stat.value }}</div>
                <div class="text-sm text-gray-600">{{ stat.label }}</div>
              </div>
            </div>
            {% if stat.description %}
            <p class="text-xs text-gray-500 mt-3">{{ stat.description }}</p>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>