<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus CRM Professional</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Phosphor Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            900: '#1e3a8a',
                        },
                        slate: {
                            850: '#151e2e', // Custom dark for sidebar
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9; 
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1; 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8; 
        }
        
        /* Smooth fade */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Gantt Grid Lines */
        .gantt-grid {
            background-size: 40px 100%;
            background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
        }
        
        .tab-active {
            border-bottom: 2px solid #2563eb;
            color: #2563eb;
            background-color: #eff6ff;
        }
        .tab-inactive {
            border-bottom: 2px solid transparent;
            color: #64748b;
        }
        .tab-inactive:hover {
            color: #334155;
            background-color: #f8fafc;
        }
        
        /* Timeline line */
        .timeline-line::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 15px;
            width: 2px;
            background-color: #e2e8f0;
            z-index: 0;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-800 h-screen flex overflow-hidden font-sans">

    <!-- Sidebar -->
    <aside class="w-64 bg-white border-r border-slate-200 flex-shrink-0 flex flex-col hidden md:flex transition-all duration-300 z-20" id="sidebar">
        <div class="h-16 flex items-center px-6 border-b border-slate-100">
            <div class="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center mr-3 text-white shadow-sm">
                <i class="ph ph-hexagon text-xl"></i>
            </div>
            <span class="text-xl font-bold text-slate-900 tracking-tight">Nexus CRM</span>
        </div>

        <nav class="flex-1 p-4 space-y-1 overflow-y-auto">
            <p class="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 mt-2">Main Module</p>
            <button onclick="router('dashboard')" class="nav-item w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-brand-600 transition-colors group" data-page="dashboard">
                <i class="ph ph-squares-four text-lg mr-3 text-slate-400 group-hover:text-brand-600"></i>
                Dashboard
            </button>
            <button onclick="router('projects')" class="nav-item w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-brand-600 transition-colors group" data-page="projects">
                <i class="ph ph-briefcase text-lg mr-3 text-slate-400 group-hover:text-brand-600"></i>
                Projects
            </button>
            <button onclick="router('tasks')" class="nav-item w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-brand-600 transition-colors group" data-page="tasks">
                <i class="ph ph-check-square text-lg mr-3 text-slate-400 group-hover:text-brand-600"></i>
                Tasks & Milestones
            </button>
            <button onclick="router('gantt')" class="nav-item w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-brand-600 transition-colors group" data-page="gantt">
                <i class="ph ph-chart-bar text-lg mr-3 text-slate-400 group-hover:text-brand-600"></i>
                Reports & Gantt
            </button>
        </nav>

        <div class="p-4 border-t border-slate-100">
            <button onclick="openModal('project')" class="w-full bg-slate-900 text-white rounded-lg px-4 py-3 text-sm font-semibold shadow-lg shadow-slate-300/50 hover:bg-slate-800 transition-all flex items-center justify-center transform active:scale-95">
                <i class="ph ph-plus mr-2 font-bold"></i> New Project
            </button>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col min-w-0 overflow-hidden bg-slate-50/50">
        <!-- Top Header -->
        <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-10 sticky top-0">
            <button class="md:hidden text-slate-500 hover:text-slate-700" onclick="document.getElementById('sidebar').classList.toggle('hidden')">
                <i class="ph ph-list text-2xl"></i>
            </button>
            
            <div class="flex-1 flex justify-end items-center space-x-6">
                <div class="relative hidden sm:block">
                    <i class="ph ph-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                    <input type="text" placeholder="Search (Cmd+K)" class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:bg-white transition-colors w-64">
                </div>
                <div class="h-6 w-px bg-slate-200"></div>
                <button class="relative p-1 text-slate-400 hover:text-slate-600 transition-colors">
                    <i class="ph ph-bell text-xl"></i>
                    <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                </button>
                <div class="flex items-center space-x-3 pl-2 border-l border-transparent">
                    <div class="text-right hidden md:block">
                        <p class="text-sm font-semibold text-slate-900">John Doe</p>
                        <p class="text-xs text-slate-500">Administrator</p>
                    </div>
                    <div class="h-9 w-9 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xs shadow-md ring-2 ring-slate-100 cursor-pointer">
                        JD
                    </div>
                </div>
            </div>
        </header>

        <!-- Dynamic Content Container -->
        <div id="app-content" class="flex-1 overflow-y-auto p-0 relative">
            <!-- Content Injected via JS -->
        </div>
    </main>

    <!-- Large Form Modal (Project) -->
    <div id="modal-overlay" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-6">
                <div id="modal-panel" class="relative transform overflow-hidden rounded-xl bg-white text-left shadow-2xl transition-all sm:w-full sm:max-w-5xl scale-95 opacity-0 duration-300 border border-slate-100">
                    
                    <!-- Professional Modal Header -->
                    <div class="bg-white px-6 py-5 border-b border-slate-100 flex justify-between items-center sticky top-0 z-10">
                        <div class="flex items-center">
                            <div class="h-10 w-10 bg-brand-50 rounded-lg flex items-center justify-center text-brand-600 mr-4">
                                <i id="modal-icon" class="ph ph-folder-plus text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-slate-900" id="modal-title">Initialize Project</h3>
                                <p class="text-sm text-slate-500">Configure workspace parameters and financials</p>
                            </div>
                        </div>
                        <button onclick="closeModal()" class="text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-lg p-2 transition-colors">
                            <i class="ph ph-x text-xl"></i>
                        </button>
                    </div>

                    <div class="px-8 py-8 bg-slate-50/50" id="modal-form-container">
                        <!-- Form injected here -->
                    </div>

                    <!-- Professional Modal Footer -->
                    <div class="bg-white px-6 py-4 border-t border-slate-100 flex justify-between items-center">
                        <div class="text-xs text-slate-400">
                            <i class="ph ph-info mr-1"></i> All fields marked with * are mandatory
                        </div>
                        <div class="flex space-x-3">
                            <button type="button" onclick="closeModal()" class="px-5 py-2.5 rounded-lg border border-slate-200 text-slate-700 font-medium text-sm hover:bg-slate-50 hover:text-slate-900 transition-colors">Cancel</button>
                            <button type="button" id="modal-save-btn" class="px-5 py-2.5 rounded-lg bg-slate-900 text-white font-medium text-sm shadow-md hover:bg-slate-800 transition-all flex items-center">
                                <i class="ph ph-check mr-2"></i> Create Project
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-24 opacity-0 transition-all duration-300 flex items-center w-full max-w-sm p-4 bg-slate-900 text-white rounded-lg shadow-xl" role="alert">
        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-400 bg-emerald-900/30 rounded-lg">
            <i class="ph ph-check-circle text-xl"></i>
        </div>
        <div class="ml-3 text-sm font-medium" id="toast-message">Operation successful.</div>
        <button onclick="this.parentElement.classList.add('translate-y-24', 'opacity-0')" class="ml-auto -mx-1.5 -my-1.5 bg-transparent text-slate-400 hover:text-white rounded-lg focus:ring-2 focus:ring-slate-600 p-1.5 inline-flex h-8 w-8">
            <i class="ph ph-x"></i>
        </button>
    </div>

    <script>
        // --- DATA STORE ---
        const store = {
            projects: [
                { id: 1, name: "Website Redesign", client: "Acme Corp", status: "In Progress", progress: 65, start_date: "2023-09-01", deadline: "2023-12-01", budget: 12500, expenses: 4200, description: "Comprehensive overhaul of corporate web presence including new branding guidelines, CMS migration, and SEO optimization suite.", tags: ["Web", "Design"], members: [1,2], type: "Fixed Cost" },
                { id: 2, name: "Mobile App Launch", client: "Stark Ind", status: "Planning", progress: 15, start_date: "2023-11-01", deadline: "2024-02-15", budget: 45000, expenses: 1200, description: "Native iOS and Android application development for the new smart home ecosystem series.", tags: ["Mobile", "IoT"], members: [2,3], type: "Hourly" },
                { id: 3, name: "CRM Integration", client: "Wayne Ent", status: "Completed", progress: 100, start_date: "2023-08-01", deadline: "2023-10-30", budget: 8200, expenses: 8000, description: "Bi-directional integration of Salesforce endpoints with internal SAP ERP systems.", tags: ["Backend", "Integration"], members: [1], type: "Fixed Cost" },
                { id: 4, name: "Q4 Marketing Campaign", client: "Globex", status: "In Progress", progress: 40, start_date: "2023-10-01", deadline: "2023-12-20", budget: 20000, expenses: 8500, description: "Multi-channel digital marketing campaign focusing on PPC and Social Media for holiday season.", tags: ["Marketing"], members: [3], type: "Retainer" }
            ],
            tasks: [
                { id: 101, projectId: 1, name: "Design Homepage Mockup", assignee: "Sarah", status: "Done", priority: "High" },
                { id: 102, projectId: 1, name: "Develop React Components", assignee: "Mike", status: "In Progress", priority: "High" },
                { id: 103, projectId: 2, name: "Requirements Gathering", assignee: "Sarah", status: "In Progress", priority: "Medium" },
                { id: 104, projectId: 1, name: "SEO Optimization", assignee: "John", status: "To Do", priority: "Low" },
                { id: 105, projectId: 4, name: "Social Media Assets", assignee: "Anna", status: "To Do", priority: "Medium" }
            ],
            milestones: [
                { id: 201, projectId: 1, name: "Alpha Release", date: "2023-11-15", status: "Completed" },
                { id: 202, projectId: 1, name: "Beta Release", date: "2023-11-25", status: "Pending" },
                { id: 203, projectId: 1, name: "Final Launch", date: "2023-12-01", status: "Pending" },
                { id: 204, projectId: 2, name: "Prototype Approval", date: "2024-01-10", status: "Pending" }
            ],
            invoices: [
                { id: 301, projectId: 1, number: "INV-2023-001", date: "2023-10-01", amount: 4000, status: "Paid" },
                { id: 302, projectId: 1, number: "INV-2023-005", date: "2023-11-01", amount: 4000, status: "Sent" }
            ],
            estimates: [
                { id: 401, projectId: 1, number: "EST-2023-101", date: "2023-09-15", amount: 12500, status: "Accepted" }
            ]
        };

        // --- UTILS ---
        const getEl = (id) => document.getElementById(id);
        const formatCurrency = (amount) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
        
        // --- ROUTER & VIEW MANAGER ---
        let currentPage = 'dashboard';
        let currentProjectId = null;
        let currentTab = 'overview';

        function router(page, param = null) {
            currentPage = page;
            const content = getEl('app-content');
            
            // Sidebar Active State
            document.querySelectorAll('.nav-item').forEach(btn => {
                if(btn.dataset.page === page && !param) { 
                    btn.classList.add('bg-slate-50', 'text-brand-600');
                    btn.querySelector('i').classList.remove('text-slate-400');
                    btn.querySelector('i').classList.add('text-brand-600');
                } else {
                    btn.classList.remove('bg-slate-50', 'text-brand-600');
                    btn.classList.add('text-slate-600');
                    btn.querySelector('i').classList.add('text-slate-400');
                    btn.querySelector('i').classList.remove('text-brand-600');
                }
            });

            content.innerHTML = ''; // Clear

            if(page === 'dashboard') renderDashboard(content);
            else if(page === 'projects') renderProjects(content);
            else if(page === 'project-details') {
                currentProjectId = param;
                renderProjectDetails(content, param);
            }
            else if(page === 'tasks') renderTasks(content);
            else if(page === 'gantt') renderGantt(content);
        }

        // --- VIEWS ---

        function renderDashboard(container) {
            const totalProjects = store.projects.length;
            const completedProjects = store.projects.filter(p => p.status === 'Completed').length;
            const activeTasks = store.tasks.filter(t => t.status !== 'Done').length;
            const totalRevenue = store.projects.reduce((acc, curr) => acc + curr.budget, 0);

            const html = `
                <div class="fade-in space-y-6 p-8">
                    <div class="flex items-center justify-between">
                        <h1 class="text-2xl font-bold text-slate-900">Dashboard Overview</h1>
                        <span class="text-sm text-slate-500">Last updated: Just now</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                             <div class="text-sm text-slate-500 mb-1">Total Projects</div>
                             <div class="text-3xl font-bold text-slate-900">${totalProjects}</div>
                        </div>
                         <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                             <div class="text-sm text-slate-500 mb-1">Pipeline Value</div>
                             <div class="text-3xl font-bold text-slate-900">${formatCurrency(totalRevenue)}</div>
                        </div>
                    </div>
                </div>`;
            container.innerHTML = html;
        }

        function renderProjects(container) {
             const html = `
                <div class="fade-in space-y-6 p-8">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-slate-900">Projects</h1>
                            <p class="text-sm text-slate-500 mt-1">Manage projects, track budgets, and monitor deadlines.</p>
                        </div>
                        <div class="flex gap-2">
                            <button onclick="openModal('project')" class="bg-slate-900 text-white px-5 py-2.5 rounded-lg text-sm font-semibold hover:bg-slate-800 flex items-center shadow-md transition-all">
                                <i class="ph ph-plus mr-2 text-lg"></i> New Project
                            </button>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                        <table class="min-w-full text-left text-sm text-slate-600">
                            <thead class="bg-slate-50 text-xs uppercase font-semibold text-slate-500">
                                <tr>
                                    <th class="px-6 py-4">Project Name</th>
                                    <th class="px-6 py-4">Client</th>
                                    <th class="px-6 py-4">Status</th>
                                    <th class="px-6 py-4">Budget</th>
                                    <th class="px-6 py-4">Progress</th>
                                    <th class="px-6 py-4 text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                ${store.projects.map(p => `
                                    <tr class="hover:bg-slate-50 transition-colors group cursor-pointer" onclick="router('project-details', ${p.id})">
                                        <td class="px-6 py-4"><div class="font-medium text-slate-900 text-base">${p.name}</div></td>
                                        <td class="px-6 py-4">${p.client}</td>
                                        <td class="px-6 py-4"><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getStatusColor(p.status)}">${p.status}</span></td>
                                        <td class="px-6 py-4 font-medium text-slate-700">${formatCurrency(p.budget)}</td>
                                        <td class="px-6 py-4 w-48"><div class="w-full bg-slate-100 rounded-full h-1.5"><div class="bg-brand-600 h-1.5 rounded-full" style="width: ${p.progress}%"></div></div></td>
                                        <td class="px-6 py-4 text-right"><button class="text-brand-600 font-medium text-xs hover:underline">View</button></td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>`;
            container.innerHTML = html;
        }

        // --- UPDATED: PROFESSIONAL PROJECT DETAILS VIEW ---
        function renderProjectDetails(container, projectId) {
            const project = store.projects.find(p => p.id === projectId);
            if (!project) return;

            const pTasks = store.tasks.filter(t => t.projectId === projectId);
            const pMilestones = store.milestones.filter(m => m.projectId === projectId);
            const pInvoices = store.invoices.filter(i => i.projectId === projectId);

            const tabs = [
                { id: 'overview', label: 'Overview', icon: 'ph-squares-four' },
                { id: 'tasks', label: 'Work Breakdown', icon: 'ph-tree-structure', count: pTasks.length },
                { id: 'milestones', label: 'Roadmap', icon: 'ph-flag', count: pMilestones.length },
                { id: 'financials', label: 'Financials', icon: 'ph-currency-dollar' },
                { id: 'files', label: 'Assets', icon: 'ph-files' }
            ];

            const html = `
                <div class="fade-in h-full flex flex-col bg-white min-h-screen">
                    <!-- Professional Header with Meta Data -->
                    <div class="border-b border-slate-200 bg-white sticky top-0 z-10 shadow-sm">
                        <div class="px-8 pt-6 pb-0">
                            <div class="flex items-start justify-between mb-6">
                                <div>
                                    <div class="flex items-center space-x-2 text-sm text-slate-500 mb-1">
                                        <span class="hover:text-brand-600 cursor-pointer" onclick="router('projects')">Projects</span>
                                        <i class="ph ph-caret-right text-xs"></i>
                                        <span>${project.client}</span>
                                        <i class="ph ph-caret-right text-xs"></i>
                                        <span class="text-slate-900 font-medium">#${project.id}</span>
                                    </div>
                                    <h1 class="text-3xl font-bold text-slate-900 tracking-tight">${project.name}</h1>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <button class="px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 bg-white hover:bg-slate-50 shadow-sm">
                                        Actions <i class="ph ph-caret-down ml-1"></i>
                                    </button>
                                    <button class="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-semibold hover:bg-slate-800 shadow-md flex items-center">
                                        <i class="ph ph-plus mr-2"></i> Add Task
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Key Metrics Row -->
                            <div class="flex space-x-8 pb-6 border-b border-slate-100">
                                <div>
                                    <div class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Status</div>
                                    <span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ${getStatusColor(project.status)} ring-1 ring-inset ring-opacity-20 ring-gray-500/20">
                                        ${project.status}
                                    </span>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Timeline</div>
                                    <div class="text-sm font-medium text-slate-900 flex items-center">
                                        <i class="ph ph-calendar-blank mr-1.5 text-slate-400"></i>
                                        ${project.start_date} <span class="mx-1 text-slate-300">→</span> ${project.deadline}
                                    </div>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Completion</div>
                                    <div class="flex items-center">
                                        <div class="w-24 bg-slate-100 rounded-full h-2 mr-2">
                                            <div class="bg-emerald-500 h-2 rounded-full" style="width: ${project.progress}%"></div>
                                        </div>
                                        <span class="text-sm font-bold text-slate-900">${project.progress}%</span>
                                    </div>
                                </div>
                                 <div class="pl-8 border-l border-slate-100">
                                    <div class="flex -space-x-2">
                                        <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://ui-avatars.com/api/?name=Sarah+Smith&background=random" alt=""/>
                                        <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://ui-avatars.com/api/?name=Mike+Doe&background=random" alt=""/>
                                        <div class="h-8 w-8 rounded-full bg-slate-100 ring-2 ring-white flex items-center justify-center text-xs font-bold text-slate-500">+2</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modern Tabs -->
                            <nav class="flex space-x-8 mt-2" aria-label="Tabs">
                                ${tabs.map(tab => `
                                    <button onclick="switchTab('${tab.id}')" 
                                        class="${currentTab === tab.id ? 'border-brand-600 text-brand-600' : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'} 
                                        group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200">
                                        <i class="ph ${tab.icon} mr-2 text-lg"></i>
                                        ${tab.label}
                                        ${tab.count !== undefined ? `<span class="ml-2 bg-slate-100 text-slate-600 py-0.5 px-2 rounded-full text-xs group-hover:bg-slate-200">${tab.count}</span>` : ''}
                                    </button>
                                `).join('')}
                            </nav>
                        </div>
                    </div>

                    <!-- Layout: Main Content + Sidebar -->
                    <div class="flex flex-1 overflow-hidden bg-slate-50/50">
                        <!-- Main Area -->
                        <div class="flex-1 overflow-y-auto p-8" id="tab-content">
                            ${renderTabContent(currentTab, project, pTasks, pMilestones, pInvoices)}
                        </div>
                        
                        <!-- Right Sidebar (Enterprise Style) -->
                        <div class="w-80 border-l border-slate-200 bg-white p-6 overflow-y-auto hidden xl:block">
                            <h3 class="text-sm font-bold text-slate-900 mb-4">Project Information</h3>
                            
                            <div class="space-y-6">
                                <div>
                                    <label class="text-xs font-medium text-slate-500 uppercase">Client Details</label>
                                    <div class="flex items-center mt-2">
                                        <div class="h-8 w-8 rounded bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold mr-3">
                                            ${project.client.charAt(0)}
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium text-slate-900">${project.client}</p>
                                            <p class="text-xs text-brand-600 cursor-pointer hover:underline">View Client Profile</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="border-t border-slate-100 pt-4">
                                    <label class="text-xs font-medium text-slate-500 uppercase">Financial Summary</label>
                                    <div class="mt-3 grid grid-cols-2 gap-4">
                                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                                            <p class="text-xs text-slate-500">Budget</p>
                                            <p class="text-sm font-bold text-slate-900">${formatCurrency(project.budget)}</p>
                                        </div>
                                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                                            <p class="text-xs text-slate-500">Spend</p>
                                            <p class="text-sm font-bold text-slate-900">${formatCurrency(project.expenses)}</p>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-500">Budget Burn</span>
                                            <span class="font-medium text-slate-700">${Math.round((project.expenses/project.budget)*100)}%</span>
                                        </div>
                                        <div class="w-full bg-slate-100 rounded-full h-1.5">
                                            <div class="bg-orange-400 h-1.5 rounded-full" style="width: ${Math.round((project.expenses/project.budget)*100)}%"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="border-t border-slate-100 pt-4">
                                    <label class="text-xs font-medium text-slate-500 uppercase">Tags</label>
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        ${project.tags.map(tag => `
                                            <span class="px-2.5 py-1 rounded-md bg-white border border-slate-200 text-xs font-medium text-slate-600 shadow-sm">${tag}</span>
                                        `).join('')}
                                        <button class="px-2 py-1 rounded-md border border-dashed border-slate-300 text-xs text-slate-400 hover:border-slate-400 hover:text-slate-600">+</button>
                                    </div>
                                </div>

                                <div class="border-t border-slate-100 pt-4">
                                    <label class="text-xs font-medium text-slate-500 uppercase">Team</label>
                                    <ul class="mt-2 space-y-3">
                                        <li class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="h-6 w-6 rounded-full bg-slate-200 text-xs flex items-center justify-center mr-2">SS</div>
                                                <span class="text-sm text-slate-700">Sarah Smith</span>
                                            </div>
                                            <span class="text-xs text-slate-400">PM</span>
                                        </li>
                                         <li class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="h-6 w-6 rounded-full bg-slate-200 text-xs flex items-center justify-center mr-2">MD</div>
                                                <span class="text-sm text-slate-700">Mike Doe</span>
                                            </div>
                                            <span class="text-xs text-slate-400">Dev</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.innerHTML = html;
        }

        // --- NEW: Missing Switch Tab Function ---
        function switchTab(tabId) {
            currentTab = tabId;
            
            // Re-render only the tab content part or full view? 
            // Since our tabs are in renderProjectDetails, we can re-render content or re-render whole view.
            // For smoother UX, let's update buttons and content area manually.
            
            // 1. Update Tab Buttons
            const buttons = document.querySelectorAll('button[onclick^="switchTab"]');
            buttons.forEach(btn => {
                const isActive = btn.getAttribute('onclick').includes(`'${tabId}'`);
                if(isActive) {
                    btn.className = 'border-brand-600 text-brand-600 group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200';
                } else {
                    btn.className = 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200';
                }
            });

            // 2. Update Content
            const content = getEl('tab-content');
            const project = store.projects.find(p => p.id === currentProjectId);
            const pTasks = store.tasks.filter(t => t.projectId === currentProjectId);
            const pMilestones = store.milestones.filter(m => m.projectId === currentProjectId);
            const pInvoices = store.invoices.filter(i => i.projectId === currentProjectId);
            
            content.innerHTML = renderTabContent(tabId, project, pTasks, pMilestones, pInvoices);
        }

        function renderTabContent(tab, project, tasks, milestones, invoices) {
            if (tab === 'overview') {
                return `
                    <div class="space-y-8 max-w-4xl">
                        <!-- Scope Section -->
                        <section>
                            <h3 class="text-base font-bold text-slate-900 mb-3">Project Scope & Objectives</h3>
                            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm text-slate-600 text-sm leading-relaxed">
                                ${project.description}
                            </div>
                        </section>

                        <!-- Stats Grid -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center">
                                <div class="p-3 bg-blue-50 text-blue-600 rounded-lg mr-4">
                                    <i class="ph ph-check-square-offset text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-2xl font-bold text-slate-900">${tasks.filter(t=>t.status==='Done').length}/${tasks.length}</p>
                                    <p class="text-xs font-medium text-slate-500">Tasks Completed</p>
                                </div>
                            </div>
                            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center">
                                <div class="p-3 bg-purple-50 text-purple-600 rounded-lg mr-4">
                                    <i class="ph ph-hourglass-medium text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-2xl font-bold text-slate-900">14</p>
                                    <p class="text-xs font-medium text-slate-500">Days Remaining</p>
                                </div>
                            </div>
                            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center">
                                <div class="p-3 bg-emerald-50 text-emerald-600 rounded-lg mr-4">
                                    <i class="ph ph-trend-up text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-2xl font-bold text-slate-900">98%</p>
                                    <p class="text-xs font-medium text-slate-500">Health Score</p>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Activity Timeline -->
                        <section>
                            <h3 class="text-base font-bold text-slate-900 mb-4">Recent Activity</h3>
                            <div class="relative pl-4 border-l border-slate-200 space-y-6">
                                <div class="relative">
                                    <div class="absolute -left-[21px] bg-blue-500 h-2.5 w-2.5 rounded-full ring-4 ring-white"></div>
                                    <p class="text-sm font-medium text-slate-900">Project status updated to <span class="text-blue-600">In Progress</span></p>
                                    <p class="text-xs text-slate-500 mt-0.5">2 hours ago by Sarah Smith</p>
                                </div>
                                <div class="relative">
                                    <div class="absolute -left-[21px] bg-slate-300 h-2.5 w-2.5 rounded-full ring-4 ring-white"></div>
                                    <p class="text-sm font-medium text-slate-900">New milestone created: <span class="font-semibold">Beta Release</span></p>
                                    <p class="text-xs text-slate-500 mt-0.5">Yesterday by Mike Doe</p>
                                </div>
                                <div class="relative">
                                    <div class="absolute -left-[21px] bg-slate-300 h-2.5 w-2.5 rounded-full ring-4 ring-white"></div>
                                    <p class="text-sm font-medium text-slate-900">Invoice #INV-2023-001 generated</p>
                                    <p class="text-xs text-slate-500 mt-0.5">Oct 01, 2023 by System</p>
                                </div>
                            </div>
                        </section>
                    </div>
                `;
            } else if (tab === 'tasks') {
                 return `
                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4 border-b border-slate-100 bg-slate-50/50">
                            <h3 class="font-bold text-slate-800 text-sm">All Tasks</h3>
                            <div class="flex space-x-2">
                                <button class="p-1.5 text-slate-500 hover:text-slate-800"><i class="ph ph-funnel"></i></button>
                                <button class="p-1.5 text-slate-500 hover:text-slate-800"><i class="ph ph-arrows-down-up"></i></button>
                            </div>
                        </div>
                        <table class="min-w-full text-left text-sm text-slate-600">
                            <thead class="bg-white border-b border-slate-100 text-xs uppercase font-semibold text-slate-500">
                                <tr>
                                    <th class="px-6 py-3 w-10"><input type="checkbox" class="rounded border-slate-300"></th>
                                    <th class="px-6 py-3">Task Name</th>
                                    <th class="px-6 py-3">Assignee</th>
                                    <th class="px-6 py-3">Priority</th>
                                    <th class="px-6 py-3">Status</th>
                                    <th class="px-6 py-3"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                ${tasks.map(t => `
                                    <tr class="hover:bg-slate-50 transition-colors">
                                        <td class="px-6 py-3"><input type="checkbox" class="rounded border-slate-300"></td>
                                        <td class="px-6 py-3 font-medium text-slate-900">${t.name}</td>
                                        <td class="px-6 py-3">
                                            <div class="flex items-center">
                                                <div class="h-6 w-6 rounded-full bg-slate-200 text-xs flex items-center justify-center mr-2">${t.assignee.charAt(0)}</div>
                                                <span class="text-xs">${t.assignee}</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-3"><span class="px-2 py-0.5 rounded text-xs font-medium ${getPriorityColor(t.priority)}">${t.priority}</span></td>
                                        <td class="px-6 py-3"><span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">${t.status}</span></td>
                                        <td class="px-6 py-3 text-right"><i class="ph ph-dots-three text-slate-400 cursor-pointer"></i></td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            } else if (tab === 'financials') {
                return `
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                             <h4 class="font-bold text-slate-900 mb-6">Budget Overview</h4>
                             <div class="flex items-center justify-center py-4">
                                <div class="relative h-48 w-48">
                                     <svg class="h-full w-full transform -rotate-90">
                                        <circle cx="96" cy="96" r="80" stroke="#f1f5f9" stroke-width="20" fill="transparent" />
                                        <circle cx="96" cy="96" r="80" stroke="#2563eb" stroke-width="20" fill="transparent" stroke-dasharray="502" stroke-dashoffset="${502 - (502 * (project.expenses/project.budget))}" />
                                    </svg>
                                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                                        <span class="text-3xl font-bold text-slate-900">${Math.round((project.expenses/project.budget)*100)}%</span>
                                        <span class="text-xs text-slate-500 uppercase font-medium">Utilized</span>
                                    </div>
                                </div>
                             </div>
                             <div class="mt-6 space-y-3">
                                <div class="flex justify-between text-sm">
                                    <span class="text-slate-500">Total Budget</span>
                                    <span class="font-bold text-slate-900">${formatCurrency(project.budget)}</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-slate-500">Actual Spend</span>
                                    <span class="font-bold text-slate-900">${formatCurrency(project.expenses)}</span>
                                </div>
                                <div class="flex justify-between text-sm border-t border-slate-100 pt-2">
                                    <span class="text-slate-500">Remaining</span>
                                    <span class="font-bold text-emerald-600">${formatCurrency(project.budget - project.expenses)}</span>
                                </div>
                             </div>
                        </div>

                        <div class="space-y-6">
                            <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                                <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                                    <h4 class="font-bold text-slate-800 text-sm">Recent Invoices</h4>
                                </div>
                                <table class="min-w-full text-left text-sm text-slate-600">
                                    <tbody class="divide-y divide-slate-100">
                                        ${invoices.map(i => `
                                            <tr>
                                                <td class="px-6 py-3 font-medium text-slate-900">${i.number}</td>
                                                <td class="px-6 py-3">${formatCurrency(i.amount)}</td>
                                                <td class="px-6 py-3"><span class="text-xs font-medium px-2 py-0.5 rounded-full ${i.status === 'Paid' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}">${i.status}</span></td>
                                                <td class="px-6 py-3 text-right"><i class="ph ph-download-simple text-brand-600 cursor-pointer"></i></td>
                                            </tr>
                                        `).join('')}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                `;
            }
            return `<div class="p-12 text-center text-slate-400 bg-slate-50 rounded-xl border border-dashed border-slate-200">Content module for ${tab} not loaded in preview.</div>`;
        }

        // --- UPDATED: PROFESSIONAL CREATE FORM ---
        function openModal(type) {
            const overlay = getEl('modal-overlay');
            const panel = getEl('modal-panel');
            const title = getEl('modal-title');
            const container = getEl('modal-form-container');
            const saveBtn = getEl('modal-save-btn');
            const icon = getEl('modal-icon');

            overlay.classList.remove('hidden');
            void overlay.offsetWidth;
            overlay.classList.remove('opacity-0');
            panel.classList.remove('opacity-0', 'scale-95');
            panel.classList.add('opacity-100', 'scale-100');

            if (type === 'project') {
                title.innerText = 'Initialize Project';
                icon.className = 'ph ph-folder-plus text-2xl';
                
                // Professional "Grid Form" Layout
                container.innerHTML = `
                    <div class="grid grid-cols-12 gap-8">
                        <!-- Left Panel: Core Info -->
                        <div class="col-span-12 lg:col-span-8 space-y-8">
                            
                            <!-- Section 1 -->
                            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                                <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4 border-b border-slate-100 pb-2 flex items-center">
                                    <i class="ph ph-info mr-2 text-brand-600"></i> Project Essentials
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="col-span-2">
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Project Title <span class="text-red-500">*</span></label>
                                        <input type="text" id="inp-name" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm font-medium focus:border-brand-500 focus:ring-brand-500 focus:bg-white transition-all placeholder:font-normal" placeholder="e.g. Q4 Marketing Campaign">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Client Account</label>
                                        <select id="inp-client" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm focus:border-brand-500 focus:bg-white">
                                            <option>Acme Corp</option>
                                            <option>Stark Industries</option>
                                            <option>Wayne Enterprises</option>
                                            <option>Globex Inc</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Engagement Type</label>
                                        <select id="inp-type" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm focus:border-brand-500 focus:bg-white">
                                            <option>Fixed Cost</option>
                                            <option>Time & Materials (Hourly)</option>
                                            <option>Retainer</option>
                                        </select>
                                    </div>
                                    <div class="col-span-2">
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Scope of Work</label>
                                        <textarea id="inp-desc" rows="4" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm focus:border-brand-500 focus:bg-white resize-none" placeholder="Define primary objectives and deliverables..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Section 2 -->
                            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                                <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4 border-b border-slate-100 pb-2 flex items-center">
                                    <i class="ph ph-calendar mr-2 text-brand-600"></i> Timeline & Logistics
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Kickoff Date</label>
                                        <input type="date" id="inp-start" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm focus:border-brand-500 focus:bg-white">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Target Delivery</label>
                                        <input type="date" id="inp-deadline" class="block w-full rounded-lg border-slate-200 bg-slate-50 p-2.5 text-sm focus:border-brand-500 focus:bg-white">
                                    </div>
                                    <div class="col-span-2">
                                        <label class="block text-xs font-medium text-slate-500 uppercase mb-1">Project Documents</label>
                                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-4 flex flex-col items-center justify-center text-center bg-slate-50 hover:bg-white hover:border-brand-300 transition-all cursor-pointer group">
                                            <div class="h-10 w-10 bg-white rounded-full flex items-center justify-center shadow-sm mb-2 group-hover:scale-110 transition-transform">
                                                <i class="ph ph-cloud-arrow-up text-xl text-brand-600"></i>
                                            </div>
                                            <p class="text-sm text-slate-600 font-medium">Drop files here or click to upload</p>
                                            <p class="text-xs text-slate-400">Supported: PDF, DOCX, JPG (Max 25MB)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- Right Panel: Financials & Config -->
                        <div class="col-span-12 lg:col-span-4 space-y-6">
                            
                            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                                <h4 class="text-xs font-bold text-slate-900 uppercase mb-4">Financial Configuration</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 mb-1">Total Budget</label>
                                        <div class="relative">
                                            <span class="absolute left-3 top-2.5 text-slate-400 font-semibold">$</span>
                                            <input type="number" id="inp-budget" class="block w-full rounded-lg border-slate-200 pl-7 p-2.5 text-sm font-semibold text-slate-900 focus:border-brand-500 focus:ring-1 focus:ring-brand-500" placeholder="0.00">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 mb-1">Currency</label>
                                        <select class="block w-full rounded-lg border-slate-200 p-2.5 text-sm bg-slate-50">
                                            <option>USD - US Dollar</option>
                                            <option>EUR - Euro</option>
                                            <option>GBP - British Pound</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                                <h4 class="text-xs font-bold text-slate-900 uppercase mb-4">Workspace Settings</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 mb-1">Status</label>
                                        <select id="inp-status" class="block w-full rounded-lg border-slate-200 p-2.5 text-sm">
                                            <option>Planning</option>
                                            <option>In Progress</option>
                                            <option>On Hold</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 mb-1">Priority</label>
                                        <div class="flex bg-slate-100 rounded-lg p-1">
                                            <button type="button" class="flex-1 py-1.5 text-xs font-medium rounded text-slate-500 hover:bg-white hover:shadow-sm">Low</button>
                                            <button type="button" class="flex-1 py-1.5 text-xs font-medium rounded bg-white text-slate-900 shadow-sm ring-1 ring-slate-200">Medium</button>
                                            <button type="button" class="flex-1 py-1.5 text-xs font-medium rounded text-slate-500 hover:bg-white hover:shadow-sm">High</button>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-slate-500 mb-1">Tags</label>
                                        <input type="text" class="block w-full rounded-lg border-slate-200 p-2.5 text-sm" placeholder="Add tags separated by comma">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                `;
                saveBtn.onclick = () => saveItem('project');
            } else {
                 container.innerHTML = `<p class="text-center py-4 text-slate-500">Feature not implemented in preview.</p>`;
                 saveBtn.onclick = closeModal;
            }
        }

        // ... (Status Colors helper remains same)
        function getStatusColor(status) {
            const map = {
                'In Progress': 'bg-blue-50 text-blue-700 border border-blue-100',
                'Completed': 'bg-green-50 text-green-700 border border-green-100',
                'Planning': 'bg-amber-50 text-amber-700 border border-amber-100',
                'Pending': 'bg-slate-50 text-slate-600 border border-slate-100'
            };
            return map[status] || 'bg-gray-50 text-gray-800';
        }
         function getPriorityColor(priority) {
            const map = {
                'High': 'bg-red-50 text-red-700',
                'Medium': 'bg-amber-50 text-amber-700',
                'Low': 'bg-slate-50 text-slate-700'
            };
            return map[priority] || 'bg-gray-100';
        }

        function saveItem(type) {
             if(type === 'project') {
                const nameInput = getEl('inp-name');
                if(!nameInput.value) {
                    nameInput.classList.add('border-red-500', 'ring-1', 'ring-red-500');
                    return;
                }
                
                const newProject = {
                    id: Date.now(),
                    name: nameInput.value,
                    client: getEl('inp-client').value,
                    status: getEl('inp-status').value,
                    progress: 0,
                    start_date: getEl('inp-start').value || new Date().toISOString().split('T')[0],
                    deadline: getEl('inp-deadline').value || '2024-01-01',
                    budget: parseFloat(getEl('inp-budget').value) || 0,
                    description: getEl('inp-desc').value || 'No description provided.',
                    expenses: 0,
                    tags: ['New'],
                    members: [],
                    type: getEl('inp-type').value
                };
                
                store.projects.unshift(newProject);
                closeModal();
                showToast('Project initialized successfully');
                router('projects'); 
            } else {
                closeModal();
            }
        }

        // ... (showToast remains similar, small style tweak in HTML above)
        function showToast(msg) {
            const toast = getEl('toast');
            getEl('toast-message').innerText = msg;
            toast.classList.remove('translate-y-24', 'opacity-0');
            
            setTimeout(() => {
                toast.classList.add('translate-y-24', 'opacity-0');
            }, 3000);
        }
        
        function closeModal() {
            const overlay = getEl('modal-overlay');
            const panel = getEl('modal-panel');
            
            panel.classList.remove('opacity-100', 'scale-100');
            panel.classList.add('opacity-0', 'scale-95');
            overlay.classList.add('opacity-0');
            
            setTimeout(() => {
                overlay.classList.add('hidden');
            }, 300);
        }

         // --- INIT ---
        window.addEventListener('DOMContentLoaded', () => {
            // Defaulting to details view of first project to show off design immediately for demo
            router('project-details', 1);
        });

    </script>
</body>
</html>
