<section data-component-type="Content" class="bg-[#0019BA] py-16 lg:py-24 text-center" data-component-slug="ss-interior-kitchen-our_vision">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Badge -->
    <div class="mb-6">
      <span data-node="vision_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Vision" class="inline-block text-lg font-medium text-white/90 tracking-wide">
        {{vision_badge}}
      </span>
    </div>

    <!-- Heading -->
    <h2 data-node="vision_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Shaping the Future of Kitchens" class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight max-w-4xl mx-auto">
      {{vision_heading}}
    </h2>

    <!-- Description -->
    <p data-node="vision_description" data-node-type="textarea" data-node-label="Description" data-node-default="Design-driven appliances that adapt to evolving lifestyles and spaces. Innovation guided by simplicity, performance, and visual harmony." class="text-lg text-[#BDBDBD] mb-10 max-w-2xl mx-auto leading-relaxed">
      {{vision_description}}
    </p>

    <!-- CTA Button -->
    <a data-node="vision_cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#" href="{{vision_cta_link}}" class="inline-block">
        <button class="px-8 py-3 rounded-lg border border-[BDBDBD] text-[#FFFFFF] font-medium hover:bg-white hover:text-black transition-colors duration-300">
            <span data-node="vision_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Discover Our Story">
              {{vision_cta_text}}
            </span>
        </button>
    </a>

  </div>
</section>