<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Appointment Reminder</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { text-align: center; padding: 20px 0; }
        .logo { max-height: 60px; }
        .content { background-color: #f9f9f9; padding: 20px; border-radius: 5px; }
        .appointment-details { background-color: white; padding: 15px; border-radius: 5px; margin: 15px 0; border-left: 4px solid #3fb7fe; }
        .button { display: inline-block; padding: 10px 20px; background-color: #3fb7fe; color: white; text-decoration: none; border-radius: 5px; margin: 15px 0; }
        .footer { text-align: center; margin-top: 20px; font-size: 12px; color: #777; }
    </style>
</head>
<body>
    <div class="header">
        <img src="{{logo_url}}" alt="JV Overseas Education" class="logo">
    </div>
    
    <div class="content">
        <h2>Appointment Reminder</h2>
        <p>Hello {{name}},</p>
        <p>This is a reminder for your upcoming appointment with {{counselor_name}}.</p>
        
        <div class="appointment-details">
            <p><strong>Date & Time:</strong> {{appointment_time}}</p>
            <p><strong>Duration:</strong> {{duration}} minutes</p>
            <p><strong>Type:</strong> {{appointment_type}}</p>
            <p><strong>Meeting Link:</strong> <a href="{{meeting_link}}">Join Google Meet</a></p>
        </div>
        
        <p>Please ensure you're prepared with any documents or questions you may have.</p>
        
        <p>If you need to reschedule or cancel your appointment, please contact us at least 24 hours in advance.</p>
        
        <p><a href="{{dashboard_link}}" class="button">View in Dashboard</a></p>
    </div>
    
    <div class="footer">
        <p>© {{year}} JV Overseas Education. All rights reserved.</p>
        <p>Lotis Towers, Kampala Road, Kampala, Uganda</p>
    </div>
</body>
</html>