<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Nexus CRM</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",
							},
						},
					},
				},
			};
		</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
				);
			}
		</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"
			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"
				>
					<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
				</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>
					Gantt Reports
				</button>
			</nav>

			<div class="p-4 border-t border-slate-100">
				<button
					onclick="openModal('project')"
					class="w-full bg-brand-600 text-white rounded-lg px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-brand-700 transition-colors flex items-center justify-center"
				>
					<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">
			<!-- 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"
			>
				<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-4">
					<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..."
							class="pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 w-64"
						/>
					</div>
					<button class="relative p-2 text-slate-400 hover:text-slate-600">
						<i class="ph ph-bell text-xl"></i>
						<span
							class="absolute top-2 right-2 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"
						></span>
					</button>
					<div
						class="h-8 w-8 rounded-full bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xs shadow-md"
					>
						JD
					</div>
				</div>
			</header>

			<!-- Dynamic Content Container -->
			<div
				id="app-content"
				class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8 relative"
			>
				<!-- Content Injected via JS -->
			</div>
		</main>

		<!-- Modal (Shared for Projects, Tasks, Milestones) -->
		<div
			id="modal-overlay"
			class="fixed inset-0 bg-slate-900/50 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-end justify-center p-4 text-center sm:items-center sm:p-0"
				>
					<div
						id="modal-panel"
						class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg scale-95 opacity-0 duration-300"
					>
						<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
							<div class="sm:flex sm:items-start">
								<div
									id="modal-icon-bg"
									class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand-100 sm:mx-0 sm:h-10 sm:w-10"
								>
									<i
										id="modal-icon"
										class="ph ph-folder text-brand-600 text-xl"
									></i>
								</div>
								<div
									class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full"
								>
									<h3
										class="text-lg font-semibold leading-6 text-slate-900"
										id="modal-title"
									>
										Create New
									</h3>
									<div class="mt-4" id="modal-form-container">
										<!-- Form injected here -->
									</div>
								</div>
							</div>
						</div>
						<div
							class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 border-t border-slate-100"
						>
							<button
								type="button"
								id="modal-save-btn"
								class="inline-flex w-full justify-center rounded-lg bg-brand-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-500 sm:ml-3 sm:w-auto transition-all"
							>
								Save
							</button>
							<button
								type="button"
								onclick="closeModal()"
								class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50 sm:mt-0 sm:w-auto transition-all"
							>
								Cancel
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Toast Notification -->
		<div
			id="toast"
			class="fixed bottom-5 right-5 z-50 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center w-full max-w-xs p-4 space-x-4 text-slate-500 bg-white rounded-lg shadow-lg border border-slate-100"
			role="alert"
		>
			<div
				class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg"
			>
				<i class="ph ph-check-circle text-lg"></i>
			</div>
			<div class="ml-3 text-sm font-normal" id="toast-message">
				Item created successfully.
			</div>
		</div>

		<script>
			// --- DATA STORE ---
			const store = {
				projects: [
					{
						id: 1,
						name: "Website Redesign",
						client: "Acme Corp",
						status: "In Progress",
						progress: 65,
						deadline: "2023-12-01",
						budget: "$12,500",
					},
					{
						id: 2,
						name: "Mobile App Launch",
						client: "Stark Ind",
						status: "Planning",
						progress: 15,
						deadline: "2024-02-15",
						budget: "$45,000",
					},
					{
						id: 3,
						name: "CRM Integration",
						client: "Wayne Ent",
						status: "Completed",
						progress: 100,
						deadline: "2023-10-30",
						budget: "$8,200",
					},
					{
						id: 4,
						name: "Q4 Marketing Campaign",
						client: "Globex",
						status: "In Progress",
						progress: 40,
						deadline: "2023-12-20",
						budget: "$20,000",
					},
				],
				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: "Pending",
					},
					{
						id: 202,
						projectId: 1,
						name: "Final Launch",
						date: "2023-12-01",
						status: "Pending",
					},
					{
						id: 203,
						projectId: 2,
						name: "Prototype Approval",
						date: "2024-01-10",
						status: "Pending",
					},
				],
			};

			// --- UTILS ---
			const getEl = (id) => document.getElementById(id);
			const formatCurrency = (str) => str;

			// --- ROUTER & VIEW MANAGER ---
			let currentPage = "dashboard";

			function router(page) {
				currentPage = page;

				// Update Sidebar Active State
				document.querySelectorAll(".nav-item").forEach((btn) => {
					if (btn.dataset.page === page) {
						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");
					}
				});

				const content = getEl("app-content");
				content.innerHTML = ""; // Clear

				if (page === "dashboard") renderDashboard(content);
				else if (page === "projects") renderProjects(content);
				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 html = `
                <div class="fade-in space-y-6">
                    <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>

                    <!-- Metrics Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-slate-500">Total Projects</h3>
                                <div class="p-2 bg-blue-50 text-blue-600 rounded-lg"><i class="ph ph-briefcase"></i></div>
                            </div>
                            <div class="text-3xl font-bold text-slate-900">${totalProjects}</div>
                            <div class="mt-2 text-xs text-green-600 font-medium flex items-center">
                                <i class="ph ph-trend-up mr-1"></i> +12% from last month
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-slate-500">Active Tasks</h3>
                                <div class="p-2 bg-amber-50 text-amber-600 rounded-lg"><i class="ph ph-list-checks"></i></div>
                            </div>
                            <div class="text-3xl font-bold text-slate-900">${activeTasks}</div>
                            <div class="mt-2 text-xs text-slate-400 font-medium">
                                Across ${totalProjects} projects
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-slate-500">Upcoming Milestones</h3>
                                <div class="p-2 bg-purple-50 text-purple-600 rounded-lg"><i class="ph ph-flag"></i></div>
                            </div>
                            <div class="text-3xl font-bold text-slate-900">${
															store.milestones.length
														}</div>
                            <div class="mt-2 text-xs text-slate-400 font-medium">
                                Next: Alpha Release (2 days)
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-slate-500">Project Completion</h3>
                                <div class="p-2 bg-green-50 text-green-600 rounded-lg"><i class="ph ph-chart-pie-slice"></i></div>
                            </div>
                            <div class="text-3xl font-bold text-slate-900">${Math.round(
															(completedProjects / totalProjects) * 100
														)}%</div>
                            <div class="w-full bg-slate-100 rounded-full h-1.5 mt-3">
                                <div class="bg-green-500 h-1.5 rounded-full" style="width: ${Math.round(
																	(completedProjects / totalProjects) * 100
																)}%"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity & Projects -->
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- Project List (Compact) -->
                        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
                                <h3 class="font-bold text-slate-900">Recent Projects</h3>
                                <button onclick="router('projects')" class="text-sm text-brand-600 hover:text-brand-700 font-medium">View All</button>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="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-3">Project Name</th>
                                            <th class="px-6 py-3">Client</th>
                                            <th class="px-6 py-3">Status</th>
                                            <th class="px-6 py-3">Progress</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100">
                                        ${store.projects
																					.slice(0, 3)
																					.map(
																						(p) => `
                                            <tr class="hover:bg-slate-50 transition-colors">
                                                <td class="px-6 py-4 font-medium text-slate-900">${
																									p.name
																								}</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">
                                                    <div class="flex items-center">
                                                        <span class="mr-2 text-xs font-medium">${
																													p.progress
																												}%</span>
                                                        <div class="w-24 bg-slate-100 rounded-full h-1.5">
                                                            <div class="bg-brand-500 h-1.5 rounded-full" style="width: ${
																															p.progress
																														}%"></div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        `
																					)
																					.join("")}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tasks Summary -->
                        <div class="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col">
                            <div class="px-6 py-4 border-b border-slate-100">
                                <h3 class="font-bold text-slate-900">Tasks Due Soon</h3>
                            </div>
                            <div class="flex-1 p-4 space-y-3 overflow-y-auto max-h-80">
                                ${store.tasks
																	.filter((t) => t.status !== "Done")
																	.slice(0, 4)
																	.map(
																		(t) => `
                                    <div class="flex items-start p-3 bg-slate-50 rounded-lg border border-slate-100 hover:border-brand-200 transition-colors cursor-pointer group">
                                        <div class="flex-shrink-0 pt-0.5">
                                           <div class="h-4 w-4 rounded border-2 border-slate-300 group-hover:border-brand-500"></div>
                                        </div>
                                        <div class="ml-3 w-full">
                                            <div class="flex justify-between">
                                                <p class="text-sm font-medium text-slate-900 group-hover:text-brand-600">${t.name}</p>
                                                <span class="text-xs text-slate-400">${t.priority}</span>
                                            </div>
                                            <p class="text-xs text-slate-500 mt-1">Assigned to ${t.assignee}</p>
                                        </div>
                                    </div>
                                `
																	)
																	.join("")}
                            </div>
                            <div class="p-4 border-t border-slate-100">
                                <button onclick="openModal('task')" class="w-full py-2 border border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-brand-400 hover:text-brand-600 transition-all flex items-center justify-center">
                                    <i class="ph ph-plus mr-2"></i> Add Quick Task
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
				container.innerHTML = html;
			}

			function renderProjects(container) {
				const html = `
                <div class="fade-in">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-slate-900">Projects</h1>
                            <p class="text-sm text-slate-500 mt-1">Manage your ongoing projects and track progress.</p>
                        </div>
                        <button onclick="openModal('project')" class="bg-brand-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-brand-700 transition-colors flex items-center shadow-sm w-full sm:w-auto justify-center">
                            <i class="ph ph-plus mr-2 text-lg"></i> New Project
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                        ${store.projects
													.map(
														(p) => `
                            <div class="bg-white rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow p-6 flex flex-col h-full">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                                        <i class="ph ph-folder-open text-xl"></i>
                                    </div>
                                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getStatusColor(
																			p.status
																		)}">
                                        ${p.status}
                                    </span>
                                </div>
                                <h3 class="text-lg font-bold text-slate-900 mb-1">${
																	p.name
																}</h3>
                                <p class="text-sm text-slate-500 mb-4">${
																	p.client
																}</p>
                                
                                <div class="mt-auto">
                                    <div class="flex justify-between text-xs text-slate-500 mb-2">
                                        <span>Progress</span>
                                        <span class="font-medium text-slate-700">${
																					p.progress
																				}%</span>
                                    </div>
                                    <div class="w-full bg-slate-100 rounded-full h-2 mb-4">
                                        <div class="bg-brand-500 h-2 rounded-full transition-all duration-500" style="width: ${
																					p.progress
																				}%"></div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                                        <div class="flex -space-x-2">
                                            <img class="w-7 h-7 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=John+Doe&background=0D8ABC&color=fff" alt="">
                                            <img class="w-7 h-7 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Sarah+S&background=random&color=fff" alt="">
                                            <div class="w-7 h-7 rounded-full border-2 border-white bg-slate-100 flex items-center justify-center text-xs font-medium text-slate-500">+2</div>
                                        </div>
                                        <div class="text-xs text-slate-500 flex items-center">
                                            <i class="ph ph-calendar-blank mr-1"></i> ${
																							p.deadline
																						}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
													)
													.join("")}
                    </div>
                </div>
            `;
				container.innerHTML = html;
			}

			function renderTasks(container) {
				// Group by Status (Simple Kanban Logic)
				const todo = store.tasks.filter((t) => t.status === "To Do");
				const inProgress = store.tasks.filter(
					(t) => t.status === "In Progress"
				);
				const done = store.tasks.filter((t) => t.status === "Done");

				const getTaskCard = (t) => `
                <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm mb-3 cursor-move hover:border-brand-300 transition-colors">
                    <div class="flex justify-between items-start mb-2">
                        <span class="text-xs font-medium px-2 py-0.5 rounded ${getPriorityColor(
													t.priority
												)}">${t.priority}</span>
                        <button class="text-slate-400 hover:text-slate-600"><i class="ph ph-dots-three"></i></button>
                    </div>
                    <p class="text-sm font-medium text-slate-900 mb-3">${
											t.name
										}</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-xs text-slate-500">
                            <i class="ph ph-folder mr-1"></i> ID: ${t.projectId}
                        </div>
                        <div class="h-6 w-6 rounded-full bg-slate-200 text-xs flex items-center justify-center font-bold text-slate-600">
                            ${t.assignee.charAt(0)}
                        </div>
                    </div>
                </div>
            `;

				const html = `
                <div class="fade-in h-full flex flex-col">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4 flex-shrink-0">
                        <div>
                            <h1 class="text-2xl font-bold text-slate-900">Task Board</h1>
                            <p class="text-sm text-slate-500 mt-1">Kanban view of project tasks.</p>
                        </div>
                        <div class="flex space-x-2">
                            <button onclick="openModal('milestone')" class="bg-white text-slate-700 border border-slate-300 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors flex items-center shadow-sm">
                                <i class="ph ph-flag mr-2"></i> Milestone
                            </button>
                            <button onclick="openModal('task')" class="bg-brand-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-brand-700 transition-colors flex items-center shadow-sm">
                                <i class="ph ph-plus mr-2"></i> New Task
                            </button>
                        </div>
                    </div>

                    <div class="flex-1 overflow-x-auto overflow-y-hidden pb-4">
                        <div class="flex h-full min-w-[800px] space-x-6">
                            <!-- To Do Column -->
                            <div class="w-1/3 flex flex-col bg-slate-100/50 rounded-xl p-4 border border-slate-200/50">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="font-bold text-slate-700 text-sm uppercase tracking-wide">To Do <span class="ml-2 bg-slate-200 text-slate-600 py-0.5 px-2 rounded-full text-xs">${
																			todo.length
																		}</span></h3>
                                </div>
                                <div class="flex-1 overflow-y-auto pr-2">
                                    ${todo.map(getTaskCard).join("")}
                                    ${
																			todo.length === 0
																				? '<div class="text-center py-8 text-sm text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">No tasks</div>'
																				: ""
																		}
                                </div>
                            </div>

                            <!-- In Progress Column -->
                            <div class="w-1/3 flex flex-col bg-slate-100/50 rounded-xl p-4 border border-slate-200/50">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="font-bold text-slate-700 text-sm uppercase tracking-wide">In Progress <span class="ml-2 bg-blue-100 text-blue-600 py-0.5 px-2 rounded-full text-xs">${
																			inProgress.length
																		}</span></h3>
                                </div>
                                <div class="flex-1 overflow-y-auto pr-2">
                                    ${inProgress.map(getTaskCard).join("")}
                                </div>
                            </div>

                            <!-- Done Column -->
                            <div class="w-1/3 flex flex-col bg-slate-100/50 rounded-xl p-4 border border-slate-200/50">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="font-bold text-slate-700 text-sm uppercase tracking-wide">Done <span class="ml-2 bg-green-100 text-green-600 py-0.5 px-2 rounded-full text-xs">${
																			done.length
																		}</span></h3>
                                </div>
                                <div class="flex-1 overflow-y-auto pr-2">
                                    ${done.map(getTaskCard).join("")}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
				container.innerHTML = html;
			}

			function renderGantt(container) {
				// Mock Gantt using CSS Grid
				// We'll create a 12-column grid representing 12 weeks/units

				const html = `
                <div class="fade-in">
                    <div class="mb-6">
                        <h1 class="text-2xl font-bold text-slate-900">Gantt Timeline</h1>
                        <p class="text-sm text-slate-500 mt-1">Project roadmap and milestone visualization.</p>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                        <!-- Header Time Scale -->
                        <div class="grid grid-cols-12 border-b border-slate-200 bg-slate-50 text-xs font-semibold text-slate-500">
                            <div class="col-span-3 p-4 border-r border-slate-200 bg-white z-10 sticky left-0 shadow-sm">Item Name</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 1</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 2</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 3</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 4</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 5</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 6</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 7</div>
                            <div class="col-span-1 p-4 text-center border-r border-slate-100">Week 8</div>
                            <div class="col-span-1 p-4 text-center">Week 9</div>
                        </div>

                        <!-- Rows -->
                        <div class="relative gantt-grid">
                            
                            <!-- Project 1 Group -->
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-12 items-center">
                                <div class="col-span-3 px-4 py-2 font-bold text-sm text-slate-900 border-r border-slate-200 bg-white/90 sticky left-0 truncate">Website Redesign</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-3 h-6 bg-brand-500 rounded-full shadow-sm opacity-80" style="left: 5%; width: 60%;"></div>
                                </div>
                            </div>
                            <!-- Task 1.1 -->
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-10 items-center">
                                <div class="col-span-3 px-8 py-1 text-xs text-slate-600 border-r border-slate-200 bg-white/90 sticky left-0 truncate flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-slate-300 mr-2"></span>Design Mockup</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-2.5 h-4 bg-indigo-300 rounded-sm" style="left: 5%; width: 20%;"></div>
                                </div>
                            </div>
                            <!-- Task 1.2 -->
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-10 items-center">
                                <div class="col-span-3 px-8 py-1 text-xs text-slate-600 border-r border-slate-200 bg-white/90 sticky left-0 truncate flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-slate-300 mr-2"></span>Frontend Dev</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-2.5 h-4 bg-indigo-300 rounded-sm" style="left: 26%; width: 30%;"></div>
                                </div>
                            </div>
                            <!-- Milestone 1 -->
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-10 items-center">
                                <div class="col-span-3 px-8 py-1 text-xs font-semibold text-purple-600 border-r border-slate-200 bg-white/90 sticky left-0 truncate"><i class="ph ph-flag mr-1"></i> Alpha Release</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-1 left-[55%] flex flex-col items-center">
                                        <div class="w-0.5 h-8 bg-purple-500/30"></div>
                                        <i class="ph ph-diamond text-purple-600 absolute top-2 bg-white rounded-full"></i>
                                    </div>
                                </div>
                            </div>


                            <!-- Project 2 Group -->
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-12 items-center mt-4 border-t">
                                <div class="col-span-3 px-4 py-2 font-bold text-sm text-slate-900 border-r border-slate-200 bg-white/90 sticky left-0 truncate">Mobile App Launch</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-3 h-6 bg-emerald-500 rounded-full shadow-sm opacity-80" style="left: 40%; width: 50%;"></div>
                                </div>
                            </div>
                            <div class="grid grid-cols-12 border-b border-slate-100 hover:bg-slate-50 transition-colors h-10 items-center">
                                <div class="col-span-3 px-8 py-1 text-xs text-slate-600 border-r border-slate-200 bg-white/90 sticky left-0 truncate flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-slate-300 mr-2"></span>Requirement Gathering</div>
                                <div class="col-span-9 relative h-full">
                                    <div class="absolute top-2.5 h-4 bg-emerald-300 rounded-sm" style="left: 40%; width: 15%;"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            `;
				container.innerHTML = html;
			}

			// --- HELPERS ---
			function getStatusColor(status) {
				const map = {
					"In Progress": "bg-blue-100 text-blue-700",
					Completed: "bg-green-100 text-green-700",
					Planning: "bg-amber-100 text-amber-700",
					Pending: "bg-slate-100 text-slate-600",
				};
				return map[status] || "bg-gray-100 text-gray-800";
			}

			function getPriorityColor(priority) {
				const map = {
					High: "bg-red-100 text-red-700",
					Medium: "bg-amber-100 text-amber-700",
					Low: "bg-slate-100 text-slate-700",
				};
				return map[priority] || "bg-gray-100";
			}

			// --- MODAL LOGIC ---
			function openModal(type) {
				const overlay = getEl("modal-overlay");
				const panel = getEl("modal-panel");
				const title = getEl("modal-title");
				const icon = getEl("modal-icon");
				const container = getEl("modal-form-container");
				const saveBtn = getEl("modal-save-btn");

				overlay.classList.remove("hidden");
				// Trigger reflow
				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 = "Create New Project";
					icon.className = "ph ph-briefcase text-brand-600 text-xl";
					container.innerHTML = `
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Project Name</label>
                            <input type="text" id="inp-name" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 focus:ring-brand-500 sm:text-sm" placeholder="e.g. Website Redesign">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Client</label>
                                <input type="text" id="inp-client" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Deadline</label>
                                <input type="date" id="inp-date" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Status</label>
                            <select id="inp-status" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                                <option>Planning</option>
                                <option>In Progress</option>
                            </select>
                        </div>
                    </div>
                `;
					saveBtn.onclick = () => saveItem("project");
				} else if (type === "task") {
					title.innerText = "Add New Task";
					icon.className = "ph ph-check-square text-brand-600 text-xl";
					container.innerHTML = `
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Task Name</label>
                            <input type="text" id="inp-name" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Project</label>
                            <select id="inp-project" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                                ${store.projects
																	.map(
																		(p) =>
																			`<option value="${p.id}">${p.name}</option>`
																	)
																	.join("")}
                            </select>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                             <div>
                                <label class="block text-sm font-medium text-slate-700">Assignee</label>
                                <input type="text" id="inp-assignee" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm" placeholder="John">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Priority</label>
                                <select id="inp-priority" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                                    <option>Low</option>
                                    <option>Medium</option>
                                    <option>High</option>
                                </select>
                            </div>
                        </div>
                    </div>
                `;
					saveBtn.onclick = () => saveItem("task");
				} else if (type === "milestone") {
					title.innerText = "Set Milestone";
					icon.className = "ph ph-flag text-brand-600 text-xl";
					container.innerHTML = `
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Milestone Name</label>
                            <input type="text" id="inp-name" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Date</label>
                            <input type="date" id="inp-date" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm border p-2 focus:border-brand-500 sm:text-sm">
                        </div>
                    </div>
                 `;
					saveBtn.onclick = () => saveItem("milestone");
				}
			}

			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);
			}

			function saveItem(type) {
				// Simplified Logic
				const nameInput = getEl("inp-name");
				if (!nameInput.value) {
					nameInput.classList.add("border-red-500");
					return;
				}

				if (type === "project") {
					store.projects.unshift({
						id: Date.now(),
						name: nameInput.value,
						client: getEl("inp-client").value || "Internal",
						deadline: getEl("inp-date").value || "2024-01-01",
						status: getEl("inp-status").value,
						progress: 0,
						budget: "$0",
					});
				} else if (type === "task") {
					store.tasks.unshift({
						id: Date.now(),
						projectId: parseInt(getEl("inp-project").value),
						name: nameInput.value,
						assignee: getEl("inp-assignee").value || "Unassigned",
						status: "To Do",
						priority: getEl("inp-priority").value,
					});
				} else if (type === "milestone") {
					store.milestones.push({
						id: Date.now(),
						projectId: 1, // Mocked
						name: nameInput.value,
						date: getEl("inp-date").value || "2024-01-01",
						status: "Pending",
					});
				}

				closeModal();
				showToast(
					`${type.charAt(0).toUpperCase() + type.slice(1)} created successfully`
				);

				// Re-render current page
				router(currentPage);
			}

			function showToast(msg) {
				const toast = getEl("toast");
				getEl("toast-message").innerText = msg;
				toast.classList.remove("translate-y-20", "opacity-0");

				setTimeout(() => {
					toast.classList.add("translate-y-20", "opacity-0");
				}, 3000);
			}

			// --- INIT ---
			window.addEventListener("DOMContentLoaded", () => {
				router("dashboard");
			});
		</script>
	</body>
</html>
