<!-- 
  Features Section Component
  Feature cards with icons and descriptions
-->
<section data-component-type="Content" class="w-full bg-white py-5">
  <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="../assets/Agency'sGrowthImage/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="../assets/Agency'sGrowthImage/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="../assets/Agency'sGrowthImage/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="../assets/Agency'sGrowthImage/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="../assets/Agency'sGrowthImage/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>
