'smtp.hostinger.com','port'      => 465,'secure'    => 'ssl','user'      => 'glow@aesthetiq.ca','pass'      => 'YOUR_EMAIL_PASSWORD_HERE','from'      => 'glow@aesthetiq.ca','from_name' => 'AesthetIQ RSVP Desk','to_notify' => 'glow@aesthetiq.ca',];// ============================================================================// 2. BACKEND AJAX HANDLER (RUNS ON FORM SUBMISSION)// ============================================================================if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_rsvp') {header('Content-Type: application/json; charset=utf-8');$name     = trim(filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS));
$email    = trim(filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL));
$phone    = trim(filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_SPECIAL_CHARS));
$date     = trim(filter_input(INPUT_POST, 'date', FILTER_SANITIZE_SPECIAL_CHARS));
$time     = trim(filter_input(INPUT_POST, 'time', FILTER_SANITIZE_SPECIAL_CHARS));
$guests   = trim(filter_input(INPUT_POST, 'guests', FILTER_SANITIZE_SPECIAL_CHARS));
$interest = trim(filter_input(INPUT_POST, 'interest', FILTER_SANITIZE_SPECIAL_CHARS));

if (empty(\(name) || empty(\)email) || empty(\(phone) || empty(\)date) || empty($time)) {
    echo json_encode(['success' => false, 'message' => 'Please fill in all required fields marked with an asterisk (*).']);
    exit;
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo json_encode(['success' => false, 'message' => 'Please enter a valid email address.']);
    exit;
}

\(subject = "New Open House RSVP: {\)name} - {\(date} at {\)time}";
$body = "
New Open House RSVP ReceivedElgin Street Dental Centre • AesthetIQ Face & BodyGuest Name{$name}Email{$email}Phone{$phone}Selected Date{$date}Selected Time{$time}Party Size{$guests}Area of Interest" . (!empty($interest) ?$interest : 'General exploration / Not specified') . "Sent securely via the Open House RSVP portal at openhouse.elgindental.com.";$dispatch = send_smtp_socket_mail(
    $smtp_config['to_notify'],
    $subject,
    $body,
    $email,
    $name,
    $smtp_config
);

if ($dispatch['success']) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => 'Mailer Error: ' . $dispatch['error']]);
}
exit;
}function send_smtp_socket_mail($to,$subject, $html_message,$reply_to, $reply_name,$cfg) {$timeout = 15;$host_conn = ($cfg['secure'] === 'ssl') ? 'ssl://' . $cfg['host'] :$cfg['host'];\(socket = @fsockopen(\)host_conn, \(cfg['port'],\)errno, \(errstr,\)timeout);
if (!$socket) {
    return ['success' => false, 'error' => "Cannot connect to mail host: {\(errstr} ({\)errno})"];
}

\(read = function() use (\)socket) {
    $data = '';
    while (\(str = fgets(\)socket, 515)) {
        \(data .=\)str;
        if (substr($str, 3, 1) === ' ') break;
    }
    return $data;
};

$read();
fputs(\(socket, "EHLO " . (\)_SERVER['SERVER_NAME'] ?? 'localhost') . "\r\n");
$read();

if ($cfg['secure'] === 'tls') {
    fputs($socket, "STARTTLS\r\n");
    \(tls_res =\)read();
    if (substr($tls_res, 0, 3) !== '220') {
        fclose($socket);
        return ['success' => false, 'error' => 'STARTTLS negotiation failed.'];
    }
    stream_socket_enable_crypto($socket, true, STREAM_CRYPTO_METHOD_TLS_CLIENT);
    fputs(\(socket, "EHLO " . (\)_SERVER['SERVER_NAME'] ?? 'localhost') . "\r\n");
    $read();
}

fputs($socket, "AUTH LOGIN\r\n");
$read();
fputs(\(socket, base64_encode(\)cfg['user']) . "\r\n");
$read();
fputs(\(socket, base64_encode(\)cfg['pass']) . "\r\n");
\(auth_res =\)read();
if (substr($auth_res, 0, 3) !== '235') {
    fclose($socket);
    return ['success' => false, 'error' => 'Authentication failed. Please check SMTP username and password in index.php.'];
}

fputs(\(socket, "MAIL FROM: <{\)cfg['from']}>\r\n");
$read();
fputs(\(socket, "RCPT TO: <{\)to}>\r\n");
$read();
fputs($socket, "DATA\r\n");
$read();

$headers = [
    "MIME-Version: 1.0",
    "Content-Type: text/html; charset=UTF-8",
    "From: =?UTF-8?B?" . base64_encode(\(cfg['from_name']) . "?= <{\)cfg['from']}>",
    "Reply-To: =?UTF-8?B?" . base64_encode(\(reply_name) . "?= <{\)reply_to}>",
    "To: <{$to}>",
    "Subject: =?UTF-8?B?" . base64_encode($subject) . "?=",
    "Date: " . date('r')
];

\(payload = implode("\r\n",\)headers) . "\r\n\r\n" . $html_message . "\r\n.\r\n";
fputs(\(socket,\)payload);
\(send_res =\)read();
fputs($socket, "QUIT\r\n");
fclose($socket);

if (substr($send_res, 0, 3) !== '250') {
    return ['success' => false, 'error' => 'Delivery rejected: ' . $send_res];
}
return ['success' => true];
}?>RSVP | Patient Education Open House | Elgin Street Dental & AesthetIQ<header class="bg-white/95 backdrop-blur-md sticky top-0 z-50 border-b border-purple-100">
    <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
        <div>
            <span class="text-[11px] tracking-widest text-brand-purple font-bold uppercase block">Elgin Street Dental Centre</span>
            <span class="text-xs sm:text-sm font-serif font-bold text-slate-900 tracking-tight">in partnership with AesthetIQ Face & Body</span>
        </div>
        <div class="flex items-center gap-3">
            <a href="tel:2892522870" class="text-xs font-semibold text-brand-purple hover:text-brand-dark bg-purple-50 px-3 py-1.5 rounded-full border border-purple-200 transition-colors">
                (289) 252-2870
            </a>
        </div>
    </div>
</header>

<section class="relative overflow-hidden pt-8 pb-14 lg:pt-12 lg:pb-20 border-b border-purple-50">
    <div class="max-w-6xl mx-auto px-4">
        <div class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
            
            <div class="lg:col-span-6 pt-1">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-brand-purple text-xs font-semibold uppercase tracking-wider mb-4">
                    <span class="w-2 h-2 rounded-full bg-brand-purple animate-pulse"></span>
                    Limited Spaces Available
                </div>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-serif text-slate-900 leading-[1.18] mb-4">
                    You're Invited to Our <span class="text-brand-purple italic">Patient Education</span> Open House
                </h1>
                <p class="text-slate-600 text-base sm:text-lg leading-relaxed mb-6 font-light">
                    Join Cosmetic Nurse Yasmin for an informative, pressure-free conversation exploring modern approaches to skin health, healthy aging, and core vitality right here at your familiar dental clinic.
                </p>

                <div class="grid grid-cols-2 gap-3 mb-6">
                    <div class="bg-white p-3.5 rounded-xl border border-purple-100 shadow-sm">
                        <span class="text-lg">📅</span>
                        <p class="text-[11px] text-slate-400 font-semibold uppercase mt-1">Dates</p>
                        <p class="text-xs sm:text-sm font-bold text-slate-800">Oct 2 & Oct 3, 2026</p>
                    </div>
                    <div class="bg-white p-3.5 rounded-xl border border-purple-100 shadow-sm">
                        <span class="text-lg">📍</span>
                        <p class="text-[11px] text-slate-400 font-semibold uppercase mt-1">Location</p>
                        <p class="text-xs sm:text-sm font-bold text-slate-800">12 Elgin St E, Unit C</p>
                    </div>
                    <div class="bg-white p-3.5 rounded-xl border border-purple-100 shadow-sm">
                        <span class="text-lg">🥂</span>
                        <p class="text-[11px] text-slate-400 font-semibold uppercase mt-1">Hospitality</p>
                        <p class="text-xs sm:text-sm font-bold text-slate-800">Food, Drinks & Gifts</p>
                    </div>
                    <div class="bg-white p-3.5 rounded-xl border border-purple-100 shadow-sm">
                        <span class="text-lg">🎁</span>
                        <p class="text-[11px] text-slate-400 font-semibold uppercase mt-1">Special Privilege</p>
                        <p class="text-xs sm:text-sm font-bold text-slate-800">20% Off Launch Offer</p>
                    </div>
                </div>

                <a href="#what-well-explore" class="inline-flex items-center text-xs sm:text-sm font-semibold text-brand-purple hover:text-brand-dark transition-colors gap-1.5 group">
                    <span>Scroll down to see presentation topics & agenda</span>
                    <span class="transform group-hover:translate-y-0.5 transition-transform">↓</span>
                </a>
            </div>

            <div class="lg:col-span-6" id="rsvp-card">
                <div class="bg-white rounded-2xl shadow-xl shadow-purple-900/5 border border-purple-100 p-6 sm:p-8">
                    <div class="border-b border-purple-50 pb-4 mb-5">
                        <h2 class="text-xl font-serif font-bold text-slate-900">Reserve Your Spot</h2>
                        <p class="text-xs text-slate-500 mt-1">Complimentary entry. Dental patients and a guest are warmly welcome.</p>
                    </div>

                    <div id="status-box" class="hidden p-4 rounded-xl text-sm font-medium mb-5"></div>

                    <form id="rsvp-form" class="space-y-4">
                        <input type="hidden" name="action" value="submit_rsvp">

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="name">
                                Full Name <span class="text-brand-purple">*</span>
                            </label>
                            <input type="text" id="name" name="name" required placeholder="e.g., Sarah Jenkins"
                                class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="email">
                                    Email Address <span class="text-brand-purple">*</span>
                                </label>
                                <input type="email" id="email" name="email" required placeholder="sarah@example.com"
                                    class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="phone">
                                    Phone Number <span class="text-brand-purple">*</span>
                                </label>
                                <input type="tel" id="phone" name="phone" required placeholder="(289) 252-2870"
                                    class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all">
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="date-select">
                                Select Date <span class="text-brand-purple">*</span>
                            </label>
                            <select id="date-select" name="date" required
                                class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all bg-white">
                                <option value="" disabled selected>-- Choose your preferred day --</option>
                                <option value="Friday, October 2, 2026">Friday, October 2, 2026 (3:00 PM – 7:00 PM)</option>
                                <option value="Saturday, October 3, 2026">Saturday, October 3, 2026 (10:00 AM – 1:00 PM)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="time-select">
                                Available Time Window <span class="text-brand-purple">*</span>
                            </label>
                            <select id="time-select" name="time" required disabled
                                class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all bg-slate-50 cursor-not-allowed">
                                <option value="">-- Please select a date first --</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="guests">
                                Number of People Attending
                            </label>
                            <select id="guests" name="guests"
                                class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all bg-white">
                                <option value="1 person (Just me)" selected>Just me (1 person)</option>
                                <option value="2 people (Bringing a guest)">2 people (Bringing a guest/spouse)</option>
                                <option value="3+ people (Small group)">3+ people</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1" for="interest">
                                Any Questions or Specific Interest? (Optional)
                            </label>
                            <input type="text" id="interest" name="interest" placeholder="e.g., Skin texture, laser rejuvenation, or pelvic wellness"
                                class="w-full px-3.5 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-purple/20 focus:border-brand-purple transition-all">
                        </div>

                        <button type="submit" id="submit-btn"
                            class="w-full mt-2 py-3.5 px-6 rounded-xl bg-brand-purple hover:bg-brand-dark text-white font-semibold text-sm tracking-wide transition-all duration-200 shadow-lg shadow-purple-900/10 hover:shadow-purple-900/20 active:scale-[0.99] flex justify-center items-center gap-2">
                            <span>Confirm My RSVP</span>
                        </button>

                        <p class="text-[11px] text-center text-slate-400 mt-2 font-light">
                            Purely educational and pressure-free. We respect your patient privacy.
                        </p>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<section id="what-well-explore" class="py-16 lg:py-24 bg-white border-b border-purple-50">
    <div class="max-w-5xl mx-auto px-4">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <span class="text-xs font-bold tracking-widest text-brand-purple uppercase">Curriculum Overview</span>
            <h2 class="text-3xl sm:text-4xl font-serif text-slate-900 mt-2 mb-4">What We'll Explore Together</h2>
            <p class="text-slate-600 font-light">
                Oral health, facial aesthetics, and whole-body vitality are deeply connected. Our informal session breaks down modern restorative medicine into clear, accessible concepts.
            </p>
        </div>

        <div class="grid md:grid-cols-2 gap-6 lg:gap-8">
            <div class="p-7 rounded-2xl bg-[#FAF8F5] border border-purple-100 hover:border-purple-300 transition-colors">
                <div class="w-12 h-12 rounded-xl bg-purple-100 text-brand-purple flex items-center justify-center text-2xl mb-4">
                    ✨
                </div>
                <h3 class="text-lg font-serif font-bold text-slate-900 mb-2">Skin & Facial Aging</h3>
                <p class="text-sm text-slate-600 leading-relaxed font-light">
                    How and why our skin and facial features naturally change over time, and what modern preventative care does to maintain cellular health.
                </p>
            </div>

            <div class="p-7 rounded-2xl bg-[#FAF8F5] border border-purple-100 hover:border-purple-300 transition-colors">
                <div class="w-12 h-12 rounded-xl bg-purple-100 text-brand-purple flex items-center justify-center text-2xl mb-4">
                    🌿
                </div>
                <h3 class="text-lg font-serif font-bold text-slate-900 mb-2">Facial Aesthetics</h3>
                <p class="text-sm text-slate-600 leading-relaxed font-light">
                    Skin rejuvenation, facial treatments, conservative injectables, and achieving subtle, natural-looking results that complement your smile.
                </p>
            </div>

            <div class="p-7 rounded-2xl bg-[#FAF8F5] border border-purple-100 hover:border-purple-300 transition-colors">
                <div class="w-12 h-12 rounded-xl bg-purple-100 text-brand-purple flex items-center justify-center text-2xl mb-4">
                    🔬
                </div>
                <h3 class="text-lg font-serif font-bold text-slate-900 mb-2">Skin Health & Longevity</h3>
                <p class="text-sm text-slate-600 leading-relaxed font-light">
                    Modern approaches to maintaining healthy, refreshed-looking skin, stimulating collagen production, and protecting tissue elasticity as we age.
                </p>
            </div>

            <div class="p-7 rounded-2xl bg-[#FAF8F5] border border-purple-100 hover:border-purple-300 transition-colors">
                <div class="w-12 h-12 rounded-xl bg-purple-100 text-brand-purple flex items-center justify-center text-2xl mb-4">
                    ⚡
                </div>
                <h3 class="text-lg font-serif font-bold text-slate-900 mb-2">Core & Pelvic Vitality</h3>
                <p class="text-sm text-slate-600 leading-relaxed font-light">
                    An advanced, non-invasive approach using magnetic stimulation to strengthen deep core muscles, support postpartum recovery, and restore pelvic floor health comfortably and fully clothed.
                </p>
            </div>
        </div>

        <div class="mt-12 text-center">
            <p class="text-sm sm:text-base text-slate-700 italic font-serif">
                "Come learn, ask questions, and explore the options available to help you make informed decisions about your skin and aesthetic health."
            </p>
        </div>
    </div>
</section>

<section class="py-16 bg-[#FAF8F5] border-b border-purple-50">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <div class="inline-block p-1.5 px-3 rounded-full bg-white border border-purple-200 mb-4 shadow-sm">
            <span class="text-[11px] uppercase tracking-widest font-bold text-brand-purple">Educational Host</span>
        </div>
        <h2 class="text-2xl sm:text-3xl font-serif text-slate-900 mb-3">Meet Cosmetic Nurse Yasmin</h2>
        <p class="text-sm sm:text-base text-slate-600 max-w-2xl mx-auto font-light leading-relaxed mb-6">
            Our educational session is led by Registered Nurse and Cosmetic Injector Yasmin. She brings specialized clinical expertise, a conservative philosophy, and an approachable setting where you can ask open questions about your skin and wellness without any sales pressure.
        </p>
        <a href="#rsvp-card" class="inline-block bg-white text-brand-purple border border-purple-200 hover:border-brand-purple px-6 py-2.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all shadow-sm">
            Reserve Your Attendance with Yasmin ↑
        </a>
    </div>
</section>

<footer class="bg-white py-12 text-slate-500 text-xs border-t border-slate-100">
    <div class="max-w-5xl mx-auto px-4 grid sm:grid-cols-3 gap-8 text-center sm:text-left">
        <div>
            <h4 class="font-serif font-bold text-slate-900 text-sm mb-2">Location</h4>
            <p>12 Elgin Street East, Unit C<br>Cobourg, ON K9A 0C5</p>
            <p class="text-slate-400 mt-1">Inside Elgin Street Dental Centre</p>
        </div>
        <div>
            <h4 class="font-serif font-bold text-slate-900 text-sm mb-2">Direct Contact</h4>
            <p>Email: <a href="mailto:hello@aesthetiq.ca" class="text-brand-purple underline">hello@aesthetiq.ca</a></p>
            <p>Phone: <a href="tel:2892522870" class="text-brand-purple underline">(289) 252-2870</a></p>
        </div>
        <div>
            <h4 class="font-serif font-bold text-slate-900 text-sm mb-2">Event Schedule</h4>
            <p><strong>Friday, Oct 2:</strong> 3:00 PM – 7:00 PM</p>
            <p><strong>Saturday, Oct 3:</strong> 10:00 AM – 1:00 PM</p>
        </div>
    </div>
    <div class="max-w-5xl mx-auto px-4 text-center mt-10 pt-6 border-t border-slate-100 text-slate-400 text-[11px]">
        © 2026 Elgin Street Dental Centre • AesthetIQ Face & Body Inc. All rights reserved. Safe, evidence-based therapies under medical directives.
    </div>
</footer>

<script>
    const dateSelect = document.getElementById('date-select');
    const timeSelect = document.getElementById('time-select');
    const form = document.getElementById('rsvp-form');
    const submitBtn = document.getElementById('submit-btn');
    const statusBox = document.getElementById('status-box');

    const scheduleSlots = {
        "Friday, October 2, 2026": [
            { value: "3:00 PM", text: "3:00 PM Session" },
            { value: "4:00 PM", text: "4:00 PM Session" },
            { value: "5:00 PM", text: "5:00 PM Session" },
            { value: "6:00 PM", text: "6:00 PM Session" }
        ],
        "Saturday, October 3, 2026": [
            { value: "10:00 AM", text: "10:00 AM Session" },
            { value: "11:00 AM", text: "11:00 AM Session" },
            { value: "12:00 PM", text: "12:00 PM Session" }
        ]
    };

    dateSelect.addEventListener('change', function() {
        const chosenDate = this.value;
        timeSelect.innerHTML = '<option value="" disabled selected>-- Select a time window --</option>';

        if (scheduleSlots[chosenDate]) {
            scheduleSlots[chosenDate].forEach(slot => {
                const opt = document.createElement('option');
                opt.value = slot.value;
                opt.textContent = slot.text;
                timeSelect.appendChild(opt);
            });
            timeSelect.disabled = false;
            timeSelect.classList.remove('bg-slate-50', 'cursor-not-allowed');
            timeSelect.classList.add('bg-white');
        } else {
            timeSelect.disabled = true;
            timeSelect.classList.add('bg-slate-50', 'cursor-not-allowed');
        }
    });

    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span>Confirming Your Spot...</span>
        `;
        statusBox.className = 'hidden p-4 rounded-xl text-sm font-medium mb-5';

        const formData = new FormData(form);

        try {
            const response = await fetch(window.location.href, {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                form.classList.add('hidden');
                statusBox.className = 'p-6 rounded-2xl bg-purple-50 border border-purple-200 text-slate-800 text-center space-y-3';
                statusBox.innerHTML = `
                    <div class="w-12 h-12 rounded-full bg-brand-purple text-white flex items-center justify-center text-xl mx-auto shadow-md">✓</div>
                    <h3 class="font-serif text-xl font-bold text-brand-purple">You're Confirmed!</h3>
                    <p class="text-xs text-slate-600 leading-relaxed font-light">
                        Thank you, <strong>${document.getElementById('name').value}</strong>. Your RSVP has been sent to our team at <strong>glow@aesthetiq.ca</strong>.
                    </p>
                    <div class="text-xs bg-white p-3.5 rounded-xl border border-purple-100 inline-block text-left text-slate-700 shadow-sm">
                        <p class="mb-1"><strong>Session:</strong> ${dateSelect.value}</p>
                        <p class="mb-1"><strong>Arrival Time:</strong> ${timeSelect.value}</p>
                        <p><strong>Location:</strong> 12 Elgin St E, Unit C, Cobourg</p>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">We can't wait to see you!</p>
                `;
            } else {
                throw new Error(result.message || 'Unable to submit RSVP.');
            }
        } catch (err) {
            statusBox.className = 'p-4 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium';
            statusBox.textContent = err.message || 'Something went wrong. Please call us directly at (289) 252-2870 to RSVP.';
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<span>Confirm My RSVP</span>';
        }
    });
</script>