<section data-component-type="Content" class="w-full bg-white py-5" data-component-slug="saas-template-feature">
  <div class="max-w-[90%] mx-auto text-center px-5">
    <!-- Features Badge -->
    <div class="pb-[30px]">
      <span data-node="features_badge" data-node-type="text" data-node-label="Features Badge" data-node-default="Features" class="text-[18px] bg-[#5F4BE233] text-[#5F4BE2] px-4 py-3 rounded-[10px] font-bold">
        {{features_badge}}
      </span>
    </div>

    <!-- Title -->
    <h2 data-node="features_heading" data-node-type="text" data-node-label="Features Section Heading" data-node-default="Features That Accelerate Your Agency's Growth" class="text-[32px] md:text-[40px] font-semibold text-[#0A0A0A] leading-tight">
      {{features_heading}}
    </h2>

    <!-- Subtitle -->
    <p data-node="features_subtitle" data-node-type="textarea" data-node-label="Features Section Subtitle" data-node-default="A powerful set of tools designed to automate, organize, and optimize your daily operations." class="text-[#4A6673] text-[15px] md:text-[17px] mt-4 max-w-2xl mx-auto leading-relaxed">
      {{features_subtitle}}
    </p>
  </div>

  <!-- Feature Grid 1 (3 Cards) -->
  <div class="max-w-[90%] mx-auto mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-[#F8FAFB] rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300">
      <div class="w-12 h-12 rounded-md flex items-center justify-center shadow">
        <img data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868893/seltrix/templates/saas-template/Agency%27sGrowthImage/icon1.png" src="{{feature_1_icon}}" class="w-full h-auto" alt="Feature Icon">
      </div>
      <h3 data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Project Control Dashboard" class="text-[30px] font-semibold mt-5 text-[#0A0A0A]">
        {{feature_1_title}}
      </h3>
      <p data-node="feature_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Plan, assign, and manage tasks effortlessly across teams and clients. Every project. Every deadline. All in one view." class="text-[#4A6673] text-[20px] mt-3 leading-relaxed">
        {{feature_1_desc}}
      </p>
    </div>

    <!-- Card 2 -->
    <div class="bg-[#F8FAFB] rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300">
      <div class="w-12 h-12 rounded-md flex items-center justify-center shadow">
        <img data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868894/seltrix/templates/saas-template/Agency%27sGrowthImage/icon2.png" src="{{feature_2_icon}}" class="w-full h-auto" alt="Feature Icon">
      </div>
      <h3 data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Automated Client Reporting" class="text-[30px] font-semibold mt-5 text-[#0A0A0A]">
        {{feature_2_title}}
      </h3>
      <p data-node="feature_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Generate detailed reports instantly — no manual compiling. Give clients clarity without draining your team's time." class="text-[#4A6673] text-[20px] mt-3 leading-relaxed">
        {{feature_2_desc}}
      </p>
    </div>

    <!-- Card 3 -->
    <div class="bg-[#F8FAFB] rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300">
      <div class="w-12 h-12 rounded-md flex items-center justify-center shadow">
        <img data-node="feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868895/seltrix/templates/saas-template/Agency%27sGrowthImage/icon3.png" src="{{feature_3_icon}}" class="w-full h-auto" alt="Feature Icon">
      </div>
      <h3 data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Team Collaboration Hub" class="text-[30px] font-semibold mt-5 text-[#0A0A0A]">
        {{feature_3_title}}
      </h3>
      <p data-node="feature_3_desc" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Chat, share files, and manage approvals from a unified workspace. Faster communication. Zero confusion." class="text-[#4A6673] text-[20px] mt-3 leading-relaxed">
        {{feature_3_desc}}
      </p>
    </div>
  </div>

  <!-- Feature Grid 2 (2 Cards) -->
  <div class="max-w-[90%] mx-auto mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
    <!-- Card 4 -->
    <div class="bg-[#F8FAFB] rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300">
      <div class="w-12 h-12 bg-white rounded-md flex items-center justify-center shadow">
        <img data-node="feature_4_icon" data-node-type="file" data-node-label="Feature 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868896/seltrix/templates/saas-template/Agency%27sGrowthImage/icon4.png" src="{{feature_4_icon}}" class="w-full h-auto" alt="Feature Icon">
      </div>
      <h3 data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Smart Notifications & Alerts" class="text-[30px] font-semibold mt-5 text-[#0A0A0A]">
        {{feature_4_title}}
      </h3>
      <p data-node="feature_4_desc" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Stay informed on deadlines, updates & dependencies with real-time alerts. Never miss tasks or project changes." class="text-[#4A6673] text-[20px] mt-3 leading-relaxed">
        {{feature_4_desc}}
      </p>
    </div>

    <!-- Card 5 -->
    <div class="bg-[#F8FAFB] rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300">
      <div class="w-12 h-12 bg-white rounded-md flex items-center justify-center shadow">
        <img data-node="feature_5_icon" data-node-type="file" data-node-label="Feature 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868897/seltrix/templates/saas-template/Agency%27sGrowthImage/icon5.png" src="{{feature_5_icon}}" class="w-full h-auto" alt="Feature Icon">
      </div>
      <h3 data-node="feature_5_title" data-node-type="text" data-node-label="Feature 5 Title" data-node-default="Seamless Integrations" class="text-[30px] font-semibold mt-5 text-[#0A0A0A]">
        {{feature_5_title}}
      </h3>
      <p data-node="feature_5_desc" data-node-type="textarea" data-node-label="Feature 5 Description" data-node-default="Connect tools like Slack, Gmail, Drive & more into one smart workflow. Keep your entire system in sync — effortlessly." class="text-[#4A6673] text-[20px] mt-3 leading-relaxed">
        {{feature_5_desc}}
      </p>
    </div>
  </div>
</section>