<section data-component-type="Content" class="w-[92%] lg:w-[88%] mx-auto py-16" data-component-slug="saas-template-entire-platform">
  <!-- Heading -->
  <div class="text-center max-w-3xl mx-auto">
    <h2 data-node="heading_title" data-node-type="text" data-node-label="Section Heading" data-node-default="Your entire platform connected through one powerful command center" class="text-3xl md:text-4xl font-semibold leading-tight text-[#0B0B0B]">
      {{heading_title}}
    </h2>
    <p data-node="heading_subtitle" data-node-type="textarea" data-node-label="Section Subtitle" data-node-default="Navigate tools, teams, and data from a single intuitive dashboard. Every action becomes simpler, faster, and fully in your control." class="text-[#4A6673] mt-4">
      {{heading_subtitle}}
    </p>
  </div>

  <!-- Grid Layout -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-14">
    <!-- Left: Tags Section -->
    <div class="border rounded-xl p-7 bg-[#F8FAFB]">
      <h3 data-node="tags_title" data-node-type="text" data-node-label="Tags Section Title" data-node-default="Task Manager" class="font-semibold text-lg mb-5 text-[#0B0B0B]">
        {{tags_title}}
      </h3>

      <div class="flex flex-wrap gap-3 text-sm font-medium">
        <div class="bg-[#6E42FF] rounded-full flex items-center ">
            <span data-node="tag_1" data-node-type="text" data-node-label="Tag 1" data-node-default="Team" class="text-white px-4 py-1 rounded-full">{{tag_1}}</span>
        </div>
       
        <span data-node="tag_2" data-node-type="text" data-node-label="Tag 2" data-node-default="Hub" class="bg-[#F2F2F2] px-4 py-1 rounded-full">{{tag_2}}</span>
        <span data-node="tag_3" data-node-type="text" data-node-label="Tag 3" data-node-default="Huge Sales" class="bg-[#F2F2F2] px-4 py-1 rounded-full">{{tag_3}}</span>
        <span data-node="tag_4" data-node-type="text" data-node-label="Tag 4" data-node-default="User Friendly" class="bg-[#F2F2F2] px-4 py-1 rounded-full">{{tag_4}}</span>

        <div class="bg-[#6E42FF] rounded-full flex items-center">
        <span data-node="tag_5" data-node-type="text" data-node-label="Tag 5" data-node-default="Control Panel" class=" text-white px-4 py-1 ">{{tag_5}}</span>
        </div>
           <div class="bg-[#111111] rounded-full flex items-center">
        <span data-node="tag_6" data-node-type="text" data-node-label="Tag 6" data-node-default="Data Analyst" class=" text-white px-4 py-1 rounded-full">{{tag_6}}</span>
        </div>
        <span data-node="tag_7" data-node-type="text" data-node-label="Tag 7" data-node-default="Collaboration" class="bg-[#F2F2F2] px-4 py-1 rounded-full">{{tag_7}}</span>
      </div>
    </div>

    <!-- Middle Stats -->
    <div class="space-y-6">
      <div class="rounded-xl bg-[#0F0F0F] text-white p-6 flex flex-col justify-center">
        <h3 data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="12m" class="text-3xl font-semibold">
          {{stat_1_value}}
        </h3>
        <p data-node="stat_1_desc" data-node-type="textarea" data-node-label="Stat 1 Description" data-node-default="Actions processed monthly with zero performance dips." class="text-sm mt-2 opacity-90">
          {{stat_1_desc}}
        </p>
      </div>

      <div class="rounded-xl bg-[#7848FF] text-white p-6 flex flex-col justify-center">
        <h3 data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="642+" class="text-3xl font-semibold">
          {{stat_2_value}}
        </h3>
        <p data-node="stat_2_desc" data-node-type="textarea" data-node-label="Stat 2 Description" data-node-default="Integrations available to extend your workflow instantly." class="text-sm mt-2 opacity-90">
          {{stat_2_desc}}
        </p>
      </div>
    </div>

    <!-- Right Quote -->
    <div class="border rounded-xl p-7 flex flex-col justify-between bg-[#F8FAFB]">
      <span class="text-4xl font-bold text-[#111] mb-4">"</span>
      <p data-node="quote_text" data-node-type="textarea" data-node-label="Quote Text" data-node-default="Your tools shouldn't slow you down. They should accelerate every decision, every task, every goal. This platform gives you the freedom to work at your highest potential without adding complexity to your day." class="text-[#4A6673] leading-relaxed text-[15px]">
        {{quote_text}}
      </p>
      <span class="text-4xl font-bold text-right mt-4 text-[#111]">"</span>
    </div>
  </div>
</section>