<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="Arial, sans-serif" />
      <mj-button background-color="#DB2777" color="#ffffff" border-radius="6px" />
    </mj-attributes>
    <mj-style>
      @media (prefers-color-scheme: dark) {
        .dark-bg { background-color: #1f2937 !important; }
        .dark-text { color: #f9fafb !important; }
        .dark-secondary { color: #d1d5db !important; }
      }
    </mj-style>
  </mj-head>
  <mj-body background-color="#f3f4f6">
    <!-- Uncomment and replace [Survey Banner URL] below to display a custom survey banner
    <mj-section background-color="#DB2777">
      <mj-column>
        <mj-image src="[Survey Banner URL]" alt="Survey Banner" />
      </mj-column>
    </mj-section>
    -->
    <mj-section background-color="#DB2777" padding="40px 20px">
      <mj-column>
        <mj-text align="center" color="#ffffff" font-size="28px" font-weight="bold">
          Your Opinion Matters
        </mj-text>
        <mj-text align="center" color="#ffffff" font-size="16px" padding-top="10px">
          Help us improve your experience
        </mj-text>
      </mj-column>
    </mj-section>
    
    <mj-section background-color="#ffffff" css-class="dark-bg" padding="40px 20px">
      <mj-column>
        <mj-text color="#374151" css-class="dark-text" font-size="16px" line-height="24px">
          Dear [Customer Name],
          <br><br>
          We value your feedback and would love to hear about your recent experience with our products and services. Your insights help us continuously improve and better serve you.
          <br><br>
          This quick survey takes only 3-5 minutes to complete.
        </mj-text>
      </mj-column>
    </mj-section>
    
    <mj-section background-color="#FDF2F8" css-class="dark-bg" padding="30px 20px">
      <mj-column width="33.33%">
        <mj-text align="center" color="#DB2777" font-size="32px" font-weight="bold">
          3-5
        </mj-text>
        <mj-text align="center" color="#374151" css-class="dark-text" font-size="14px">
          Minutes to complete
        </mj-text>
      </mj-column>
      <mj-column width="33.33%">
        <mj-text align="center" color="#DB2777" font-size="32px" font-weight="bold">
          10
        </mj-text>
        <mj-text align="center" color="#374151" css-class="dark-text" font-size="14px">
          Simple questions
        </mj-text>
      </mj-column>
      <mj-column width="33.33%">
        <mj-text align="center" color="#DB2777" font-size="32px" font-weight="bold">
          $25
        </mj-text>
        <mj-text align="center" color="#374151" css-class="dark-text" font-size="14px">
          Gift card reward
        </mj-text>
      </mj-column>
    </mj-section>
    
    <mj-section background-color="#ffffff" css-class="dark-bg" padding="40px 20px">
      <mj-column>
        <mj-text color="#374151" css-class="dark-text" font-size="16px" line-height="24px">
          As a thank you for your time, all participants will receive a $25 gift card to the retailer of their choice.
        </mj-text>
        <mj-button href="[Survey URL]" padding="20px 0">
          Take Survey & Get Rewarded
        </mj-button>
      </mj-column>
    </mj-section>
    
    <mj-section background-color="#f9fafb" css-class="dark-bg" padding="30px 20px">
      <mj-column>
        <mj-text align="center" color="#6b7280" css-class="dark-secondary" font-size="14px">
          Survey closes April 15th | Privacy Policy | Unsubscribe
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>