<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{companyName}}</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #1f2937;
      background-color: #f3f4f6;
      margin: 0;
      padding: 0;
    }
    .email-wrapper {
      max-width: 600px;
      margin: 0 auto;
      padding: 40px 20px;
    }
    .email-container {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    .email-header {
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      padding: 32px;
      text-align: center;
    }
    .email-logo {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      letter-spacing: -0.5px;
    }
    .email-tagline {
      color: #94a3b8;
      font-size: 14px;
      margin: 8px 0 0 0;
    }
    .email-body {
      padding: 40px 32px;
    }
    .email-title {
      font-size: 24px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 16px 0;
    }
    .email-text {
      font-size: 16px;
      color: #4b5563;
      margin: 0 0 24px 0;
    }
    .email-highlight-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 24px;
      margin: 24px 0;
    }
    .email-metric {
      text-align: center;
      padding: 16px;
    }
    .email-metric-value {
      font-size: 36px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    }
    .email-metric-label {
      font-size: 14px;
      color: #64748b;
      margin: 4px 0 0 0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .email-table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
    }
    .email-table td {
      padding: 12px 0;
      border-bottom: 1px solid #e5e7eb;
      font-size: 15px;
    }
    .email-table td:first-child {
      color: #6b7280;
    }
    .email-table td:last-child {
      text-align: right;
      font-weight: 500;
      color: #1f2937;
    }
    .email-table tr:last-child td {
      border-bottom: none;
      font-weight: 600;
    }
    .email-button {
      display: inline-block;
      background: #1e293b;
      color: #ffffff !important;
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      margin: 24px 0;
    }
    .email-button-secondary {
      background: #f1f5f9;
      color: #1e293b !important;
    }
    .email-alert {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 16px;
      margin: 24px 0;
      border-radius: 0 8px 8px 0;
    }
    .email-alert-error {
      background: #fee2e2;
      border-left-color: #ef4444;
    }
    .email-alert-success {
      background: #dcfce7;
      border-left-color: #22c55e;
    }
    .email-alert-info {
      background: #dbeafe;
      border-left-color: #3b82f6;
    }
    .email-footer {
      background: #f8fafc;
      padding: 24px 32px;
      text-align: center;
      border-top: 1px solid #e5e7eb;
    }
    .email-footer-text {
      font-size: 13px;
      color: #9ca3af;
      margin: 0 0 12px 0;
    }
    .email-footer-links a {
      color: #6b7280;
      text-decoration: none;
      margin: 0 8px;
      font-size: 13px;
    }
    .email-footer-links a:hover {
      color: #1f2937;
    }
    .email-divider {
      border: 0;
      height: 1px;
      background: #e5e7eb;
      margin: 24px 0;
    }
    @media only screen and (max-width: 600px) {
      .email-wrapper {
        padding: 20px 12px;
      }
      .email-body {
        padding: 28px 20px;
      }
      .email-header {
        padding: 24px 20px;
      }
      .email-title {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="email-wrapper">
    <div class="email-container">
      <div class="email-header">
        <h1 class="email-logo">{{companyName}}</h1>
        <p class="email-tagline">AI-Powered Bulk Calling Platform</p>
      </div>
      
    <div class="email-body">
      <h2 class="email-title">Campaign Completed</h2>
      <p class="email-text">
        Hi {{userName}},
      </p>
      <p class="email-text">
        Great news! Your campaign "<strong>{{campaignName}}</strong>" has finished running.
      </p>
      <div class="email-highlight-box">
        <table style="width: 100%; text-align: center;">
          <tr>
            <td style="padding: 16px;">
              <p class="email-metric-value">{{callsCompleted}}</p>
              <p class="email-metric-label">Calls Completed</p>
            </td>
            <td style="padding: 16px;">
              <p class="email-metric-value">{{callsSuccessful}}</p>
              <p class="email-metric-label">Successful Calls</p>
            </td>
            <td style="padding: 16px;">
              <p class="email-metric-value">{{successRate}}%</p>
              <p class="email-metric-label">Success Rate</p>
            </td>
          </tr>
        </table>
      </div>
      <div class="email-alert email-alert-success">
        <strong>Campaign completed successfully!</strong> View detailed analytics and transcripts in your dashboard.
      </div>
      <a href="{{campaignUrl}}" class="email-button">View Campaign Results</a>
    </div>
  
      <div class="email-footer">
        <p class="email-footer-text">
          &copy; 2025 {{companyName}}. All rights reserved.
        </p>
        <p class="email-footer-links">
          <a href="{{unsubscribeUrl}}">Unsubscribe</a> |
          <a href="{{privacyUrl}}">Privacy Policy</a> |
          <a href="{{supportUrl}}">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</body>
</html>