<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "FAQ | Nesvra Tech Team & Platform Solutions";
include 'components/head.php';
?>

<body class="bg-white">

<?php include 'components/navbar.php'; ?>

<!-- HERO -->
<section class="relative pt-32 pb-20 px-[5%] overflow-hidden bg-white border-b border-zinc-100">
    <!-- Light-mode Tech Grid Patterns Overlay -->
    <div class="absolute inset-0 pointer-events-none opacity-[0.03]"
        style="background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 32px 32px;"></div>
    
    <!-- Muted Ambient Brand Colors Glow adapted for crisp white backdrops -->
    <div class="absolute -top-32 -right-32 w-[500px] h-[500px] bg-brandOrange/5 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="absolute -bottom-32 -left-32 w-[400px] h-[400px] bg-electric/5 rounded-full blur-[100px] pointer-events-none"></div>

    <div class="max-w-[900px] mx-auto text-center relative z-10">
        <!-- Section Sub-tagline -->
        <span class="font-mono text-[11px] font-bold uppercase tracking-[0.4em] text-brandOrange mb-6 block" data-aos="fade-up">
            Help & Answers
        </span>
        
        <!-- High-Impact Bold Heading Matrix -->
        <h1 data-aos="fade-up" data-aos-delay="100"
            class="text-5xl md:text-7xl font-[400] tracking-[-0.04em] leading-[1.0] text-zinc-950 mb-6">
            Frequently<br><span class="italic font-serif font-normal text-zinc-400">asked questions.</span>
        </h1>
        
        <!-- Descriptive Editorial Paragraph -->
        <p data-aos="fade-up" data-aos-delay="200" class="text-zinc-500 text-base 
         text-lg max-w-[620px] mx-auto leading-relaxed mb-10 font-mono text-sm">
            Everything about our Tech Team Subscription, white‑label platforms, pricing, and onboarding. Get clarity instantly.
        </p>

        <!-- Functional Interactive Keyword Search Bar Container -->
        <div data-aos="fade-up" data-aos-delay="300" class="relative max-w-[580px] mx-auto mb-12">
            <div class="absolute left-5 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none">
                <i class="ri-search-line text-lg"></i>
            </div>
            <input type="text" id="searchInput"
                placeholder="Search by keyword — pricing, white-label, mobile app..."
                class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 placeholder-zinc-400 rounded-2xl py-4 pl-12 pr-6 text-sm font-[400] focus:outline-none focus:border-brandOrange focus:bg-white transition-all duration-300 shadow-sm shadow-zinc-100/50">
            
            <div id="searchCount" class="absolute right-5 top-1/2 -translate-y-1/2 font-mono text-[10px] text-zinc-400 uppercase tracking-widest hidden"></div>
        </div>

        <!-- Dynamic Category Filter Tabs (Unbroken PHP Context Map) -->
        <div data-aos="fade-up" data-aos-delay="400" class="flex flex-wrap justify-center gap-2.5" id="categoryTabs">
            <?php
            $cats = [
                ['all', 'All Questions'],
                ['products', 'Products'],
                ['solutions', 'Solutions'],
                ['pricing', 'Pricing'],
                ['technical', 'Technical'],
                ['onboarding', 'Onboarding'],
                ['support', 'Support'],
            ];
            foreach ($cats as $i => [$slug, $label]):
            ?>
                <button data-cat="<?= $slug ?>"
    class="cat-btn px-5 py-2.5 rounded-xl font-mono text-[11px] uppercase tracking-widest border font-semibold transition-all duration-300
    [&.active]:bg-brandOrange [&.active]:border-brandOrange [&.active]:text-white [&.active]:shadow-md [&.active]:shadow-orange-500/10
    bg-zinc-50 border-zinc-200/80 text-zinc-500 hover:border-zinc-950 hover:bg-white hover:text-zinc-950 <?= $slug === 'all' ? 'active' : '' ?>">
    <?= $label ?>
</button>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- FAQ CONTENT -->
<section class="py-24 px-[5%] bg-white">
    <div class="max-w-[1200px] mx-auto">

        <!-- Stats bar -->
        <div class="flex flex-wrap gap-6 items-center justify-between mb-16 pb-8 border-b border-zinc-100">
            <div class="flex items-center gap-3">
                <span class="w-2 h-2 rounded-full bg-brandOrange animate-pulse"></span>
                <span id="resultLabel" class="font-mono text-[11px] uppercase tracking-widest text-soft">40+ questions answered</span>
            </div>
            <div class="flex items-center gap-6">
                <div class="text-center">
                    <span class="block text-2xl font-bold tracking-tighter text-royal">40+</span>
                    <span class="font-mono text-[9px] uppercase tracking-widest text-zinc-400">Questions</span>
                </div>
                <div class="text-center">
                    <span class="block text-2xl font-bold tracking-tighter text-royal">6</span>
                    <span class="font-mono text-[9px] uppercase tracking-widest text-zinc-400">Categories</span>
                </div>
                <div class="text-center">
                    <span class="block text-2xl font-bold tracking-tighter text-royal">24h</span>
                    <span class="font-mono text-[9px] uppercase tracking-widest text-zinc-400">Support SLA</span>
                </div>
            </div>
        </div>

        <!-- FAQ Grid -->
        <div id="faqGrid" class="space-y-3"></div>

        <!-- No results -->
        <div id="noResults" class="hidden text-center py-20">
            <div class="w-20 h-20 rounded-full bg-zinc-50 border border-zinc-100 flex items-center justify-center mx-auto mb-6">
                <i class="ri-search-line text-3xl text-zinc-300"></i>
            </div>
            <h3 class="text-xl font-medium text-royal mb-2 tracking-tight">No matches found</h3>
            <p class="text-soft text-sm">Try a different keyword or browse by category above.</p>
        </div>
    </div>
</section>

<!-- CONTACT CTA -->
<section class="py-20 px-[5%] bg-white">
    <div class="max-w-[1200px] mx-auto">
        <div class="relative w-full rounded-[40px] overflow-hidden flex items-center justify-center group bg-dark">
            <div class="absolute inset-0 pointer-events-none opacity-[0.04]"
                style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 28px 28px;"></div>
            <div class="absolute -top-20 -right-20 w-64 h-64 bg-brandOrange/10 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-electric/10 rounded-full blur-3xl pointer-events-none"></div>

            <div class="relative z-10 w-full px-8 py-20 text-center" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.5em] text-brandOrange block mb-6">Still have questions?</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-white leading-tight mb-4">
                    Talk to our team<br><span class="italic font-serif text-zinc-400">directly.</span>
                </h2>
                <p class="text-zinc-400 text-lg mb-8 max-w-[500px] mx-auto leading-relaxed font-mono text-sm">
                    We'll help you understand exactly how Nesvra can transform your business technology.
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="book-strategy-call.php" class="px-10 py-4 bg-brandOrange text-white rounded-full font-bold text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all shadow-xl">
                        Book a Free Consultation →
                    </a>
                    <a href="mailto:support@nesvra.com" class="px-10 py-4 bg-white/5 border border-white/10 text-white rounded-full font-bold text-xs uppercase tracking-widest hover:bg-white/10 transition-all">
                        support@nesvra.com
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

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

<script>
const faqData = [
    // PRODUCTS
    { cat:"products", q:"What platforms does Nesvra offer?", a:"Nesvra provides five core white‑label fintech & digital platforms: Virtual Card Platform (issue virtual cards), eSIM Platform (global data plans), Remittance Platform (cross‑border transfers), Airtime & Gift Card Marketplace, and Digital Wallet (full ecosystem). Each is modular, API‑first, and ready for deployment." },
    { cat:"products", q:"Which platform is right for my business?", a:"It depends on your target market. If you need international payments, Virtual Card or Remittance. For telecom & travel, eSIM works best. Retail and rewards → Airtime/Gift Card. For a full banking experience, choose Digital Wallet. Our team advises based on your business model." },
    { cat:"products", q:"Can I customize any platform?", a:"Yes, every platform is fully customizable — from UI/UX and workflows to business logic. You can add custom features, integrate third‑party services, and tailor the platform to your brand identity." },
    { cat:"products", q:"Are all platforms white-label?", a:"Absolutely. All Nesvra platforms are 100% white‑label: you own the branding, domain, and customer experience. No Nesvra logos appear unless you want us listed as a tech partner." },
    { cat:"products", q:"How long does it take to deploy a platform?", a:"Most platforms go live in 4–8 weeks, depending on customizations. Our pre‑built fintech components accelerate deployment 70% faster than building from scratch, with a dedicated squad handling configuration." },
    { cat:"products", q:"Do platforms include mobile apps?", a:"Yes, every platform includes native iOS and Android mobile applications with full feature parity, plus a responsive web dashboard. Apps are published under your brand in the App Store & Play Store." },
    { cat:"products", q:"What tech stack are platforms built on?", a:"We use modern stacks: Node.js / Python (backend), React / Next.js (web frontend), React Native / Flutter for mobile, PostgreSQL, AWS/GCP cloud infrastructure. The stack is enterprise‑grade, scalable, and secure." },
    { cat:"products", q:"Can I host platforms on my own servers?", a:"Yes, we can deploy on your own cloud accounts (AWS, Azure, GCP) or on‑premise infrastructure. Source code and deployment scripts are provided, ensuring full control and data residency compliance." },
    // SOLUTIONS
    { cat:"solutions", q:"What is the Tech Team Subscription?", a:"It's a monthly subscription providing a dedicated remote tech team (developers, PM, QA, strategist) that serves as your outsourced technology department. We build, maintain, and scale your digital products without hiring overhead." },
    { cat:"solutions", q:"How is it different from hiring?", a:"Instead of recruiting 3–6 engineers (costing $300k+/year), you get a multi‑disciplinary team for a fixed monthly fee. No HR, no payroll taxes, no retention risk — just outcomes and fast iteration." },
    { cat:"solutions", q:"How quickly can we onboard?", a:"Onboarding takes 3–7 business days. After signing, we assign a project manager, conduct discovery, and within a week your team is operational and starting the first sprint." },
    { cat:"solutions", q:"Who are the team members?", a:"Every subscription includes: a Technical Project Manager, Frontend & Backend engineers, QA specialist, DevOps engineer (depending on plan), and a Fractional CTO for strategic guidance." },
    { cat:"solutions", q:"Can I scale up or down?", a:"Yes, monthly flexibility. Upgrade to a higher tier for more hours/specialists, or downgrade when your needs change. No lock‑ins after the initial 3‑month period." },
    { cat:"solutions", q:"What if I need to pause?", a:"We offer a pause option for up to 3 months (with a minimal retainer fee to preserve team knowledge). After that, you can resume full subscription seamlessly." },
    { cat:"solutions", q:"What industries do you serve?", a:"We serve fintech, e‑commerce, healthtech, logistics, EdTech, real estate, and B2B SaaS. Any business that requires robust web/mobile platforms and strategic technology execution." },
    { cat:"solutions", q:"What project types do you handle?", a:"End‑to‑end product builds, legacy modernization, API integrations, mobile apps, internal CRMs, payment gateways, admin dashboards, and full digital transformations." },
    // PRICING
    { cat:"pricing", q:"How does pricing work?", a:"Fixed monthly subscription based on your chosen tier: Foundation ($2,500/mo), Growth ($5,500/mo), Enterprise ($12,000/mo), or Custom ($20k+). Each tier includes a dedicated team size and monthly engineering hours." },
    { cat:"pricing", q:"Are there setup fees?", a:"One‑time onboarding fees apply: Foundation ($1,500), Growth ($2,500), Enterprise ($5,000). Custom onboarding is quoted separately. This covers discovery, environment setup, and initial backlog grooming." },
    { cat:"pricing", q:"What payment methods do you accept?", a:"We accept wire transfers, credit cards (Visa/Mastercard via Stripe), and USD/NGN/GBP payments. Net‑30 invoicing is available for enterprise clients." },
    { cat:"pricing", q:"Do you offer annual discounts?", a:"Yes, paying annually reduces monthly cost by ~15–18%. For example, the Growth plan drops from $5,500 to $4,700/month with annual commitment, saving $9,600/year." },
    { cat:"pricing", q:"Can I get a custom quote?", a:"Absolutely. For bespoke team compositions, high‑volume hours, or large enterprises with compliance needs, our custom enterprise plan starts from $20k/month. Contact us for a tailored proposal." },
    { cat:"pricing", q:"What's included in each tier?", a:"Foundation: 120 engineering hrs/mo, PM, 2 engineers. Growth: 280 hrs/mo, 3 engineers + DevOps. Enterprise: 500+ hrs, 6+ engineers + QA lead + fractional CTO. All include UI/UX, agile tools, and support." },
    { cat:"pricing", q:"Are there overage charges?", a:"We monitor usage proactively; if your plan's hours are exceeded, we agree on overage rates ($50–$80/hour) or upgrade your tier. Most clients stay within allocated hours." },
    { cat:"pricing", q:"What's the refund policy?", a:"We don't offer refunds for monthly subscriptions, but we provide a satisfaction guarantee: if you're not happy in the first 14 days, we'll restructure the team or adjust scope. Long‑term contracts have prorated exit terms." },
    // TECHNICAL
    { cat:"technical", q:"What tech stacks does Nesvra use?", a:"We're stack‑agnostic but specialize in JavaScript/TypeScript (React, Next.js, Node), Python (Django/FastAPI), React Native, Flutter, and cloud providers AWS, GCP, Azure. For databases: PostgreSQL, MongoDB, Firebase." },
    { cat:"technical", q:"Do we get source code ownership?", a:"Yes, 100% IP ownership. After subscription ends, all source code, documentation, and infrastructure assets are transferred to you. No licensing or usage restrictions." },
    { cat:"technical", q:"How are platforms secured?", a:"We implement OWASP standards, encryption at rest/in transit, SOC2‑inspired controls, regular penetration testing, DDoS protection, and RBAC. We also help with PCI DSS / GDPR compliance where needed." },
    { cat:"technical", q:"What are your uptime SLAs?", a:"Standard SLA is 99.9% uptime for production systems. Enterprise plans include 99.99% with financial credits. We monitor 24/7 and respond within 15 minutes for critical incidents." },
    { cat:"technical", q:"Do you provide API documentation?", a:"Yes, we generate interactive API docs (OpenAPI/Swagger), Postman collections, and integration guides. All endpoints are documented, versioned, and ready for third‑party developers." },
    { cat:"technical", q:"How do deployments work?", a:"We use CI/CD pipelines (GitHub Actions/GitLab). Staging and production environments with automated testing. You control deployment approvals via our shared dashboard." },
    { cat:"technical", q:"What's the testing process?", a:"We apply unit tests, integration tests, end‑to‑end testing (Cypress/Playwright), and manual QA sprints. Security and performance testing are part of every release cycle." },
    { cat:"technical", q:"Which cloud infrastructure providers do you support?", a:"We support AWS (preferred), Google Cloud, Microsoft Azure, DigitalOcean, and hybrid on‑prem setups. Infrastructure as Code (Terraform) is used for repeatability across environments." },
    // ONBOARDING
    { cat:"onboarding", q:"What happens after I book a call?", a:"After a consultation, we send a proposal & contract. Once signed, you're assigned a Technical Account Manager who schedules kickoff calls, shares access forms, and sends your onboarding timeline." },
    { cat:"onboarding", q:"How long does onboarding take?", a:"3 to 7 business days after paperwork. During that period we set up communication tools (Slack/Teams), repositories (GitHub), project board (Jira/ClickUp), and run initial discovery workshops." },
    { cat:"onboarding", q:"What do I need to provide?", a:"We'll ask for existing code repos (if any), API keys for third‑party services, business requirements, design files, and access to any cloud accounts you'd like us to manage." },
    { cat:"onboarding", q:"Who is my main contact?", a:"Your dedicated Project Manager (PM) is the single point of contact. They handle daily coordination, sprint planning, reporting, and escalations. For strategic matters, your Fractional CTO is available." },
    { cat:"onboarding", q:"How does communication work?", a:"Daily async via Slack/Discord, weekly sprint review calls, and monthly roadmap calls. We adapt to your existing tools (Teams, Zoom, etc.) and time zone (USA, Europe, Africa)." },
    { cat:"onboarding", q:"What tools do you use?", a:"Typical stack: GitHub/GitLab, Jira/Linear, Slack, Google Meet/Zoom, Figma, Miro for discovery. You can request alternative tools; we integrate into your environment." },
    { cat:"onboarding", q:"What's in the discovery phase?", a:"We analyze your business goals, user personas, existing architecture, and compliance requirements. Output: technical specification, product roadmap, user stories, and initial sprint plan." },
    { cat:"onboarding", q:"How are project milestones set?", a:"We adopt agile methodology with 2‑week sprints. Milestones (MVP, alpha, beta, launch) are defined during discovery and tracked in the shared project board, reviewed weekly with your stakeholders." },
    // SUPPORT
    { cat:"support", q:"What kind of support do I get after launch?", a:"All plans include bug fixing, security patches, and performance monitoring. The Tech Team continues iterating features, and we provide 24/5 support (24/7 for enterprise). Incident response SLA: 2‑4 hours." },
    { cat:"support", q:"Can I request hotfixes outside business hours?", a:"Yes, critical production issues are handled 24/7. For enterprise clients, we offer a dedicated on‑call engineer. Standard plans cover emergency fixes during weekends with prior scheduling." },
    { cat:"support", q:"Do you offer training to my internal team?", a:"Absolutely. We provide documentation, video tutorials, live handover sessions, and shadowing so your in‑house team can take over maintenance anytime. Training is included in onboarding & offboarding." },
    { cat:"support", q:"What if I'm not satisfied with the team?", a:"We take satisfaction seriously. You can request a team member replacement within 7 days, or upgrade/downgrade your plan. We want long‑term partnerships, so we'll work to realign expectations." },
];

const catColors = {
    products:   { bg: 'bg-electric/10',     text: 'text-electric',     label: 'Products'   },
    solutions:  { bg: 'bg-brandOrange/10',  text: 'text-brandOrange',  label: 'Solutions'  },
    pricing:    { bg: 'bg-royal/10',        text: 'text-royal',        label: 'Pricing'    },
    technical:  { bg: 'bg-electric/10',     text: 'text-electric',     label: 'Technical'  },
    onboarding: { bg: 'bg-brandOrange/10',  text: 'text-brandOrange',  label: 'Onboarding' },
    support:    { bg: 'bg-royal/10',        text: 'text-royal',        label: 'Support'    },
};

let activeCategory = 'all';
let searchTerm = '';
let openIndex = null;

function render() {
    const filtered = faqData.map((item, i) => ({ ...item, _i: i })).filter(item => {
        const matchesCat = activeCategory === 'all' || item.cat === activeCategory;
        const matchesSearch = searchTerm === '' ||
            item.q.toLowerCase().includes(searchTerm.toLowerCase()) ||
            item.a.toLowerCase().includes(searchTerm.toLowerCase());
        return matchesCat && matchesSearch;
    });

    const grid = document.getElementById('faqGrid');
    const noResults = document.getElementById('noResults');
    const label = document.getElementById('resultLabel');

    if (filtered.length === 0) {
        grid.innerHTML = '';
        noResults.classList.remove('hidden');
        label.textContent = 'No results found';
        return;
    }

    noResults.classList.add('hidden');
    label.textContent = `${filtered.length} question${filtered.length !== 1 ? 's' : ''} ${searchTerm ? 'matching "' + searchTerm + '"' : activeCategory !== 'all' ? 'in ' + catColors[activeCategory]?.label : 'answered'}`;

    grid.innerHTML = filtered.map((faq, idx) => {
        const c = catColors[faq.cat] || catColors.products;
        const isOpen = openIndex === faq._i;
        return `
        <div class="faq-item group border border-zinc-100 rounded-[20px] overflow-hidden transition-all duration-300 hover:border-zinc-200 hover:shadow-[0_8px_30px_-8px_rgba(0,0,0,0.06)] ${isOpen ? 'shadow-md border-zinc-200' : ''}"
             data-idx="${faq._i}" data-cat="${faq.cat}">
            <button class="faq-q w-full flex items-center justify-between gap-4 px-8 py-6 text-left" onclick="toggleFAQ(${faq._i})">
                <div class="flex items-center gap-4 min-w-0">
                    <span class="shrink-0 px-2.5 py-1 ${c.bg} ${c.text} font-mono text-[9px] uppercase tracking-widest rounded-full font-bold hidden md:block">${c.label}</span>
                    <span class="font-medium text-royal text-[15px] leading-snug tracking-tight">${faq.q}</span>
                </div>
                <div class="faq-icon shrink-0 w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center transition-all duration-300 ${isOpen ? 'bg-royal border-royal rotate-45' : ''}">
                    <i class="ri-add-line text-sm ${isOpen ? 'text-white' : 'text-royal'}"></i>
                </div>
            </button>
            <div class="faq-a transition-all duration-500 ease-in-out overflow-hidden ${isOpen ? 'max-h-[400px] opacity-100' : 'max-h-0 opacity-0'}">
                <div class="px-8 pb-6 text-soft text-sm leading-relaxed border-t border-zinc-50 pt-4">
                    ${faq.a}
                </div>
            </div>
        </div>`;
    }).join('');
}

function toggleFAQ(idx) {
    openIndex = openIndex === idx ? null : idx;
    render();
}

document.getElementById('searchInput').addEventListener('input', e => {
    searchTerm = e.target.value.trim();
    openIndex = null;
    render();
});

document.getElementById('categoryTabs').addEventListener('click', e => {
    const btn = e.target.closest('.cat-btn');
    if (!btn) return;
    activeCategory = btn.dataset.cat;
    openIndex = null;
    searchTerm = '';
    document.getElementById('searchInput').value = '';
    document.querySelectorAll('.cat-btn').forEach(b => {
        const isActive = (b === btn);
b.classList.toggle('active', isActive);
    });
    render();
});

render();
</script>

</body>
</html>
