<section data-component-type="Content" class="py-16 md:py-24 bg-white overflow-hidden" data-component-slug="ss-technology-template-stronger">
    <div class="max-w-[90%] mx-auto">
        
        <!-- Top Section: Text & Stats -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 mb-16 items-start">
            
            <!-- Left: Heading & Desc -->
            <div class="flex flex-col gap-6">
                <h2 class="text-4xl md:text-5xl font-bold text-[#085C44] leading-tight" data-node="stronger_heading" data-node-type="textarea" data-node-default="Stronger Together, Mile After Mile">
                    {{stronger_heading}}
                </h2>
                <p class="text-[#4A6673] text-lg leading-relaxed max-w-lg" data-node="stronger_desc" data-node-type="textarea" data-node-default="From beginners finding their rhythm to athletes chasing personal bests, our club thrives on diversity, dedication, and shared goals.">
                   {{stronger_desc}}
                </p>
            </div>

            <!-- Right: Stats Cards -->
            <div class="flex flex-col sm:flex-row gap-6 lg:justify-end">
                <!-- Stat Card 1 -->
                <div class="bg-white border border-gray-200 p-8 rounded-2xl shadow-sm min-w-[200px] hover:shadow-md transition">
                    <div class="text-5xl font-bold text-[#085C44] mb-2">
                        <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="30" class="font-bold">0</span>
                        <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>
                    </div>
                    <div class="text-lg font-semibold text-[#000000] mb-2" data-node="stat_1_label" data-node-type="text" data-node-default="Weekly Runs">
                         {{stat_1_label}}
                    </div>
                    <p class="text-sm text-[#4A6673]" data-node="stat_1_desc" data-node-type="textarea" data-node-default="Sessions designed for all speeds and schedules.">
                       {{stat_1_desc}}
                    </p>
                </div>

                <!-- Stat Card 2 -->
                <div class="bg-white border border-gray-200 p-8 rounded-2xl shadow-sm min-w-[200px] hover:shadow-md transition">
                    <div class="text-5xl font-bold text-[#085C44] mb-2">
                        <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="160" class="font-bold">0</span>
                        <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="+" data-suffix="2" class="font-bold">{{counter_2_suffix}}</span>
                    </div>
                    <div class="text-lg font-semibold text-[#000000] mb-2" data-node="stat_2_label" data-node-type="text" data-node-default="Active Runners">
                         {{stat_2_label}}
                    </div>
                    <p class="text-sm text-[#4A6673]" data-node="stat_2_desc" data-node-type="textarea" data-node-default="A lively group that keeps the energy high.">
                       {{stat_2_desc}}
                    </p>
                </div>
            </div>
        </div>

        <!-- Bottom Section: Image -->
        <div class="w-full h-[400px] md:h-[500px] lg:h-[600px] rounded-[32px] overflow-hidden relative">
            <img src="{{stronger_image}}" data-node="stronger_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956649/seltrix/templates/ss-technology-template/group_photo.png" class="w-full h-full object-cover" alt="Community">
        </div>

    </div>
</section>