<!-- 
  Our Vision Section Component
  Feature cards with heading
-->
<section data-component-type="Content" class="px-6 py-16 max-w-[90%] mx-auto">
  <!-- Container -->
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
    <!-- Left Text -->
    <div class="lg:col-span-1 flex flex-col justify-center items-start text-start pt-[30px]">
      <h2
        data-node="vision_heading"
        data-node-type="text"
        data-node-label="Vision Heading"
        data-node-default="Our Vision"
        class="text-2xl font-semibold text-[#151515] mb-3"
      >
        {{vision_heading}}
      </h2>
      <p
        data-node="vision_desc"
        data-node-type="textarea"
        data-node-label="Vision Description"
        data-node-default="We believe in simplifying workflows so teams can focus on meaningful work rather than manual tasks."
        class="text-[#4A6673] max-w-sm"
      >
        {{vision_desc}}
      </p>
    </div>

    <!-- Cards -->
    <div class="lg:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Card 1 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#F8FAFB] shadow mb-4">
          <img
            data-node="card_1_icon"
            data-node-type="file"
            data-node-label="Card 1 Icon"
            data-node-default="../assets/our-vision/user-octagon.png"
            src="{{card_1_icon}}"
            alt="icon"
            class="w-5 h-5"
          />
        </div>
        <h3
          data-node="card_1_title"
          data-node-type="text"
          data-node-label="Card 1 Title"
          data-node-default="Human-Centric Design"
          class="text-lg font-semibold mb-2 text-[#000000]"
        >
          {{card_1_title}}
        </h3>
        <p
          data-node="card_1_desc"
          data-node-type="textarea"
          data-node-label="Card 1 Description"
          data-node-default="Interfaces built around your natural workflow, reducing time spent learning new tools."
          class="text-[#4A6673] text-sm"
        >
          {{card_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#F8FAFB] shadow mb-4">
          <img
            data-node="card_2_icon"
            data-node-type="file"
            data-node-label="Card 2 Icon"
            data-node-default="../assets/our-vision/send-sqaure-2.png"
            src="{{card_2_icon}}"
            alt="icon"
            class="w-5 h-5"
          />
        </div>
        <h3
          data-node="card_2_title"
          data-node-type="text"
          data-node-label="Card 2 Title"
          data-node-default="Scalable Architecture"
          class="text-lg font-semibold mb-2 text-[#000000]"
        >
          {{card_2_title}}
        </h3>
        <p
          data-node="card_2_desc"
          data-node-type="textarea"
          data-node-label="Card 2 Description"
          data-node-default="A flexible system that grows with your operations from startup stage to enterprise scale."
          class="text-[#4A6673] text-sm"
        >
          {{card_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#F8FAFB] shadow mb-4">
          <img
            data-node="card_3_icon"
            data-node-type="file"
            data-node-label="Card 3 Icon"
            data-node-default="../assets/our-vision/flash.png"
            src="{{card_3_icon}}"
            alt="icon"
            class="w-5 h-5"
          />
        </div>
        <h3
          data-node="card_3_title"
          data-node-type="text"
          data-node-label="Card 3 Title"
          data-node-default="Reliable Performance"
          class="text-lg font-semibold mb-2 text-[#000000]"
        >
          {{card_3_title}}
        </h3>
        <p
          data-node="card_3_desc"
          data-node-type="textarea"
          data-node-label="Card 3 Description"
          data-node-default="Fast, stable, and optimized for teams who depend on uninterrupted productivity."
          class="text-[#4A6673] text-sm"
        >
          {{card_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>
