<section data-component-type="Content" class="bg-white" data-component-slug="ss-agriculture-template-recently-completed">
    <div class="px-4 sm:px-16 py-8 sm:py-16 lg:py-24">
        <!-- Section Header -->
        <div class="text-center mb-12">
            <span class="text-[#E58A0A] text-lg font-medium italic block mb-2" style="font-family: 'Covered By Your Grace', cursive;">
                <span data-node="completed_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Recently Completed">{{completed_badge}}</span>
            </span>
            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-[#2a2622] font-['Manrope']">
                <span data-node="completed_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Explore Projects">{{completed_title}}</span>
            </h2>
        </div>

        <!-- Projects Grid - 4 Equal Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Project Card 1 -->
            {{#if show_completed_1}}
            <div class="relative group overflow-hidden rounded-lg h-[380px] lg:h-[380px] xl:h-[480px] 2xl:h-[646px]">
                <img data-node="completed_1_image" data-node-type="file" data-node-label="Project 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357451/seltrix/templates/ss-agriculture-template/completed-1.png" src="{{completed_1_image}}" alt="Project 1" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <!-- Overlay gradient -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                <!-- Content -->
                <div class="absolute bottom-8 left-8">
                    <h3 class="text-white font-bold text-lg lg:text-xl font-['Manrope'] leading-tight">
                        <span data-node="completed_1_title" data-node-type="text" data-node-label="Project 1 Title" data-node-default="Easy Harvesting">{{completed_1_title}}</span>
                    </h3>
                </div>
            </div>
            {{/if}}

            <!-- Project Card 2 -->
            {{#if show_completed_2}}
            <div class="relative group overflow-hidden rounded-lg h-[380px] lg:h-[380px] xl:h-[480px] 2xl:h-[646px]">
                <img data-node="completed_2_image" data-node-type="file" data-node-label="Project 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357451/seltrix/templates/ss-agriculture-template/completed-2.png" src="{{completed_2_image}}" alt="Project 2" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <!-- Overlay gradient -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                <!-- Content -->
                <div class="absolute bottom-8 left-8">
                    <h3 class="text-white font-bold text-lg lg:text-xl font-['Manrope'] leading-tight">
                        <span data-node="completed_2_title" data-node-type="text" data-node-label="Project 2 Title" data-node-default="Agriculture Farming">{{completed_2_title}}</span>
                    </h3>
                </div>
            </div>
            {{/if}}

            <!-- Project Card 3 -->
            {{#if show_completed_3}}
            <div class="relative group overflow-hidden rounded-lg h-[380px] lg:h-[380px] xl:h-[480px] 2xl:h-[646px]">
                <img data-node="completed_3_image" data-node-type="file" data-node-label="Project 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357452/seltrix/templates/ss-agriculture-template/completed-3.png" src="{{completed_3_image}}" alt="Project 3" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <!-- Overlay gradient -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                <!-- Content -->
                <div class="absolute bottom-8 left-8">
                    <h3 class="text-white font-bold text-lg lg:text-xl font-['Manrope'] leading-tight">
                        <span data-node="completed_3_title" data-node-type="text" data-node-label="Project 3 Title" data-node-default="Ecological Farming">{{completed_3_title}}</span>
                    </h3>
                </div>
            </div>
            {{/if}}

            <!-- Project Card 4 -->
            {{#if show_completed_4}}
            <div class="relative group overflow-hidden rounded-lg h-[380px] lg:h-[380px] xl:h-[480px] 2xl:h-[646px]">
                <img data-node="completed_4_image" data-node-type="file" data-node-label="Project 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357452/seltrix/templates/ss-agriculture-template/completed-4.png" src="{{completed_4_image}}" alt="Project 4" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <!-- Overlay gradient -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                <!-- Content -->
                <div class="absolute bottom-8 left-8">
                    <h3 class="text-white font-bold text-lg lg:text-xl font-['Manrope'] leading-tight">
                        <span data-node="completed_4_title" data-node-type="text" data-node-label="Project 4 Title" data-node-default="Organic Solutions">{{completed_4_title}}</span>
                    </h3>
                </div>
            </div>
            {{/if}}
        </div>
    </div>
</section>