<section data-component-type="Content" class="bg-white" data-component-slug="ss-agriculture-template-explore-projects">
    <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-base font-medium font-['Chivo'] block mb-2">
                <span data-node="gallery_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Awesome Gallery">{{gallery_badge}}</span>
            </span>
            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-[#2a2622]">
                <span data-node="gallery_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Explore Projects">{{gallery_title}}</span>
            </h2>
        </div>

        <!-- Projects Grid -->
        <div class="flex flex-col gap-6">
            <!-- Row 1 - 2 Large Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Project Card 1 -->
                {{#if show_project_1}}
                <div class="relative group overflow-hidden rounded-2xl h-[280px] lg:h-[475px] 2xl:h-[615px]">
                    <img data-node="project_1_image" data-node-type="file" data-node-label="Project 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357454/seltrix/templates/ss-agriculture-template/project-1.jpg" src="{{project_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/60 via-black/20 to-transparent"></div>
                    <!-- Content -->
                    <div class="absolute bottom-6 md:bottom-12 left-6 md:left-12 px-4 py-3" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767357450/seltrix/templates/ss-agriculture-template/bg-text.png'); background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <span class="block text-[#E58A0A] text-lg font-semibold uppercase tracking-wider mb-1 font-['Chivo']">
                            <span data-node="project_1_category" data-node-type="text" data-node-label="Project 1 Category" data-node-default="FRUIT">{{project_1_category}}</span>
                        </span>
                        <h3 class="text-white font-bold text-xl lg:text-2xl font-['Charis_SIL']">
                            <span data-node="project_1_title" data-node-type="text" data-node-label="Project 1 Title" data-node-default="Healthy Food">{{project_1_title}}</span>
                        </h3>
                    </div>
                </div>
                {{/if}}

                <!-- Project Card 2 -->
                {{#if show_project_2}}
                <div class="relative group overflow-hidden rounded-2xl h-[280px] lg:h-[475px] 2xl:h-[615px] md:col-span-2">
                    <img data-node="project_2_image" data-node-type="file" data-node-label="Project 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357455/seltrix/templates/ss-agriculture-template/project-2.jpg" src="{{project_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/60 via-black/20 to-transparent"></div>
                    <!-- Content -->
                    <div class="absolute bottom-6 md:bottom-12 left-6  left-12 px-4 py-3" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767357450/seltrix/templates/ss-agriculture-template/bg-text.png'); background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <span class="block text-[#214B3D] text-lg font-semibold uppercase tracking-wider mb-1 font-['Chivo']">
                            <span data-node="project_2_category" data-node-type="text" data-node-label="Project 2 Category" data-node-default="VEGETABLES">{{project_2_category}}</span>
                        </span>
                        <h3 class="text-white font-bold text-xl lg:text-2xl font-['Charis_SIL']">
                            <span data-node="project_2_title" data-node-type="text" data-node-label="Project 2 Title" data-node-default="Organic Vegetables">{{project_2_title}}</span>
                        </h3>
                    </div>
                </div>
                {{/if}}
            </div>

            <!-- Row 2 - 3 Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Project Card 3 -->
                {{#if show_project_3}}
                <div class="relative group overflow-hidden rounded-2xl h-[280px] lg:h-[475px] 2xl:h-[615px]">
                    <img data-node="project_3_image" data-node-type="file" data-node-label="Project 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357455/seltrix/templates/ss-agriculture-template/project-3.jpg" src="{{project_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/60 via-black/20 to-transparent"></div>
                    <!-- Content -->
                    <div class="absolute bottom-6 md:bottom-12 left-6  left-12 px-4 py-3" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767357450/seltrix/templates/ss-agriculture-template/bg-text.png'); background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <span class="block text-[#E58A0A] text-lg font-semibold uppercase tracking-wider mb-1 font-['Chivo']">
                            <span data-node="project_3_category" data-node-type="text" data-node-label="Project 3 Category" data-node-default="HARVEST">{{project_3_category}}</span>
                        </span>
                        <h3 class="text-white font-bold text-lg lg:text-xl font-['Charis_SIL']">
                            <span data-node="project_3_title" data-node-type="text" data-node-label="Project 3 Title" data-node-default="Crispy Cucumber">{{project_3_title}}</span>
                        </h3>
                    </div>
                </div>
                {{/if}}

                <!-- Project Card 4 -->
                {{#if show_project_4}}
                <div class="relative group overflow-hidden rounded-2xl h-[280px] lg:h-[475px] 2xl:h-[615px]">
                    <img data-node="project_4_image" data-node-type="file" data-node-label="Project 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357456/seltrix/templates/ss-agriculture-template/project-4.jpg" src="{{project_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/60 via-black/20 to-transparent"></div>
                    <!-- Content -->
                    <div class="absolute bottom-6 md:bottom-12 left-6  left-12 px-4 py-3" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767357450/seltrix/templates/ss-agriculture-template/bg-text.png'); background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <span class="block text-[#E58A0A] text-lg font-semibold uppercase tracking-wider mb-1 font-['Chivo']">
                            <span data-node="project_4_category" data-node-type="text" data-node-label="Project 4 Category" data-node-default="MAIZE">{{project_4_category}}</span>
                        </span>
                        <h3 class="text-white font-bold text-lg lg:text-xl font-['Charis_SIL']">
                            <span data-node="project_4_title" data-node-type="text" data-node-label="Project 4 Title" data-node-default="Fresh Corn">{{project_4_title}}</span>
                        </h3>
                    </div>
                </div>
                {{/if}}

                <!-- Project Card 5 -->
                {{#if show_project_5}}
                <div class="relative group overflow-hidden rounded-2xl h-[280px] lg:h-[475px] 2xl:h-[615px]">
                    <img data-node="project_5_image" data-node-type="file" data-node-label="Project 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357456/seltrix/templates/ss-agriculture-template/project-5.jpg" src="{{project_5_image}}" alt="Project 5" 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/60 via-black/20 to-transparent"></div>
                    <!-- Content -->
                    <div class="absolute bottom-6 md:bottom-12 left-6  left-12 px-4 py-3" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767357450/seltrix/templates/ss-agriculture-template/bg-text.png'); background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <span class="block text-[#E58A0A] text-lg font-semibold uppercase tracking-wider mb-1 font-['Chivo']">
                            <span data-node="project_5_category" data-node-type="text" data-node-label="Project 5 Category" data-node-default="CEREALS">{{project_5_category}}</span>
                        </span>
                        <h3 class="text-white font-bold text-lg lg:text-xl font-['Charis_SIL']">
                            <span data-node="project_5_title" data-node-type="text" data-node-label="Project 5 Title" data-node-default="Fresh Mandrains">{{project_5_title}}</span>
                        </h3>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </div>
</section>