<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-agriculture-template-what-makes-us-different">
    <div class="px-4 sm:px-16">
        <!-- Section Title -->
        <h2 class="text-2xl sm:text-3xl lg:text-[40px] font-bold text-black leading-tight mb-12 max-w-xl font-['Public_Sans']">
            <span data-node="different_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="What Makes Us Remarkably Different">{{different_title}}</span>
        </h2>

        <!-- Features Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0 md:gap-8 mb-12">
            <!-- Feature 1 -->
            {{#if show_feature_1}}
            <div class="flex flex-col px-6 md:px-0 py-6">
                <div class="w-12 h-12 bg-[#214B3D] rounded-lg flex items-center justify-center text-white font-bold text-[30px] mb-4 font-['Bricolage_Grotesque']">
                    <span data-node="feature_1_number" data-node-type="text" data-node-label="Feature 1 Number" data-node-default="1">{{feature_1_number}}</span>
                </div>
                <span>

                    <h3 class="text-[30px] font-medium text-black font-['Public_Sans']">
                        <span data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Quality">{{feature_1_title}}</span>
                    </h3>
                    <p class="text-[#6C6C6C] text-base leading-relaxed font-['Bricolage_Grotesque']">
                        <span data-node="feature_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Premium products designed for stronger crops and healthier soil.">{{feature_1_description}}</span>
                    </p>
                </span>
            </div>
            {{/if}}

            <!-- Feature 2 -->
            {{#if show_feature_2}}
            <div class="flex flex-col md:border-l md:border-[#DCDCDC] p-6">
                <div class="w-12 h-12 bg-[#214B3D] rounded-lg flex items-center justify-center text-white font-bold text-[30px] mb-4 font-['Bricolage_Grotesque']">
                    <span data-node="feature_2_number" data-node-type="text" data-node-label="Feature 2 Number" data-node-default="2">{{feature_2_number}}</span>
                </div>
                <span>

                    <h3 class="text-[30px] font-medium text-black font-['Public_Sans']">
                        <span data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Support">{{feature_2_title}}</span>
                    </h3>
                    <p class="text-[#6C6C6C] text-base leading-relaxed font-['Bricolage_Grotesque']">
                        <span data-node="feature_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Reliable guidance that helps farmers make informed decisions.">{{feature_2_description}}</span>
                    </p>
                </span>
            </div>
            {{/if}}

            <!-- Feature 3 -->
            {{#if show_feature_3}}
            <div class="flex flex-col lg:border-l lg:border-[#DCDCDC] p-6">
                <div class="w-12 h-12 bg-[#214B3D] rounded-lg flex items-center justify-center text-white font-bold text-[30px] mb-4 font-['Bricolage_Grotesque']">
                    <span data-node="feature_3_number" data-node-type="text" data-node-label="Feature 3 Number" data-node-default="3">{{feature_3_number}}</span>
                </div>
                <span>

                    <h3 class="text-[30px] font-medium text-black font-['Public_Sans']">
                        <span data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Innovation">{{feature_3_title}}</span>
                    </h3>
                    <p class="text-[#6C6C6C] text-base leading-relaxed font-['Bricolage_Grotesque']">
                        <span data-node="feature_3_description" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Modern techniques that enhance productivity and reduce waste.">{{feature_3_description}}</span>
                    </p>
                </span>
            </div>
            {{/if}}

            <!-- Feature 4 -->
            {{#if show_feature_4}}
            <div class="flex flex-col md:border-l md:border-[#DCDCDC] p-6">
                <div class="w-12 h-12 bg-[#214B3D] rounded-lg flex items-center justify-center text-white font-bold text-[30px] mb-4 font-['Bricolage_Grotesque']">
                    <span data-node="feature_4_number" data-node-type="text" data-node-label="Feature 4 Number" data-node-default="4">{{feature_4_number}}</span>
                </div>
                <span>

                    <h3 class="text-[30px] font-medium text-black font-['Public_Sans']">
                        <span data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Sustainability">{{feature_4_title}}</span>
                    </h3>
                    <p class="text-[#6C6C6C] text-base leading-relaxed font-['Bricolage_Grotesque']">
                        <span data-node="feature_4_description" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Eco-friendly practices that protect land for future generations.">{{feature_4_description}}</span>
                    </p>
                </span>
            </div>
            {{/if}}
        </div>

        <!-- Bottom Divider and Labels -->
        <div class="border-t border-[#e5e5e5] pt-6">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div class="text-sm font-['Chivo']">
                    <span class="font-bold text-black">Case</span>
                    <span class="text-[#8F8F8F]"> Study</span>
                </div>
                <div class="text-sm text-[#8F8F8F] font-['Chivo']">
                    <span data-node="case_study_title" data-node-type="text" data-node-label="Case Study Title" data-node-default="Transforming Farms With Smarter Cultivation">{{case_study_title}}</span>
                </div>
                <div class="text-sm text-[#111111] font-['Chivo']">
                    <span data-node="case_study_result" data-node-type="text" data-node-label="Case Study Result" data-node-default="Real Impact Achieved">{{case_study_result}}</span>
                </div>
            </div>
        </div>
    </div>
</section>