function getWorkItemLabel(item) {
  if (item.type === "phase") {
    const isChild = Boolean(item.parentId) || item.level > 0 || item.parentTaskId || item.isPreset;
    return isChild ? "Phase" : "Block";
  }
  if (item.type === "task") return "Task";
  if (item.type === "qc") return "QC Check";
  if (item.type === "subtask") return "Subtask";
  return "Item";
}

function countTasksAndSubtasks(nodes) {
  let count = 0;
  const walk = (items) => {
    (items || []).forEach((item) => {
      if (item.type !== "phase") {
        count++;
      }
      walk(item.children);
    });
  };
  walk(nodes);
  return count;
}

function MindMap({ snapshot, onNav }) {
  const isMobile = useIsPhone();
  const [focus, setFocus] = React.useState("operational");
  const [expandedPhases, setExpandedPhases] = React.useState({});
  const [selectedTask, setSelectedTask] = React.useState(null);

  const ff = window.ConstructProData.formatCurrency;
  const project = snapshot.project;
  const projectTree = snapshot.projectTree || [];

  const togglePhase = (phaseId) => {
    setExpandedPhases((prev) => ({ ...prev, [phaseId]: !prev[phaseId] }));
    setSelectedTask(null);
  };

  const selectTask = (task) => {
    setSelectedTask((current) => (current?.id === task.id ? null : task));
  };

  const hasExpandedPhase = Object.values(expandedPhases).some(Boolean);
  
  const viewModes = [
    { id: "operational", label: "Operational", icon: <Icons.viewList size={14} /> },
    { id: "financial", label: "Financial", icon: <Icons.finance size={14} /> },
    { id: "materials", label: "Materials", icon: <Icons.cart size={14} /> }
  ];

  const renderTaskNode = (task, depth = 0) => {
    const hasChildren = task.children && task.children.length > 0;
    return (
      <div key={task.id} className="space-y-2">
        <div className={depth > 0 ? "pl-3.5 border-l-2 border-slate-200 ml-2" : ""}>
          <TaskNode
            task={task}
            depth={depth}
            selected={selectedTask?.id === task.id}
            onSelect={() => selectTask(task)}
          />
        </div>
        {hasChildren && (
          <div className="space-y-2">
            {task.children.map((child) => renderTaskNode(child, depth + 1))}
          </div>
        )}
      </div>
    );
  };

  if (isMobile) {
    return (
      <div className="fade-in space-y-4 m3-mobile-content">
        <Card>
          <SectionTitle title="Project Mind Map" subtitle="Best on tablet or desktop." />
          <p className="mb-3 text-sm text-text-muted">
            The mind map layers project, blocks, tasks, and details side by side. On a phone that layout is too dense,
            so this view is available on larger screens only.
          </p>
          <ul className="mb-5 list-disc space-y-1 pl-5 text-sm text-text-muted">
            <li>Open a tablet or desktop browser to explore the full mind map.</li>
            <li>On mobile, use Tasks for execution tracking and Field Teams for site alerts.</li>
          </ul>
          <div className="flex flex-col gap-2 sm:flex-row">
            <Button type="button" onClick={() => onNav?.("workItems")}>
              Open Tasks
            </Button>
            <Button type="button" variant="secondary" onClick={() => onNav?.("schedule")}>
              View Work Programme
            </Button>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="fade-in space-y-5">
      <PageHeader
        title="Project Mind Map"
        subtitle="Four layers left to right — expand a block, explore tasks/subtasks, read details."
        actions={
          <div className="inline-flex rounded-xl border border-border-light bg-gray-100 p-1" role="tablist">
            {viewModes.map((mode) => (
              <button
                key={mode.id}
                type="button"
                role="tab"
                aria-selected={focus === mode.id}
                onClick={() => setFocus(mode.id)}
                className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-200 cursor-pointer ${
                  focus === mode.id 
                    ? "bg-white text-primary shadow-sm ring-1 ring-border-light" 
                    : "text-text-muted hover:text-text-primary"
                }`}
              >
                {mode.icon}
                <span>{mode.label}</span>
              </button>
            ))}
          </div>
        }
      />

      <Card className="!p-0 overflow-hidden border border-border-light shadow-sm">
        <div className="grid grid-cols-2 gap-2 border-b border-border-light bg-gray-50 px-4 py-3 sm:grid-cols-4">
          <FlowStep n={1} label="Project" active />
          <FlowStep n={2} label="Blocks" active={projectTree.length > 0} />
          <FlowStep n={3} label="Tasks & Subtasks" active={hasExpandedPhase} />
          <FlowStep n={4} label="Details" active={Boolean(selectedTask)} />
        </div>

        <div className="bg-slate-50/50 p-4 md:p-5">
          <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4 xl:gap-4">
            <FlowColumn step={1} title="Project" hint="Master node">
              <ProjectNode project={project} ff={ff} />
            </FlowColumn>

            <FlowColumn step={2} title="Blocks" hint="Tap to expand tasks & subtasks →">
              <div className="max-h-[min(55vh,550px)] overflow-y-auto space-y-3 pr-1 -mr-1">
                {projectTree.length === 0 ? (
                  <FlowHint text="No blocks yet." />
                ) : (
                  projectTree.map((phase) => (
                    <PhaseNode
                      key={phase.id}
                      phase={phase}
                      focus={focus}
                      ff={ff}
                      expanded={Boolean(expandedPhases[phase.id])}
                      onToggle={() => togglePhase(phase.id)}
                    />
                  ))
                )}
              </div>
            </FlowColumn>

            <FlowColumn step={3} title="Tasks & Subtasks" hint={hasExpandedPhase ? "Tap task/subtask for details →" : "Expand a block"}>
              <div className="max-h-[min(55vh,550px)] overflow-y-auto space-y-3 pr-1 -mr-1">
                {!hasExpandedPhase ? (
                  <FlowHint text="Expand any block in column 2 to list its tasks here." />
                ) : (
                  projectTree.map((phase) => {
                    if (!expandedPhases[phase.id]) return null;
                    const totalItems = countTasksAndSubtasks(phase.children);
                    const visibleTasks = (phase.children || []).flatMap((item) => {
                      if (item.type === "phase") {
                        return item.children || [];
                      }
                      return [item];
                    });
                    return (
                      <div key={`tasks_${phase.id}`} className="space-y-2">
                        <p className="sticky top-0 z-[1] rounded-md bg-slate-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-text-muted flex items-center justify-between">
                          <span>{phase.title}</span>
                          <span className="rounded bg-slate-200 px-1 py-0.25 text-[9px] font-bold">{totalItems}</span>
                        </p>
                        {visibleTasks.length === 0 ? (
                          <p className="px-1 text-xs text-text-muted">No tasks yet.</p>
                        ) : (
                          <div className="space-y-3">
                            {visibleTasks.map((task) => renderTaskNode(task, 0))}
                          </div>
                        )}
                      </div>
                    );
                  })
                )}
              </div>
            </FlowColumn>

            <FlowColumn step={4} title="Details" hint={selectedTask ? "Live data" : "Select a task"}>
              <div className="max-h-[min(55vh,550px)] overflow-y-auto">
                {selectedTask ? (
                  <DetailNode task={selectedTask} focus={focus} ff={ff} onClose={() => setSelectedTask(null)} />
                ) : (
                  <FlowHint text="Select a task in column 3 to view checklist, budget, or materials." />
                )}
              </div>
            </FlowColumn>
          </div>
        </div>
      </Card>
    </div>
  );
}

function FlowStep({ n, label, active }) {
  return (
    <div className={`flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors duration-200 ${active ? "bg-primary/10" : ""}`}>
      <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-black transition-colors duration-200 ${active ? "bg-primary text-white" : "bg-gray-200 text-text-muted"}`}>{n}</span>
      <span className={`text-xs font-bold transition-colors duration-200 ${active ? "text-primary" : "text-text-muted"}`}>{label}</span>
    </div>
  );
}

function FlowColumn({ step, title, hint, children }) {
  return (
    <section className="flex min-h-[220px] flex-col rounded-xl border border-border-light bg-white shadow-sm overflow-hidden transition-all duration-200 hover:shadow">
      <header className="shrink-0 border-b border-border-light bg-gradient-to-r from-primary-fixed/30 to-white px-3 py-2.5">
        <div className="flex items-center gap-2">
          <span className="flex h-5 w-5 items-center justify-center rounded bg-primary text-[10px] font-black text-white">{step}</span>
          <div className="min-w-0">
            <p className="text-xs font-bold text-text-primary leading-tight">{title}</p>
            <p className="text-[10px] text-text-muted truncate">{hint}</p>
          </div>
        </div>
      </header>
      <div className="flex-1 p-3 bg-white">{children}</div>
    </section>
  );
}

function FlowHint({ text }) {
  return (
    <div className="flex h-full min-h-[160px] flex-col items-center justify-center rounded-lg border border-dashed border-border-light bg-gray-50/80 p-4 text-center">
      <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary-fixed text-primary">
        <Icons.mindMap size={20}/>
      </div>
      <p className="text-xs leading-relaxed text-text-muted">{text}</p>
    </div>
  );
}

function ProjectNode({ project, ff }) {
  return (
    <div className="rounded-xl border-2 border-primary bg-white p-4 shadow-sm">
      <div className="flex items-start justify-between gap-2 border-b border-border-light pb-3 mb-3">
        <div className="min-w-0">
          <Badge tone={project.projectStatus === "ongoing" ? "warning" : "success"}>{(project.projectStatus || "active").toUpperCase()}</Badge>
          <h3 className="mt-1.5 font-bold text-base text-text-primary leading-snug">{project.name}</h3>
        </div>
        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
          <Icons.project size={18}/>
        </div>
      </div>
      <dl className="space-y-2.5 text-sm">
        <div className="flex justify-between gap-2">
          <dt className="text-text-muted flex items-center gap-1"><Icons.settings size={14} className="text-text-muted" /> Code</dt>
          <dd className="font-bold text-text-primary">{project.code}</dd>
        </div>
        <div className="flex justify-between gap-2">
          <dt className="text-text-muted flex items-center gap-1"><Icons.pin size={14} className="text-text-muted" /> Site</dt>
          <dd className="font-bold text-text-primary text-right">{project.location}</dd>
        </div>
        <div className="flex justify-between gap-2">
          <dt className="text-text-muted flex items-center gap-1"><Icons.finance size={14} className="text-text-muted" /> Budget</dt>
          <dd className="font-bold text-text-primary">{ff(project.budgetTotal)}</dd>
        </div>
        <div className="flex justify-between gap-2">
          <dt className="text-text-muted flex items-center gap-1"><Icons.quality size={14} className="text-text-muted" /> Progress</dt>
          <dd className="font-bold text-success">{project.progressPct ?? 0}%</dd>
        </div>
      </dl>
      <div className="mt-3">
        <ProgressBar value={project.progressPct ?? 0}/>
      </div>
      <p className="mt-3 rounded-lg bg-gray-50 border border-border-light px-2.5 py-2 text-[11px] text-text-muted leading-snug flex items-center gap-1">
        <Icons.radar size={12} className="text-text-muted shrink-0" />
        <span>GPS {project.gps?.latitude ?? "—"}, {project.gps?.longitude ?? "—"} · {project.geofenceRadiusMeters || 0}m geofence</span>
      </p>
    </div>
  );
}

function PhaseNode({ phase, focus, ff, expanded, onToggle }) {
  const style = getPhaseStyle(phase.title);
  const progress = phase.rollup?.progressPct ?? phase.progressPct ?? 0;
  const planned = phase.rollup?.budgetPlanned || phase.budgetPlanned || 0;
  const actual = phase.rollup?.budgetActual || phase.budgetActual || 0;
  const totalItemsCount = countTasksAndSubtasks(phase.children);

  return (
    <button
      type="button"
      onClick={onToggle}
      className={`block w-full rounded-xl border text-left shadow-sm transition-all duration-200 cursor-pointer hover:shadow-md ${style.shell} ${expanded ? "ring-2 ring-primary/30 shadow-md" : ""}`}
      aria-expanded={expanded}
    >
      <div className="p-3">
        <div className="flex items-start justify-between gap-2">
          <span className="font-bold text-sm text-text-primary leading-snug">{phase.title}</span>
          <span className="shrink-0 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-bold text-text-primary tabular-nums shadow-sm">{progress}%</span>
        </div>
        <div className="mt-2.5 h-2 rounded-full bg-black/5 overflow-hidden">
          <div className={`h-full rounded-full ${style.bar}`} style={{ width: `${Math.max(progress, 2)}%` }} />
        </div>
        {focus === "financial" && (
          <div className="mt-2.5 flex justify-between gap-2 text-[11px] text-text-muted border-t border-black/5 pt-2">
            <span className="flex items-center gap-0.5"><Icons.payments size={10} /> Plan <b className="text-text-primary">{ff(planned)}</b></span>
            <span>Spent <b className={actual <= planned ? "text-success" : "text-danger"}>{ff(actual)}</b></span>
          </div>
        )}
        {focus === "materials" && totalItemsCount > 0 && (
          <p className="mt-2 text-[11px] text-text-muted border-t border-black/5 pt-2 flex items-center gap-1">
            <Icons.cart size={10} />
            <span>{totalItemsCount} item{totalItemsCount === 1 ? "" : "s"} with materials</span>
          </p>
        )}
      </div>
      <div className={`flex items-center justify-between border-t px-3 py-2 text-[11px] font-bold ${expanded ? "border-primary/20 bg-primary/5 text-primary" : "border-black/5 bg-black/[0.03] text-text-muted"}`}>
        <span className="flex items-center gap-1">
          {expanded ? <Icons.panelRight size={12} /> : <Icons.panelLeft size={12} />}
          {expanded ? "Hide structure" : "Show structure"}
        </span>
        <span className="rounded-md bg-white px-1.5 py-0.5 text-text-primary shadow-sm">{totalItemsCount}</span>
      </div>
    </button>
  );
}

function TaskNode({ task, depth = 0, selected, onSelect }) {
  const hasChildren = task.children && task.children.length > 0;
  const progress = hasChildren ? (task.rollup?.progressPct ?? 0) : (task.progressPct ?? 0);
  const subtaskProgress = task.rollup?.subtaskProgress;
  const progressDisplay = subtaskProgress?.total
    ? `${subtaskProgress.done}/${subtaskProgress.total} · ${progress}%`
    : `${progress}%`;
  const status = hasChildren ? (task.rollup?.status ?? "todo") : (task.status ?? "todo");
  const done = status === "approved" || status === "done";
  const label = getWorkItemLabel(task);
  
  let bgClass = "bg-white";
  let borderClass = "border-border-light";
  let style = null;
  
  if (task.type === "phase") {
    style = getPhaseStyle(task.title);
    bgClass = style.shell;
    borderClass = ""; // Handled by shell classes
  } else if (task.type === "subtask" || task.type === "qc") {
    bgClass = "bg-slate-50/70 hover:bg-slate-50";
  }

  return (
    <button
      type="button"
      onClick={onSelect}
      className={`block w-full rounded-xl border p-3 text-left shadow-sm transition-all duration-150 cursor-pointer ${
        selected 
          ? "border-primary ring-2 ring-primary/20 shadow-md" 
          : `${borderClass} hover:border-primary/40 hover:shadow`
      } ${bgClass}`}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <span className="text-[9px] font-bold uppercase tracking-wider text-text-muted block mb-0.5">
            {label}
          </span>
          <span className={`font-semibold text-sm text-text-primary leading-snug break-words ${task.type === "phase" ? "font-bold text-base" : ""}`}>
            {task.title}
          </span>
        </div>
        <Badge tone={done ? "success" : status === "blocked" ? "danger" : "info"} className="shrink-0 text-[9px]">{status}</Badge>
      </div>
      <div className="mt-2 flex justify-between text-xs text-text-muted">
        <span>{task.assigneeRole || label}</span>
        <span className="font-bold text-text-primary">{progressDisplay}</span>
      </div>
      <div className="mt-2">
        {task.type === "phase" && style ? (
          <div className="h-1.5 w-full rounded-full bg-black/5 overflow-hidden">
            <div className={`h-full rounded-full ${style.bar}`} style={{ width: `${Math.max(progress, 2)}%` }} />
          </div>
        ) : (
          <ProgressBar value={progress} tone={status === "blocked" ? "danger" : done ? "success" : "orange"}/>
        )}
      </div>
    </button>
  );
}

function DetailNode({ task, focus, ff, onClose }) {
  const hasChildren = task.children && task.children.length > 0;
  const planned = hasChildren ? (task.rollup?.budgetPlanned ?? 0) : (task.budgetPlanned || 0);
  const spent = hasChildren ? (task.rollup?.budgetActual ?? 0) : (task.budgetActual || 0);
  const spendPct = planned > 0 ? Math.round((spent / planned) * 100) : 0;
  
  // Decide spend utilization tone
  let spendTone = "primary";
  if (spendPct > 90) spendTone = "danger";
  else if (spendPct > 60) spendTone = "warning";

  return (
    <div className="rounded-xl border-2 border-primary/40 bg-white p-4 shadow-sm space-y-4">
      <div className="flex items-start justify-between gap-2 border-b border-border-light pb-3">
        <div className="min-w-0">
          <p className="text-[10px] font-bold uppercase text-text-muted tracking-wider">
            Selected {getWorkItemLabel(task)} {hasChildren ? "(Parent)" : ""}
          </p>
          <h4 className="font-bold text-sm text-text-primary mt-0.5 leading-snug">{task.title}</h4>
          <div className="mt-1.5 flex flex-wrap gap-1.5">
            <Badge tone="info" className="text-[9px]">
              {hasChildren ? task.rollup?.status || task.status : task.status}
            </Badge>
            {task.assigneeRole && <Badge tone="neutral" className="text-[9px]">{task.assigneeRole}</Badge>}
          </div>
        </div>
        <button 
          type="button" 
          onClick={onClose} 
          className="flex items-center gap-0.5 rounded-lg border border-border-light px-2 py-1 text-[11px] font-bold text-text-muted hover:bg-gray-50 cursor-pointer shrink-0 transition-colors"
        >
          <Icons.close size={12} />
          <span>Clear</span>
        </button>
      </div>

      {focus === "operational" && (
        <>
          <DetailBlock title="Checklist" icon={<Icons.taskAlt size={12} className="text-text-muted" />}>
            {(task.checklist || []).map((c) => (
              <div key={c.id} className="flex items-start gap-2.5 text-xs py-1.5">
                <span className={`h-4.5 w-4.5 shrink-0 rounded-md border flex items-center justify-center transition-colors ${
                  c.done 
                    ? "bg-success border-success text-white" 
                    : "border-border-light bg-slate-50"
                }`}>
                  {c.done && <Icons.check size={11} />}
                </span>
                <span className={c.done ? "line-through text-text-muted" : "text-text-primary"}>{c.label}</span>
              </div>
            ))}
            {!(task.checklist || []).length && (
              <p className="text-xs text-text-muted italic py-1">No checklist items defined.</p>
            )}
          </DetailBlock>
          <DetailBlock title="Schedule Details" icon={<Icons.calendarMonth size={12} className="text-text-muted" />}>
            <DetailRow label="Planned Start" value={window.ConstructProData.formatScheduleDate(task.rollup?.schedule?.plannedStart || task.startDate)} />
            <DetailRow label="Planned Due" value={window.ConstructProData.formatScheduleDate(task.rollup?.schedule?.plannedDue || task.dueDate)} />
            <DetailRow label="Actual Start" value={task.rollup?.schedule?.actualStart ? window.ConstructProData.formatScheduleDate(task.rollup.schedule.actualStart) : "Not started"} />
            <DetailRow label="Actual End" value={task.rollup?.schedule?.actualEnd ? window.ConstructProData.formatScheduleDate(task.rollup.schedule.actualEnd) : (task.rollup?.schedule?.actualStart ? "In progress" : "—")} />
            {(task.rollup?.schedule?.cascadeDelayDays || 0) > 0 ? (
              <DetailRow
                label="Revised due"
                value={window.ConstructProData.formatScheduleDate(task.rollup.schedule.expectedDue)}
              />
            ) : null}
          </DetailBlock>
        </>
      )}

      {focus === "financial" && (
        <>
          <div className="grid grid-cols-2 gap-2">
            <MiniStat label="Planned Budget" value={ff(planned)} />
            <MiniStat label="Actual Cost" value={ff(spent)} highlight />
          </div>
          
          <div className="rounded-lg border border-border-light bg-slate-50 p-2.5">
            <div className="flex justify-between text-[11px] font-bold text-text-primary mb-1.5">
              <span>Spend Utilization</span>
              <span className={spendTone === "danger" ? "text-danger" : spendTone === "warning" ? "text-warning" : "text-primary"}>
                {spendPct}%
              </span>
            </div>
            <ProgressBar value={spendPct} tone={spendTone === "danger" ? "danger" : spendTone === "warning" ? "orange" : "blue"} />
          </div>

          <DetailBlock title="DPR Log History" icon={<Icons.finance size={12} className="text-text-muted" />}>
            {(task.dprHistory || []).map((log) => {
              const mat = log.materialsUsed?.reduce((s, m) => s + (m.cost || 0), 0) || 0;
              return (
                <div key={log.id} className="rounded-lg bg-gray-50 border border-border-light p-2.5 text-xs mb-2 last:mb-0">
                  <div className="flex justify-between font-bold text-text-primary border-b border-gray-200/60 pb-1 mb-1">
                    <span className="flex items-center gap-1"><Icons.event size={11} className="text-text-muted" /> {log.date}</span>
                    <span className="text-success font-black">{ff((log.laborCost || 0) + mat)}</span>
                  </div>
                  {log.comment && <p className="text-text-muted mt-1 leading-relaxed">{log.comment}</p>}
                </div>
              );
            })}
            {!(task.dprHistory || []).length && (
              <p className="text-xs text-text-muted italic py-1">No DPR entries logged.</p>
            )}
          </DetailBlock>
        </>
      )}

      {focus === "materials" && (
        <DetailBlock title="Materials Rollup" icon={<Icons.cart size={12} className="text-text-muted" />}>
          {(task.materials || []).map((m) => {
            const consumedPct = m.quantity > 0 ? Math.round(((m.actualQuantity || 0) / m.quantity) * 100) : 0;
            return (
              <div key={m.name} className="rounded-lg bg-gray-50 border border-border-light p-2.5 text-xs space-y-1.5 mb-2 last:mb-0">
                <div className="flex justify-between gap-2 font-bold text-text-primary">
                  <span>{m.name}</span>
                  <span className="text-right tabular-nums">{m.allocatedQty || 0}/{m.quantity} {m.unit}</span>
                </div>
                <ProgressBar value={consumedPct} tone={consumedPct > 100 ? "danger" : consumedPct > 80 ? "orange" : "blue"} />
                <div className="flex justify-between text-[10px] text-text-muted">
                  <span>Usage: {m.actualQuantity || 0} {m.unit}</span>
                  <span>{consumedPct}% consumed</span>
                </div>
              </div>
            );
          })}
          {!(task.materials || []).length && (
            <p className="text-xs text-text-muted italic py-1">No materials allocated to this task.</p>
          )}
        </DetailBlock>
      )}
    </div>
  );
}

function DetailBlock({ title, icon, children }) {
  return (
    <div className="space-y-2">
      <p className="text-[10px] font-black uppercase text-text-muted tracking-wider flex items-center gap-1.5 border-b border-border-light pb-1">
        {icon}
        <span>{title}</span>
      </p>
      <div className="space-y-1">{children}</div>
    </div>
  );
}

function DetailRow({ label, value }) {
  return (
    <div className="flex justify-between text-xs gap-2 py-1 border-b border-slate-50 last:border-b-0">
      <span className="text-text-muted">{label}</span>
      <span className="font-semibold text-text-primary">{value}</span>
    </div>
  );
}

function MiniStat({ label, value, highlight }) {
  return (
    <div className="rounded-lg bg-gray-50 border border-border-light p-2.5 text-center transition-all duration-150 hover:bg-slate-50">
      <p className="text-[9px] font-bold uppercase text-text-muted tracking-wider">{label}</p>
      <p className={`mt-0.5 text-xs font-black ${highlight ? "text-success" : "text-text-primary"}`}>{value}</p>
    </div>
  );
}

function getPhaseStyle(title) {
  if (/foundation|plinth/i.test(title)) return { shell: "border-blue-200 bg-blue-50/50 hover:bg-blue-50", bar: "bg-blue-600" };
  if (/structure|slab|roof|rcc/i.test(title)) return { shell: "border-orange-200 bg-orange-50/50 hover:bg-orange-50", bar: "bg-orange-600" };
  if (/masonry|brick|plaster/i.test(title)) return { shell: "border-amber-200 bg-amber-50/50 hover:bg-amber-50", bar: "bg-amber-700" };
  if (/finishing|flooring|colouring|paint|door/i.test(title)) return { shell: "border-purple-200 bg-purple-50/50 hover:bg-purple-50", bar: "bg-purple-600" };
  if (/fitting|electric|plumbing|p.h/i.test(title)) return { shell: "border-emerald-200 bg-emerald-50/50 hover:bg-emerald-50", bar: "bg-emerald-600" };
  return { shell: "border-border-light bg-gray-50 hover:bg-gray-100/70", bar: "bg-slate-500" };
}

Object.assign(window, { MindMap });