function Dashboard({ clients: _clients, onOpenClient, onView }) {
  const src = _clients || CLIENTS;
  const paying   = src.filter(c => c.mrr > 0);
  const totalMrr = paying.reduce((s, c) => s + c.mrr, 0);
  const built    = src.filter(c => c.built).length;
  const overdue  = src.filter(c => c.overdue).length;
  const reached  = src.filter(c => c.lastContact).length;
  const closed   = src.filter(c => c.stage === "closed").length;
  const conv     = reached ? Math.round((closed / reached) * 100) : 0;

  const [q, setQ] = React.useState("");
  const results = q.trim()
    ? src.filter(c =>
        c.name.toLowerCase().includes(q.toLowerCase()) ||
        c.city.toLowerCase().includes(q.toLowerCase()) ||
        c.category.toLowerCase().includes(q.toLowerCase())
      ).slice(0, 6)
    : [];

  const stageCounts = STAGES.map(s => ({
    ...s,
    count: src.filter(c => c.stage === s.key).length,
  }));
  const maxCount = Math.max(...stageCounts.map(s => s.count), 1);

  const upcoming = getUpcomingCalls().filter(c => c.nextCall && /^(May|Jun)/.test(c.nextCall)).slice(0, 5);

  const activity = [
    { color: "#27a644", text: "Sunrise Landscaping deployed",            time: "23m ago",   id: "GMA-0055" },
    { color: "#bb87fc", text: "Clear Cut Lawn Care moved to Contacted",  time: "1h ago",    id: "GMA-0044" },
    { color: "#eb7235", text: "Beacon Plumbing counter-offered $175/mo", time: "3h ago",    id: "GMA-0029" },
    { color: "#3bbdb1", text: "Peak Pressure Washing · $200 received",   time: "yesterday", id: "GMA-0011" },
    { color: "#eb5757", text: "Elite Auto Detail call overdue",           time: "yesterday", id: "GMA-0059" },
    { color: "#f2994a", text: "Build batch complete · 3 sites ready",    time: "2d ago",    id: null       },
  ];

  return (
    <div className="cm-dash">
      {/* Top bar */}
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
        <span className="cm-bar__crumb">
          Dashboard <span className="cm-bar__crumbSep">/</span>
          <span className="cm-bar__crumbMuted"> Overview</span>
        </span>
        <span style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>{new Date().toLocaleDateString("en-US",{month:"long",year:"numeric"})}</span>
      </div>

      {/* Global search */}
      <div style={{ position:"relative" }}>
        <div className="cm-search" style={{ width:"100%", boxSizing:"border-box" }}>
          <i data-lucide="search" className="cm-icon-xs"></i>
          <input
            placeholder="Search clients, cities, categories…"
            value={q}
            onChange={e => setQ(e.target.value)}
            style={{ flex:1 }}
            autoComplete="off"
          />
          {q && (
            <span style={{ cursor:"pointer", fontSize:13, color:"var(--color-ink-subtle)" }}
              onClick={() => setQ("")}>✕</span>
          )}
        </div>
        {results.length > 0 && (
          <div style={{
            position:"absolute", top:"calc(100% + 4px)", left:0, right:0,
            background:"var(--color-surface-1)", border:"1px solid var(--color-hairline)",
            borderRadius:8, boxShadow:"0 8px 24px rgba(0,0,0,0.4)", zIndex:50, overflow:"hidden",
          }}>
            {results.map(c => (
              <div key={c.id}
                onClick={() => { onOpenClient && onOpenClient(c.id); setQ(""); }}
                style={{
                  display:"flex", alignItems:"center", gap:10, padding:"9px 14px",
                  cursor:"pointer", fontSize:13, color:"var(--color-ink)",
                  borderBottom:"1px solid var(--color-hairline)",
                  transition:"background 100ms ease",
                }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--color-surface-2)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <span className="cm-side__dot" style={{ background: stageColor(c.stage) }} />
                <span style={{ flex:1, fontWeight:500 }}>{c.name}</span>
                <span style={{ fontSize:11.5, color:"var(--color-ink-subtle)" }}>{c.city.split(",")[0]}</span>
                <span style={{ fontSize:11, color:"var(--color-ink-subtle)", background:"var(--color-surface-2)", padding:"1px 6px", borderRadius:4 }}>{c.stage}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Stat cards — informational only, no navigation */}
      <div className="cm-statsGrid">
        {[
          { lbl:"Total MRR",     val:`$${totalMrr}`               },
          { lbl:"Sites live",    val:src.filter(c=>c.live).length  },
          { lbl:"Conversion",    val:`${conv}%`                    },
          { lbl:"Overdue calls", val:overdue, warn: overdue > 0    },
        ].map(s => (
          <div key={s.lbl} className="cm-statBig" style={{ cursor:"default" }}>
            <div className="cm-statBig__lbl">{s.lbl}</div>
            <div className="cm-statBig__val" style={{ color: s.warn ? "#f08585" : undefined }}>{s.val}</div>
          </div>
        ))}
      </div>

      <div className="cm-twoCol">
        {/* Pipeline funnel */}
        <div className="cm-panel">
          <div className="cm-panel__head">
            <span className="cm-panel__title">Pipeline</span>
          </div>
          <div className="cm-panel__body">
            <div className="cm-funnel">
              {stageCounts.map(s => (
                <div key={s.key} className="cm-funnel__row" style={{ cursor:"pointer" }}
                  onClick={() => onView && onView("pipeline")}
                  onMouseEnter={e => e.currentTarget.style.background="var(--color-surface-2)"}
                  onMouseLeave={e => e.currentTarget.style.background="transparent"}>
                  <span className="cm-funnel__name">
                    <span className="cm-side__dot" style={{ background: s.color }} />
                    {s.label}
                  </span>
                  <div className="cm-funnel__bar">
                    <div className="cm-funnel__fill" style={{ width:`${(s.count/maxCount)*100}%`, background:s.color }} />
                  </div>
                  <span className="cm-funnel__count">{s.count}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Upcoming calls */}
        <div className="cm-panel">
          <div className="cm-panel__head">
            <span className="cm-panel__title">Upcoming calls</span>
            <span className="cm-panel__action" onClick={() => onView && onView("calendar")} style={{ cursor:"pointer" }}>
              Calendar →
            </span>
          </div>
          <div className="cm-panel__body" style={{ display:"flex", flexDirection:"column", gap:0 }}>
            {upcoming.length === 0 && (
              <div style={{ color:"var(--color-ink-subtle)", fontSize:12.5, padding:"4px 0" }}>Nothing scheduled.</div>
            )}
            {upcoming.map(c => (
              <div key={c.id} onClick={() => onOpenClient && onOpenClient(c.id)}
                style={{ display:"flex", alignItems:"center", gap:8, padding:"7px 0",
                  borderBottom:"1px solid var(--color-hairline)", cursor:"pointer",
                  transition:"background 100ms ease", borderRadius:4, margin:"0 -4px", paddingLeft:4 }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--color-surface-2)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <span className="cm-side__dot" style={{ background: stageColor(c.stage) }} />
                <span style={{ flex:1, fontSize:12.5, color:"var(--color-ink)", fontWeight:500,
                  overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{c.name}</span>
                <span style={{ fontSize:11.5, color:"var(--color-ink-subtle)", marginRight:4 }}>{c.city?.split(",")[0]}</span>
                <span style={{ fontSize:11.5, color: c.overdue ? "#f08585" : "var(--color-ink-subtle)" }}>
                  {c.overdue ? "Overdue" : c.nextCall}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Recent activity */}
      <div className="cm-panel">
        <div className="cm-panel__head">
          <span className="cm-panel__title">Recent activity</span>
          <span className="cm-panel__action" onClick={() => onView && onView("pipeline")} style={{ cursor:"pointer" }}>
            View pipeline →
          </span>
        </div>
        <div className="cm-panel__body">
          <div className="cm-activity">
            {activity.map((a, i) => (
              <div key={i} className="cm-activity__row"
                style={{ cursor: a.id ? "pointer" : "default" }}
                onClick={() => a.id && onOpenClient && onOpenClient(a.id)}
              >
                <span className="cm-activity__dot" style={{ background: a.color }} />
                <span style={{ flex:1, fontSize:12.5, color:"var(--color-ink-muted)" }}>{a.text}</span>
                <span className="cm-activity__time">{a.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;