<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Request a Platform Demo | Nesvra";
$initialProduct = isset($_GET['product']) ? htmlspecialchars($_GET['product']) : '';
$demoRegistry = file_exists(__DIR__ . '/demo/registry.php') ? include __DIR__ . '/demo/registry.php' : [];
$demoHrefMap = [];
foreach ($demoRegistry as $slug => $data) {
    if (!empty($data['href'])) {
        $demoHrefMap[$slug] = $data['href'];
    }
}
include 'components/head.php';
?>

<body class="bg-[#F8F9FA]">
    <?php include 'components/navbar.php'; ?>

    <section class="min-h-screen w-full">
        <div class="max-w-[1240px] mx-auto px-4 md:px-[5%] py-16 md:py-20">

            <?php
            $platforms = [
                [
                    "val"   => "digital-wallet",
                    "icon"  => "ri-wallet-3-line",
                    "label" => "Digital Wallet Platform",
                    "sub"   => "Payments · P2P · Virtual Accounts · Mobile Apps",
                    "tag"   => "Fintech",
                    "color" => "electric",
                    "img"   => "https://i.pinimg.com/736x/7b/6b/7d/7b6b7db5466516425fad2eeb558b3103.jpg",
                ],
                [
                    "val"   => "remittance",
                    "icon"  => "ri-exchange-dollar-line",
                    "label" => "Remittance & Cross-Border",
                    "sub"   => "Global Payouts · FX Rates · Corridor Routing",
                    "tag"   => "Fintech",
                    "color" => "brandOrange",
                    "img"   => "https://images.unsplash.com/photo-1559526324-4b87b5e36e44?q=80&w=800&auto=format&fit=crop",
                ],
                [
                    "val"   => "virtual-card",
                    "icon"  => "ri-bank-card-2-line",
                    "label" => "Virtual Card Platform",
                    "sub"   => "Card Issuing · Spend Controls · Multi-currency",
                    "tag"   => "Fintech",
                    "color" => "electric",
                    "img"   => "https://i.pinimg.com/1200x/6e/96/96/6e969680ae4d4624d4b068138b89d1b1.jpg",
                ],
                [
                    "val"   => "esim",
                    "icon"  => "ri-router-line",
                    "label" => "eSIM Platform",
                    "sub"   => "150+ Countries · Instant Activation · White-label",
                    "tag"   => "Telecom",
                    "color" => "brandOrange",
                    "img"   => "https://i.pinimg.com/736x/9d/49/c8/9d49c8f35662614db6f4fd383ba7eebd.jpg",
                ],
                [
                    "val"   => "lms",
                    "icon"  => "ri-graduation-cap-line",
                    "label" => "LMS / EdTech Platform",
                    "sub"   => "Courses · Live Classes · Certifications · Mobile",
                    "tag"   => "EdTech",
                    "color" => "brandOrange",
                    "img"   => "https://i.pinimg.com/736x/0c/74/fb/0c74fbb15a04ef5cd89e39205344bd76.jpg",
                ],
                [
                    "val"   => "ecommerce",
                    "icon"  => "ri-shopping-bag-3-line",
                    "label" => "eCommerce / Marketplace",
                    "sub"   => "Multi-vendor · D2C · Payments · Inventory",
                    "tag"   => "Commerce",
                    "color" => "electric",
                    "img"   => "https://i.pinimg.com/736x/5f/be/9e/5fbe9eab02aeb84178124457d287ff63.jpg",
                ],
                [
                    "val"   => "school",
                    "icon"  => "ri-school-line",
                    "label" => "School Management System",
                    "sub"   => "SIS · Fees · Parent Portals · Gradebook",
                    "tag"   => "EdTech",
                    "color" => "brandOrange",
                    "img"   => "https://i.pinimg.com/1200x/39/79/ca/3979cafea548c6745f9eb1bf9808305e.jpg",
                ],
                [
                    "val"   => "custom",
                    "icon"  => "ri-code-s-slash-line",
                    "label" => "Custom Platform Build",
                    "sub"   => "Any industry · API-first · Full white-label",
                    "tag"   => "Custom",
                    "color" => "electric",
                    "img"   => "https://plus.unsplash.com/premium_photo-1686244745499-9c81d2aa48da?q=80&w=870&auto=format&fit=crop",
                ],
            ];
            ?>

            <!-- ═══ VIEW 1: PLATFORM SHOWCASE & SELECTION ═══ -->
            <div id="platformSelectionView" class="transition-all duration-300">

                <!-- Page heading -->
                <div class="mb-12 text-left" data-aos="fade-up">
                    <a href="index.php" class="inline-flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest text-soft hover:text-royal transition-colors mb-6 group">
                        <i class="ri-arrow-left-line group-hover:-translate-x-1 transition-transform"></i> Back to Nesvra
                    </a>
                    <div class="flex items-center gap-2 mb-3">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-brandOrange/10 text-brandOrange font-mono text-[11px] font-semibold uppercase tracking-wider">
                            <span class="w-1.5 h-1.5 rounded-full bg-brandOrange animate-pulse"></span>
                            Live Platform Walkthrough
                        </span>
                    </div>
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-[400] tracking-tighter text-royal leading-[1.1] mb-4">
                        See Our Platforms <br><span class="italic font-serif text-soft">Live & In Action</span>
                    </h1>
                    <p class="text-soft text-base md:text-lg leading-relaxed max-w-2xl border-l-2 border-electric pl-4">
                        Click on the platform you want to explore. We'll open the request form so you can schedule a live 1-on-1 walkthrough with a solutions architect.
                    </p>
                </div>

                <!-- Products Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5" id="platformCards" data-aos="fade-up">
                    <?php foreach ($platforms as $p): ?>
                        <div class="platform-card group relative flex flex-col justify-between overflow-hidden rounded-[24px] border-2 border-zinc-200/80 bg-white cursor-pointer transition-all duration-300 hover:border-electric hover:shadow-xl hover:-translate-y-1"
                            data-val="<?= $p['val'] ?>"
                            data-label="<?= htmlspecialchars($p['label']) ?>"
                            data-tag="<?= htmlspecialchars($p['tag']) ?>"
                            data-sub="<?= htmlspecialchars($p['sub']) ?>">

                            <!-- Image banner -->
                            <div class="relative h-[140px] overflow-hidden">
                                <img src="<?= $p['img'] ?>" alt="<?= $p['label'] ?>"
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                                <div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent"></div>

                                <span class="absolute top-3 left-3 font-mono text-[9px] uppercase tracking-widest px-2.5 py-1 bg-white/20 backdrop-blur-md border border-white/20 rounded-full text-white font-semibold">
                                    <?= $p['tag'] ?>
                                </span>

                                <div class="absolute bottom-3 right-3 w-8 h-8 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white group-hover:bg-electric group-hover:border-electric transition-all">
                                    <i class="ri-arrow-right-line text-sm"></i>
                                </div>
                            </div>

                            <!-- Card text content -->
                            <div class="p-4 flex-1 flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center gap-2 mb-1.5">
                                        <i class="<?= $p['icon'] ?> text-electric text-base"></i>
                                        <h3 class="font-semibold text-royal text-sm tracking-tight leading-snug"><?= $p['label'] ?></h3>
                                    </div>
                                    <p class="text-soft text-xs leading-relaxed mb-4"><?= $p['sub'] ?></p>
                                </div>

                                <!-- CTA mini pill -->
                                <div class="pt-2.5 border-t border-zinc-100 flex items-center justify-between text-xs font-semibold text-royal group-hover:text-electric transition-colors">
                                    <span>Select & Continue</span>
                                    <i class="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

            </div>


            <!-- ═══ VIEW 2: DETAILS & REQUEST FORM (Shown only after selection) ═══ -->
            <div id="demoFormSection" class="hidden transition-all duration-300">

                <!-- Back / Change Selection Bar -->
                <div class="mb-8 flex items-center justify-between">
                    <button type="button" id="changePlatformBtn" class="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-soft hover:text-royal transition-colors group">
                        <i class="ri-arrow-left-line group-hover:-translate-x-1 transition-transform"></i> Choose a different platform
                    </button>
                    <span class="text-xs font-mono text-soft uppercase tracking-wider hidden sm:inline-block">
                        Platform Selected
                    </span>
                </div>

                <!-- Selected Platform Header Banner -->
                <div class="bg-royal text-white rounded-[24px] p-6 sm:p-7 mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-xl">
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 rounded-2xl bg-white/10 border border-white/10 flex items-center justify-center flex-shrink-0">
                            <i class="ri-macbook-line text-3xl text-brandOrange"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="w-2 h-2 rounded-full bg-brandOrange animate-ping"></span>
                                <span class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold" id="bannerPlatformTag">Fintech Platform</span>
                            </div>
                            <h2 class="text-2xl sm:text-3xl font-semibold tracking-tight text-white" id="bannerPlatformTitle">
                                Digital Wallet Platform
                            </h2>
                            <p class="text-white/70 text-xs sm:text-sm mt-0.5" id="bannerPlatformSub">
                                Payments · P2P · Virtual Accounts · Mobile Apps
                            </p>
                        </div>
                    </div>

                    <button type="button" id="changePlatformBtn2" class="px-5 py-2.5 rounded-full bg-white/10 hover:bg-white/20 border border-white/20 text-white text-xs font-medium transition-all flex items-center gap-1.5 flex-shrink-0">
                        <i class="ri-exchange-line"></i> Change platform
                    </button>
                </div>

                <div class="grid lg:grid-cols-[60%_40%] gap-8 items-start">

                    <!-- Form Card -->
                    <div class="bg-white border border-zinc-200/80 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.08)] p-6 sm:p-10">
                        <div class="mb-6">
                            <h3 class="text-2xl font-semibold text-royal tracking-tight">Enter Your Details</h3>
                            <p class="text-soft text-xs sm:text-sm mt-1">We'll schedule your private demo instance and send an invite directly.</p>
                        </div>

                        <form id="requestDemoForm" novalidate class="flex flex-col gap-5">
                            <input type="hidden" name="platform" id="rdPlatformHidden" value="digital-wallet" />

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="form-group" data-field="rdname">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Full Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="rdname" required autocomplete="name"
                                        class="field w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="Alex Johnson" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="rdcompany">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Company Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="rdcompany" required autocomplete="organization"
                                        class="field w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="Acme Financial Ltd" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="form-group" data-field="rdemail">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Work Email <span class="text-brandOrange">*</span></label>
                                    <input type="email" name="rdemail" required autocomplete="email"
                                        class="field w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="alex@company.com" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="rdphone">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Phone / WhatsApp <span class="text-brandOrange">*</span></label>
                                    <input type="tel" name="rdphone" required autocomplete="tel"
                                        class="field w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="+1 (555) 000-0000" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Your Role</label>
                                    <div class="relative">
                                        <select name="role"
                                            class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark appearance-none bg-white">
                                            <option>Founder / CEO / Executive</option>
                                            <option>CTO / Engineering Lead</option>
                                            <option>Product Manager</option>
                                            <option>Operations / Strategy</option>
                                            <option>Investor / Partner</option>
                                            <option>Other</option>
                                        </select>
                                        <i class="ri-arrow-down-s-line absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none"></i>
                                    </div>
                                </div>
                                <div>
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Preferred Meeting Tool</label>
                                    <div class="grid grid-cols-3 gap-2">
                                        <?php foreach (["Google Meet", "Zoom", "Teams"] as $m): ?>
                                            <label class="flex items-center justify-center gap-1.5 px-2 py-3 border border-zinc-200 rounded-[14px] cursor-pointer text-xs font-semibold text-dark hover:border-electric/40 transition-all has-[:checked]:bg-electric/10 has-[:checked]:border-electric has-[:checked]:text-electric text-center">
                                                <input type="radio" name="format" value="<?= $m ?>" class="sr-only" <?= $m === 'Google Meet' ? 'checked' : '' ?> />
                                                <?= $m ?>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Specific Focus or Questions <span class="text-zinc-400 font-normal">(Optional)</span></label>
                                <textarea name="questions" rows="3"
                                    class="field w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none focus:border-electric focus:ring-2 focus:ring-electric/10 transition-all font-[400] text-dark placeholder:text-zinc-300 resize-none"
                                    placeholder="e.g. Tell us about your launch timelines, target geography, or volume requirements..."></textarea>
                            </div>

                            <label class="flex items-start gap-3 cursor-pointer pt-1">
                                <input type="checkbox" id="rdGdpr" required checked class="w-4 h-4 mt-0.5 rounded accent-electric flex-shrink-0 cursor-pointer" />
                                <span class="text-xs text-soft leading-relaxed">
                                    I agree to receive platform demo access details. No spam or unprompted calls.
                                </span>
                            </label>

                            <div class="pt-3">
                                <button type="submit" id="rdSubmitBtn"
                                    class="w-full inline-flex items-center justify-center gap-3 px-8 py-4 bg-royal text-white rounded-full font-semibold text-sm hover:bg-electric hover:shadow-xl transition-all duration-200">
                                    <i class="ri-play-circle-line text-lg text-brandOrange"></i> Schedule Live Demo Walkthrough
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Right Side: Trust & What to Expect -->
                    <div class="flex flex-col gap-5 lg:sticky lg:top-24">

                        <!-- What happens next -->
                        <div class="bg-white border border-zinc-200/80 rounded-[32px] p-7 shadow-sm">
                            <h3 class="text-base font-semibold text-royal tracking-tight mb-5 flex items-center gap-2">
                                <i class="ri-sparkling-fill text-brandOrange"></i> What happens during the demo
                            </h3>
                            <div class="flex flex-col gap-4">
                                <?php
                                $demoSteps = [
                                    ["icon" => "ri-calendar-check-line", "t" => "Instant Calendar Confirmation", "d" => "Calendar invite delivered to your inbox with direct meeting link."],
                                    ["icon" => "ri-eye-line",             "t" => "Live Working System Walkthrough", "d" => "We walk through admin panels, customer mobile UI, and architecture."],
                                    ["icon" => "ri-question-answer-line", "t" => "Technical & Business Q&A",     "d" => "Ask any technical questions directly to our system engineers."],
                                    ["icon" => "ri-file-text-line",       "t" => "Tailored Architecture & Quote",  "d" => "Full pricing and implementation roadmap delivered within 48h."],
                                ];
                                foreach ($demoSteps as $i => $ds):
                                ?>
                                    <div class="flex items-start gap-3">
                                        <div class="w-8 h-8 rounded-full bg-electric/10 text-electric flex items-center justify-center flex-shrink-0 font-mono text-[11px] font-semibold">0<?= $i + 1 ?></div>
                                        <div>
                                            <h4 class="text-dark text-sm font-semibold leading-snug"><?= $ds['t'] ?></h4>
                                            <p class="text-soft text-xs leading-relaxed mt-0.5"><?= $ds['d'] ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <!-- Testimonial Quote -->
                        <div class="bg-white rounded-[28px] p-6 border border-zinc-200/80 shadow-sm">
                            <div class="flex items-center gap-1 text-brandOrange mb-3">
                                <i class="ri-star-fill text-sm"></i>
                                <i class="ri-star-fill text-sm"></i>
                                <i class="ri-star-fill text-sm"></i>
                                <i class="ri-star-fill text-sm"></i>
                                <i class="ri-star-fill text-sm"></i>
                            </div>
                            <p class="text-dark font-normal italic text-xs sm:text-sm leading-relaxed mb-4">
                                "Seeing the wallet and virtual card system working live during the demo was what gave our board full confidence to build with Nesvra."
                            </p>
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-full bg-royal text-white flex items-center justify-center font-semibold text-xs">
                                    OA
                                </div>
                                <div>
                                    <span class="font-semibold text-royal text-xs block">Olawale A.</span>
                                    <span class="font-mono text-[9px] uppercase tracking-wider text-soft">CEO, PayQuick Financial</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    <!-- ═══ SUCCESS MODAL WITH AUTO-REDIRECT ═══ -->
    <div id="rdModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
        <!-- Overlay -->
        <div class="absolute inset-0 bg-zinc-950/50 backdrop-blur-md" id="rdModalBackdrop"></div>

        <!-- Modal Card Box -->
        <div class="relative bg-white rounded-[32px] shadow-[0_50px_100px_-20px_rgba(0,0,0,0.2)] w-full max-w-md p-8 md:p-10 text-center z-10 animate-[scaleIn_0.3s_cubic-bezier(0.16,1,0.3,1)]">

            <div class="w-16 h-16 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto mb-5 border border-emerald-100">
                <i class="ri-check-double-line text-3xl"></i>
            </div>

            <span class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold block mb-2">Demo Request Received!</span>

            <h2 class="text-2xl md:text-3xl font-[600] tracking-tight text-royal mb-2">
                You're all set, <span id="rdModalName" class="italic text-electric">Partner</span>!
            </h2>

            <p class="text-soft text-sm leading-relaxed mb-4">
                We are launching your live sandbox demo for the <span id="rdModalPlatform" class="text-royal font-bold">Platform</span>.
            </p>

            <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 text-xs text-soft mb-6 flex items-center justify-center gap-2">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
                <span>Redirecting to live demo in <strong id="redirectCountdown" class="text-brandOrange font-mono text-sm">3</strong>s...</span>
            </div>

            <div class="flex flex-col gap-2.5">
                <a id="rdModalDirectLink" href="demo/remittance.php" class="w-full py-3.5 bg-royal text-white rounded-full text-sm font-bold hover:bg-electric transition-all flex items-center justify-center gap-2 shadow-md">
                    <span>Open Live Demo Now</span>
                    <i class="ri-arrow-right-line"></i>
                </a>
                <a href="index.php" class="w-full py-2.5 text-xs text-soft hover:text-royal font-semibold transition-colors">
                    Back to Home
                </a>
            </div>
        </div>
    </div>

    <?php include 'components/Scroll-to-top.php'; ?>
    <?php include 'components/footer.php'; ?>

    <style>
        @keyframes scaleIn {
            from {
                transform: scale(0.92);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .platform-card:hover {
            border-color: #2563FF;
        }

        .form-group.has-error .field {
            border-color: #ef4444;
            background: #fff5f5;
        }

        .form-group.has-success .field {
            border-color: #10b981;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const platformLabels = {
                'digital-wallet': 'Digital Wallet Platform',
                'remittance': 'Remittance & Cross-Border',
                'virtual-card': 'Virtual Card Platform',
                'gift-cards': 'Airtime & Gift Card Platform',
                'core-banking': 'Core Banking & Ledger Engine',
                'payment-gateway': 'Payment Gateway Infrastructure',
                'esim': 'eSIM Platform',
                'lms': 'LMS / EdTech Platform',
                'ecommerce': 'eCommerce / Marketplace',
                'school': 'School Management System',
                'custom': 'Custom Platform Build',
            };

            const demoTargetRoutes = <?= json_encode(!empty($demoHrefMap) ? $demoHrefMap : [
                'remittance' => 'demo/remittance.php',
                'digital-wallet' => 'demo/digital-wallet.php',
                'virtual-card' => 'demo/virtual-card.php',
                'gift-cards' => 'demo/gift-cards.php',
                'core-banking' => 'demo/core-banking.php',
                'payment-gateway' => 'demo/payment-gateway.php',
                'esim' => 'demo/esim.php',
                'lms' => 'demo/lms.php',
                'ecommerce' => 'demo/ecommerce.php',
                'school' => 'demo/school.php',
            ]) ?>;

            const platformView = document.getElementById('platformSelectionView');
            const formView = document.getElementById('demoFormSection');
            let selectedPlatform = 'digital-wallet';
            let redirectTimer = null;

            // ── Function to switch to Form View ────────────────────
            function showFormView(val, label, tag, sub) {
                selectedPlatform = val;

                // Update hidden input & banners
                document.getElementById('rdPlatformHidden').value = val;

                const titleEl = document.getElementById('bannerPlatformTitle');
                if (titleEl) titleEl.textContent = label || platformLabels[val] || 'Platform';

                const tagEl = document.getElementById('bannerPlatformTag');
                if (tagEl) tagEl.textContent = (tag ? tag + ' Platform' : 'Selected Platform');

                const subEl = document.getElementById('bannerPlatformSub');
                if (subEl && sub) subEl.textContent = sub;

                // Pre-check the corresponding checkbox
                document.querySelectorAll('.build-type-checkbox').forEach(cb => {
                    if (cb.getAttribute('data-build') === val) {
                        cb.checked = true;
                    }
                });

                // Hide platform selection, show form view
                platformView.classList.add('hidden');
                formView.classList.remove('hidden');

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }

            // ── Function to switch back to Platform View ───────────
            function showPlatformView() {
                formView.classList.add('hidden');
                platformView.classList.remove('hidden');
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }

            // ── Platform Card Click ────────────────────────────────
            document.querySelectorAll('.platform-card').forEach(card => {
                card.addEventListener('click', () => {
                    const val = card.getAttribute('data-val');
                    const label = card.getAttribute('data-label');
                    const tag = card.getAttribute('data-tag');
                    const sub = card.getAttribute('data-sub');
                    showFormView(val, label, tag, sub);
                });
            });

            // ── Check if Product parameter was passed in URL ───────
            const initialProd = "<?= $initialProduct ?>";
            if (initialProd) {
                const targetCard = document.querySelector(`.platform-card[data-val="${initialProd}"]`);
                if (targetCard) {
                    const val = targetCard.getAttribute('data-val');
                    const label = targetCard.getAttribute('data-label');
                    const tag = targetCard.getAttribute('data-tag');
                    const sub = targetCard.getAttribute('data-sub');
                    showFormView(val, label, tag, sub);
                } else if (platformLabels[initialProd]) {
                    showFormView(initialProd, platformLabels[initialProd], 'Fintech', 'Launch your dedicated instance.');
                }
            }

            // ── Change Platform Buttons ────────────────────────────
            const changeBtn1 = document.getElementById('changePlatformBtn');
            const changeBtn2 = document.getElementById('changePlatformBtn2');
            if (changeBtn1) changeBtn1.addEventListener('click', showPlatformView);
            if (changeBtn2) changeBtn2.addEventListener('click', showPlatformView);

            // ── Validation ─────────────────────────────────────────
            function validateField(input) {
                const group = input.closest('.form-group');
                if (!group) return true;
                const err = group.querySelector('.error-msg');
                let valid = true,
                    msg = '';
                if (input.required && !input.value.trim()) {
                    valid = false;
                    msg = 'This field is required.';
                } else if (input.type === 'email' && !/^\S+@\S+\.\S+$/.test(input.value.trim())) {
                    valid = false;
                    msg = 'Please enter a valid work email.';
                } else if (input.type === 'tel' && input.value.trim().length < 6) {
                    valid = false;
                    msg = 'Please enter a valid phone number.';
                }

                group.classList.toggle('has-error', !valid);
                group.classList.toggle('has-success', valid && !!input.value.trim());
                if (err) {
                    err.textContent = msg;
                    err.classList.toggle('hidden', valid);
                }
                return valid;
            }

            document.querySelectorAll('#requestDemoForm .field[required]').forEach(f => {
                f.addEventListener('blur', () => validateField(f));
                f.addEventListener('input', () => {
                    const g = f.closest('.form-group');
                    g?.classList.remove('has-error');
                    g?.querySelector('.error-msg')?.classList.add('hidden');
                });
            });

            // ── Form submit → show modal & Auto-Redirect ───────────
            document.getElementById('requestDemoForm').addEventListener('submit', async e => {
                e.preventDefault();
                let ok = true;
                e.target.querySelectorAll('.field[required]').forEach(f => {
                    if (!validateField(f)) ok = false;
                });
                if (!ok) return;

                const btn = document.getElementById('rdSubmitBtn');
                const originalHtml = btn.innerHTML;
                btn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span> Submitting Request...';
                btn.disabled = true;

                await new Promise(r => setTimeout(r, 700));

                const name = (document.querySelector('[name="rdname"]').value.trim().split(' ')[0]) || 'there';
                document.getElementById('rdModalName').textContent = name;
                document.getElementById('rdModalPlatform').textContent = platformLabels[selectedPlatform] || 'your chosen platform';

                // Determine redirect target URL
                const targetUrl = demoTargetRoutes[selectedPlatform] || ('demo/' + selectedPlatform);
                const directLink = document.getElementById('rdModalDirectLink');
                if (directLink) directLink.href = targetUrl;

                const modal = document.getElementById('rdModal');
                modal.classList.remove('hidden');
                modal.classList.add('flex');
                document.body.style.overflow = 'hidden';

                btn.innerHTML = originalHtml;
                btn.disabled = false;

                // Start 3-second auto-redirect countdown
                let count = 3;
                const countdownEl = document.getElementById('redirectCountdown');
                if (countdownEl) countdownEl.textContent = count;

                if (redirectTimer) clearInterval(redirectTimer);
                redirectTimer = setInterval(() => {
                    count--;
                    if (countdownEl) countdownEl.textContent = count;
                    if (count <= 0) {
                        clearInterval(redirectTimer);
                        window.location.href = targetUrl;
                    }
                }, 1000);
            });

            document.getElementById('rdModalBackdrop').addEventListener('click', () => {
                if (redirectTimer) clearInterval(redirectTimer);
                document.getElementById('rdModal').classList.add('hidden');
                document.getElementById('rdModal').classList.remove('flex');
                document.body.style.overflow = '';
            });
        });
    </script>
</body>

</html>