import { getCurrentYear } from "../../../utils/helpers"

export const featuresShowcaseEmail = (name: string): string => {
  return `
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Custom Software Development & System Integrations Services" />
    <meta name="author" content="Moweb" />
    <title>Email - Moweb</title>
    <style type="text/css" rel="stylesheet">
      @import url("https://use.typekit.net/vif5dvu.css");

      body,
      html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding: 0;
        margin: 0;
      }

      *,
      ::after,
      ::before {
        box-sizing: border-box;
      }

      body,
      html,
      p {
        font-family: "proxima-nova", sans-serif;
        color: #000000;
        font-size: 17px;
        line-height: 25px;
        font-weight: 400;
      }

      body {
        background: #fafafa;
      }

      center {
        width: 600px;
        text-align: center;
        margin: 50px auto;
      }

      .email-top {
        height: 3px;
        background-color: #111111;
        margin-top: 36px;
      }

      .email-bottom {
        margin-bottom: 36px;
        height: 3px;
        background-color: #111111;
      }

      .email-body {
        background: #E5F6EF;
        padding: 40px 30px;
        margin: 20px 0;
        text-align: left;
      }

      .feature-section {
        display: flex;
        align-items: center;
        margin: 30px 0;
        text-align: left;
        width: 100%;
        gap: 20px;
      }

      .image-container {
        width: 100%;
      }

      .feature-image {
        width: 100%;
      }

      .feature-content {
        width: 100%;
      }

      .feature-title {
        font-size: 24px;
        font-weight: 700;
        color: #000000;
        padding-bottom: 10px;
        line-height: 36px;
        margin-block: 0px;
      }

      .feature-description {
        font-size: 18px;
        color: #000000;
        line-height: 26px;
        margin-block: 0px;
      }

      .feature-description-second {
        padding-top: 5px;
        font-size: 18px;
        color: #000000;
        line-height: 26px;
        margin-block: 0px;
      }

      .contact-info {
        background: #fff;
        padding: 20px;
        margin: 20px 0;
        border-radius: 8px;
        text-align: center;
      }

      .contact-info h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: 700;
        color: #111111;
      }

      .contact-info p {
        margin: 5px 0;
        font-size: 16px;
        color: #111111;
      }

      .contact-info a {
        color: #2f855a;
        text-decoration: none;
      }

      .contact-info a:hover {
        text-decoration: underline;
      }

      @media (max-width: 650px) {
        center {
          width: 430px;
        }

        .feature-section {
          flex-direction: column !important;
          text-align: center;
          justify-content: center !important;
        }

        .feature-content {
          max-width: 100% !important;
          padding: 0 !important;
        }

        .image-container {
          width: 100%;
        }

        .feature-image {
          width: 150px;
          height: 120px;
        }

        .email-body {
          padding: 30px 20px;
        }

        .header-title {
          font-size: 28px;
        }
      }

      @media (max-width: 420px) {
        center {
          width: 100%;
          padding: 0 15px;
          margin: 30px 0;
        }

        .email-body {
          padding: 20px 15px;
          margin: 10px 0;
        }

        .header-title {
          font-size: 24px;
        }

        .header-subtitle {
          font-size: 16px;
        }

        .feature-title {
          font-size: 20px;
        }

        .feature-description {
          font-size: 14px;
        }

        .feature-image {
          width: 120px;
          height: 100px;
        }

        .image-container {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <center>
      <img src="cid:unique@cidLogo" alt="Costify Logo" height="50" />
      <p style="text-align:left; margin-top: 20px; font-size: 20px; font-weight: 700;">Hello,</p>
      <p style="text-align:left; margin-top: 10px; font-size: 15px; line-height:1.3">If we could offer project cost & time intelligence setup for FREE (or at a massive discount) for <b>${name}</b> to help you gain real-time visibility into project costs, control overruns, and improve profitability would that be of interest?</p>
      <p style="text-align:left; font-size: 15px; line-height:1.3">We work with project-driven businesses that struggle with delayed cost visibility, spreadsheet dependency, and profit surprises at project closure. Our platform, Costifys, helps teams track actual vs planned costs, time utilization, and margins while the project is still running.</p>
      <p style="text-align:left; font-size: 15px; line-height:1.3">If this sounds relevant, I’d love to schedule a quick 15-minute call to understand your current process and see if this would be valuable for you.</p>
      <div class="email-top"></div>
      <div class="email-body">
        <div class="feature-section">
          <div class="feature-content">
            <h2 class="feature-title">Employee Onboarding</h2>
            <p class="feature-description">Onboard employees easily with personal and professional details.</p>
          </div>
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/employe-onboarding.png" alt="Employee Onboarding" class="feature-image">
          </div>
        </div>

        <div class="feature-section">
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/dynamic-payroll.png" alt="Dynamic Payroll Structure" class="feature-image">
          </div>
          <div class="feature-content">
            <h2 class="feature-title">Dynamic Payroll Structure</h2>
            <p class="feature-description">Auto salary calculation from CTC.</p>
            <p class="feature-description-second">Manage HRA, TA, DA, allowances, TDS & other deductions easily</p>
          </div>
        </div>

        <div class="feature-section">
          <div class="feature-content">
            <h2 class="feature-title">Role & Permission-Based Access</h2>
            <p class="feature-description">Assign access by role to ensure users see only what they're allowed to manage.</p>
          </div>
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/role-based-access.png" alt="Role & Permission-Based Access" class="feature-image">
          </div>
        </div>

        <div class="feature-section">
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/client-and-project.png" alt="Client & Project Management" class="feature-image">
          </div>
          <div class="feature-content">
            <h2 class="feature-title">Client & Project Management</h2>
            <p class="feature-description">Create clients & manage projects<br>
              Set budget and deadlines<br>
              Assign projects to employees</p>
          </div>
        </div>

        <div class="feature-section">
          <div class="feature-content">
            <h2 class="feature-title">Daily Activity Tracking</h2>
            <p class="feature-description">Track every minute spent on projects<br>
              Track cost per spent time automatically</p>
          </div>
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/daily-activity.png" alt="Daily Activity Tracking" class="feature-image">
          </div>
        </div>

        <div class="feature-section">
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/project-time.png" alt="Project Time Spent Report" class="feature-image">
          </div>
          <div class="feature-content">
            <h2 class="feature-title">Project Time Spent Report</h2>
            <p class="feature-description">Track project-wise hours spent by each employee with detailed activity logs and timelines.</p>
          </div>
        </div>

        <div class="feature-section">
          <div class="feature-content">
            <h2 class="feature-title">Project Cost Report</h2>
            <p class="feature-description">Track total project cost based on employee time and salary rates.</p>
          </div>
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/project-cost.png" alt="Project Cost Report" class="feature-image">
          </div>
        </div>

        <div class="feature-section">
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/project-risk.png" alt="Project Risk Alert" class="feature-image">
          </div>
          <div class="feature-content">
            <h2 class="feature-title">Project Risk Alert</h2>
            <p class="feature-description">Get alerts when a project is close to exceeding its budget.</p>
          </div>
        </div>

        <div class="feature-section">
          <div class="feature-content">
            <h2 class="feature-title">Leave Configuration & Leave Application Flow</h2>
            <p class="feature-description">Manage leave requests with role-based approval workflow.</p>
          </div>
          <div class="image-container">
            <img src="https://costifys-back.workzy.co/static-images/image/leave-configuration.png" alt="Leave Configuration & Application Flow" class="feature-image">
          </div>
        </div>

        <div class="feature-section">
          <div class="image-container">
             <img src="https://costifys-back.workzy.co/static-images/image/monthly-payslip.png" alt="Monthly Payslip Generation" class="feature-image">
          </div>
          <div class="feature-content">
            <h2 class="feature-title">Monthly Payslip Generation</h2>
            <p class="feature-description">Generate monthly payslips with salary breakdown and deductions.</p>
            <p class="feature-description-second">Add bonuses, deductions, or adjustments before payroll finalization.</p>
          </div>
        </div>

        <div class="contact-info">
          <h3>Get in Touch</h3>
          <p><strong>Email:</strong> <a href="mailto:hello@costifys.com">hello@costifys.com</a></p>
          <p><strong>Contact:</strong> <a href="tel:6356789060">+91 6356 789 060</a></p>
        </div>

        <div>
          <p style="margin-bottom: 0px">Regards,</p>
          <p style="margin-bottom: 0px">Support Team</p>
          <p style="margin-bottom: 0px">Costifys App</p>
          <p style="margin-bottom: 0px">
            <a href="https://www.costifys.com/">https://www.costifys.com/</a>
          </p>
        </div>
      </div>
      <div class="email-bottom"></div>
      <div class="email-footer">
        <img src="cid:unique@cidLogo" alt="Costify Logo" height="50" />
        <p style="line-height: 18px">${getCurrentYear()} Costifys | All Rights Reserved.</p>
      </div>
    </center>
  </body>
</html>
  `
}
