<section data-component-type="Content" class="bg-white pt-[150px] pb-[40px] lg:pt-[120px] lg:pb-[60px] font-sans text-center" data-component-slug="ss-interior-kitchen-products_hero">
  <div class="max-w-[90%] lg:max-w-[70%] mx-auto px-4 flex flex-col items-center">
    
    <!-- Badge -->
    <span data-node="hero_badge" data-node-type="text" data-node-default="Smart Essentials" class="inline-block py-1.5 px-6 rounded-full bg-gray-100 text-sm font-medium text-gray-500 mb-8 border border-gray-200">
    {{hero_badge}}
    </span>

    <!-- Heading -->
    <h1 data-node="hero_heading" data-node-type="textarea" data-node-label="Hero Heading" data-node-default="Modern kitchen appliances crafted for performance, precision, and everyday elegance." class="text-3xl sm:text-5xl lg:text-6xl font-bold text-black mb-6 leading-tight tracking-tight">
    {{hero_heading}}
    </h1>

    <!-- Description -->
    <p data-node="hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Built to perform consistently while complementing modern kitchen interiors." class="text-lg sm:text-xl text-[#636363] mb-10 max-w-2xl leading-relaxed">
    {{hero_description}}
    </p>

    <!-- CTA Button -->
    <div class="mb-12">
        <a data-node="hero_cta_link" data-node-type="text" data-node-default="#" href="{{hero_cta_link}}" class="inline-block">
          <span data-node="hero_cta_text" data-node-type="text" data-node-default="Explore Products" class="bg-[#0019BA] text-white px-8 py-3.5 rounded-lg font-semibold hover:bg-[#0019BA]/80 transition-colors duration-300">
          {{hero_cta_text}}
          </span>
        </a>
    </div>

    <!-- Features Row -->
    <div class="flex flex-col  sm:flex-row justify-center items-center gap-6 sm:gap-8 lg:gap-12 mb-16 text-[#636363] font-medium">
        
        <!-- Feature 1 -->
        <div class="flex items-center  gap-2">
            <span class="bg-[#5F4BE2] rounded-full p-1 flex items-center justify-center w-5 h-5">
              <img data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_1_icon}}" alt="Feature 1 Icon" class="w-3 h-3 text-white">
            </span>
            <span data-node="feature_1" data-node-type="text" data-node-default="Smart Design">{{feature_1}}</span>
        </div>

        <!-- Feature 2 -->
        <div class="flex items-center gap-2">
            <span class="bg-[#5F4BE2] rounded-full p-1 flex items-center justify-center w-5 h-5">
              <img data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_2_icon}}" alt="Feature 2 Icon" class="w-3 h-3 text-white">
            </span>
            <span data-node="feature_2" data-node-type="text" data-node-default="Premium Finish">{{feature_2}}</span>
        </div>

        <!-- Feature 3 -->
        <div class="flex items-center gap-2">
            <span class="bg-[#5F4BE2] rounded-full p-1 flex items-center justify-center w-5 h-5">
              <img data-node="feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_3_icon}}" alt="Feature 3 Icon" class="w-3 h-3 text-white">
            </span>
            <span data-node="feature_3" data-node-type="text" data-node-default="Reliable Performance">{{feature_3}}</span>
        </div>

    </div>

    <!-- Bottom Label -->
    <p data-node="bottom_label" data-node-type="text" data-node-default="Chosen by Leading Kitchens" class="text-black font-semibold text-lg tracking-wide">
      {{bottom_label}}
    </p>

  </div>
</section>