<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Get Started | Launch Your Platform with Nesvra";
include 'components/head.php';
?>

<body class="bg-white">
    <?php include 'components/navbar.php'; ?>

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

            <!-- Page Header -->
            <div class="text-center mb-16" 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-8 group">
                    <i class="ri-arrow-left-line group-hover:-translate-x-1 transition-transform"></i> Back to Nesvra
                </a>
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange font-semibold block mb-4">Get Started</span>
                <h1 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-[1.1] mb-4">
                    Choose How You Want <br>
                    <span class="italic font-serif text-soft">to Work With Us</span>
                </h1>
                <p class="text-soft text-base leading-relaxed max-w-xl mx-auto">
                    Whether you're launching a fintech platform, building an EdTech product, or need a dedicated tech team — select your path and we'll guide you from there.
                </p>
            </div>

            <!-- Tab Nav -->
            <div class="flex flex-wrap justify-center gap-3 mb-12" id="tabNav" data-aos="fade-up">
                <?php
                $tabs = [
                    ["id" => "platform",  "icon" => "ri-layout-masonry-line",    "label" => "Platform Interest",      "sub" => "Launch a product"],
                    ["id" => "tech-team", "icon" => "ri-team-line",               "label" => "Tech Team",              "sub" => "Hire a squad"],
                    ["id" => "api",       "icon" => "ri-code-s-slash-line",       "label" => "API Access",             "sub" => "For developers"],
                    ["id" => "enterprise", "icon" => "ri-building-4-line",         "label" => "Enterprise",             "sub" => "Large-scale builds"],
                ];
                foreach ($tabs as $i => $t):
                ?>
                    <button data-tab="<?= $t['id'] ?>"
                        class="tab-btn <?= $i === 0 ? 'active' : '' ?> flex items-center gap-3 px-6 py-3.5 rounded-full border border-zinc-100 bg-white hover:border-zinc-300 text-left transition-all duration-300">
                        <i class="<?= $t['icon'] ?> text-base text-soft"></i>
                        <div>
                            <p class="font-semibold text-xs text-dark leading-tight"><?= $t['label'] ?></p>
                            <p class="text-[10px] text-soft font-mono"><?= $t['sub'] ?></p>
                        </div>
                    </button>
                <?php endforeach; ?>
            </div>

            <!-- ─── TAB PANELS ─── -->

            <!-- PLATFORM INTEREST -->
            <div id="tab-platform" class="tab-panel" data-aos="fade-up">
                <div class="grid lg:grid-cols-2 gap-12 items-start">

                    <!-- Left: platform picker + info -->
                    <div>
                        <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric font-semibold block mb-4">Choose Your Platform</span>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                            What Are You <span class="italic font-serif text-soft">Building?</span>
                        </h2>
                        <p class="text-soft text-sm leading-relaxed mb-8">Select the platform type. We'll show you what's possible and connect you with a specialist for that exact product category.</p>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8">
                            <?php
                            $platforms = [
                                ["val" => "digital-wallet",  "icon" => "ri-wallet-3-line",          "title" => "Digital Wallet",        "href" => "digital-wallet.php"],
                                ["val" => "esim",            "icon" => "ri-router-line",             "title" => "eSIM Platform",         "href" => "esim.php"],
                                ["val" => "virtual-card",    "icon" => "ri-bank-card-2-line",        "title" => "Virtual Card Platform", "href" => "virtual-cards.php"],
                                ["val" => "lms",             "icon" => "ri-graduation-cap-line",     "title" => "LMS / EdTech",         "href" => "edtech.php"],
                                ["val" => "ecommerce",       "icon" => "ri-shopping-bag-3-line",     "title" => "eCommerce",            "href" => "systems.php"],
                                ["val" => "custom",          "icon" => "ri-code-s-slash-line",       "title" => "Custom Platform",      "href" => "solutions-tech-team-for-hire.php"],
                            ];
                            foreach ($platforms as $p):
                            ?>
                                <a href="<?= $p['href'] ?>"
                                    class="flex items-center gap-3 p-4 border border-zinc-100 rounded-[20px] bg-[#F8F9FA] hover:bg-white hover:border-electric/40 hover:shadow-sm transition-all duration-300 group">
                                    <div class="w-9 h-9 rounded-[12px] bg-white border border-zinc-100 flex items-center justify-center flex-shrink-0">
                                        <i class="<?= $p['icon'] ?> text-soft group-hover:text-electric transition-colors text-base"></i>
                                    </div>
                                    <span class="font-medium text-dark text-sm group-hover:text-royal transition-colors"><?= $p['title'] ?></span>
                                    <i class="ri-arrow-right-line ml-auto text-soft opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all text-sm"></i>
                                </a>
                            <?php endforeach; ?>
                        </div>

                        <a href="get-demo.php"
                            class="inline-flex items-center gap-3 px-8 py-4 bg-royal text-white rounded-full text-sm font-medium hover:bg-electric transition-colors duration-300">
                            <i class="ri-calendar-check-line"></i> Book a Demo for Your Platform
                        </a>
                    </div>

                    <!-- Right: quick form -->
                    <div class="bg-white border border-zinc-100 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.1)] p-8">
                        <h3 class="text-xl font-[400] text-royal tracking-tight mb-2">Quick Enquiry</h3>
                        <p class="text-soft text-sm mb-6 leading-relaxed">Not sure which platform fits? Tell us your idea — we'll advise and map the fastest path.</p>

                        <form id="platformForm" class="flex flex-col gap-4" novalidate>
                            <div class="form-group" data-field="name">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Your Name <span class="text-brandOrange">*</span></label>
                                <input type="text" name="name" required autocomplete="name"
                                    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 placeholder:text-zinc-300"
                                    placeholder="Full name" />
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <div class="form-group" data-field="email">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Email <span class="text-brandOrange">*</span></label>
                                <input type="email" name="email" required autocomplete="email"
                                    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 placeholder:text-zinc-300"
                                    placeholder="you@company.com" />
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Platform of Interest</label>
                                <select name="platform"
                                    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>Digital Wallet</option>
                                    <option>eSIM Platform</option>
                                    <option>Virtual Card</option>
                                    <option>LMS / EdTech</option>
                                    <option>eCommerce / Marketplace</option>
                                    <option>Custom Platform</option>
                                </select>
                            </div>
                            <div class="form-group" data-field="idea">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Your Idea <span class="text-brandOrange">*</span></label>
                                <textarea name="idea" rows="3" required
                                    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 placeholder:text-zinc-300 resize-none"
                                    placeholder="Brief overview of what you'd like to build..."></textarea>
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <button type="submit" id="platformSubmitBtn"
                                class="w-full py-3.5 bg-royal text-white rounded-full font-semibold text-sm hover:bg-electric transition-colors flex items-center justify-center gap-2">
                                <i class="ri-send-plane-line"></i> Send Enquiry
                            </button>
                            <div id="platformSuccess" class="hidden p-4 bg-electric/5 border border-electric/20 rounded-[16px] text-center">
                                <p class="font-semibold text-royal text-sm">Received! We'll be in touch within 24 hours.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- TECH TEAM -->
            <div id="tab-tech-team" class="tab-panel hidden" data-aos="fade-up">
                <div class="grid lg:grid-cols-2 gap-12 items-start">
                    <div>
                        <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange font-semibold block mb-4">Tech Team Subscription</span>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                            Your Dedicated Engineering <span class="italic font-serif text-soft">Squad</span>
                        </h2>
                        <p class="text-soft text-sm leading-relaxed mb-8">From a single specialist to a full-stack squad — embedded as your tech department, delivering weekly. No recruitment, no overhead.</p>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
                            <?php
                            $plans = [
                                ["label" => "Starter", "price" => "$2,500", "sub" => "per month", "feat" => "1 Engineer + PM"],
                                ["label" => "Growth", "price" => "$5,500", "sub" => "per month", "feat" => "3 Engineers + PM + QA"],
                                ["label" => "Scale",  "price" => "Custom", "sub" => "scoped",   "feat" => "Full squad 6+"],
                            ];
                            foreach ($plans as $pl):
                            ?>
                                <div class="p-5 bg-[#F8F9FA] border border-zinc-100 rounded-[24px] hover:border-royal/20 hover:bg-white transition-all duration-300 group">
                                    <p class="font-mono text-[10px] uppercase tracking-widest text-soft mb-2"><?= $pl['label'] ?></p>
                                    <p class="text-2xl font-semibold text-royal tracking-tighter"><?= $pl['price'] ?></p>
                                    <p class="font-mono text-[9px] uppercase tracking-widest text-soft mb-3"><?= $pl['sub'] ?></p>
                                    <p class="text-dark text-xs font-semibold"><?= $pl['feat'] ?></p>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div class="flex flex-col gap-2 mb-8">
                            <?php foreach (["Start in 48 hours — no waiting for hiring", "Weekly sprints + Slack + Loom updates", "Cancel anytime — no long-term lock-in", "Frontend, backend, DevOps, mobile — all covered"] as $f): ?>
                                <div class="flex items-center gap-3 text-sm text-dark">
                                    <span class="text-electric flex-shrink-0">✓</span> <?= $f ?>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <a href="/get-demo" class="inline-flex items-center gap-3 px-8 py-4 bg-royal text-white rounded-full text-sm font-semibold hover:bg-electric transition-colors">
                            <i class="ri-calendar-check-line"></i> Schedule a Team Discovery Call
                        </a>
                    </div>

                    <!-- Tech Team Form -->
                    <div class="bg-white border border-zinc-100 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.1)] p-8">
                        <h3 class="text-xl font-[400] text-royal tracking-tight mb-2">Tell Us What You Need</h3>
                        <p class="text-soft text-sm mb-6 leading-relaxed">We'll match you with the right team composition and present a plan within 24 hours.</p>
                        <form id="techTeamForm" class="flex flex-col gap-4" novalidate>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="form-group" data-field="ttname">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="ttname" required autocomplete="name"
                                        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 placeholder:text-zinc-300"
                                        placeholder="Your name" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="ttemail">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Email <span class="text-brandOrange">*</span></label>
                                    <input type="email" name="ttemail" required autocomplete="email"
                                        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 placeholder:text-zinc-300"
                                        placeholder="you@co.com" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Team Size Needed</label>
                                <select name="teamsize" 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>1 Engineer (Starter)</option>
                                    <option>2–3 Engineers (Growth)</option>
                                    <option>4+ Engineers (Scale)</option>
                                    <option>Not sure — help me decide</option>
                                </select>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Skills Required</label>
                                <div class="flex flex-wrap gap-2">
                                    <?php foreach (["Frontend", "Backend", "Mobile", "DevOps", "Full-Stack", "UI/UX"] as $skill): ?>
                                        <label class="flex items-center gap-1.5 px-3 py-1.5 border border-zinc-200 rounded-full cursor-pointer hover:border-electric/40 text-xs font-semibold text-dark transition-all has-[:checked]:bg-electric/10 has-[:checked]:border-electric has-[:checked]:text-electric">
                                            <input type="checkbox" name="skills[]" value="<?= strtolower($skill) ?>" class="sr-only" />
                                            <?= $skill ?>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            <div class="form-group" data-field="ttproject">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Project Overview <span class="text-brandOrange">*</span></label>
                                <textarea name="ttproject" rows="3" required
                                    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 placeholder:text-zinc-300 resize-none"
                                    placeholder="What are you building and what do you need the team for?"></textarea>
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <button type="submit" id="techTeamSubmitBtn"
                                class="w-full py-3.5 bg-royal text-white rounded-full font-semibold text-sm hover:bg-electric transition-colors flex items-center justify-center gap-2">
                                <i class="ri-send-plane-line"></i> Request My Tech Team
                            </button>
                            <div id="techTeamSuccess" class="hidden p-4 bg-electric/5 border border-electric/20 rounded-[16px] text-center">
                                <p class="font-semibold text-royal text-sm">Request received! Team proposal in 24 hours.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- API ACCESS -->
            <div id="tab-api" class="tab-panel hidden" data-aos="fade-up">
                <div class="grid lg:grid-cols-2 gap-12 items-start">
                    <div>
                        <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric font-semibold block mb-4">API Access</span>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                            Build With <span class="italic font-serif text-soft">Nesvra's APIs</span>
                        </h2>
                        <p class="text-soft text-sm leading-relaxed mb-8">Access our fintech infrastructure APIs — digital wallet, virtual card issuing, remittance, eSIM provisioning — via RESTful endpoints with full documentation, sandbox, and webhooks.</p>

                        <div class="grid grid-cols-2 gap-3 mb-8">
                            <?php
                            $apis = [
                                ["icon" => "ri-wallet-3-line",      "title" => "Wallet API",         "sub" => "Accounts, balances, transfers"],
                                ["icon" => "ri-bank-card-2-line",   "title" => "Card Issuing API",    "sub" => "Virtual card generation"],
                                ["icon" => "ri-global-line",        "title" => "Remittance API",      "sub" => "Cross-border payouts"],
                                ["icon" => "ri-router-line",        "title" => "eSIM API",            "sub" => "150+ country provisioning"],
                            ];
                            foreach ($apis as $api):
                            ?>
                                <div class="flex items-start gap-3 p-4 bg-[#F8F9FA] border border-zinc-100 rounded-[20px]">
                                    <i class="<?= $api['icon'] ?> text-electric text-lg flex-shrink-0 mt-0.5"></i>
                                    <div>
                                        <p class="font-medium text-dark text-sm"><?= $api['title'] ?></p>
                                        <p class="text-soft text-xs"><?= $api['sub'] ?></p>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div class="p-5 bg-[#F8F9FA] border border-zinc-100 rounded-[24px] border-l-4 border-l-electric mb-6">
                            <p class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold mb-2">Sandbox Access</p>
                            <p class="text-dark text-sm leading-relaxed">Full API sandbox environment available within 48 hours of approval. REST + webhooks, full documentation, SDKs for Node, Python, and PHP.</p>
                        </div>
                    </div>

                    <!-- API Form -->
                    <div class="bg-white border border-zinc-100 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.1)] p-8">
                        <h3 class="text-xl font-[400] text-royal tracking-tight mb-2">Request API Access</h3>
                        <p class="text-soft text-sm mb-6 leading-relaxed">Sandbox keys issued within 48 hours. Tell us about your integration use case.</p>
                        <form id="apiForm" class="flex flex-col gap-4" novalidate>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="form-group" data-field="apiname">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Full Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="apiname" required autocomplete="name"
                                        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 placeholder:text-zinc-300"
                                        placeholder="Jane Smith" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="apiemail">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Work Email <span class="text-brandOrange">*</span></label>
                                    <input type="email" name="apiemail" required autocomplete="email"
                                        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 placeholder:text-zinc-300"
                                        placeholder="dev@company.com" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>
                            <div class="form-group" data-field="apicompany">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Company / Organisation <span class="text-brandOrange">*</span></label>
                                <input type="text" name="apicompany" required autocomplete="organization"
                                    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 placeholder:text-zinc-300"
                                    placeholder="Acme Fintech Ltd" />
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-2">APIs You Need</label>
                                <div class="flex flex-wrap gap-2">
                                    <?php foreach (["Wallet API", "Card Issuing", "Remittance", "eSIM", "KYC/AML", "All APIs"] as $api): ?>
                                        <label class="flex items-center gap-1.5 px-3 py-1.5 border border-zinc-200 rounded-full cursor-pointer hover:border-electric/40 text-xs font-semibold text-dark transition-all has-[:checked]:bg-electric/10 has-[:checked]:border-electric has-[:checked]:text-electric">
                                            <input type="checkbox" name="apis[]" value="<?= strtolower(str_replace([' ', '/'], '-', $api)) ?>" class="sr-only" />
                                            <?= $api ?>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Expected Monthly Volume</label>
                                <select name="apivolume" 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>Under 1,000 API calls/month</option>
                                    <option>1,000 – 50,000 calls/month</option>
                                    <option>50,000 – 500,000 calls/month</option>
                                    <option>500,000+ calls/month</option>
                                </select>
                            </div>
                            <div class="form-group" data-field="apiuse">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Use Case Description <span class="text-brandOrange">*</span></label>
                                <textarea name="apiuse" rows="3" required
                                    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 placeholder:text-zinc-300 resize-none"
                                    placeholder="Briefly describe your integration use case..."></textarea>
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <button type="submit" id="apiSubmitBtn"
                                class="w-full py-3.5 bg-royal text-white rounded-full font-medium text-sm hover:bg-electric transition-colors flex items-center justify-center gap-2">
                                <i class="ri-key-2-line"></i> Request API Access
                            </button>
                            <div id="apiSuccess" class="hidden p-4 bg-electric/5 border border-electric/20 rounded-[16px] text-center">
                                <p class="font-semibold text-royal text-sm">Request received! Sandbox keys within 48 hours.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- ENTERPRISE -->
            <div id="tab-enterprise" class="tab-panel hidden" data-aos="fade-up">
                <div class="grid lg:grid-cols-2 gap-12 items-start">
                    <div>
                        <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange font-semibold block mb-4">Enterprise</span>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                            Large-Scale Builds, <span class="italic font-serif text-soft">Fully Managed</span>
                        </h2>
                        <p class="text-soft text-sm leading-relaxed mb-8">For organisations that need a dedicated engineering partner — scoped engagements, SOC2-ready infrastructure, SLA agreements, and enterprise-level support.</p>

                        <div class="flex flex-col gap-3 mb-8">
                            <?php
                            $ent = [
                                ["icon" => "ri-team-line",              "title" => "Dedicated squad of 6+ engineers", "sub" => "Full-stack, DevOps, QA, PM, and tech lead"],
                                ["icon" => "ri-shield-check-line",      "title" => "SOC2 / HIPAA / PCI-DSS ready",  "sub" => "Compliance-first architecture from day one"],
                                ["icon" => "ri-time-line",              "title" => "99.99% SLA uptime guarantee",   "sub" => "24/7 monitoring and emergency hotfix SLA"],
                                ["icon" => "ri-calendar-schedule-line", "title" => "Quarterly business reviews",    "sub" => "Strategic alignment, roadmap planning, and reporting"],
                            ];
                            foreach ($ent as $e):
                            ?>
                                <div class="flex items-start gap-4 p-4 bg-[#F8F9FA] border border-zinc-100 rounded-[20px]">
                                    <div class="w-9 h-9 rounded-[12px] bg-white border border-zinc-100 flex items-center justify-center flex-shrink-0">
                                        <i class="<?= $e['icon'] ?> text-electric text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-dark text-sm"><?= $e['title'] ?></p>
                                        <p class="text-soft text-xs"><?= $e['sub'] ?></p>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <!-- Enterprise Form -->
                    <div class="bg-white border border-zinc-100 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.1)] p-8">
                        <h3 class="text-xl font-[400] text-royal tracking-tight mb-2">Enterprise Enquiry</h3>
                        <p class="text-soft text-sm mb-6 leading-relaxed">A senior solutions architect will respond within 4 business hours.</p>
                        <form id="enterpriseForm" class="flex flex-col gap-4" novalidate>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="form-group" data-field="entname">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Full Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="entname" required autocomplete="name"
                                        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 placeholder:text-zinc-300"
                                        placeholder="Name" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="entemail">
                                    <label class="block font-semibold text-dark text-sm mb-1.5">Work Email <span class="text-brandOrange">*</span></label>
                                    <input type="email" name="entemail" required autocomplete="email"
                                        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 placeholder:text-zinc-300"
                                        placeholder="cto@corp.com" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>
                            <div class="form-group" data-field="entcompany">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Company <span class="text-brandOrange">*</span></label>
                                <input type="text" name="entcompany" required autocomplete="organization"
                                    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 placeholder:text-zinc-300"
                                    placeholder="Enterprise Corp" />
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-1.5">Estimated Budget</label>
                                <select name="budget" 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>$50K – $100K</option>
                                    <option>$100K – $250K</option>
                                    <option>$250K – $500K</option>
                                    <option>$500K+</option>
                                    <option>Flexible / TBD</option>
                                </select>
                            </div>
                            <div class="form-group" data-field="entscope">
                                <label class="block font-semibold text-dark text-sm mb-1.5">Project Scope <span class="text-brandOrange">*</span></label>
                                <textarea name="entscope" rows="4" required
                                    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 placeholder:text-zinc-300 resize-none"
                                    placeholder="Describe your project, current stack, and what you need Nesvra to deliver..."></textarea>
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>
                            <button type="submit" id="enterpriseSubmitBtn"
                                class="w-full py-3.5 bg-royal text-white rounded-full font-semibold text-sm hover:bg-electric transition-colors flex items-center justify-center gap-2">
                                <i class="ri-building-4-line"></i> Submit Enterprise Enquiry
                            </button>
                            <div id="enterpriseSuccess" class="hidden p-4 bg-electric/5 border border-electric/20 rounded-[16px] text-center">
                                <p class="font-semibold text-royal text-sm">Received! A solutions architect will contact you within 4 hours.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>

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

    <style>
        .form-group.has-error input,
        .form-group.has-error textarea {
            border-color: #ef4444;
            background-color: #fff5f5;
        }

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

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

            // ── Tab switching ──────────────────────────────────────
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabPanels = document.querySelectorAll('.tab-panel');

            // Auto-activate from URL param e.g. /get-started?tab=api
            const urlTab = new URLSearchParams(window.location.search).get('tab');
            if (urlTab) activateTab(urlTab);

            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => activateTab(btn.dataset.tab));
            });

            function activateTab(id) {
                tabBtns.forEach(b => {
                    const active = b.dataset.tab === id;
                    b.classList.toggle('bg-royal', active);
                    b.classList.toggle('text-white', active);
                    b.classList.toggle('border-royal', active);
                    b.classList.toggle('bg-white', !active);
                    b.classList.toggle('text-soft', !active);
                    b.classList.toggle('border-zinc-200', !active);
                });
                tabPanels.forEach(p => p.classList.toggle('hidden', p.id !== `tab-${id}`));
            }

            // ── Shared validation ─────────────────────────────────
            function validateField(input) {
                const group = input.closest('.form-group');
                if (!group) return true;
                const errEl = group.querySelector('.error-msg');
                let valid = true,
                    msg = '';
                if (input.required && !input.value.trim()) {
                    valid = false;
                    msg = 'Required.';
                } else if (input.type === 'email' && !/^\S+@\S+\.\S+$/.test(input.value.trim())) {
                    valid = false;
                    msg = 'Valid email required.';
                }
                group.classList.toggle('has-error', !valid);
                group.classList.toggle('has-success', valid && !!input.value.trim());
                if (errEl) {
                    errEl.textContent = msg;
                    errEl.classList.toggle('hidden', valid);
                }
                return valid;
            }

            function wireForm(formId, btnId, successId) {
                const form = document.getElementById(formId);
                const btn = document.getElementById(btnId);
                const succ = document.getElementById(successId);
                if (!form) return;

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

                form.addEventListener('submit', async e => {
                    e.preventDefault();
                    let ok = true;
                    form.querySelectorAll('input[required], textarea[required]').forEach(i => {
                        if (!validateField(i)) ok = false;
                    });
                    if (!ok) return;
                    btn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>';
                    btn.disabled = true;
                    await new Promise(r => setTimeout(r, 800));
                    form.reset();
                    btn.disabled = false;
                    succ.classList.remove('hidden');
                    setTimeout(() => succ.classList.add('hidden'), 5000);
                });
            }

            wireForm('platformForm', 'platformSubmitBtn', 'platformSuccess');
            wireForm('techTeamForm', 'techTeamSubmitBtn', 'techTeamSuccess');
            wireForm('apiForm', 'apiSubmitBtn', 'apiSuccess');
            wireForm('enterpriseForm', 'enterpriseSubmitBtn', 'enterpriseSuccess');
        });
    </script>

</body>

</html>