<!-- 
  Partners Logo Grid Component
  Partner logos in a 4-column responsive grid
-->
<section data-component-type="Content" class="py-16 md:py-24">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12">
      <span
        data-node="partners_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="OUR PARTNERS"
        class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block"
        >{{partners_tagline}}</span
      >

      <h2
        data-node="partners_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Powered by Brands That Move With Us"
        class="text-3xl md:text-4xl lg:text-5xl font-bold text-black"
      >
        {{partners_title}}
      </h2>
    </div>

    <!-- Logo Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <!-- Partner 1 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner1_logo"
          data-node-type="file"
          data-node-label="Partner 1 Logo"
          data-node-default="../assets/partner-logo-1.png"
          src="{{partner1_logo}}"
          alt="Partner 1"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 2 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner2_logo"
          data-node-type="file"
          data-node-label="Partner 2 Logo"
          data-node-default="../assets/partner-logo-2.png"
          src="{{partner2_logo}}"
          alt="Partner 2"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 3 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner3_logo"
          data-node-type="file"
          data-node-label="Partner 3 Logo"
          data-node-default="../assets/partner-logo-3.png"
          src="{{partner3_logo}}"
          alt="Partner 3"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 4 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner4_logo"
          data-node-type="file"
          data-node-label="Partner 4 Logo"
          data-node-default="../assets/partner-logo-4.png"
          src="{{partner4_logo}}"
          alt="Partner 4"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 5 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner5_logo"
          data-node-type="file"
          data-node-label="Partner 5 Logo"
          data-node-default="../assets/partner-logo-5.png"
          src="{{partner5_logo}}"
          alt="Partner 5"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 6 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner6_logo"
          data-node-type="file"
          data-node-label="Partner 6 Logo"
          data-node-default="../assets/partner-logo-6.png"
          src="{{partner6_logo}}"
          alt="Partner 6"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 7 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner7_logo"
          data-node-type="file"
          data-node-label="Partner 7 Logo"
          data-node-default="../assets/partner-logo-7.png"
          src="{{partner7_logo}}"
          alt="Partner 7"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>

      <!-- Partner 8 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img
          data-node="partner8_logo"
          data-node-type="file"
          data-node-label="Partner 8 Logo"
          data-node-default="../assets/partner-logo-8.png"
          src="{{partner8_logo}}"
          alt="Partner 8"
          class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all"
        />
      </div>
    </div>
  </div>
</section>
