<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="text-center max-w-3xl mx-auto mb-20" data-aos="fade-up">
      <span class="inline-block text-xs uppercase tracking-widest text-gray-500 mb-3">{{ sections.about.title }}</span>
      <h2 class="text-3xl sm:text-4xl font-light text-gray-900 mb-4">
        {{ sections.about.subtitle }}
      </h2>
      <div class="w-16 h-px bg-gray-300 mx-auto mb-6"></div>
      <p class="text-gray-600 font-light leading-relaxed">
        {{ sections.about.content }}
      </p>
    </div>
    
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      {% if sections.about.media %}
      <div data-aos="fade-right">
        <div class="relative overflow-hidden group">
          <img
            src="{{ sections.about.media.src }}"
            alt="{{ sections.about.media.alt }}"
            class="w-full aspect-[4/5] object-cover transition-transform duration-700 group-hover:scale-105"
            loading="lazy"
          />
          <div class="absolute inset-0 bg-gradient-to-tr from-gray-900/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          {% if sections.about.media.stat_value %}
          <div class="absolute bottom-4 right-4 bg-white py-2 px-4 text-xs tracking-wider text-gray-500">
            {{ sections.about.media.stat_value }} {{ sections.about.media.stat_label }}
          </div>
          {% endif %}
        </div>
      </div>
      {% endif %}

      <div data-aos="fade-left">
        {% if sections.about.timeline %}
        <div class="space-y-8">
          {% for item in sections.about.timeline %}
          <div class="flex gap-4">
            <div class="w-12 h-12 bg-gray-100 flex items-center justify-center flex-shrink-0">
              <i class="{{ item.icon | default('ri-calendar-line') }} text-gray-700"></i>
            </div>
            <div>
              <div class="flex items-center gap-3 mb-2">
                <span class="text-sm font-light text-gray-500">{{ item.year }}</span>
                <h4 class="text-lg font-light text-gray-900">{{ item.title }}</h4>
              </div>
              <div class="w-8 h-px bg-gray-200 mb-3"></div>
              <p class="text-gray-600 font-light">{{ item.description }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% elif sections.about.stats %}
        <div class="grid grid-cols-2 gap-6">
          {% for stat in sections.about.stats %}
          <div class="text-center p-6 border border-gray-100">
            <div class="text-2xl font-light text-gray-900 mb-2">{{ stat.value }}</div>
            <div class="text-sm text-gray-600 font-light">{{ stat.label }}</div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>