<section class="bg-[#F6F6F6] py-20" data-component-type="Content">
    <div class="max-w-[90%] mx-auto px-6 lg:px-10">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">

            <!-- LEFT CONTENT -->
            <div>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black" data-node="unlock_heading"
                    data-node-type="text" data-node-label="Main Heading"
                    data-node-default="Unlock Your Digital Potential">
                    {{unlock_heading}}
                </h2>

                <p class="mt-4 text-gray-600 max-w-lg" data-node="unlock_description" data-node-type="text"
                    data-node-label="Main Description"
                    data-node-default="Learn through interactive courses, high-quality resources, and expert guidance tailored to help you succeed in the digital world.">
                    {{unlock_description}}
                </p>

                <!-- Feature List -->
                <div class="mt-10 space-y-6">

                    <!-- Feature 1 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow">


                            <img src="{{feature_1_icon}}" data-node="feature_1_icon" data-node-type="file"
                                data-node-label="Feature 1 Icon" data-node-default="../assets/medal-star.png"
                                class=" w-full md:p-2" />
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_1_title" data-node-type="text"
                                data-node-label="Feature 1 Title" data-node-default="Learn Confidently">
                                {{feature_1_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_1_desc" data-node-type="text"
                                data-node-label="Feature 1 Description"
                                data-node-default="Our platform blends structured content with personalized feedback to help you master every topic.">
                                {{feature_1_desc}}
                            </p>
                        </div>
                    </div>

                    <!-- Feature 2 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow">
                            <img src="{{feature_2_icon}}" data-node="feature_2_icon" data-node-type="file"
                                data-node-label="Feature 1 Icon" data-node-default="../assets/star.png"
                                class=" w-full p-2" />
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_2_title" data-node-type="text"
                                data-node-label="Feature 2 Title" data-node-default="Stay Ahead">
                                {{feature_2_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_2_desc" data-node-type="text"
                                data-node-label="Feature 2 Description"
                                data-node-default="Access updated lessons that reflect the latest trends and technologies.">
                                {{feature_2_desc}}
                            </p>
                        </div>
                    </div>

                    <!-- Feature 3 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow"
                           >
                             <img
            src="{{feature_3_icon}}"
            data-node="feature_3_icon"
            data-node-type="file"
            data-node-label="Feature 3 Icon"
            data-node-default="../assets/book-square.png"
            class=" w-full p-2"
          />
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_3_title" data-node-type="text"
                                data-node-label="Feature 3 Title" data-node-default="Built For Learners">
                                {{feature_3_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_3_desc" data-node-type="text"
                                data-node-label="Feature 3 Description"
                                data-node-default="Designed with simplicity, clarity, and world-class content to make learning effective and enjoyable.">
                                {{feature_3_desc}}
                            </p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- RIGHT IMAGES -->
            <div class="relative flex justify-center lg:justify-start">

                <!-- Image 1 -->
                <div class="relative">
                    <img src="{{image_1}}" data-node="image_1" data-node-type="file" data-node-label="Primary Image"
                        data-node-default="../assets/Frame 382.png"
                        class="rounded-3xl w-[260px] sm:w-[300px] lg:w-[300px] xl:w-[400px]" />
                </div>

                <!-- Image 2 -->
                <div class="absolute top-[200px] xl:left-[200px] left-[150px] hidden lg:block z-10">
                    <img src="{{image_2}}" data-node="image_2" data-node-type="file" data-node-label="Secondary Image"
                        data-node-default="../assets/Frame 381.png"
                        class="rounded-3xl w-[240px] sm:w-[280px] lg:w-[300px] xl:w-[400px]" />
                </div>

            </div>
        </div>

    </div>
</section>