<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ event_data.event_name if event_data else 'Registration' }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            min-height: 100vh;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #eef0f8;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        .wrapper {
            width: 100%;
            max-width: 620px;
            margin: 32px auto 16px;
            background: #fff;
            border-radius: 32px;
            overflow: hidden;
            box-shadow:
                0 2px 4px rgba(0,0,0,0.04),
                0 8px 24px rgba(35,82,240,0.08),
                0 24px 64px rgba(35,82,240,0.1);
        }

        .header-banner img { width: 100%; display: block; }
        .footer-banner img { width: 100%; display: block; }

        .card-body {
            padding: 32px 40px 40px;
            text-align: center;
        }

        /* ── Top section: logo left | eyebrow + event-row right ── */
        .top-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 18px;
            padding-bottom: 24px;
            margin-bottom: 28px;
            border-bottom: 1px solid #f0f1f7;
            text-align: left;
        }

        .logo-wrap {
            flex-shrink: 0;
        }

        .logo-wrap img {
            height: 56px;
            max-width: 80px;
            object-fit: contain;
            display: block;
        }

        .top-right {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
        }

        /* Eyebrow — same style as title, slightly smaller */
        .eyebrow {
            font-size: clamp(1.3rem, 3vw, 1.7rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: #0a0f1e;
        }

        .event-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: wrap;
        }
        .event-subtitle {
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            font-weight: 700;
            letter-spacing: -0.01em;
            background: linear-gradient(135deg, #5b7fff 0%, #2352f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .dot { color: #c5c9d9; font-size: 14px; }
        .event-venue {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f0f3ff;
            border: 1px solid #d5dcff;
            color: #2352f0;
            border-radius: 999px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 700;
        }

        /* ── Middle section: title + subtitle ── */
        .title {
            font-size: clamp(2rem, 5vw, 2.7rem);
            font-weight: 800;
            line-height: 1.12;
            color: #0a0f1e;
            margin-bottom: 12px;
            letter-spacing: -0.03em;
        }
        .title span {
            background: linear-gradient(135deg, #5b7fff 0%, #2352f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ai-sub {
            font-size: 13px;
            color: #8b92a9;
            line-height: 1.75;
            margin-bottom: 32px;
            font-weight: 500;
        }

        /* ── Method buttons ── */
        .method-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .method-card {
            padding: 26px 16px 22px;
            border-radius: 20px;
            border: 1.5px solid #eaecf5;
            background: #f8f9fd;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease;
            text-decoration: none;
            display: block;
        }
        .method-card:hover {
            border-color: #2352f0;
            transform: translateY(-4px);
            box-shadow: 0 12px 36px rgba(35,82,240,0.14);
            background: #f3f5ff;
        }
        .method-card:active { transform: translateY(0); }

        .method-icon {
            width: 58px; height: 58px;
            border-radius: 18px;
            background: linear-gradient(145deg, #5b7fff, #2352f0);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
            font-size: 25px;
            box-shadow: 0 8px 20px rgba(35,82,240,0.28);
            transition: all 0.2s ease;
        }
        .method-card:hover .method-icon {
            transform: scale(1.08);
            box-shadow: 0 10px 28px rgba(35,82,240,0.38);
        }

        .method-label {
            display: block;
            font-size: 15px;
            font-weight: 800;
            color: #0a0f1e;
            margin-bottom: 5px;
            letter-spacing: -0.01em;
        }
        .method-desc {
            display: block;
            font-size: 11.5px;
            color: #8b92a9;
            line-height: 1.5;
            font-weight: 500;
        }

        .footer-note {
            text-align: center;
            color: #b0b5c8;
            font-size: 11.5px;
            letter-spacing: 0.03em;
            margin: 16px 0 32px;
            font-weight: 500;
        }

        @media (max-width: 480px) {
            .wrapper { margin: 0; border-radius: 0; box-shadow: none; }
            .card-body { padding: 24px 20px 32px; }
            .method-row { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="wrapper">

        {% if header_image %}
        <div class="header-banner">
            <img src="{{ header_image if header_image.startswith('http') or header_image.startswith('data:') else url_for('static', filename=header_image) }}" alt="Event banner">
        </div>
        {% endif %}

        <div class="card-body">

            <!-- logo left | eyebrow + event-row right -->
            <div class="top-section">

                {% if logo_image %}
                <div class="logo-wrap">
                    <img src="{{ logo_image if logo_image.startswith('http') or logo_image.startswith('data:') else url_for('static', filename=logo_image) }}" alt="Logo">
                </div>
                {% endif %}

                <div class="top-right">
                    {% if event_data %}
                    <div class="eyebrow">{{ event_data.event_name }}</div>
                    {% endif %}

                    {% if event_data %}
                    <div class="event-row">
                        {% if event_data.event_subtitle %}
                        <span class="event-subtitle">{{ event_data.event_subtitle }}</span>
                        {% endif %}
                        {% if event_data.venue %}
                        <span class="dot">•</span>
                        <span class="event-venue">📍 {{ event_data.venue }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>

            </div>

            <!-- title + subtitle -->
            <h1 class="title">AI Powered<br><span>Matchmaking</span></h1>

            <p class="ai-sub">
                Your event photos will be delivered to your email<br>
                by our AI powered matchmaking app
            </p>

            <!-- method buttons -->
            <div class="method-row">
                <a href="/register/manual" class="method-card">
                    <div class="method-icon">⌨️</div>
                    <span class="method-label">Enter Details</span>
                    <span class="method-desc">Enter your name, email or mobile number</span>
                </a>
                <a href="/register/qr" class="method-card">
                    <div class="method-icon">📷</div>
                    <span class="method-label">Scan QR</span>
                    <span class="method-desc">Scan your event QR badge instantly</span>
                </a>
            </div>

        </div>

        {% if footer_image %}
        <div class="footer-banner">
            <img src="{{ footer_image if footer_image.startswith('http') or footer_image.startswith('data:') else url_for('static', filename=footer_image) }}" alt="Footer banner">
        </div>
        {% endif %}

    </div>

    <div class="footer-note">&copy; 2026 IMTMA Event AI &nbsp;·&nbsp; All Rights Reserved</div>

</body>
</html>