<section data-component-type="Content" class="py-16 lg:py-24 bg-[#FFFFFF] overflow-hidden" data-component-slug="ss-agriculture-template-agriculture-organic">
    <div class="max-w-7xl mx-auto px-4  sm:px-16 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 lg:gap-16 items-center">
            <!-- Left Image Section -->
            <div class="relative h-fit flex justify-center">

                <div class="w-[80%] lg:w-full relative z-1">
                    <!-- Main Image -->
                    <div class="overflow-hidden">
                        <img data-node="organic_section_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346780/seltrix/templates/ss-agriculture-template/organic-section-image.png" src="{{organic_section_image}}" alt="Farmer with organic products" class="w-full object-cover">
                    </div>
                    <!-- Decorative Leaf -->
                    <div class="absolute z-10 xl:-left-[140px] lg:-left-[80px] md:-left-[120px] sm:-left-[90px] -left-[50px] xl:-bottom-[75px] -bottom-[60px] h-[60%] xl:h-[72.5%] rotate-[7.5deg]">
                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767346778/seltrix/templates/ss-agriculture-template/organic-decorative-leaf.png" class="w-full h-full object-cover" alt="Organic Decorative Leaf" srcset>
                    </div>
                </div>
            </div>

            <!-- Right Content Section -->
            <div class="space-y-6">
                <!-- Title -->
                <h2 class="text-3xl lg:text-[32px] xl:text-5xl font-bold text-[#2a2622] leading-tight">
                    <span data-node="organic_section_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Agriculture & Organic Product Farm">{{organic_section_title}}</span>
                </h2>

                <!-- Description -->
                <p class="text-[#666666] text-sm xl:text-lg leading-relaxed font-['Chivo']">
                    <span data-node="organic_section_description" data-node-type="textarea" data-node-label="Description" data-node-default="There are many variations of passages of ipsum available but the majority have suffered alteration in some form by injected humor or random word which don't look even. Comparison new ham melancholy.">{{organic_section_description}}</span>
                </p>

                <!-- Stats -->
                {{#if show_organic_stat}}
                <div class="flex gap-5 items-stretch">
                    <span class="text-6xl lg:text-6xl xl:text-8xl font-medium text-[#49A760] font-['Outfit']">
                        <span data-node="organic_stat_value" data-node-type="text" data-node-label="Stat Value" data-node-default="25M">{{organic_stat_value}}</span>
                    </span>
                    <div class="w-0.5 bg-gray-400 self-stretch"></div>
                    <span class="text-black text-base lg:text-md font-bold font-['Chivo'] flex items-center">
                        <span data-node="organic_stat_label" data-node-type="text" data-node-label="Stat Label" data-node-default="Growth Tons of Harvest" class="max-w-[65%]">{{organic_stat_label}}</span>
                    </span>
                </div>
                {{/if}}

                <!-- Feature Cards -->
                <div class="relative w-full lg:w-[110%] lg:-left-[30%] xl:-left-1/4 grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 z-1">
                    <!-- Card 1 - Amber -->
                    {{#if show_organic_card_1}}
                    <div class="bg-[#E58A0A] p-6 text-black">
                        <div class="w-12 xl:w-12 mb-4">
                            <svg class="w-full h-full" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <rect width="80" height="80" fill="url(#pattern0_885_4884)"/>
                                <defs>
                                    <pattern id="pattern0_885_4884" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image0_885_4884" transform="scale(0.00390625)"/>
                                    </pattern>
                                    <image id="image0_885_4884" width="256" height="256" preserveAspectRatio="none" xlink:href="data:image/png;base64,[BLOB]"/>
                                </defs>
                            </svg>


                        </div>
                        <h3 class="xl:text-lg text-base font-bold mb-2">
                            <span data-node="organic_card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="100% Guaranteed Organic Product">{{organic_card_1_title}}</span>
                        </h3>
                        <p class="text-black xl:text-sm text-xs font-['Chivo']">
                            <span data-node="organic_card_1_description" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Always parties but trying she showing of moment.">{{organic_card_1_description}}</span>
                        </p>
                    </div>
                    {{/if}}

                    <!-- Card 2 - Green -->
                    {{#if show_organic_card_2}}
                    <div class="bg-[#214B3D] p-6 text-white">
                        <div class="w-12 xl:w-12 mb-4">
                            <svg class="w-full h-full" width="87" height="80" viewBox="0 0 87 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <rect width="86.36" height="80" fill="url(#pattern0_885_4888)"/>
                                <defs>
                                    <pattern id="pattern0_885_4888" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image0_885_4888" transform="scale(0.00409836 0.00442478)"/>
                                    </pattern>
                                    <image id="image0_885_4888" width="244" height="226" preserveAspectRatio="none" xlink:href="data:image/png;base64,[BLOB]"/>
                                </defs>
                            </svg>
                        </div>
                        <h3 class="xl:text-lg text-base font-bold mb-2">
                            <span data-node="organic_card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Top-Quality Healthy Foods Production">{{organic_card_2_title}}</span>
                        </h3>
                        <p class="text-[#FCFCFC] xl:text-sm text-xs font-['Manrope']">
                            <span data-node="organic_card_2_description" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Majority have suffered alteration in some form by injected humor.">{{organic_card_2_description}}</span>
                        </p>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</section>