<!-- Conclusion & Next Steps Page Template -->
<!-- Replace all {{PLACEHOLDERS}} with module-specific content -->
<!-- Design system: standards/page-design.md -->

<div style="max-width: 900px; margin: 0 auto;">

  <h2 style="color: #8C1D40; margin-bottom: 5px;">Conclusion & Next Steps</h2>
  <p style="color: #595959; font-size: 14px; margin-top: 0;">Module {{MODULE_NUMBER}}: {{MODULE_TITLE}}</p>

  <p style="font-size: 16px; line-height: 1.6; color: #333;">
    Great work on Module {{MODULE_NUMBER}}! Let's recap what you've learned and look ahead.
  </p>

  <hr style="border: none; border-top: 1px solid #ddd; margin: 25px 0;">

  <!-- Key Takeaways — Left-Border Info Box -->
  <h3 style="color: #8C1D40; margin-top: 0;">Key Takeaways</h3>
  <div style="background-color: #f8f4f0; border-left: 4px solid #8C1D40; padding: 20px; border-radius: 0 8px 8px 0; margin-bottom: 20px;">
    <ol style="margin: 0; padding-left: 20px; line-height: 1.8; color: #333;">
      <li>{{TAKEAWAY_1}}</li>
      <li>{{TAKEAWAY_2}}</li>
      <li>{{TAKEAWAY_3}}</li>
      <li>{{TAKEAWAY_4}}</li>
    </ol>
  </div>

  <hr style="border: none; border-top: 1px solid #ddd; margin: 25px 0;">

  <!-- Discussion Section -->
  <h3 style="color: #8C1D40;">Discussion: {{DISCUSSION_TITLE}}</h3>
  <p style="color: #333; line-height: 1.6;">
    {{DISCUSSION_INTRO_TEXT}}
  </p>

  <div style="text-align: center; margin: 20px 0;">
    <a href="/courses/{{COURSE_ID}}/discussion_topics/{{DISCUSSION_ID}}"
       style="display: inline-block; background-color: #8C1D40; color: white; padding: 12px 30px; border-radius: 6px; text-decoration: none; font-size: 16px;">
      <strong>Go to Discussion {{MODULE_NUMBER}} →</strong>
    </a>
  </div>

  <hr style="border: none; border-top: 1px solid #ddd; margin: 25px 0;">

  <!-- Self-Assessment -->
  <h3 style="color: #8C1D40;">Self-Assessment</h3>
  <p style="color: #333; line-height: 1.6;">
    Before moving on, check your confidence with each learning objective:
  </p>

  <table style="width: 100%; border-collapse: collapse; margin-bottom: 25px;">
    <thead>
      <tr style="background-color: #8C1D40; color: white;">
        <th style="padding: 10px 15px; text-align: left; border: 1px solid #ddd;">Objective</th>
        <th style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">Confident</th>
        <th style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">Need Review</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background-color: #f9f9f9;">
        <td style="padding: 10px 15px; border: 1px solid #ddd;">{{OBJECTIVE_1}}</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
      </tr>
      <tr>
        <td style="padding: 10px 15px; border: 1px solid #ddd;">{{OBJECTIVE_2}}</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
      </tr>
      <tr style="background-color: #f9f9f9;">
        <td style="padding: 10px 15px; border: 1px solid #ddd;">{{OBJECTIVE_3}}</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
      </tr>
      <tr>
        <td style="padding: 10px 15px; border: 1px solid #ddd;">{{OBJECTIVE_4}}</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
      </tr>
      <tr style="background-color: #f9f9f9;">
        <td style="padding: 10px 15px; border: 1px solid #ddd;">{{OBJECTIVE_5}}</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
        <td style="padding: 10px 15px; text-align: center; border: 1px solid #ddd;">&#9744;</td>
      </tr>
    </tbody>
  </table>

  <p style="color: #333; line-height: 1.6;">
    If you marked "Need Review" for any objective, revisit the lecture video section covering that topic, or check the supplementary resources on the Lesson page.
  </p>

  <hr style="border: none; border-top: 1px solid #ddd; margin: 25px 0;">

  <!-- Connections Forward — Concept Grid -->
  <h3 style="color: #8C1D40;">Connections Forward</h3>
  <p style="color: #333; line-height: 1.6;">
    {{FORWARD_CONNECTION_TEXT}}
  </p>

  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0;">
    <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;">
      <h4 style="color: #8C1D40; margin: 0 0 8px 0;">{{FORWARD_1_TITLE}}</h4>
      <p style="color: #595959; line-height: 1.5; margin: 0; font-size: 14px;">{{FORWARD_1_TEXT}}</p>
    </div>
    <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;">
      <h4 style="color: #8C1D40; margin: 0 0 8px 0;">{{FORWARD_2_TITLE}}</h4>
      <p style="color: #595959; line-height: 1.5; margin: 0; font-size: 14px;">{{FORWARD_2_TEXT}}</p>
    </div>
  </div>

  <!-- Completion Checklist — Full-Card Alert (Green Accent) -->
  <div style="background-color: #f1f8e9; border: 1px solid #c8e6c9; border-radius: 8px; padding: 20px; margin: 25px 0;">
    <h4 style="color: #8C1D40; margin: 0 0 10px 0;">Module {{MODULE_NUMBER}} Checklist</h4>
    <p style="color: #595959; font-size: 14px; margin: 0 0 10px 0;">Make sure you've completed everything before moving on:</p>
    <ul style="list-style: none; padding: 0; margin: 0; line-height: 2.0; color: #333;">
      <li>&#9744; Listened to the Audio Primer</li>
      <li>&#9744; Watched the Lecture Video</li>
      <li>&#9744; Completed Knowledge Check {{MODULE_NUMBER}}</li>
      <li>&#9744; Completed Guided Practice {{MODULE_NUMBER}}</li>
      <li>&#9744; Submitted Create an Artifact {{MODULE_NUMBER}}</li>
      <li>&#9744; Posted to Discussion {{MODULE_NUMBER}} (initial + 2 responses)</li>
    </ul>
  </div>

</div>
