<!-- 
  Platform Command Center Section Component
  Dashboard feature showcase with stats
-->
<section data-component-type="Content" class="w-[92%] lg:w-[88%] mx-auto py-16">
  <!-- 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">
        <span
          data-node="tag_1"
          data-node-type="text"
          data-node-label="Tag 1"
          data-node-default="Team"
          class="bg-[#6E42FF] text-white px-4 py-1 rounded-full"
          >{{tag_1}}</span
        >
        <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
        >
        <span
          data-node="tag_5"
          data-node-type="text"
          data-node-label="Tag 5"
          data-node-default="Control Panel"
          class="bg-[#6E42FF] text-white px-4 py-1 rounded-full"
          >{{tag_5}}</span
        >
        <span
          data-node="tag_6"
          data-node-type="text"
          data-node-label="Tag 6"
          data-node-default="Data Analyst"
          class="bg-[#111111] text-white px-4 py-1 rounded-full"
          >{{tag_6}}</span
        >
        <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>
