@model Banner

<style>
    @@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

    /* ══════════════════════════════════════
       BANNER / HERO
       ══════════════════════════════════════ */
    .hero-wrap {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #030408;
        padding: 0;
    }

    .hero-wrap::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 700px 500px at 20% 30%, rgba(59, 123, 247, 0.06) 0%, transparent 100%),
            radial-gradient(ellipse 600px 450px at 80% 70%, rgba(34, 201, 176, 0.04) 0%, transparent 100%);
        z-index: 0;
        pointer-events: none;
    }

    .hero-grid-bg {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
        background-size: 60px 60px;
        z-index: 1;
        pointer-events: none;
        mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
    }

    .hero-inner {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 70px 32px 60px;
        text-align: center;
    }

    /* ── Badge ── */
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 14px 5px 8px;
        border-radius: 100px;
        background: rgba(59, 123, 247, 0.06);
        border: 1px solid rgba(59, 123, 247, 0.12);
        font-family: 'DM Sans', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 24px;
        animation: heroFade 0.6s ease-out both;
    }

    .hero-badge .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #3b7bf7;
        box-shadow: 0 0 6px rgba(59, 123, 247, 0.5);
        animation: dotPulse 2.5s ease-in-out infinite;
    }

    @@keyframes dotPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }

    @@keyframes heroFade {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ── Title ── */
    .hero-title {
        font-family: 'Outfit', 'DM Sans', sans-serif;
        font-size: clamp(1.8rem, 4.5vw, 3.4rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #ffffff;
        margin-bottom: 8px;
        animation: heroFade 0.6s ease-out 0.08s both;
    }

    .hero-title .title-gradient {
        display: block;
        background: linear-gradient(135deg, #3b7bf7 0%, #22c9b0 60%, #3b7bf7 100%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradShift 6s ease-in-out infinite;
    }

    @@keyframes gradShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* ── Description Card ── */
    .hero-desc {
        max-width: 700px;
        margin: 24px auto 36px;
        position: relative;
        display: flex;
        gap: 0;
        background: linear-gradient(135deg, rgba(59, 123, 247, 0.03) 0%, rgba(34, 201, 176, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-left: 2px solid rgba(59, 123, 247, 0.3);
        border-radius: 0 12px 12px 0;
        padding: 0;
        overflow: hidden;
        animation: heroFade 0.6s ease-out 0.16s both;
    }

    .hero-desc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(180deg, rgba(59, 123, 247, 0.06) 0%, rgba(34, 201, 176, 0.04) 100%);
        pointer-events: none;
    }

    .hero-desc-inner {
        padding: 22px 28px 22px 24px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.84rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.85;
        text-align: left;
        position: relative;
        z-index: 1;
    }

    .hero-desc-icon {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 22px 0 0 16px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .hero-desc-icon i {
        font-size: 1.1rem;
        color: rgba(59, 123, 247, 0.4);
    }

    /* ── CTA ── */
    .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 34px;
        border-radius: 10px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #0d1a2e 0%, #080f1c 100%);
        border: 1px solid rgba(59, 123, 247, 0.18);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        animation: heroFade 0.6s ease-out 0.24s both;
        cursor: pointer;
    }

    .hero-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(59, 123, 247, 0.15);
        border-color: rgba(59, 123, 247, 0.3);
        color: #fff;
        text-decoration: none;
    }

    .hero-cta i { font-size: 0.8rem; transition: transform 0.3s ease; }
    .hero-cta:hover i { transform: translateX(3px); }

    /* ── Divider ── */
    .hero-sep {
        width: 50px;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
        margin: 44px auto 36px;
        animation: heroFade 0.6s ease-out 0.32s both;
    }

    /* ══════════════════════════════════════
       MINI FEATURE CARDS — 12 cards, 6x2
       ══════════════════════════════════════ */
    .mini-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
        animation: heroFade 0.7s ease-out 0.4s both;
    }

    .mini-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 8px 18px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.04);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: default;
    }

    .mini-card:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        transform: translateY(-3px);
    }

    .mini-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .mini-card:hover .mini-icon { transform: scale(1.1); }

    .mini-label {
        font-family: 'DM Sans', sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        line-height: 1.25;
        letter-spacing: 0.2px;
    }

    .mini-card:hover .mini-label { color: rgba(255, 255, 255, 0.75); }

    .mc-blue .mini-icon { background: rgba(59, 123, 247, 0.08); border: 1px solid rgba(59, 123, 247, 0.12); color: #3b7bf7; }
    .mc-blue:hover .mini-icon { box-shadow: 0 4px 12px rgba(59, 123, 247, 0.15); }
    .mc-teal .mini-icon { background: rgba(34, 201, 176, 0.08); border: 1px solid rgba(34, 201, 176, 0.12); color: #22c9b0; }
    .mc-teal:hover .mini-icon { box-shadow: 0 4px 12px rgba(34, 201, 176, 0.15); }
    .mc-purple .mini-icon { background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.12); color: #a78bfa; }
    .mc-purple:hover .mini-icon { box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15); }
    .mc-amber .mini-icon { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.12); color: #fbbf24; }
    .mc-amber:hover .mini-icon { box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15); }
    .mc-rose .mini-icon { background: rgba(251, 113, 133, 0.08); border: 1px solid rgba(251, 113, 133, 0.12); color: #fb7185; }
    .mc-rose:hover .mini-icon { box-shadow: 0 4px 12px rgba(251, 113, 133, 0.15); }
    .mc-sky .mini-icon { background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.12); color: #38bdf8; }
    .mc-sky:hover .mini-icon { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15); }

    /* ══════════════════════════════════════
       DEMO REQUEST MODAL
       ══════════════════════════════════════ */
    .demo-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(2, 6, 23, 0.85);
        backdrop-filter: blur(10px);
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    .demo-overlay.active { display: flex; animation: demoFadeIn .25s ease; }
    @@keyframes demoFadeIn { from{opacity:0} to{opacity:1} }

    .demo-modal {
        background: #0f172a;
        border: 1px solid rgba(59, 123, 247, 0.15);
        border-radius: 24px;
        width: 100%;
        max-width: 460px;
        position: relative;
        animation: demoSlideUp .3s ease;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 80px rgba(59,130,246,0.06);
    }
    @@keyframes demoSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

    .demo-modal .dm-glow {
        position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, #3b82f6, #14b8a6, #a78bfa);
        border-radius: 24px 24px 0 0;
    }

    .dm-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1.75rem 2rem 1rem;
    }
    .dm-header-left { display: flex; align-items: center; gap: 0.85rem; }
    .dm-header-icon {
        width: 48px; height: 48px; border-radius: 14px;
        background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(20,184,166,0.1));
        border: 1px solid rgba(59,130,246,0.2);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem; color: #3b82f6;
    }
    .dm-header h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.15rem; font-weight: 700; color: #f8fafc; margin: 0;
    }
    .dm-header p {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.68rem; color: #64748b; margin: 3px 0 0; letter-spacing: 0.05em;
    }
    .dm-close {
        width: 36px; height: 36px; border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.08); background: none;
        color: #94a3b8; display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all .2s; font-size: 0.9rem;
    }
    .dm-close:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.3); color: #f87171; }

    .dm-body { padding: 0.75rem 2rem 1.75rem; }

    /* Features list */
    .dm-features {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .dm-feat {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.65rem;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 8px;
        font-size: 0.72rem; color: #94a3b8;
        font-family: 'DM Sans', sans-serif;
    }
    .dm-feat i { font-size: 0.7rem; }
    .dm-feat.blue i { color: #3b82f6; }
    .dm-feat.teal i { color: #14b8a6; }
    .dm-feat.purple i { color: #a78bfa; }
    .dm-feat.amber i { color: #fbbf24; }

    /* Form */
    .dm-form-group { margin-bottom: 1.25rem; }
    .dm-label {
        display: flex; align-items: center; gap: 0.4rem;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.68rem; font-weight: 600; color: #cbd5e1;
        text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
    }
    .dm-label i { font-size: 0.6rem; color: #3b82f6; }

    .dm-input-wrap { position: relative; }
    .dm-input-icon {
        position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
        color: #475569; font-size: 0.85rem; pointer-events: none; transition: color .2s;
    }
    .dm-input-wrap:focus-within .dm-input-icon { color: #3b82f6; }

    .dm-input {
        width: 100%; padding: 0.8rem 1rem 0.8rem 2.75rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px; color: #e2e8f0;
        font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem;
        outline: none; transition: all .25s;
    }
    .dm-input:focus {
        border-color: rgba(59,130,246,0.5);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 0 20px rgba(59,130,246,0.05);
        background: rgba(255,255,255,0.07);
    }
    .dm-input::placeholder { color: #475569; }

    /* Messages */
    .dm-message {
        padding: 0.7rem 1rem; border-radius: 10px;
        font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem;
        display: none; align-items: center; gap: 0.5rem;
        font-family: 'Space Grotesk', sans-serif;
    }
    .dm-message.error {
        background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171;
    }
    .dm-message.success {
        background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); color: #34d399;
    }
    .dm-message.active { display: flex; }

    /* Submit */
    .dm-submit {
        width: 100%; padding: 0.85rem;
        background: linear-gradient(135deg, #3b82f6, #14b8a6);
        border: none; border-radius: 12px;
        color: #fff; font-family: 'Space Grotesk', sans-serif;
        font-size: 0.95rem; font-weight: 700;
        cursor: pointer; transition: all .3s;
        display: flex; align-items: center; justify-content: center; gap: 0.6rem;
        position: relative; overflow: hidden;
    }
    .dm-submit::before {
        content: ''; position: absolute; top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transition: left .5s;
    }
    .dm-submit:hover::before { left: 100%; }
    .dm-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(59,130,246,0.3); }
    .dm-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

    .dm-spinner {
        display: none; width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
        border-radius: 50%; animation: dmSpin .6s linear infinite;
    }
    @@keyframes dmSpin { to{transform:rotate(360deg)} }

    /* Success state */
    .dm-success-view { display: none; text-align: center; padding: 1rem 0; }
    .dm-success-view.active { display: block; }
    .dm-success-icon {
        width: 70px; height: 70px; border-radius: 50%;
        background: rgba(52,211,153,0.12); border: 2px solid rgba(52,211,153,0.25);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.25rem; font-size: 2rem; color: #34d399;
        animation: dmSuccessPop .4s ease;
    }
    @@keyframes dmSuccessPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
    .dm-success-view h4 { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; color:#f8fafc; margin:0 0 0.5rem; }
    .dm-success-view p { font-size:0.85rem; color:#94a3b8; line-height:1.6; margin:0 0 1.5rem; }

    .dm-footer {
        text-align: center; padding: 0 2rem 1.5rem;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.6rem; color: #334155;
        display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    }
    .dm-footer i { color: #22c9b0; font-size: 0.55rem; }

    /* ══════════════════════════════════════
       RESPONSIVE
       ══════════════════════════════════════ */
    @@media (max-width: 1024px) {
        .mini-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .hero-inner { padding: 56px 24px 48px; }
    }
    @@media (max-width: 768px) {
        .mini-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .hero-inner { padding: 48px 20px 40px; }
        .hero-title { font-size: clamp(1.5rem, 5vw, 2.4rem); }
        .hero-desc { padding: 16px 20px; font-size: 0.8rem; }
        .hero-cta { padding: 11px 28px; font-size: 0.85rem; }
        .hero-sep { margin: 36px auto 28px; }
        .dm-features { grid-template-columns: 1fr; }
        .demo-modal { max-width: 100%; }
    }
    @@media (max-width: 520px) {
        .mini-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .hero-inner { padding: 40px 14px 32px; }
        .hero-title { font-size: clamp(1.3rem, 5vw, 2rem); }
        .mini-card { padding: 16px 6px 14px; }
        .mini-icon { width: 34px; height: 34px; font-size: 0.9rem; }
        .mini-label { font-size: 0.62rem; }
        .hero-desc { padding: 14px 16px; font-size: 0.78rem; }
        .demo-overlay { padding: 1rem; }
        .dm-header { padding: 1.5rem 1.5rem 0.75rem; }
        .dm-body { padding: 0.75rem 1.5rem 1.5rem; }
    }
</style>

<div class="hero-wrap">
    <div class="hero-grid-bg"></div>

    <div class="hero-inner">
        <!-- Title from Model -->
        <h1 class="hero-title">
            @Model.Title
            <span class="title-gradient">@Model.Description</span>
        </h1>

        <!-- Description from Model -->
        <div class="hero-desc">
            <div class="hero-desc-icon"><i class="bi bi-quote"></i></div>
            <div class="hero-desc-inner">
                @Html.Raw(Model.Content)
            </div>
        </div>

        <!-- CTA — opens demo modal -->
        <button type="button" class="hero-cta" onclick="openDemoModal()">
            Request Demo
            <i class="bi bi-arrow-right"></i>
        </button>

        <!-- Divider -->
        <div class="hero-sep"></div>

        <!-- 12 Mini Feature Cards -->
        <div class="mini-grid">
            <div class="mini-card mc-blue">
                <div class="mini-icon"><i class="bi bi-graph-up-arrow"></i></div>
                <span class="mini-label">Survey Analysis</span>
            </div>
            <div class="mini-card mc-teal">
                <div class="mini-icon"><i class="bi bi-grid-1x2"></i></div>
                <span class="mini-label">Admin Dashboard</span>
            </div>
            <div class="mini-card mc-purple">
                <div class="mini-icon"><i class="bi bi-ui-checks-grid"></i></div>
                <span class="mini-label">Questionnaire</span>
            </div>
            <div class="mini-card mc-amber">
                <div class="mini-icon"><i class="bi bi-cpu"></i></div>
                <span class="mini-label">AI Sentiment</span>
            </div>
            <div class="mini-card mc-rose">
                <div class="mini-icon"><i class="bi bi-shield-check"></i></div>
                <span class="mini-label">GDPR Compliance</span>
            </div>
            <div class="mini-card mc-sky">
                <div class="mini-icon"><i class="bi bi-speedometer2"></i></div>
                <span class="mini-label">Real-time Reports</span>
            </div>
            <div class="mini-card mc-teal">
                <div class="mini-icon"><i class="bi bi-heart-pulse"></i></div>
                <span class="mini-label">Employee Wellbeing</span>
            </div>
            <div class="mini-card mc-blue">
                <div class="mini-icon"><i class="bi bi-people"></i></div>
                <span class="mini-label">Team Insights</span>
            </div>
            <div class="mini-card mc-purple">
                <div class="mini-icon"><i class="bi bi-incognito"></i></div>
                <span class="mini-label">Anonymous Responses</span>
            </div>
            <div class="mini-card mc-rose">
                <div class="mini-icon"><i class="bi bi-activity"></i></div>
                <span class="mini-label">Stress Detection</span>
            </div>
            <div class="mini-card mc-amber">
                <div class="mini-icon"><i class="bi bi-clipboard2-check"></i></div>
                <span class="mini-label">Action Plans</span>
            </div>
            <div class="mini-card mc-sky">
                <div class="mini-icon"><i class="bi bi-download"></i></div>
                <span class="mini-label">Data Export</span>
            </div>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════
     DEMO REQUEST MODAL
     ═══════════════════════════════════════ -->
<div class="demo-overlay" id="demoModal">
    <div class="demo-modal">
        <div class="dm-glow"></div>

        <div class="dm-header">
            <div class="dm-header-left">
                <div class="dm-header-icon"><i class="bi bi-rocket-takeoff"></i></div>
                <div>
                    <h3 id="dmTitle">Request a Demo</h3>
                    <p id="dmSubtitle">14-DAY FREE TRIAL · FULL AI ACCESS</p>
                </div>
            </div>
            <button type="button" class="dm-close" onclick="closeDemoModal()"><i class="bi bi-x-lg"></i></button>
        </div>

        <div class="dm-body">
            <!-- Form View -->
            <div id="demoFormView">
                <div class="dm-features">
                    <div class="dm-feat blue"><i class="bi bi-check-circle-fill"></i> <span id="feat1">AI Analysis</span></div>
                    <div class="dm-feat teal"><i class="bi bi-check-circle-fill"></i> <span id="feat2">Full Dashboard</span></div>
                    <div class="dm-feat purple"><i class="bi bi-check-circle-fill"></i> <span id="feat3">Unlimited Surveys</span></div>
                    <div class="dm-feat amber"><i class="bi bi-check-circle-fill"></i> <span id="feat4">Data Export</span></div>
                </div>

                <div id="demoMessage" class="dm-message"></div>

                <div class="dm-form-group">
                    <label class="dm-label"><i class="bi bi-envelope"></i> <span id="emailLabel">Email Address</span></label>
                    <div class="dm-input-wrap">
                        <i class="bi bi-at dm-input-icon"></i>
                        <input type="email" class="dm-input" id="demoEmail" placeholder="" required />
                    </div>
                </div>

                <button type="button" class="dm-submit" id="demoSubmitBtn" onclick="submitDemoRequest()">
                    <div class="dm-spinner" id="demoSpinner"></div>
                    <i class="bi bi-rocket-takeoff" id="demoSubmitIcon"></i>
                    <span id="demoSubmitText">Get Demo Access</span>
                </button>
            </div>

            <!-- Success View -->
            <div class="dm-success-view" id="demoSuccessView">
                <div class="dm-success-icon"><i class="bi bi-check-lg"></i></div>
                <h4 id="successTitle">Account Created!</h4>
                <p id="successText">Check your email for login credentials. You can start exploring A-Survey right away.</p>
                <button type="button" class="dm-submit" onclick="closeDemoModal()" style="max-width:200px;margin:0 auto;">
                    <i class="bi bi-check-lg"></i> <span id="successBtn">Got it!</span>
                </button>
            </div>
        </div>

        <div class="dm-footer">
            <i class="bi bi-shield-lock-fill"></i> <span id="dmFooter">Your data is secure · GDPR compliant</span>
        </div>
    </div>
</div>

<script>
(function() {
    // ── Language Detection ──
    var lang = (document.documentElement.lang || navigator.language || 'en').toLowerCase();
    var isDanish = lang.startsWith('da');

    // ── Translations ──
    var t = isDanish ? {
        title: 'Anmod om Demo',
        subtitle: '14 DAGES GRATIS PRØVE · FULD AI ADGANG',
        feat1: 'AI Analyse',
        feat2: 'Fuldt Dashboard',
        feat3: 'Ubegrænset Surveys',
        feat4: 'Data Eksport',
        emailLabel: 'Email Adresse',
        placeholder: 'Indtast din email adresse',
        submitText: 'Få Demo Adgang',
        submitting: 'Opretter konto...',
        successTitle: 'Konto Oprettet!',
        successText: 'Check din email for login detaljer. Du kan begynde at udforske A-Survey med det samme.',
        successBtn: 'Forstået!',
        footer: 'Dine data er sikre · GDPR kompatibel',
        errorRequired: 'Indtast venligst en email adresse',
        errorInvalid: 'Indtast venligst en gyldig email adresse',
        errorNetwork: 'Netværksfejl. Prøv venligst igen.',
        endpoint: '/DemoRequest/RequestDemo'
    } : {
        title: 'Request a Demo',
        subtitle: '14-DAY FREE TRIAL · FULL AI ACCESS',
        feat1: 'AI Analysis',
        feat2: 'Full Dashboard',
        feat3: 'Unlimited Surveys',
        feat4: 'Data Export',
        emailLabel: 'Email Address',
        placeholder: 'Enter your email address',
        submitText: 'Get Demo Access',
        submitting: 'Creating account...',
        successTitle: 'Account Created!',
        successText: 'Check your email for login credentials. You can start exploring A-Survey right away.',
        successBtn: 'Got it!',
        footer: 'Your data is secure · GDPR compliant',
        errorRequired: 'Please enter an email address',
        errorInvalid: 'Please enter a valid email address',
        errorNetwork: 'Network error. Please try again.',
        endpoint: '/DemoRequest/RequestDemoEN'
    };

    // ── Apply translations ──
    document.getElementById('dmTitle').textContent = t.title;
    document.getElementById('dmSubtitle').textContent = t.subtitle;
    document.getElementById('feat1').textContent = t.feat1;
    document.getElementById('feat2').textContent = t.feat2;
    document.getElementById('feat3').textContent = t.feat3;
    document.getElementById('feat4').textContent = t.feat4;
    document.getElementById('emailLabel').textContent = t.emailLabel;
    document.getElementById('demoEmail').placeholder = t.placeholder;
    document.getElementById('demoSubmitText').textContent = t.submitText;
    document.getElementById('successTitle').textContent = t.successTitle;
    document.getElementById('successText').textContent = t.successText;
    document.getElementById('successBtn').textContent = t.successBtn;
    document.getElementById('dmFooter').textContent = t.footer;

    // ── Store translations globally ──
    window._demoT = t;
})();

function openDemoModal() {
    document.getElementById('demoFormView').style.display = 'block';
    document.getElementById('demoSuccessView').classList.remove('active');
    document.getElementById('demoEmail').value = '';
    hideDemoMessage();
    document.getElementById('demoModal').classList.add('active');
    document.body.style.overflow = 'hidden';
    setTimeout(function() { document.getElementById('demoEmail').focus(); }, 300);
}

function closeDemoModal() {
    document.getElementById('demoModal').classList.remove('active');
    document.body.style.overflow = '';
}

// Close on overlay click
document.getElementById('demoModal').addEventListener('click', function(e) {
    if (e.target === this) closeDemoModal();
});

// Close on Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && document.getElementById('demoModal').classList.contains('active')) {
        closeDemoModal();
    }
});

// Enter key submits
document.getElementById('demoEmail').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { e.preventDefault(); submitDemoRequest(); }
});

function showDemoMessage(text, type) {
    var el = document.getElementById('demoMessage');
    el.className = 'dm-message ' + type + ' active';
    el.innerHTML = '<i class="bi bi-' + (type === 'error' ? 'exclamation-circle' : 'check-circle') + '-fill"></i> ' + text;
}

function hideDemoMessage() {
    var el = document.getElementById('demoMessage');
    el.className = 'dm-message';
    el.innerHTML = '';
}

function setDemoLoading(loading) {
    var btn = document.getElementById('demoSubmitBtn');
    var spinner = document.getElementById('demoSpinner');
    var icon = document.getElementById('demoSubmitIcon');
    var text = document.getElementById('demoSubmitText');
    var t = window._demoT;

    btn.disabled = loading;
    spinner.style.display = loading ? 'block' : 'none';
    icon.style.display = loading ? 'none' : '';
    text.textContent = loading ? t.submitting : t.submitText;
}

function submitDemoRequest() {
    var t = window._demoT;
    var email = document.getElementById('demoEmail').value.trim();
    hideDemoMessage();

    // Validate
    if (!email) {
        showDemoMessage(t.errorRequired, 'error');
        document.getElementById('demoEmail').focus();
        return;
    }

    var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
    if (!emailRegex.test(email)) {
        showDemoMessage(t.errorInvalid, 'error');
        document.getElementById('demoEmail').focus();
        return;
    }

    setDemoLoading(true);

    fetch(t.endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ "email": email })
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
        setDemoLoading(false);
        if (data.success) {
            // Show success view
            document.getElementById('demoFormView').style.display = 'none';
            document.getElementById('demoSuccessView').classList.add('active');
        } else {
            showDemoMessage(data.message || 'An error occurred.', 'error');
        }
    })
    .catch(function(err) {
        setDemoLoading(false);
        showDemoMessage(t.errorNetwork, 'error');
    });
}
</script>