<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contract Signed Successfully</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, #10b981 0%, #059669 100%); padding: 30px; border-radius: 12px 12px 0 0; text-align: center;">
        <h1 style="color: white; margin: 0; font-size: 24px;">Contract Signed Successfully</h1>
        <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0 0;">Your signature has been recorded</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>Thank you for signing the contract with <strong>{{ business_name }}</strong>. Your signature has been successfully recorded.</p>

        <div style="background: #d1fae5; border: 1px solid #10b981; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <h2 style="color: #065f46; font-size: 18px; margin-top: 0;">{{ contract_title }}</h2>
            <p style="color: #065f46; margin: 10px 0 0 0;">
                <strong>Signed on:</strong> {{ signed_at|date:"F j, Y \a\t g:i A" }}
            </p>
        </div>

        <p>A copy of the signed contract has been provided for your records. {{ business_name }} also has a copy on file.</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, please contact {{ business_name }}.
        </p>
    </div>
</body>
</html>
