<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Appointment Reminder</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 40px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .business-name {
            font-size: 24px;
            font-weight: bold;
            color: #6366f1;
        }
        .reminder-badge {
            display: inline-block;
            background-color: #fef3c7;
            color: #92400e;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
        }
        h1 {
            color: #1f2937;
            font-size: 24px;
            margin-bottom: 20px;
        }
        p {
            color: #4b5563;
            margin-bottom: 15px;
        }
        .appointment-card {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 12px;
            padding: 25px;
            margin: 25px 0;
            color: white;
        }
        .appointment-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .appointment-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .appointment-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .appointment-icon {
            width: 20px;
            height: 20px;
            opacity: 0.9;
        }
        .appointment-label {
            opacity: 0.9;
            font-size: 14px;
        }
        .appointment-value {
            font-weight: 500;
        }
        .calendar-icon::before { content: "📅"; }
        .clock-icon::before { content: "🕐"; }
        .duration-icon::before { content: "⏱️"; }
        .staff-icon::before { content: "👤"; }
        .info-box {
            background-color: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
        }
        .info-box h3 {
            color: #0369a1;
            font-size: 14px;
            margin: 0 0 8px 0;
        }
        .info-box p {
            color: #0c4a6e;
            margin: 0;
            font-size: 14px;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
            color: #9ca3af;
            font-size: 14px;
        }
        .footer a {
            color: #6366f1;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="business-name">{{ business_name }}</div>
        </div>

        <div style="text-align: center;">
            <span class="reminder-badge">⏰ {{ hours_before }} Hour Reminder</span>
        </div>

        <h1>Your Upcoming Appointment</h1>

        <p>Hi there,</p>

        <p>
            This is a friendly reminder about your upcoming appointment at <strong>{{ business_name }}</strong>.
            We're looking forward to seeing you!
        </p>

        <div class="appointment-card">
            <div class="appointment-title">{{ event.title }}</div>
            <div class="appointment-details">
                <div class="appointment-row">
                    <span class="calendar-icon"></span>
                    <span class="appointment-value">{{ event_date }}</span>
                </div>
                <div class="appointment-row">
                    <span class="clock-icon"></span>
                    <span class="appointment-value">{{ event_time }}</span>
                </div>
                <div class="appointment-row">
                    <span class="duration-icon"></span>
                    <span class="appointment-value">{{ duration_minutes }} minutes</span>
                </div>
                {% if staff_names %}
                <div class="appointment-row">
                    <span class="staff-icon"></span>
                    <span class="appointment-value">{{ staff_names|join:", " }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="info-box">
            <h3>Need to make changes?</h3>
            <p>
                If you need to reschedule or cancel your appointment, please contact us as soon as possible
                so we can accommodate your needs.
            </p>
        </div>

        <p>
            We recommend arriving 5-10 minutes early to ensure a smooth check-in process.
        </p>

        <p>See you soon!</p>
        <p><strong>The {{ business_name }} Team</strong></p>

        <div class="footer">
            <p>
                This reminder was sent by {{ business_name }} using SmoothSchedule.<br>
                <a href="#">Manage your notification preferences</a>
            </p>
            <p>&copy; {% now "Y" %} {{ business_name }}. All rights reserved.</p>
        </div>
    </div>
</body>
</html>
