<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webinar Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #1a237e 0%, #673ab7 100%);
            color: #fff;
        }
        .webinar-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .webinar-card {
            width: 100%;
            max-width: 1200px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
            border-radius: 20px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .left-column {
            padding: 60px;
        }
        .right-column {
            background: rgba(0, 0, 0, 0.2);
            padding: 60px;
        }
        .brand-logo {
            font-weight: bold;
            font-size: 1.5rem;
            margin-bottom: 40px;
        }
        .webinar-title {
            font-size: 2.8rem;
            font-weight: bold;
            margin-top: 10px;
            color: #fff;
        }
        .webinar-subtitle {
            font-size: 1.2rem;
            font-weight: bold;
            margin-top: 10px;
            color: #e0e0e0;
        }
        .webinar-time {
            color: #bdbdbd;
            margin-top: 20px;
            font-weight: 500;
        }
        .webinar-description {
            margin-top: 20px;
            font-size: 1.1rem;
            color: #e0e0e0;
        }
        .speakers-section {
            margin-top: 40px;
        }
        .speakers-section h3 {
            font-weight: bold;
            margin-bottom: 20px;
            color: #fff;
        }
        .speaker-card {
            text-align: center;
        }
        .speaker-card img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
            border: 4px solid white;
        }
        .speaker-card h5 {
            color: #fff;
        }
        .speaker-card .text-muted {
            color: #bdbdbd !important;
        }
        .form-control {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 12px 15px;
            color: #fff;
        }
        .form-control::placeholder {
            color: #bdbdbd;
        }
        .form-check-label {
            color: #e0e0e0;
        }
        .btn-register {
            background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px;
            width: 100%;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .what-you-learn {
            margin-top: 40px;
        }
        .what-you-learn h4 {
            font-weight: bold;
            color: #fff;
        }
        .what-you-learn ul {
            list-style: none;
            padding-left: 0;
        }
        .what-you-learn li {
            color: #e0e0e0;
        }
        .what-you-learn li::before {
            content: "✓";
            margin-right: 10px;
            color: #3f51b5;
        }
        #right-column-content h2, #right-column-content p {
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="webinar-container">
        <div class="webinar-card">
            <div class="row g-0">
                <div class="col-lg-7">
                    <div class="left-column">
                        <img src="assets/pasted-20251030-095744-1b7c02ab.png" alt="AppWizzy Logo" style="height: 60px; margin-bottom: 40px;">
                        
                        <h1 class="webinar-title" style="line-height: 1.2;">Building Scalable Apps with AppWizzy</h1>
                        <h2 class="webinar-subtitle">Professional Vibe-Coding Webinar</h2>
                                                <div class="webinar-time">WEDNESDAY, NOVEMBER 19 | 10AM EST | 7AM PST | 4PM CET</div>
                        <p class="webinar-description">The fastest way to go from an idea to a working app you own, running on your server, with your database, using real frameworks.</p>
                        <div class="speakers-section">
                            <h3>Speakers</h3>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="assets/pasted-20251025-190534-b34b4e03.png" alt="Philip Daineka">
                                        <h5>Philip Daineka</h5>
                                        <p class="text-muted">CEO, AppWizzy</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="assets/pasted-20251025-190634-62543fd4.png" alt="Alexandr Rubanau">
                                        <h5>Alexandr Rubanau</h5>
                                        <p class="text-muted">Lead Engineer</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="assets/pasted-20251025-190711-b09e530a.png" alt="Alexey Vertel">
                                        <h5>Alexey Vertel</h5>
                                        <p class="text-muted">Lead Engineer</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="right-column" id="right-column-content">
                        <h2>Register Form</h2>
                        <p>Don't miss this chance to learn and get your questions answered</p>
                        <div id="form-message" class="mb-3" style="color: #ffc107;"></div>
                        <form id="registration-form" method="POST" action="register.php">
                            <div class="row mb-3">
                                <div class="col">
                                    <input type="text" class="form-control" name="first_name" placeholder="First name" required>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" name="last_name" placeholder="Last name" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" name="email" placeholder="email@website.com" required>
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" name="company" placeholder="Company">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">How did you hear about this webinar?</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="social" value="Social Media">
                                    <label class="form-check-label" for="social">Social Media</label>
                                </div>
                                
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="ad" value="Advertisement">
                                    <label class="form-check-label" for="ad">Advertisement</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="other" value="Other">
                                    <label class="form-check-label" for="other">Other</label>
                                </div>
                            </div>
                            <input type="hidden" name="webinar_id" value="1">
                            <button type="submit" class="btn-register">Register Now</button>
                        </form>
                        <div class="what-you-learn">
                            <div style="display: flex; align-items: center; margin-bottom: 20px;">
                                <img src="assets/pasted-20251017-115404-4e52d477.png" alt="Bot" style="width: 50px; margin-right: 15px;">
                                <h4>SCHEDULE</h4>
                            </div>
                            <ul>
                                <li>Intro ~10 min</li>
                                <li>Creating Apps ~40-50 min</li>
                                <li>Q&A</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('registration-form').addEventListener('submit', function(event) {
            event.preventDefault();

            const form = event.target;
            const formData = new FormData(form);
            const messageDiv = document.getElementById('form-message');
            const rightColumn = document.getElementById('right-column-content');

            messageDiv.textContent = ''; // Clear previous messages

            fetch('register.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const successHtml = `
                        <h2>You're Registered!</h2>
                        <p>Thank you for registering for the webinar. An email confirmation has been sent to you.</p>
                        <p>Add this event to your calendar:</p>
                        <div class="d-grid gap-2 mt-4">
                            <a href="${data.google_link}" target="_blank" class="btn btn-light">Add to Google Calendar</a>
                            <a href="${data.outlook_link}" download="webinar.ics" class="btn btn-outline-light">Add to Outlook/iCal</a>
                        </div>
                        <div class="what-you-learn" style="margin-top: 60px;">
                            <div style="display: flex; align-items: center; margin-bottom: 20px;">
                                <img src="assets/pasted-20251017-115404-4e52d477.png" alt="Bot" style="width: 50px; margin-right: 15px;">
                                <h4>SCHEDULE</h4>
                            </div>
                            <ul>
                                <li>Intro ~10 min</li>
                                <li>Creating Apps ~40-50 min</li>
                                <li>Q&A</li>
                            </ul>
                        </div>
                    `;
                    rightColumn.innerHTML = successHtml;
                } else {
                    messageDiv.textContent = data.error || 'An unknown error occurred.';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                messageDiv.textContent = 'A network error occurred. Please try again.';
            });
        });
    </script>

</body>
</html>