<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-agriculture-template-who-we-are">
    <div class="px-4 sm:px-16">
        <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 items-center">
            <!-- Left Column: Content -->
            <div class="lg:w-1/2">
                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl lg:text-[48px] font-bold text-black leading-tight mb-4">
                    <span data-node="who_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Who We Are">{{who_title}}</span>
                </h2>

                <!-- Description -->
                <p class="text-[#3D3D3D] text-base leading-relaxed mb-6 font-['Chivo']">
                    <span data-node="who_description" data-node-type="textarea" data-node-label="Description" data-node-default="We support farmers with smarter solutions, high-quality inputs, and guidance that strengthens every stage of cultivation.">{{who_description}}</span>
                </p>

                <!-- CTA Button -->
                {{#if show_who_cta}}
                <a data-node="who_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="about" href="{{who_cta_link}}" class="inline-block bg-[#184435] text-white px-6 py-3 rounded-full text-md hover:bg-[#1a3d31] transition-colors mb-10">
                    <span data-node="who_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Learn More">{{who_cta_text}}</span>
                </a>
                {{/if}}

                <!-- Stats Row -->
                <div class="flex justify-between gap-8 lg:gap-12 w-full">
                    <!-- Stat 1 -->
                    {{#if show_who_stat_1}}
                    <div>
                        <div class="text-3xl lg:text-[48px] font-bold text-black mb-1 font-['Chivo']">
                            <span data-node="who_stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="10k+">{{who_stat_1_value}}</span>
                        </div>
                        <div class="text-[#4A6673] text-sm font-['Chivo']">
                            <span data-node="who_stat_1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Farmers Supported">{{who_stat_1_label}}</span>
                        </div>
                    </div>
                    {{/if}}

                    <!-- Stat 2 -->
                    {{#if show_who_stat_2}}
                    <div>
                        <div class="text-3xl lg:text-[48px] font-bold text-black mb-1 font-['Chivo']">
                            <span data-node="who_stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="5.2M">{{who_stat_2_value}}</span>
                        </div>
                        <div class="text-[#4A6673] text-sm font-['Chivo']">
                            <span data-node="who_stat_2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Acres Improved">{{who_stat_2_label}}</span>
                        </div>
                    </div>
                    {{/if}}

                    <!-- Stat 3 -->
                    {{#if show_who_stat_3}}
                    <div>
                        <div class="text-3xl lg:text-[48px] font-bold text-black mb-1 font-['Chivo']">
                            <span data-node="who_stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="98%">{{who_stat_3_value}}</span>
                        </div>
                        <div class="text-[#4A6673] text-sm font-['Chivo']">
                            <span data-node="who_stat_3_label" data-node-type="text" data-node-label="Stat 3 Label" data-node-default="Customer Satisfaction">{{who_stat_3_label}}</span>
                        </div>
                    </div>
                    {{/if}}
                </div>
            </div>

            <!-- Right Column: Image -->
            <div class="lg:w-1/2 w-full">
                <div class="relative rounded-2xl overflow-hidden h-[350px] md:h-[450px] lg:h-[550px] w-full">
                    <img data-node="who_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357459/seltrix/templates/ss-agriculture-template/who-we-are.png" src="{{who_image}}" alt="Who We Are" class="w-full h-full object-cover">
                    <!-- Orange Overlay -->
                    <div class="absolute inset-0 bg-[#E58A0A]/30 mix-blend-multiply"></div>
                </div>
            </div>
        </div>
    </div>
</section>