<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-up">
        <h2 class="text-3xl font-bold text-gray-900">
          {{ sections.about.title }}
        </h2>
        <p class="text-lg text-gray-600">{{ sections.about.subtitle }}</p>
        <div class="w-16 h-1 bg-primary rounded-full"></div>
        <div class="prose text-gray-700">
          <p>{{ sections.about.content }}</p>
        </div>

        {% if sections.about.timeline %}
        <div class="space-y-4">
          <h3 class="text-xl font-semibold text-gray-900">Our Journey</h3>
          {% for item in sections.about.timeline %}
          <div class="flex gap-4">
            <div
              class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0"
            >
              <i class="{{ item.icon }}" aria-hidden="true"></i>
            </div>
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="text-sm font-bold text-primary"
                  >{{ item.year }}</span
                >
                <h4 class="font-semibold text-gray-900">{{ item.title }}</h4>
              </div>
              <p class="text-sm text-gray-600">{{ item.description }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %} {% if sections.about.stats %}
        <div class="grid grid-cols-2 gap-4">
          {% for stat in sections.about.stats %}
          <div class="bg-white p-4 rounded-lg shadow-sm">
            <div class="flex items-center gap-3">
              <i class="{{ stat.icon }} text-primary text-lg"></i>
              <div>
                <div class="text-xl font-bold text-gray-900">
                  {{ stat.value }}
                </div>
                <div class="text-sm text-gray-600">{{ stat.label }}</div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <div class="relative" 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-xl shadow-md"
          />

          {% if sections.about.media.stat_value %}
          <div class="absolute top-4 right-4 bg-white p-3 rounded-lg shadow-md">
            <div class="text-lg font-bold text-primary">
              {{ sections.about.media.stat_value }}
            </div>
            <div class="text-xs text-gray-600">
              {{ sections.about.media.stat_label }}
            </div>
          </div>
          {% endif %} {% if sections.about.media.achievement %}
          <div
            class="absolute bottom-4 left-4 bg-white p-3 rounded-lg shadow-md"
          >
            <div class="text-sm font-medium text-gray-900">
              {{ sections.about.media.achievement }}
            </div>
            {% if sections.about.media.achievement_year %}
            <div class="text-xs text-gray-600">
              {{ sections.about.media.achievement_year }}
            </div>
            {% endif %}
          </div>
          {% endif %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
