<!DOCTYPE html>
<html lang="en" style="margin:0;padding:0;">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Promo</title>
    <style>
      body { margin:0; padding:0; background:#f6f7fb; font-family: Arial, Helvetica, sans-serif; color:#1f2937; }
      .container { max-width: 640px; margin: 0 auto; background:#ffffff; }
      .header { padding: 24px; text-align: center; border-bottom: 1px solid #eef2f7; }
      .title { margin: 0; font-size: 22px; }
      .hero { padding: 16px 24px 0 24px; }
      .intro { font-size: 16px; color:#374151; line-height: 1.6; }
      .grid { padding: 8px 16px 24px 16px; }
      .card { background: #fafbfe; border: 1px solid #eef2f7; border-radius: 8px; overflow: hidden; margin: 8px; width: calc(50% - 16px); display: inline-block; vertical-align: top; }
      .card img { display:block; width: 100%; height: auto; }
      .card-body { padding: 12px; }
      .name { font-size: 16px; font-weight: bold; margin: 0 0 6px 0; color:#111827; }
      .price { font-size: 14px; color:#10b981; margin: 0 0 10px 0; }
      .btn { display:inline-block; background:#4f46e5; color:#fff !important; text-decoration:none; padding:10px 14px; border-radius:6px; font-weight:600; font-size:14px; }
      .cta-wrap { text-align:center; padding: 8px 24px 28px 24px; }
      .see-all { display:inline-block; background:#111827; color:#fff !important; text-decoration:none; padding:12px 18px; border-radius:8px; font-weight:700; }
      .footer { text-align:center; padding: 18px; font-size: 12px; color:#6b7280; }
      @media (max-width: 480px) {
        .card { width: 100%; margin: 8px 0; }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1 class="title">This Week’s Top Picks</h1>
      </div>

      <div class="hero">
        <p class="intro">
          Hi {{client_name}},<br />
          Don’t miss these exclusive deals curated just for you.
        </p>
      </div>

      <div class="grid">
        <!-- Product 1 -->
        <div class="card">
          <a href="[https://example.com/products/product-1](https://example.com/products/product-1)">
            <img src="[https://picsum.photos/seed/promo1/600](https://picsum.photos/seed/promo1/600)