function Sites({ clients: _clients, onOpenClient, tab: tabProp, onTab }) {
  const [localTab, setLocalTab] = React.useState("live");
  const tab = tabProp || localTab;
  function setTab(v) { if (onTab) onTab(v); setLocalTab(v); }
  const all = (_clients||CLIENTS).filter(c => c.deployed);
  const displayed = tab === "live"     ? all.filter(c => c.live)
                  : tab === "building" ? (_clients||CLIENTS).filter(c => c.built && !c.deployed)
                  : all.filter(c => !c.live);

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Sites <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">Deployed</span></span>
          <div className="cm-bar__tabs">
            {[["live","Live"],["building","Building"],["down","Down"]].map(([k,l]) => (
              <span key={k} className={"cm-bar__tab " + (tab===k?"is-active":"")} onClick={() => setTab(k)}>{l}</span>
            ))}
          </div>
        </div>
        <div className="cm-bar__r">
        </div>
      </div>

      <div className="cm-pageScroll">
        <table className="cm-table">
          <thead>
            <tr>
              <th>Business</th>
              <th>Vercel URL</th>
              <th>Built</th>
              <th>Deployed</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {displayed.length === 0 && (
              <tr><td colSpan={6} style={{ textAlign:"center", color:"var(--color-ink-subtle)", padding:32 }}>No sites in this view.</td></tr>
            )}
            {displayed.map(c => (
              <tr key={c.id} onClick={() => onOpenClient && onOpenClient(c.id)} style={{ cursor:"pointer" }}>
                <td style={{ fontWeight:500 }}>{c.name}</td>
                <td className="cm-mono" style={{ fontSize:11.5 }}>
                  {c.siteUrl
                    ? <a href={"https://"+c.siteUrl} target="_blank" rel="noreferrer"
                        onClick={e => e.stopPropagation()}
                        style={{ color:"var(--color-accent)", textDecoration:"none" }}>{c.siteUrl}</a>
                    : "—"}
                </td>
                <td className="muted">{c.built || "—"}</td>
                <td className="muted">{c.deployed || "—"}</td>
                <td>{c.live ? <span className="cm-tag cm-tag--ok">Live</span> : <span className="cm-tag cm-tag--danger">Down</span>}</td>
                <td onClick={e => { e.stopPropagation(); if (c.siteUrl) window.open("https://" + c.siteUrl, "_blank"); }}>
                  {c.siteUrl && <button className="cm-iconbtn" title="Open site"><i data-lucide="external-link" className="cm-icon-xs"></i></button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.Sites = Sites;