<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-agriculture-template-impact-story">
    <div class="px-4 sm:px-16">
        <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 items-center">
            <!-- Left Column: Image -->
            <div class="lg:w-1/2 w-full">
                <div class="relative rounded-2xl overflow-hidden">
                    <img data-node="impact_image" data-node-type="file" data-node-label="Impact Story Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357453/seltrix/templates/ss-agriculture-template/impact-story.png" src="{{impact_image}}" alt="Impact Story" class="w-full h-[350px] md:h-[450px] lg:h-[500px] object-cover">
                </div>
            </div>

            <!-- Right Column: Content -->
            <div class="lg:w-1/2 self-end">
                <!-- Logo -->
                {{#if show_impact_logo}}
                <div class="mb-6">
                    <img data-node="impact_logo" data-node-type="file" data-node-label="Company Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346777/seltrix/templates/ss-agriculture-template/logo.svg" src="{{impact_logo}}" alt="Logo" class="h-8 w-auto">
                </div>
                {{/if}}

                <!-- Label -->
                <span class="text-[#111111] text-xs font-semibold uppercase tracking-wider mb-3 block font-['Chivo']">
                    <span data-node="impact_label" data-node-type="text" data-node-label="Label" data-node-default="IMPACT STORY">{{impact_label}}</span>
                </span>

                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-black leading-tight mb-4">
                    <span data-node="impact_title" data-node-type="textarea" data-node-label="Title" data-node-default="Raising Yield Efficiency Every Season">{{impact_title}}</span>
                </h2>

                <!-- Description -->
                <p class="text-[#636363] text-base leading-relaxed mb-6 font-['Chivo']">
                    <span data-node="impact_description" data-node-type="textarea" data-node-label="Description" data-node-default="A mid-scale farming community adopted our soil management and crop-care solutions, resulting in improved soil balance, reduced resource usage, and a significant rise in seasonal yield.">{{impact_description}}</span>
                </p>

                <!-- Read More Link -->
                {{#if show_impact_cta}}
                <a data-node="impact_cta_link" class="w-fit flex items-center gap-1 text-[#636363] text-sm font-medium border-b border-[#636363] hover:text-black transition-colors font-['Chivo']" data-node-type="page_links" data-node-label="CTA Link" data-node-default="about" href="{{impact_cta_link}}">
                    <span data-node="impact_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Read More">{{impact_cta_text}}</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7V17"/>
                    </svg>
                </a>
                {{/if}}
            </div>
        </div>
    </div>
</section>