{% extends "authentication/email/base_email.html" %}

{% block content %}
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 48px 0 32px 0; text-align:center;">
      <div style="display:inline-block; width:72px; height:72px; background:linear-gradient(135deg, #1A4D3C, #0D3327); border-radius:50%; line-height:72px; text-align:center; font-size:28px; margin-bottom:24px;">
        🎊
      </div>
      <h1 style="font-family:'Playfair Display','Georgia',serif; font-size:30px; font-weight:700; color:#1A4D3C; line-height:1.2; margin-bottom:16px;">
        Welcome, {{ user_first_name|default:"Fashion Lover" }}!
      </h1>
      <p style="font-family:'Inter',Arial,sans-serif; font-size:16px; color:#555; line-height:1.6; max-width:440px; margin:0 auto;">
        Your Fashionistar account is now fully verified and ready to use.
        Nigeria's most exciting fashion experience awaits you.
      </p>
    </td>
  </tr>

  <!-- Success badge -->
  <tr>
    <td style="padding: 0 0 32px 0; text-align:center;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="background: linear-gradient(135deg, #1A4D3C 0%, #0D3327 100%); border-radius:16px; padding:32px 40px; text-align:center;">
            <div style="display:inline-block; background:rgba(245,166,35,0.2); border:2px solid #F5A623; border-radius:50px; padding:10px 28px; margin-bottom:20px;">
              <span style="font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:700; color:#F5A623; letter-spacing:1px; text-transform:uppercase;">
                ✓ Account Verified
              </span>
            </div>
            <p style="font-family:'Inter',Arial,sans-serif; font-size:15px; color:rgba(255,255,255,0.85); line-height:1.7; margin-bottom:28px;">
              You now have full access to Fashionistar's marketplace.<br>
              Discover, shop, and sell fashion like never before.
            </p>
            <a href="{{ SITE_URL }}"
               style="display:inline-block; padding:16px 48px; background:linear-gradient(135deg, #F5A623, #FDB835); color:#1A1A1A; font-family:'Inter',Arial,sans-serif; font-size:15px; font-weight:700; border-radius:50px; text-decoration:none; box-shadow:0 4px 20px rgba(245,166,35,0.4);">
              Go to Fashionistar →
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- Quick links -->
  <tr>
    <td style="padding: 0 0 48px 0;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td width="33%" style="padding:0 8px 0 0; vertical-align:top; text-align:center;">
            <a href="{{ SITE_URL }}/shop/" style="display:block; background:#F9F7F0; border-radius:12px; padding:20px 12px; text-decoration:none; border:1px solid #EBEBEB;">
              <div style="font-size:24px; margin-bottom:8px;">🛍️</div>
              <p style="font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:600; color:#1A4D3C; margin:0;">Browse Shop</p>
            </a>
          </td>
          <td width="33%" style="padding:0 4px; vertical-align:top; text-align:center;">
            <a href="{{ SITE_URL }}/profile/" style="display:block; background:#F9F7F0; border-radius:12px; padding:20px 12px; text-decoration:none; border:1px solid #EBEBEB;">
              <div style="font-size:24px; margin-bottom:8px;">👤</div>
              <p style="font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:600; color:#1A4D3C; margin:0;">My Profile</p>
            </a>
          </td>
          <td width="33%" style="padding:0 0 0 8px; vertical-align:top; text-align:center;">
            <a href="{{ SITE_URL }}/vendor/register/" style="display:block; background:#F9F7F0; border-radius:12px; padding:20px 12px; text-decoration:none; border:1px solid #EBEBEB;">
              <div style="font-size:24px; margin-bottom:8px;">🏪</div>
              <p style="font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:600; color:#1A4D3C; margin:0;">Sell on Fashionistar</p>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
{% endblock %}