<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skill Assessment Challenge</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #f8fafc;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        color: #334155;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .wrapper {
        width: 100%;
        padding: 40px 20px;
        box-sizing: border-box;
        background-color: #f8fafc;
      }

      .card {
        max-width: 600px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
      }

      .header {
        background: linear-gradient(135deg, #1e40af, #0284c7);
        padding: 36px 32px;
        text-align: center;
        color: #ffffff;
      }

      .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.025em;
      }

      .header p {
        margin: 8px 0 0;
        font-size: 14px;
        opacity: 0.9;
        font-weight: 500;
      }

      .body {
        padding: 32px 32px 24px;
      }

      .greeting {
        margin: 0 0 16px 0;
        font-size: 18px;
        font-weight: 600;
        color: #0f172a;
      }

      .intro-text {
        font-size: 15px;
        line-height: 1.6;
        color: #475569;
        margin: 0 0 24px 0;
      }

      .task-details-box {
        background-color: #f1f5f9;
        border-left: 4px solid #0284c7;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 24px;
      }

      .task-title-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        font-weight: 700;
        margin-bottom: 4px;
      }

      .task-title {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 12px 0;
      }

      .task-instructions-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        font-weight: 700;
        margin-bottom: 6px;
      }

      .task-instructions {
        font-size: 14px;
        line-height: 1.6;
        color: #334155;
      }

      .task-instructions p {
        margin: 0 0 10px 0;
      }
      .task-instructions p:last-child {
        margin-bottom: 0;
      }

      .cta-container {
        text-align: center;
        margin: 32px 0;
      }

      .cta-button {
        display: inline-block;
        background-color: #2563eb;
        color: #ffffff !important;
        text-decoration: none;
        padding: 14px 30px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
        transition: background-color 0.2s;
      }

      .cta-button:hover {
        background-color: #1d4ed8;
      }

      .closing-text {
        font-size: 14px;
        line-height: 1.6;
        color: #64748b;
        margin-top: 24px;
        border-top: 1px solid #e2e8f0;
        padding-top: 20px;
      }

      .footer {
        padding: 24px 32px 32px;
        font-size: 12px;
        color: #94a3b8;
        text-align: center;
        background-color: #f8fafc;
        border-top: 1px solid #f1f5f9;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
      }

      .footer a {
        color: #64748b;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="card">
        <div class="header">
          <h1>Assessment Challenge</h1>
          <p>Please review and complete the assigned challenge details below</p>
        </div>

        <div class="body">
          <p class="greeting">Dear {{name}},</p>
          <p class="intro-text">
            Thank you for applying to join our team. As the next stage of our evaluation process, we would like to invite you to complete a practical skills assessment.
          </p>

          <div class="task-details-box">
            <div class="task-title-label">Challenge Title</div>
            <div class="task-title">{{title}}</div>
            
            <div class="task-instructions-label">Instructions / Details</div>
            <div class="task-instructions">{{description}}</div>
          </div>

          <p class="intro-text">
            Please use the button below to access the task page, where you can view full details, download reference files, and upload your final submission.
          </p>

          <div class="cta-container">
            <a href="{{link}}" target="_blank" class="cta-button">Access Challenge Portal</a>
          </div>

          <p class="closing-text">
            We kindly ask you to submit your response by the deadline specified in the portal. If you encounter any technical issues, please feel free to reach out to our recruitment team.
            <br /><br />
            Sincerely,<br />
            <strong>Recruitment & Talent Team</strong>
          </p>
        </div>

        <div class="footer">
          This is an automated message sent from Team Tracker. Please do not reply directly to this email.<br />
          &copy; 2026 Team Tracker. All rights reserved.
        </div>
      </div>
    </div>
  </body>
</html>
