<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        color: #334155;
        max-width: 640px;
        margin: 0 auto;
        padding: 20px;
      }
      .header {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        padding: 30px;
        border-radius: 8px 8px 0 0;
        text-align: center;
      }
      .header h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
      }
      .header p {
        margin: 8px 0 0 0;
        opacity: 0.9;
      }
      .content {
        background: white;
        border: 1px solid #e2e8f0;
        border-top: none;
        padding: 30px;
        border-radius: 0 0 8px 8px;
      }
      .greeting {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #1e293b;
      }
      .info-box {
        background: #f8fafc;
        border-left: 4px solid #6366f1;
        padding: 16px;
        margin: 20px 0;
        border-radius: 4px;
      }
      .info-box strong {
        color: #1e293b;
      }
      .button {
        display: inline-block;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        padding: 14px 32px;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        margin: 24px 0;
        text-align: center;
      }
      .button:hover {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
      }
      .footer {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
        font-size: 14px;
        color: #64748b;
      }
      .expiry-notice {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 12px;
        margin: 16px 0;
        font-size: 14px;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Sanasto Wiki</h1>
      <p>Kristillisyyden sanasto</p>
    </div>

    <div class="content">
      <p class="greeting">Hello <%= @user.name %>,</p>

      <p>
        The <strong>Sanasto Wiki</strong> let you search and compare, or download, translations across languages used all over the living Christianity.
      </p>

      <p>You are invited to contribute to this work.</p>

      <div class="info-box">
        <p style="margin: 0;"><strong>Your Account Details:</strong></p>
        <p style="margin: 8px 0 0 0;">
          Email: <%= @user.email %><br>
          Role: <%= @user.role.titleize %>
        </p>
      </div>

      <p>
        To accept this invitation and set your password, click the button below:
      </p>

      <div style="text-align: center;">
        <%= link_to "Accept Invitation", @invitation_url, class: "button" %>
      </div>

      <div class="expiry-notice">
        This invitation will expire on <strong><%= @expires_at.strftime("%B %d, %Y at %I:%M %p %Z") %></strong>.
      </div>

      <p>
        You can also copy and paste this link into your browser:
      </p>
      <p style="word-break: break-all; color: #6366f1; font-size: 14px;">
        <%= @invitation_url %>
      </p>

      <div class="footer">
        <p>
          If you weren't expecting this invitation, you can safely ignore this email.
        </p>
        <p style="margin-top: 12px;">
          Questions? Reply to this email.
        </p>
      </div>
    </div>
  </body>
</html>
