<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= program.org_name %> — <%= program.moochedda_token_name || program.name %> Loyalty Tokens</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: #f3f4f6;
      color: #111827;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 16px;
    }

    /* ── Print toolbar (hidden when printing) ── */
    .print-bar {
      width: 100%;
      max-width: 680px;
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: flex-end;
    }
    .print-bar button {
      padding: 9px 20px;
      border-radius: 8px;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .btn-print { background: #1a56db; color: #fff; }
    .btn-close  { background: #fff; color: #374151; border: 1.5px solid #e5e7eb !important; }

    /* ── Flyer page ── */
    .flyer {
      width: 100%;
      max-width: 680px;
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(0,0,0,.12);
    }

    /* Hero band */
    .flyer-hero {
      background: linear-gradient(135deg, #1a56db 0%, #7c3aed 100%);
      color: #fff;
      padding: 40px 40px 32px;
      position: relative;
    }
    .flyer-org-logo {
      width: 64px; height: 64px; border-radius: 12px;
      object-fit: contain; background: rgba(255,255,255,.15);
      padding: 4px; margin-bottom: 14px; display: block;
    }
    .flyer-org-initials {
      width: 64px; height: 64px; border-radius: 12px;
      background: rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem; font-weight: 800; margin-bottom: 14px;
    }
    .flyer-org-name { font-size: 1rem; font-weight: 600; opacity: .85; margin-bottom: 6px; }
    .flyer-headline { font-size: 2rem; font-weight: 900; line-height: 1.1; margin-bottom: 6px; }
    .flyer-subhead  { font-size: 1rem; opacity: .8; font-weight: 400; }
    .flyer-token-pill {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px;
      background: rgba(255,255,255,.18);
      border: 1.5px solid rgba(255,255,255,.3);
      border-radius: 30px; padding: 8px 18px;
      font-size: .95rem; font-weight: 700; letter-spacing: .04em;
    }
    .flyer-token-dot { width: 10px; height: 10px; border-radius: 50%; background: #fde68a; }

    /* Body */
    .flyer-body { padding: 36px 40px; }

    /* Steps */
    .step-section { margin-bottom: 32px; }
    .step-section-title {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: #6b7280; margin-bottom: 16px;
      display: flex; align-items: center; gap: 8px;
    }
    .step-section-title::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
    .steps { display: flex; flex-direction: column; gap: 14px; }
    .step { display: flex; align-items: flex-start; gap: 14px; }
    .step-num {
      width: 32px; height: 32px; border-radius: 50%;
      background: #eff6ff; color: #1a56db;
      font-weight: 800; font-size: .85rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; border: 2px solid #bfdbfe;
    }
    .step-num.purple { background: #f5f3ff; color: #7c3aed; border-color: #c4b5fd; }
    .step-content { padding-top: 4px; }
    .step-content strong { font-size: .9rem; display: block; margin-bottom: 2px; }
    .step-content span { font-size: .82rem; color: #6b7280; line-height: 1.5; }

    /* Rewards grid */
    .rewards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .reward-card {
      background: #f9fafb; border: 1.5px solid #e5e7eb;
      border-radius: 10px; padding: 14px;
    }
    .reward-pts { font-size: 1.3rem; font-weight: 800; color: #7c3aed; }
    .reward-name { font-size: .82rem; font-weight: 600; color: #111827; margin: 2px 0; }
    .reward-type { font-size: .72rem; color: #9ca3af; text-transform: capitalize; }

    /* QR section */
    .qr-section {
      display: flex; gap: 28px; align-items: center;
      background: linear-gradient(135deg, #f0fdf4, #eff6ff);
      border: 1.5px solid #bbf7d0; border-radius: 14px;
      padding: 24px 28px; margin-top: 32px;
    }
    .qr-img { width: 140px; height: 140px; flex-shrink: 0; border-radius: 10px; }
    .qr-text h3 { font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
    .qr-text p  { font-size: .82rem; color: #374151; line-height: 1.6; margin-bottom: 12px; }
    .qr-url {
      font-family: monospace; font-size: .9rem; font-weight: 700;
      color: #1a56db; background: #fff; padding: 6px 14px;
      border-radius: 8px; border: 1.5px solid #bfdbfe; display: inline-block;
    }

    /* Footer */
    .flyer-footer {
      padding: 18px 40px;
      background: #f9fafb;
      border-top: 1.5px solid #e5e7eb;
      display: flex; justify-content: space-between; align-items: center;
      font-size: .75rem; color: #9ca3af;
    }
    .flyer-footer strong { color: #374151; }

    /* ── Print styles ── */
    @media print {
      body { background: #fff; padding: 0; }
      .print-bar { display: none !important; }
      .flyer {
        border-radius: 0; box-shadow: none;
        max-width: 100%; width: 100%;
      }
      @page { margin: 0.6cm; size: A4 portrait; }
    }
  </style>
</head>
<body>

<!-- Print toolbar -->
<div class="print-bar">
  <button class="btn-close" onclick="window.close()">✕ Close</button>
  <button class="btn-print" onclick="window.print()">🖨 Print / Save as PDF</button>
</div>

<!-- Flyer -->
<div class="flyer">

  <!-- Hero -->
  <div class="flyer-hero">
    <% if (program.org_logo) { %>
    <img src="<%= program.org_logo.startsWith('http') ? program.org_logo : 'http://localhost:' + (process.env.PORT || 3000) + program.org_logo %>" class="flyer-org-logo" alt="<%= program.org_name %>">
    <% } else { %>
    <div class="flyer-org-initials"><%= program.org_name[0].toUpperCase() %></div>
    <% } %>
    <div class="flyer-org-name"><%= program.org_name %></div>
    <div class="flyer-headline">Earn Real Digital<br>Loyalty Tokens</div>
    <div class="flyer-subhead">Shop with us. Earn tokens. Redeem for real rewards.</div>
    <% if (program.moochedda_token_symbol) { %>
    <div class="flyer-token-pill">
      <div class="flyer-token-dot"></div>
      <%= program.moochedda_token_name %> (<%= program.moochedda_token_symbol %>)
    </div>
    <% } %>
  </div>

  <!-- Body -->
  <div class="flyer-body">

    <!-- How to Earn -->
    <div class="step-section">
      <div class="step-section-title">How to Earn Tokens</div>
      <div class="steps">
        <div class="step">
          <div class="step-num">1</div>
          <div class="step-content">
            <strong>Get your free MooChedda wallet</strong>
            <span>Visit <strong><%= moocheddaWebUrl %></strong> on your phone or computer. Create a free account — takes 30 seconds.</span>
          </div>
        </div>
        <div class="step">
          <div class="step-num">2</div>
          <div class="step-content">
            <strong>Share your wallet address with us</strong>
            <span>At checkout, give us the wallet address from your MooChedda account. We'll send your tokens directly to it.</span>
          </div>
        </div>
        <div class="step">
          <div class="step-num">3</div>
          <div class="step-content">
            <strong>Earn <%= program.moochedda_token_symbol || 'tokens' %> on every purchase</strong>
            <span>You earn <strong><%= parseFloat(program.points_per_dollar).toFixed(0) %> <%= program.moochedda_token_symbol || 'token' %><%= parseFloat(program.points_per_dollar) !== 1 ? 's' : '' %></strong> for every $1 you spend. Tokens appear in your MooChedda wallet instantly.</span>
          </div>
        </div>
      </div>
    </div>

    <!-- How to Redeem -->
    <div class="step-section">
      <div class="step-section-title">How to Redeem Tokens</div>
      <div class="steps">
        <div class="step">
          <div class="step-num purple">1</div>
          <div class="step-content">
            <strong>Check your balance</strong>
            <span>Log in to <strong><%= moocheddaWebUrl %></strong> to see how many <%= program.moochedda_token_symbol || 'tokens' %> you've earned.</span>
          </div>
        </div>
        <div class="step">
          <div class="step-num purple">2</div>
          <div class="step-content">
            <strong>Come in and redeem</strong>
            <span>Show us your MooChedda wallet balance at the register to claim your reward.</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Rewards -->
    <% if (rewards && rewards.length) { %>
    <div class="step-section">
      <div class="step-section-title">Available Rewards</div>
      <div class="rewards-grid">
        <% rewards.forEach(r => { %>
        <div class="reward-card">
          <div class="reward-pts"><%= r.points_required.toLocaleString() %> <%= program.moochedda_token_symbol || 'pts' %></div>
          <div class="reward-name"><%= r.name %></div>
          <div class="reward-type"><%= r.reward_type %><% if(r.value){%> · $<%= parseFloat(r.value).toFixed(2) %><%}%></div>
        </div>
        <% }) %>
      </div>
    </div>
    <% } %>

    <!-- QR Code -->
    <div class="qr-section">
      <img src="<%= qrDataUrl %>" class="qr-img" alt="Scan to visit MooChedda">
      <div class="qr-text">
        <h3>Get Your Free Wallet</h3>
        <p>Scan the QR code or visit the link below to create your free MooChedda wallet. It's where your <%= program.moochedda_token_symbol || 'loyalty tokens' %> will live — yours to keep forever.</p>
        <div class="qr-url"><%= moocheddaWebUrl %></div>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <div class="flyer-footer">
    <span>
      <strong><%= program.org_name %></strong>
      <% if (program.org_address) { %> · <%= program.org_address %><% if(program.org_city){%>, <%= program.org_city %><%}%><% } %>
      <% if (program.org_phone) { %> · <%= program.org_phone %><% } %>
    </span>
    <span>Powered by <strong>MooChedda</strong></span>
  </div>

</div>

</body>
</html>
