<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AppWizzy Webinar Registration</title>
    <meta name="description" content="Register for the AppWizzy webinar about building scalable apps with real frameworks, your own server, and your own database.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-start: #0b2083;
            --bg-mid: #1029a0;
            --bg-end: #2c4bd1;
            --surface: rgba(11, 32, 131, 0.34);
            --surface-strong: rgba(16, 41, 160, 0.38);
            --line: rgba(221, 226, 253, 0.22);
            --text-main: #f3f9ff;
            --text-soft: #dde2fd;
            --text-muted: #bbc8fb;
            --accent: #2c4bd1;
            --accent-strong: #1029a0;
            --accent-soft: #bbc8fb;
            --success: #18d1b3;
            --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
            --button-shadow: 0 18px 36px rgba(11, 32, 131, 0.34);
        }
        * {
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-body);
            background:
                radial-gradient(circle at top left, rgba(221, 226, 253, 0.24), transparent 30%),
                radial-gradient(circle at bottom right, rgba(44, 75, 209, 0.24), transparent 35%),
                linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
            color: var(--text-main);
            margin: 0;
            min-height: 100vh;
        }
        .webinar-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .webinar-card {
            width: 100%;
            max-width: 1200px;
            box-shadow: 0 30px 80px rgba(2, 10, 24, 0.55);
            border-radius: 28px;
            overflow: hidden;
            background: var(--surface);
            border: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .left-column {
            padding: 60px;
        }
        .right-column {
            background: linear-gradient(180deg, rgba(11, 32, 131, 0.78), rgba(16, 41, 160, 0.86));
            padding: 60px;
            border-left: 1px solid var(--line);
        }
        .brand-logo {
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 40px;
            color: var(--accent-soft);
        }
        .brand-logo,
        .webinar-title,
        .webinar-subtitle,
        .speakers-section h3,
        .what-you-learn h4,
        .right-column h2,
        .btn-register,
        .btn-light,
        .btn-outline-light {
            font-family: var(--font-display);
        }
        .webinar-title {
            font-size: 2.8rem;
            font-weight: 800;
            margin-top: 10px;
            margin-bottom: 12px;
            color: var(--text-main);
            letter-spacing: -0.04em;
        }
        .webinar-subtitle {
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            margin-top: 10px;
            color: var(--accent-soft);
        }
        .webinar-time {
            color: var(--accent);
            margin-top: 20px;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
        .webinar-description {
            margin-top: 20px;
            font-size: 1.08rem;
            color: var(--text-soft);
            max-width: 620px;
        }
        .speakers-section {
            margin-top: 42px;
        }
        .speakers-section h3 {
            font-weight: 700;
            margin-bottom: 22px;
            color: var(--text-main);
        }
        .speaker-card {
            text-align: center;
        }
        .speaker-card img {
            width: 92px;
            height: 92px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 12px;
            border: 3px solid rgba(187, 200, 251, 0.82);
            box-shadow: 0 12px 25px rgba(8, 24, 47, 0.45);
        }
        .speaker-card h5 {
            color: var(--text-main);
            margin-bottom: 4px;
        }
        .speaker-card .text-muted {
            color: var(--text-muted) !important;
        }
        .form-control,
        .form-select {
            background-color: rgba(221, 226, 253, 0.08);
            border: 1px solid rgba(221, 226, 253, 0.18);
            border-radius: 12px;
            padding: 13px 15px;
            color: var(--text-main);
            box-shadow: none;
        }
        .form-control::placeholder {
            color: var(--text-muted);
        }
        .form-control:focus,
        .form-select:focus {
            color: var(--text-main);
            background-color: rgba(221, 226, 253, 0.12);
            border-color: rgba(44, 75, 209, 0.65);
            box-shadow: 0 0 0 0.2rem rgba(221, 226, 253, 0.18);
        }
        .form-select option {
            background: #1029a0;
            color: var(--text-main);
        }
        .form-check-label {
            color: var(--text-soft);
        }
        .btn-register {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
            color: #fff;
            border: none;
            border: 1px solid rgba(221, 226, 253, 0.18);
            border-radius: 16px;
            padding: 15px 18px;
            width: 100%;
            font-weight: 700;
            font-size: 0.98rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
            box-shadow: var(--button-shadow);
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 24px 40px rgba(11, 32, 131, 0.42);
            filter: brightness(1.04);
        }
        .btn-light,
        .btn-outline-light {
            border-radius: 14px;
            padding: 12px 18px;
            font-size: 0.92rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }
        .btn-light {
            background: linear-gradient(135deg, #dde2fd 0%, #bbc8fb 100%);
            border: 1px solid rgba(221, 226, 253, 0.55);
            color: #0b2083;
            box-shadow: 0 14px 28px rgba(11, 32, 131, 0.2);
        }
        .btn-outline-light {
            background: rgba(221, 226, 253, 0.08);
            border: 1px solid rgba(221, 226, 253, 0.22);
            color: var(--text-main);
        }
        .btn-light:hover,
        .btn-outline-light:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 30px rgba(11, 32, 131, 0.24);
        }
        .what-you-learn {
            margin-top: 40px;
        }
        .what-you-learn h4 {
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 0.04em;
        }
        .what-you-learn ul {
            list-style: none;
            padding-left: 0;
        }
        .what-you-learn li {
            color: var(--text-soft);
            margin-bottom: 8px;
        }
        .what-you-learn li::before {
            content: "✓";
            margin-right: 10px;
            color: var(--success);
        }
        #right-column-content h2,
        #right-column-content p {
            color: var(--text-main);
        }
        #form-message {
            color: var(--accent-soft) !important;
        }
        @media (max-width: 991.98px) {
            .left-column,
            .right-column {
                padding: 36px 28px;
            }
            .right-column {
                border-left: 0;
                border-top: 1px solid var(--line);
            }
            .webinar-title {
                font-size: 2.2rem;
            }
        }
    </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, MARCH 25 | 12PM EDT | 9AM PDT | 6PM 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" autocomplete="email" inputmode="email" autocapitalize="off" spellcheck="false" maxlength="190" required>
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" name="company" placeholder="Company">
                            </div>
                            <div class="mb-3">
                                <select class="form-select form-control" name="how_did_you_hear" required>
                                    <option value="" selected disabled hidden>How did you hear about this webinar?</option>
                                    <option value="Social Media">Social Media (X, Instargram, Facebook, etc.)</option>
                                    <option value="LinkedIn">LinkedIn</option>
                                    <option value="Reddit">Reddit</option>
                                    <option value="Threads">Threads</option>
                                    <option value="Advertisement">Advertisement</option>
                                    <option value="ChatGPT">ChatGPT</option>
                                    <option value="Flatlogic Community Discord">Flatlogic Community Discord</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <input type="hidden" name="webinar_id" value="1">
                            <input type="hidden" name="timezone" id="timezone-field" value="">
                            <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');
            const emailInput = form.querySelector('input[name="email"]');
            const timezoneField = form.querySelector('#timezone-field');
            const emailValue = (emailInput.value || '').trim().toLowerCase();
            const blockedDomains = new Set([
                '10minutemail.com',
                'dispostable.com',
                'emailondeck.com',
                'fakeinbox.com',
                'guerrillamail.com',
                'maildrop.cc',
                'mailinator.com',
                'mailnesia.com',
                'mintemail.com',
                'sharklasers.com',
                'tempmail.com',
                'temp-mail.org',
                'trashmail.com',
                'yopmail.com',
                'example.com',
                'example.net',
                'example.org'
            ]);

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

            if (timezoneField) {
                try {
                    timezoneField.value = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
                } catch (error) {
                    timezoneField.value = '';
                }
            }

            if (emailValue && emailValue.includes('@')) {
                const emailDomain = emailValue.split('@').pop();
                if (blockedDomains.has(emailDomain)) {
                    messageDiv.textContent = 'Please use your real email address. Temporary or disposable inboxes are not allowed.';
                    emailInput.focus();
                    return;
                }
            }

            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>