<!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;
      }
      .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;
      }
      .warning-box {
        background: #fef2f2;
        border-left: 4px solid #ef4444;
        padding: 16px;
        margin: 20px 0;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Sanasto Wiki</h1>
      <p>Password Reset Request</p>
    </div>

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

      <p>
        We received a request to reset your password for your Sanasto Wiki account.
      </p>

      <p>
        If you made this request, click the button below to set a new password:
      </p>

      <div style="text-align: center;">
        <%= link_to "Reset My Password", @reset_url, class: "button" %>
      </div>

      <div class="expiry-notice">
        This password reset link 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;">
        <%= @reset_url %>
      </p>

      <div class="warning-box">
        <strong>Didn't request a password reset?</strong>
        <p style="margin: 8px 0 0 0;">
          If you didn't make this request, you can safely ignore this email. Your password will remain unchanged.
        </p>
      </div>

      <div class="footer">
        <p>
          For security reasons, this link will only work once and will expire in 1 hour.
        </p>
        <p style="margin-top: 12px;">
          Questions? Reply to this email.
        </p>
      </div>
    </div>
  </body>
</html>
