<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reminder: Contract Signature Required</title>
</head>
<body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #374151; max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); padding: 30px; border-radius: 12px 12px 0 0; text-align: center;">
        <h1 style="color: white; margin: 0; font-size: 24px;">Reminder: Signature Required</h1>
        <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0 0;">Your signature is still needed for a contract from {{ business_name }}</p>
    </div>

    <div style="background: #ffffff; padding: 30px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px;">
        <p>Hi {{ customer_first_name|default:customer_name }},</p>

        <p>This is a friendly reminder that <strong>{{ business_name }}</strong> is still waiting for your signature on a contract.</p>

        <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <h2 style="color: #92400e; font-size: 18px; margin-top: 0;">{{ contract_title }}</h2>
            {% if expires_at %}
            <p style="color: #92400e; margin: 10px 0 0 0;">
                <strong>Please sign by:</strong> {{ expires_at|date:"F j, Y" }}
            </p>
            {% endif %}
        </div>

        <p>Please take a moment to review and sign the contract using the link below.</p>

        <div style="text-align: center; margin: 30px 0;">
            <a href="{{ signing_url }}" style="display: inline-block; background: #f59e0b; color: white; padding: 14px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px;">Review & Sign Contract</a>
        </div>

        <p style="color: #6b7280; font-size: 14px; text-align: center; margin: 20px 0;">
            Or copy and paste this link into your browser:<br>
            <a href="{{ signing_url }}" style="color: #f59e0b; word-break: break-all;">{{ signing_url }}</a>
        </p>

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

        <p style="color: #6b7280; font-size: 14px;">
            If you have any questions about this contract, please contact {{ business_name }} directly.
        </p>
    </div>
</body>
</html>
