<section id="about" class="relative py-20 lg:py-28 bg-white overflow-hidden">
    <!-- Background Decoration -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-primary-50 rounded-full -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-accent-50 rounded-full translate-y-1/2 -translate-x-1/2"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16 reveal">
            <div class="inline-flex items-center space-x-2 bg-primary-50 text-primary-600 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
                <i class="fas fa-info-circle text-xs"></i>
                <span>About Us</span>
            </div>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 font-display">
                Why Choose <span class="gradient-text">Angaza Mediation?</span>
            </h2>
            <div class="section-divider max-w-24 mx-auto mb-6"></div>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                Join our mediation program and gain valuable skills through interactive training, role-plays, and expert feedback. Enhance your mediation abilities and resolve disputes effectively.
            </p>
        </div>

        <!-- About Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
            <!-- Left: Image/Visual -->
            <div class="reveal-left">
                <div class="relative">
                    <div class="bg-gradient-to-br from-primary-100 to-primary-50 rounded-3xl p-8 lg:p-12 relative overflow-hidden">
                        <!-- Decorative elements -->
                        <div class="absolute top-4 right-4 w-20 h-20 border-4 border-primary-200 rounded-full"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 border-4 border-accent-200 rounded-full"></div>

                        <div class="text-center relative z-10">
                            <div class="w-24 h-24 bg-gradient-to-br from-primary-500 to-accent-500 rounded-2xl mx-auto mb-6 flex items-center justify-center shadow-xl">
                                <i class="fas fa-handshake text-white text-4xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-gray-900 mb-3 font-display">Angaza Mediation Centre</h3>
                            <p class="text-gray-600 mb-6">Excellence in Professional Mediation Training since {{ $organization->year_of_formation ?? 2010 }}</p>

                            <!-- Quick Stats -->
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-white rounded-xl p-4 shadow-sm">
                                    <div class="text-2xl font-bold text-primary-600" data-counter="15">0</div>
                                    <div class="text-xs text-gray-500">Years of Excellence</div>
                                </div>
                                <div class="bg-white rounded-xl p-4 shadow-sm">
                                    <div class="text-2xl font-bold text-accent-500" data-counter="500">0</div>
                                    <div class="text-xs text-gray-500">Trained Mediators</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Floating badge -->
                    <div class="absolute -bottom-4 -right-4 bg-accent-500 text-white px-5 py-2.5 rounded-xl shadow-lg font-semibold text-sm animate-float">
                        <i class="fas fa-star mr-1"></i> TVET Accredited
                    </div>
                </div>
            </div>

            <!-- Right: Why Choose Us Content -->
            <div class="reveal-right">
                <div class="space-y-6">
                    <!-- Feature 1: Quality Assurance -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-shield-alt text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Quality Assurance</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">AMC has earned a reputation of excellence in the field of Mediation Training and is widely acknowledged. Our Training program has been subjected to extensive scrutiny by leading International Standards setting and credentialing Institutions.</p>
                        </div>
                    </div>

                    <!-- Feature 2: Proven Results -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-chart-line text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Proven Results</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">AMC/ABTI is accredited by TVETA and many other local and International reputable Organizations. For the last 15 years, our program has continuously evolved in association with distinguished experts to ensure that it reflects the latest thinking and practice in the field of Professional Mediation.</p>
                        </div>
                    </div>

                    <!-- Feature 3: Meeting Standards -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-check-double text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Meeting Standards</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">AMC Provides one of the most comprehensive Training programs in the industry; the program meets and exceeds the required Global Standards in Professional Mediation Training.</p>
                        </div>
                    </div>

                    <!-- Feature 4: Experienced Trainers -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-user-tie text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Experienced Trainers</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">All AMC Trainers are practicing mediators who have undergone Extensive Train the Trainer (TOT) Training and have experience in mediation practice. At the end of the training, participants are assessed with highly qualified External Assessors.</p>
                        </div>
                    </div>

                    <!-- Feature 5: Comprehensive Curriculum -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-book-open text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Comprehensive Curriculum</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">Our mediation training program offers a comprehensive curriculum that covers all aspects of mediation, from foundational principles to advanced techniques. Participants benefit from a blend of theoretical knowledge and practical application.</p>
                        </div>
                    </div>

                    <!-- Feature 6: Personalized Feedback -->
                    <div class="flex items-start space-x-4 group">
                        <div class="w-14 h-14 bg-gradient-to-br from-teal-500 to-teal-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-comments text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-900 text-lg mb-1">Personalized Feedback</h4>
                            <p class="text-gray-600 text-sm leading-relaxed">We provide personalized feedback throughout the training process. Our experienced trainers offer individual assessments and constructive critiques, helping participants to continuously improve their skills.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
