<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Task Assigned</title>
</head>
<body style="font-family: Arial, sans-serif; background:#f6f6f6; padding:20px;">
  <div style="max-width:600px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;">
    <div style="background:linear-gradient(135deg,#152f78,#3b82f6);padding:32px 24px;">
      <h2 style="margin:0;color:#fff;">New Task Assigned</h2>
    </div>
    <div style="padding:24px;">
      <p>Hi {{employeeName}},</p>
      <p>
        You have been assigned a new task: <strong>{{taskTitle}}</strong>{{#if serviceName}} ({{serviceName}}){{/if}}.
      </p>
      <table style="width:100%;border-collapse:collapse;margin:16px 0;">
        {{#if dueDate}}
        <tr>
          <td style="padding:6px 0;color:#6b7280;">Due Date</td>
          <td style="padding:6px 0;font-weight:bold;">{{dueDate}}</td>
        </tr>
        {{/if}}
        {{#if priority}}
        <tr>
          <td style="padding:6px 0;color:#6b7280;">Priority</td>
          <td style="padding:6px 0;font-weight:bold;">{{priority}}</td>
        </tr>
        {{/if}}
      </table>
      <p>Please review the task and start working on it at the earliest.</p>
      <p style="text-align:center;margin:24px 0;">
        <a href="{{taskUrl}}" style="background:#2563eb;color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none;">
          View Task
        </a>
      </p>
      <p>Regards,<br/>{{companyName}}</p>
    </div>
    <div style="background:#f3f4f6;padding:12px;text-align:center;font-size:12px;color:#6b7280;">
      &copy; {{currentYear}} {{companyName}}. All rights reserved.
    </div>
  </div>
</body>
</html>