<?php
/**
 * Nesvra Ecosystem — Order Success Page
 */
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$order = $_SESSION['latest_order'] ?? [
    'ref'         => 'NES-' . strtoupper(substr(uniqid(), -6)),
    'product'     => 'Digital Wallet Platform — Enterprise',
    'price_usd'   => 8000,
    'crypto_type' => 'USDT',
    'network'     => 'TRC20',
    'crypto_amt'  => '8,000.00 USDT',
    'txid'        => '0x71c8a97f00c598f56708b7e28a816223b81e59273612849',
    'customer'    => [
        'name'    => 'Customer',
        'email'   => 'founder@company.com',
        'phone'   => '+1 (555) 000-0000',
        'company' => 'Financial Technologies Ltd',
        'country' => 'Nigeria',
    ],
    'addons'      => [],
    'timestamp'   => date('Y-m-d H:i:s'),
];
?>
<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Order Confirmed #" . htmlspecialchars($order['ref']) . " | Nesvra";
include 'components/head.php';
?>
<body class="bg-[#F8FAFC] min-h-screen text-slate-900 flex flex-col justify-between selection:bg-brandOrange selection:text-white">

    <!-- Top Navigation Header -->
    <header class="w-full py-5 px-6 sm:px-12 flex items-center justify-between border-b border-slate-200/80 bg-white/80 backdrop-blur-md">
        <a href="index.php" class="flex items-center gap-3">
            <img src="Asset/logo-colored.png" alt="Nesvra" class="h-8 w-auto object-contain block" onerror="this.onerror=null; this.src='Asset/logo.png';">
        </a>
        <a href="index.php" class="text-xs font-semibold text-soft hover:text-royal transition-colors flex items-center gap-1.5">
            <i class="ri-home-5-line"></i> Back to Homepage
        </a>
    </header>

    <!-- Main Success Container -->
    <main class="flex-1 flex items-center justify-center p-4 sm:p-8 my-6">
        <div class="w-full max-w-2xl bg-white border border-slate-200/90 rounded-[32px] shadow-[0_25px_70px_-15px_rgba(8,31,92,0.08)] p-8 sm:p-12 relative overflow-hidden">
            
            <!-- Glow Accent -->
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>

            <!-- Success Badge & Heading -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 rounded-full bg-emerald-50 text-emerald-500 border border-emerald-200/60 mx-auto flex items-center justify-center text-3xl mb-4 shadow-sm">
                    <i class="ri-checkbox-circle-fill"></i>
                </div>
                <span class="font-mono text-xs font-bold uppercase tracking-wider text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">
                    Order Submitted #<?= htmlspecialchars($order['ref']) ?>
                </span>
                <h1 class="text-3xl font-extrabold text-royal tracking-tight mt-3">Thank You for Your Order!</h1>
                <p class="text-soft text-sm mt-2 max-w-md mx-auto leading-relaxed">
                    We received your payment details. Our automated ledger and engineering team are verifying your transaction hash.
                </p>
            </div>

            <!-- Itemized Order Summary Box -->
            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-200/80 mb-8 flex flex-col gap-4">
                <div class="flex items-center justify-between border-b border-slate-200/60 pb-3">
                    <span class="text-xs text-soft font-semibold">Product / Plan</span>
                    <span class="text-xs font-bold text-royal text-right">
                        <?= htmlspecialchars($order['product']) ?>
                        <?php if (!empty($order['plan_name'])): ?>
                            <span class="block text-brandOrange text-[11px] font-medium"><?= htmlspecialchars($order['plan_name']) ?></span>
                        <?php endif; ?>
                    </span>
                </div>

                <div class="flex items-center justify-between border-b border-slate-200/60 pb-3">
                    <span class="text-xs text-soft font-semibold">Payment Method</span>
                    <span class="text-xs font-bold font-mono-custom text-emerald-600"><?= htmlspecialchars($order['crypto_type']) ?> (<?= htmlspecialchars($order['network']) ?>)</span>
                </div>

                <div class="flex items-center justify-between border-b border-slate-200/60 pb-3">
                    <span class="text-xs text-soft font-semibold">Total Amount</span>
                    <div class="text-right">
                        <span class="text-sm font-extrabold font-mono-custom text-royal block"><?= htmlspecialchars($order['crypto_amt']) ?></span>
                        <span class="text-[11px] font-mono-custom text-soft">≈ $<?= number_format($order['price_usd']) ?> USD</span>
                    </div>
                </div>

                <?php if (!empty($order['txid'])): ?>
                <div class="flex items-start justify-between gap-4">
                    <span class="text-xs text-soft font-semibold flex-shrink-0">Transaction Hash</span>
                    <span class="text-[11px] font-mono-custom text-slate-700 break-all text-right"><?= htmlspecialchars($order['txid']) ?></span>
                </div>
                <?php endif; ?>
            </div>

            <!-- Onboarding Roadmap Timeline -->
            <div class="mb-8">
                <h3 class="text-xs font-mono-custom uppercase tracking-wider font-bold text-royal mb-4">What Happens Next</h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="p-4 rounded-2xl bg-white border border-slate-200/80">
                        <span class="w-6 h-6 rounded-full bg-electric/10 text-electric text-xs font-bold flex items-center justify-center mb-2 font-mono-custom">01</span>
                        <h4 class="text-xs font-bold text-royal">Hash Verified</h4>
                        <p class="text-[11px] text-soft mt-1 leading-snug">Automated verification within 15–30 mins.</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-white border border-slate-200/80">
                        <span class="w-6 h-6 rounded-full bg-brandOrange/10 text-brandOrange text-xs font-bold flex items-center justify-center mb-2 font-mono-custom">02</span>
                        <h4 class="text-xs font-bold text-royal">Repo Access</h4>
                        <p class="text-[11px] text-soft mt-1 leading-snug">Source code & docs dispatched to your email.</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-white border border-slate-200/80">
                        <span class="w-6 h-6 rounded-full bg-emerald-500/10 text-emerald-600 text-xs font-bold flex items-center justify-center mb-2 font-mono-custom">03</span>
                        <h4 class="text-xs font-bold text-royal">Kickoff Call</h4>
                        <p class="text-[11px] text-soft mt-1 leading-snug">Engineering onboarding & cloud setup.</p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row items-center gap-3">
                <a href="get-demo" class="w-full py-3.5 px-6 rounded-full bg-royal text-white font-bold text-xs uppercase tracking-wider hover:bg-electric transition-all shadow-md text-center">
                    Explore Live Demos →
                </a>
                <a href="index.php" class="w-full py-3.5 px-6 rounded-full bg-slate-100 text-slate-700 font-bold text-xs uppercase tracking-wider hover:bg-slate-200 transition-all text-center">
                    Return to Homepage
                </a>
            </div>

        </div>
    </main>

    <!-- Footer -->
    <footer class="py-6 text-center text-xs text-soft border-t border-slate-200/80">
        &copy; <?= date('Y') ?> Nesvra Technologies Inc. All rights reserved.
    </footer>

</body>
</html>
