<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contract Signed by Customer</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</h1>
        <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0 0;">A customer has signed a contract</p>
    </div>

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

        <p>Great news! <strong>{{ customer_name }}</strong> has signed a contract.</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>
            <div style="margin-top: 15px;">
                <div style="color: #065f46; margin-bottom: 8px;">
                    <strong>Customer:</strong> {{ customer_name }}
                </div>
                <div style="color: #065f46;">
                    <strong>Signed on:</strong> {{ signed_at|date:"F j, Y \a\t g:i A" }}
                </div>
            </div>
        </div>

        <p>The signed contract is now available in your contracts dashboard.</p>

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

        <p style="color: #6b7280; font-size: 14px;">
            This is an automated notification from {{ business_name }}.
        </p>
    </div>
</body>
</html>
