<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();

// Simple auth check
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    // Redirect to login page if not logged in
    // header('Location: login.php');
    // exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FinMox — Portal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>
<body class="bg-warm">
    <main class="max-w-7xl mx-auto p-6">
    <!-- PORTAL / DASHBOARD PAGE -->
    <section id="page-portal" class="page fade">
        <section class="panel-strong p-8 lg:p-10">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
                <!-- Left: Welcome + controls -->
                <div class="lg:max-w-xl">
                    <div class="chip inline-flex px-3 py-1 text-xs">Portal</div>
                    <h1 class="mt-5 text-4xl font-extrabold tracking-tight">FinMox Workspace</h1>
                    <p class="mt-4 text-gray-700">
                        Review hiring execution, decision trails, and audit-ready outputs. Your access is aligned to your plan.
                    </p>
                    <!-- top actions -->
                    <div class="mt-6 flex flex-wrap gap-3">
                        <a href="index.php" class="chip px-5 py-3 rounded-2xl text-sm hoverlift">
                            ← Back to Website
                        </a>
                        <a href="#pricing" onclick="openPage('pricing'); return false;" class="bg-black text-white px-5 py-3 rounded-2xl text-sm hoverlift">
                            Upgrade / Downgrade
                        </a>
                    </div>
                    <!-- Plan card -->
                    <div class="mt-7 panel p-6">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <div class="text-sm font-semibold">Plan</div>
                                <div class="text-sm text-gray-600 mt-1">
                                    <span class="chip px-2 py-1 text-xs">Growth</span>
                                    <span class="ml-2 text-xs text-gray-500">Demo placeholder</span>
                                </div>
                            </div>
                            <button type="button" class="chip px-4 py-2 rounded-2xl text-sm hoverlift" onclick="openPage('pricing')">
                                Manage Plan
                            </button>
                        </div>
                        <!-- limits -->
                        <div class="mt-5 grid sm:grid-cols-3 gap-3">
                            <div class="panel-strong p-4">
                                <div class="text-xs text-gray-500">Roles / month</div>
                                <div class="mt-2 text-xl font-extrabold">10</div>
                            </div>
                            <div class="panel-strong p-4">
                                <div class="text-xs text-gray-500">Audit exports</div>
                                <div class="mt-2 text-xl font-extrabold">25</div>
                            </div>
                            <div class="panel-strong p-4">
                                <div class="text-xs text-gray-500">Automation</div>
                                <div class="mt-2 text-xl font-extrabold">On</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right: Portal modules -->
                <div class="flex-1">
                    <div class="grid md:grid-cols-2 gap-4">
                        <!-- Module: Roles -->
                        <div class="panel p-6">
                            <div class="flex items-center justify-between gap-4">
                                <h3 class="font-semibold">Open Roles</h3>
                                <span class="chip px-3 py-1 text-xs" id="kpiRoles">0</span>
                            </div>
                            <div id="roles-list" class="mt-4 space-y-3">
                                <!-- JS will render roles here -->
                            </div>
                        </div>
                        <!-- Module: Candidates -->
                        <div class="panel p-6">
                             <div class="flex items-center justify-between gap-4">
                                <h3 class="font-semibold">Active Candidates</h3>
                                <span class="chip px-3 py-1 text-xs" id="kpiCandidates">0</span>
                            </div>
                            <div id="candidates-list" class="mt-4 space-y-3">
                                <!-- JS will render candidates here -->
                            </div>
                        </div>
                    </div>
                     <div class="mt-4 panel p-6">
                        <div class="flex items-center justify-between gap-4">
                            <h3 class="font-semibold">Execution Feed</h3>
                             <span class="chip px-3 py-1 text-xs">Live</span>
                        </div>
                         <div id="events-list" class="mt-4 space-y-3 text-sm">
                             <!-- JS will render events here -->
                         </div>
                    </div>
                    <div class="mt-4 panel p-6">
                        <div class="flex items-center justify-between gap-4">
                            <h3 class="font-semibold">Execution Risks (SLAs)</h3>
                             <span class="chip px-3 py-1 text-xs" id="kpiSla">0</span>
                        </div>
                         <div id="sla-list" class="mt-4 space-y-3">
                             <!-- JS will render SLA risks here -->
                         </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    </main>

<script>
const pages = ['home','problem','why','features','how','roi','pricing','who','trust','roadmap','faq','signin','apply','portal'];

const demo = {
    roles: [
        { role: 'Account Executive', status: 'Open', criteria: 'Locked v2', candidates: 128, owner: 'People Ops' },
        { role: 'Sales Engineer', status: 'Open', criteria: 'Locked v1', candidates: 64, owner: 'RevOps' },
        { role: 'Gov Account Manager', status: 'Pilot', criteria: 'Draft', candidates: 22, owner: 'Hiring Lead' },
    ],
    candidates: [
        { name: 'Jordan M.', role: 'Account Executive', score: 92, stage: 'Final', status: 'On track' },
        { name: 'Ariana K.', role: 'Sales Engineer', score: 88, stage: 'Panel', status: 'SLA risk' },
        { name: 'Devin R.', role: 'Account Executive', score: 83, stage: 'Screen', status: 'On track' },
        { name: 'Mina S.', role: 'Gov Account Manager', score: 79, stage: 'Intake', status: 'Waiting' },
    ],
    events: [
        { time: 'Today 9:42a', event: 'CRITERIA_LOCKED', entity: 'Account Executive', actor: 'People Ops', notes: 'Locked v2 (scope freeze).' },
        { time: 'Today 10:05a', event: 'SCORE_SUBMITTED', entity: 'Jordan M.', actor: 'Interviewer', notes: 'Score 92 + notes captured.' },
        { time: 'Today 11:12a', event: 'STAGE_CHANGED', entity: 'Jordan M.', actor: 'FinMox', notes: 'Moved to Final (automation).' },
        { time: 'Today 12:01p', event: 'SLA_NUDGE_SENT', entity: 'Ariana K.', actor: 'FinMox', notes: 'Feedback overdue → nudge.' },
    ],
    sla: [
        { title: 'Feedback overdue', detail: 'Sales Engineer · Panel interview', risk: 'High' },
        { title: 'Schedule pending', detail: 'Account Executive · Final', risk: 'Medium' },
        { title: 'Criteria draft', detail: 'Gov Account Manager · Needs lock', risk: 'Medium' },
    ]
};

function renderDemo() {
    // KPIs
    const kpiRoles = document.getElementById('kpiRoles');
    const kpiCandidates = document.getElementById('kpiCandidates');
    const kpiSla = document.getElementById('kpiSla');

    if (kpiRoles) kpiRoles.textContent = demo.roles.length;
    if (kpiCandidates) kpiCandidates.textContent = demo.candidates.length;
    if (kpiSla) kpiSla.textContent = demo.sla.filter(x => x.risk === 'High' || x.risk === 'Medium').length;

    // Roles List
    const rolesList = document.getElementById('roles-list');
    if (rolesList) {
        rolesList.innerHTML = demo.roles.map(r => `
            <div class="panel-strong p-3">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">${r.role}</div>
                    <div class="text-xs chip ${r.status === 'Open' ? '' : 'bg-gray-200'}">${r.status}</div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    Criteria: ${r.criteria} · Candidates: ${r.candidates} · Owner: ${r.owner}
                </div>
            </div>
        `).join('');
    }

    // Candidates List
    const candidatesList = document.getElementById('candidates-list');
    if (candidatesList) {
        candidatesList.innerHTML = demo.candidates.map(c => `
            <div class="panel-strong p-3">
                 <div class="flex items-center justify-between">
                    <div class="font-semibold">${c.name}</div>
                    <div class="text-xs font-bold">${c.score}</div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    ${c.role} · Stage: ${c.stage} · Status: ${c.status}
                </div>
            </div>
        `).join('');
    }
    
    // Events List
    const eventsList = document.getElementById('events-list');
    if(eventsList) {
        eventsList.innerHTML = demo.events.map(e => `
            <div class="panel-strong p-3">
                <div class="flex items-start justify-between">
                    <div>
                        <span class="font-semibold">${e.event}</span>
                        <span class="text-gray-600"> · ${e.entity}</span>
                    </div>
                    <div class="text-xs text-gray-500">${e.time}</div>
                </div>
                <div class="mt-1 text-xs text-gray-700">${e.notes}</div>
            </div>
        `).join('');
    }

    // SLA List
    const slaList = document.getElementById('sla-list');
    if(slaList) {
        slaList.innerHTML = demo.sla.map(s => `
            <div class="panel-strong p-3">
                 <div class="flex items-center justify-between">
                    <div class="font-semibold">${s.title}</div>
                    <div class="text-xs chip ${s.risk === 'High' ? 'bg-red-200' : 'bg-yellow-200'}">${s.risk}</div>
                </div>
                <div class="mt-1 text-xs text-gray-600">${s.detail}</div>
            </div>
        `).join('');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    // This will render the demo data on the portal page
    renderDemo();
});
</script>
</body>
</html>
