// screens-head-supreme.jsx — ASSEM SUPREME EXECUTIVE INTELLIGENCE views (HEAD → ASSEM/CEO).
// Reuse-only UI over the assem-brain endpoints. ASSEM's area in HEAD gets a sub-nav: the existing Chat
// (AssemScreen) + Company Brain / 10x Growth / Strategic Thinking / Executive Alerts / Director Training
// / Deployment Advisor. Every panel renders REAL engine output (honest NOT_ENOUGH_DATA, never faked).
const { useState: useSupState, useEffect: useSupEffect } = React;

// Coerce any {ar,en}/object to a safe string (mirrors screens-head.jsx S()).
function supS(x, lang) {
  if (x == null) return "";
  if (typeof x === "string" || typeof x === "number") return String(x);
  if (x.ar || x.en) return (lang === "ar" ? x.ar : x.en) || "";
  if (x.label) return supS(x.label, lang);
  if (x.note) return supS(x.note, lang);
  if (x.value) return supS(x.value, lang);
  return x.en || x.name || x.product || x.vertical || "";
}
function supMoney(n, cur) { return `${cur || ""} ${typeof n === "number" ? n.toLocaleString() : (n || "—")}`.trim(); }

function SupLoading() { return <Card><div className="skel" style={{ height: 90, borderRadius: 10 }} /></Card>; }
function SupError({ lang }) { return <Card><EmptyState icon="alert" title={lang === "ar" ? "تعذّر التحميل" : "Could not load"} /></Card>; }
function useSupData(fetcher, deps) {
  const [d, setD] = useSupState(null);
  useSupEffect(() => { let on = true; setD(null); Promise.resolve(fetcher()).then((x) => on && setD(x || { error: true })).catch(() => on && setD({ error: true })); return () => { on = false; }; }, deps || []);
  return d;
}

// ---- Company Brain (Phase 1) ----
function BrainPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.companyBrain(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const row = (k, v) => <div className="row between" style={{ fontSize: 12.5, padding: "3px 0" }}><span className="subtle">{k}</span><b>{v}</b></div>;
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("ذاكرة القرارات", "Decision memory")}</b>
        {row(T("قرارات مسجّلة", "Decisions recorded"), d.decisions.total)}
        {row(T("نجحت", "Succeeded"), d.decisions.succeeded)}
        {row(T("فشلت", "Failed"), d.decisions.failed)}
        {d.deals && d.deals.winRate != null ? row(T("معدّل الفوز", "Win rate"), d.deals.winRate + "%") : null}
        {row(T("الإيراد المؤكَّد", "Verified revenue"), supMoney(d.revenue.verified, d.currency))}
      </div></Card>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("ما تعلّمناه (من نتائج حقيقية)", "Learned (from real outcomes)")}</b>
        {(d.learnedInsights || []).length ? d.learnedInsights.map((l, i) => (
          <div key={i} className="row" style={{ gap: 6, fontSize: 12.5 }}>
            <Icon name={l.kind === "repeat" ? "checkcircle" : "alert"} size={13} style={{ color: l.kind === "repeat" ? "var(--color-success)" : "var(--color-warning, #B45309)", flexShrink: 0 }} />
            {supS(l.insight, lang)}
          </div>
        )) : <div className="subtle" style={{ fontSize: 12 }}>{T("لا نتائج كافية بعد للتعلّم.", "Not enough recorded outcomes yet to learn from.")}</div>}
      </div></Card>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("ملاحظات السوق/المنتج", "Market / product observations")}</b>
        <div className="subtle" style={{ fontSize: 12 }}>{T("منافسون مرصودون", "Competitors tracked")}: <b>{(d.marketObservations.competitors || []).length}</b> · {T("منتجات مربحة", "Top profitable")}: <b>{(d.productObservations.topProfitable || []).length}</b></div>
        {(d.founderObservations || []).length ? <div className="subtle" style={{ fontSize: 11.5 }}>{T("ملاحظات المؤسس", "Founder notes")}: {d.founderObservations.length}</div> : null}
      </div></Card>
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}

// ---- 10x / 100x Growth Engine (Phase 5) ----
function GrowthPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.growthEngine(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  return (
    <div className="col" style={{ gap: 10 }}>
      <div className="subtle" style={{ fontSize: 12 }}>{T("التوقّع الحالي", "Current forecast")}: <b>{supMoney(d.currentForecast, d.currency)}</b></div>
      {(d.milestones || []).map((m, i) => (
        <Card key={i}><div className="col" style={{ gap: 4, padding: 4 }}>
          <div className="between"><b style={{ fontSize: 13 }}>{supMoney(m.target, d.currency)}/mo</b>{m.reached ? <Badge tone="success">{T("تحقّق", "reached")}</Badge> : <Badge tone="neutral">{T("الفجوة", "gap")} {supMoney(m.gapFromForecast, d.currency)}</Badge>}</div>
          <div className="subtle" style={{ fontSize: 11.5 }}>{T("الأسرع", "Fastest")}: {m.paths.fastest.basis || supS(m.paths.fastest.note, lang) || "—"}</div>
          <div className="subtle" style={{ fontSize: 11.5 }}>{T("الأعلى هامشاً", "Highest margin")}: {m.paths.highestMargin.basis || supS(m.paths.highestMargin.note, lang) || "—"}</div>
          {(m.aiTierCoverage || []).filter((t) => t.unitsToCover != null).slice(0, 2).map((t, j) => <div key={j} className="subtle" style={{ fontSize: 11 }}>{supS(t.name, lang)}: {t.unitsToCover} {T("وحدة لتغطية الفجوة", "units to cover gap")}</div>)}
        </div></Card>
      ))}
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}

// ---- Strategic Thinking Mode (Phase 6) ----
function StrategicPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const [q, setQ] = useSupState("");
  const [res, setRes] = useSupState(null);
  const [busy, setBusy] = useSupState(false);
  const ask = (text) => { const question = text || q; if (!question.trim()) return; setBusy(true); setRes(null); API.assem.strategicThinking(question, lang).then(setRes).catch((e) => setRes({ ok: false, error: e.message })).finally(() => setBusy(false)); };
  const EX = [T("هل نركّز على شوبيفاي؟", "Should we focus on Shopify?"), T("هل نركّز على المؤسسات؟", "Should we focus on enterprise?"), T("هل نبني SaaS جديداً؟", "Should we build a new SaaS?")];
  return (
    <div className="col" style={{ gap: 10 }}>
      <Card><div className="col" style={{ gap: 8, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("وضع التفكير الاستراتيجي", "Executive thinking mode")}</b>
        <div className="row" style={{ gap: 6 }}>
          <input className="input" style={{ flex: 1, fontSize: 12.5 }} placeholder={T("اطرح سؤالاً استراتيجياً…", "Ask a strategic question…")} value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && ask()} />
          <Button size="sm" disabled={busy} onClick={() => ask()}>{T("حلّل", "Analyze")}</Button>
        </div>
        <div className="row wrap" style={{ gap: 6 }}>{EX.map((e, i) => <button key={i} onClick={() => { setQ(e); ask(e); }} style={{ fontSize: 11, padding: "3px 8px", borderRadius: 6, border: "1px solid var(--border-1)", background: "var(--bg-2)", cursor: "pointer" }}>{e}</button>)}</div>
      </div></Card>
      {res && res.ok ? (
        <Card><div className="col" style={{ gap: 6, padding: 4 }}>
          <div className="between"><b style={{ fontSize: 13 }}>{String(res.topic).replace(/_/g, " ")}</b><Badge tone={res.confidence === "measured" ? "success" : "neutral"}>{res.confidence}</Badge></div>
          {[["strategic", T("استراتيجي", "Strategic")], ["risk", T("المخاطر", "Risk")], ["competitive", T("تنافسي", "Competitive")]].map(([k, lbl]) => (
            <div key={k} className="subtle" style={{ fontSize: 12 }}><b>{lbl}:</b> {(res.analysis[k] || []).map((x) => supS(x, lang)).join(" ")}</div>
          ))}
          <div style={{ fontSize: 12.5, padding: "6px 8px", borderRadius: 8, background: "var(--color-primary-tint-soft)", marginTop: 4 }}><b>{T("التوصية", "Recommendation")}:</b> {supS(res.recommendation, lang)}</div>
        </div></Card>
      ) : res && !res.ok ? <div className="subtle" style={{ fontSize: 12 }}>{supS(res.message, lang) || T("اطرح سؤالاً استراتيجياً.", "Ask a strategic question.")}</div> : null}
    </div>
  );
}

// ---- Executive Alerts V2 (Phase 12) ----
function AlertsV2Panel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.executiveAlertsV2(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const tone = (p) => (p === "P1" ? "danger" : p === "P2" ? "warning" : "neutral");
  if (!(d.alerts || []).length) return <Card><EmptyState icon="checkcircle" title={T("لا تنبيهات نشطة", "No active alerts")} /></Card>;
  return (
    <div className="col" style={{ gap: 8 }}>
      {d.alerts.map((a, i) => (
        <Card key={i}><div className="col" style={{ gap: 3, padding: 4 }}>
          <div className="between"><b style={{ fontSize: 12.5 }}>{String(a.type).replace(/_/g, " ")}</b><Badge tone={tone(a.priority)}>{a.priority} · {a.owner}</Badge></div>
          <div style={{ fontSize: 12 }}>{supS(a.reason, lang)}</div>
          <div className="subtle" style={{ fontSize: 11.5 }}><b>{T("الإجراء", "Action")}:</b> {supS(a.recommendedAction, lang)}</div>
        </div></Card>
      ))}
    </div>
  );
}

// ---- Director Training (Phase 2) ----
function DirectorTrainingPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.directorTraining(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const tone = (lvl) => (lvl === "strong" || lvl === "high" ? "success" : lvl === "developing" || lvl === "medium" ? "warning" : lvl === "not_enough_data" ? "neutral" : "danger");
  return (
    <div className="col" style={{ gap: 8 }}>
      {(d.reports || []).map((r, i) => (
        <Card key={i}><div className="col" style={{ gap: 4, padding: 4 }}>
          <div className="between"><b style={{ fontSize: 12.5 }}>{supS(r.label, lang)}</b><Badge tone={tone(r.knowledgeLevel)}>{String(r.knowledgeLevel).replace(/_/g, " ")}</Badge></div>
          <div className="subtle" style={{ fontSize: 11.5 }}>{T("جودة القرار", "Decision quality")}: {String(r.decisionQuality).replace(/_/g, " ")} · {r.executionImpact.decisionsRecorded} {T("قرار", "decisions")}</div>
          {(r.trainingNeeds || []).length ? <div className="subtle" style={{ fontSize: 11.5 }}>{T("يحتاج", "Needs")}: {r.trainingNeeds[0]}</div> : null}
        </div></Card>
      ))}
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}

// ---- Deployment Advisor (Phase 9) ----
function DeployAdvisorPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.deploymentAdvisor(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const v = d.goNoGo.verdict;
  return (
    <div className="col" style={{ gap: 10 }}>
      <Card><div className="between" style={{ padding: 4 }}><b style={{ fontSize: 13 }}>{T("جاهزية النشر", "Deployment readiness")}</b><Badge tone={v === "GO" ? "success" : /GO_ON/.test(v) ? "warning" : "danger"}>{String(v).replace(/_/g, " ")}</Badge></div>
        <div className="subtle" style={{ fontSize: 12, padding: "0 4px 4px" }}>{supS(d.goNoGo.reasoning, lang)}</div></Card>
      <Card><div className="col" style={{ gap: 3, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("قائمة فحص النشر", "Deployment checklist")}</b>
        {(d.deploymentChecklist || []).slice(0, 10).map((c, i) => (
          <div key={i} className="row" style={{ gap: 6, fontSize: 11.5 }}>
            <span>{c.status === "pass" ? "🟢" : c.status === "fail" ? "🔴" : c.status === "warn" ? "🟡" : "⚪"}</span>
            <span style={{ flex: 1 }}>{c.item}</span><span className="subtle">{c.status}</span>
          </div>
        ))}
      </div></Card>
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.authority, lang)}</div>
    </div>
  );
}

// ---- Executive Command Center (Phase 5) — ASSEM monitors + coordinates the directors. ----
function CommandCenterPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.commandCenter(lang), [lang]);
  const sr = useSupData(() => API.assem.strategicRole(lang), [lang]);
  const { go } = useApp();
  if (!d) return <SupLoading />;
  if (d.error || !d.coordination) return <SupError lang={lang} />;
  const coord = d.coordination || {};
  const tone = (s) => (/on_track|healthy|operating|active|GO$/.test(s) ? "success" : /behind|watch|GO_ON/.test(s) ? "warning" : /degraded|NO_GO|critical/.test(s) ? "danger" : "neutral");
  return (
    <div className="col" style={{ gap: 12 }}>
      {sr && !sr.error ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("الدور الاستراتيجي لعاصم", "Assem strategic role")}</b>
          <div className="row wrap" style={{ gap: 4 }}>{(sr.roles || []).map((r, i) => <span key={i} style={{ fontSize: 10.5, padding: "2px 7px", borderRadius: 6, background: "var(--bg-2)", border: "1px solid var(--border-1)" }}>{r}</span>)}</div>
          <div className="subtle" style={{ fontSize: 11.5 }}>{T("يكتشف", "Detects")}: {(sr.detect.opportunities || []).length} {T("فرص", "opps")} · {(sr.detect.risks || []).length} {T("مخاطر", "risks")} · {(sr.detect.bottlenecks || []).length} {T("اختناقات", "bottlenecks")} · {(sr.detect.missedTargets || []).length} {T("أهداف مفقودة", "missed targets")}</div>
          <div className="subtle" style={{ fontSize: 10.5, color: "var(--color-orange)" }}>{T("لا ينفق · لا ينشر · لا يوافق على نفسه · لا يتجاوز المؤسس", "Never spends · never deploys · never approves itself · never bypasses the founder")} ({(sr.never || []).length})</div>
        </div></Card>
      ) : null}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("حالة المديرين", "Directors status")}</b>
        {(d.directors || []).map((s, i) => (
          <div key={i} className="row between" style={{ fontSize: 12.5 }}>
            <span>{supS(s.label, lang)}</span>
            <span className="row" style={{ gap: 6 }}>{s.blockers ? <span className="subtle" style={{ fontSize: 11 }}>{s.blockers} {T("عائق", "blockers")}</span> : null}<Badge tone={tone(String(s.status))}>{String(s.status).replace(/_/g, " ")}</Badge></span>
          </div>
        ))}
      </div></Card>
      {(coord.bottlenecks || []).length ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("الاختناقات والتعارضات", "Bottlenecks & conflicts")}</b>
          {coord.bottlenecks.slice(0, 5).map((b, i) => <div key={i} className="row" style={{ gap: 6, fontSize: 12 }}><Icon name="alert" size={12} style={{ color: "var(--color-warning, #B45309)", flexShrink: 0 }} />{supS(b.label, lang)}: {supS(b.reason, lang)}</div>)}
        </div></Card>
      ) : null}
      {(coord.missedTargets || []).length ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("أهداف مفقودة", "Missed targets")}</b>
          {coord.missedTargets.map((m, i) => <div key={i} className="between" style={{ fontSize: 12.5 }}><span>{T("الفجوة", "Gap")}: {supMoney(m.gap, d.currency)}</span><Button size="sm" variant="ghost" icon="arrowRight" onClick={() => go("validation")}>{T("افتح الإيراد", "Open Revenue")}</Button></div>)}
        </div></Card>
      ) : null}
      {(d.alerts || []).length ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("تنبيهات تنفيذية", "Executive alerts")}</b>
          {d.alerts.map((a, i) => <div key={i} className="col" style={{ gap: 1, fontSize: 11.5 }}><span className="between"><b>{String(a.type).replace(/_/g, " ")}</b><Badge tone={a.priority === "P1" ? "danger" : a.priority === "P2" ? "warning" : "neutral"}>{a.priority} · {a.owner}</Badge></span><span className="subtle">{supS(a.recommendedAction, lang)}</span></div>)}
        </div></Card>
      ) : null}
      <Card><div className="row between" style={{ padding: 4, fontSize: 12 }}>
        <span className="subtle">{T("وعي عاصم", "Assem awareness")}: {d.awareness.counts.commands} {T("أمر", "commands")} · {d.awareness.counts.pendingApprovals} {T("معلّق", "pending")}</span>
        <Button size="sm" variant="ghost" icon="arrowRight" onClick={() => go("data")}>{T("افتح البيانات", "Open DATA")}</Button>
      </div></Card>
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}
// ---- Capability + Responsibility matrix (Phase 13 + Part 2/3) — real, non-overlapping; honest EXECUTE. ----
function CapabilityPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.capabilities(lang), [lang]);
  const resp = useSupData(() => API.assem.responsibilities(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const byId = {}; ((resp && resp.directors) || []).forEach((r) => { byId[r.director] = r; });
  return (
    <div className="col" style={{ gap: 8 }}>
      <div className="subtle" style={{ fontSize: 11.5, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
      {resp && resp.noOverlap ? <div className="row" style={{ gap: 6, fontSize: 11.5 }}><Icon name="checkcircle" size={13} style={{ color: "var(--color-success)" }} />{T("لا تداخل — كل مدير يملك مجالاً حصرياً.", "No overlap — each director owns one exclusive domain.")}</div> : null}
      {(d.directors || []).map((r, i) => {
        const rp = byId[r.director] || {};
        return (
          <Card key={i}><div className="col" style={{ gap: 2, padding: 4, fontSize: 11.5 }}>
            <div className="between"><b style={{ fontSize: 12.5 }}>{supS(r.label, lang)}</b>{rp.domain ? <Badge tone="neutral">{rp.domain}</Badge> : null}</div>
            {rp.mission ? <div className="subtle">{rp.mission}</div> : null}
            <div><b>{T("يقرأ", "Read")}:</b> {r.read}</div>
            <div><b>{T("يكتب", "Write")}:</b> {r.write}</div>
            <div style={{ color: "var(--color-orange)" }}><b>{T("ينفّذ", "Execute")}:</b> {r.execute}</div>
            <div><b>{T("يوصي", "Recommend")}:</b> {r.recommend}</div>
            <div><b>{T("يصعّد", "Escalate")}:</b> {r.escalate}</div>
            <div><b>{T("يبلّغ", "Report")}:</b> {r.report}</div>
            <div><b>{T("ينسّق", "Coordinate")}:</b> {r.coordinate}</div>
          </div></Card>
        );
      })}
    </div>
  );
}

// ---- ExecutivePanel — the EXECUTIVE OPERATING LOOP hub: Daily Brief · Vision · Loop · Reports · Memory.
// Pure read over the assem-exec composition endpoints (reuses supS/SupLoading/useSupData). ASSEM never executes. ----
function ExecBriefView({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.dailyBrief(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const y = d.yesterday || {};
  const today = d.today || {};
  const money = (n) => (n == null ? "—" : `${d.currency || ""} ${typeof n === "number" ? n.toLocaleString() : n}`.trim());
  const cells = [[tr("إيراد", "Revenue"), money(y.revenue)], [tr("اجتماعات", "Meetings"), y.meetings], [tr("عروض", "Proposals"), y.proposals], [tr("فوز", "Wins"), y.wins], [tr("خسارة", "Losses"), y.losses], [tr("تجديدات", "Renewals"), y.renewals]];
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 8, padding: 4 }}>
        <b style={{ fontSize: 13.5 }}>{supS(d.greeting, lang)} — {tr("أمس", "Yesterday")}</b>
        <div className="row wrap" style={{ gap: 8 }}>
          {cells.map((c, i) => <div key={i} className="card" style={{ padding: 10, flex: "1 1 84px" }}><div className="subtle" style={{ fontSize: 11 }}>{c[0]}</div><div style={{ fontSize: 16, fontWeight: 800 }}>{c[1] == null ? "—" : c[1]}</div></div>)}
        </div>
      </div></Card>
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13.5 }}>{tr("اليوم", "Today")}</b>
        {today.topPriority ? <div className="row" style={{ gap: 6, fontSize: 12.5 }}><Icon name="arrowRight" size={13} style={{ color: "var(--color-secondary)" }} /><b>{tr("الأولوية", "Priority")}:</b> {supS(today.topPriority.action, lang)}</div> : <div className="subtle" style={{ fontSize: 12 }}>{tr("لا أولوية محدّدة", "No priority set")}</div>}
        <div className="subtle" style={{ fontSize: 12 }}>{tr("قرارات تنتظرك", "Approvals needed")}: <b>{today.approvalsNeeded || 0}</b> · {tr("اجتماعات اليوم", "Meetings today")}: <b>{today.meetingsToday || 0}</b></div>
      </div></Card>
      {(d.risks || []).length ? <Card><div className="col" style={{ gap: 4, padding: 4 }}><b style={{ fontSize: 13 }}>{tr("المخاطر", "Risks")}</b>{d.risks.map((r, i) => <div key={i} className="row" style={{ gap: 6, fontSize: 12 }}><Icon name="alert" size={12} style={{ color: "var(--color-warning, #B45309)", flexShrink: 0 }} />{supS(r.reason, lang)} <span className="subtle">· {r.owner}</span></div>)}</div></Card> : null}
      {(d.recommendedActions || []).length ? <Card><div className="col" style={{ gap: 5, padding: 4 }}><b style={{ fontSize: 13 }}>{tr("إجراءات موصى بها", "Recommended actions")}</b>{d.recommendedActions.map((a, i) => <div key={i} className="row" style={{ gap: 6, fontSize: 12.5 }}><Icon name="checkcircle" size={12} style={{ color: "var(--color-secondary)", flexShrink: 0 }} />{supS(a.title, lang)}{a.responsible ? <span className="subtle"> · {a.responsible}</span> : null}</div>)}</div></Card> : null}
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}
function ExecVisionView({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.vision(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const q = d.questions || {};
  const QA = ([key, label]) => { const a = q[key]; if (!a) return null; return (
    <Card key={key}><div className="col" style={{ gap: 3, padding: 4 }}>
      <div className="between"><b style={{ fontSize: 12.5 }}>{label}</b><Badge tone={a.confidence === "measured" ? "success" : a.confidence === "not_enough_data" ? "neutral" : "warning"}>{a.confidence}</Badge></div>
      <div style={{ fontSize: 12.5 }}>{supS(a.answer, lang)}</div>
      {a.action ? <div className="subtle" style={{ fontSize: 11.5 }}>{tr("الإجراء", "Action")}: {supS(a.action, lang)}</div> : null}
    </div></Card>
  ); };
  return (
    <div className="col" style={{ gap: 10 }}>
      {[["biggestOpportunity", tr("أكبر فرصة", "Biggest opportunity")], ["biggestRisk", tr("أكبر خطر", "Biggest risk")], ["slowestDepartment", tr("القسم الأبطأ", "Slowest department")], ["founderFocus", tr("تركيز المؤسس", "Founder focus")]].map(QA)}
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{tr("الطريق إلى ١٠أضعاف الإيراد", "Path to 10x revenue")}</b>
        {(d.tenXRevenue || []).map((m, i) => <div key={i} className="between" style={{ fontSize: 12 }}><span>{supMoney(m.target, d.currency)}/mo</span>{m.reached ? <Badge tone="success">{tr("تحقّق", "reached")}</Badge> : <span className="subtle">{tr("الفجوة", "gap")} {supMoney(m.gap, d.currency)}</span>}</div>)}
        <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{d.tenXProfit ? supS(d.tenXProfit.note, lang) : ""}</div>
      </div></Card>
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}
function ExecLoopView({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.executiveLoop(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const s = d.signals || {};
  const CATS = [["bottlenecks", tr("اختناقات", "Bottlenecks")], ["risks", tr("مخاطر", "Risks")], ["targetDeviation", tr("أهداف مفقودة", "Missed targets")], ["missedOpportunities", tr("فرص مفتوحة", "Open opportunities")], ["conflicts", tr("تعارضات", "Conflicts")], ["duplicatedWork", tr("عمل مكرّر", "Duplicated work")], ["resourceShortages", tr("نقص موارد", "Resource shortages")]];
  return (
    <div className="col" style={{ gap: 10 }}>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{tr("الملخّص التنفيذي", "Executive summary")}</b>
        <div style={{ fontSize: 12.5 }}>{supS(d.summary, lang)}</div>
        <div className="subtle" style={{ fontSize: 11.5 }}>{tr("مديرون يرفعون تقارير", "Directors reporting")}: <b>{d.directorsReporting}</b></div>
      </div></Card>
      <div className="row wrap" style={{ gap: 8 }}>{CATS.map(([k, lab]) => <div key={k} className="card" style={{ padding: 10, flex: "1 1 110px" }}><div className="subtle" style={{ fontSize: 11 }}>{lab}</div><div style={{ fontSize: 18, fontWeight: 800 }}>{(s[k] || []).length}</div></div>)}</div>
      <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div>
    </div>
  );
}
function ExecReportsView({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const [period, setPeriod] = useSupState("weekly");
  const d = useSupData(() => API.assem.report(period, lang), [period, lang]);
  const PERIODS = [["daily", tr("يومي", "Daily")], ["weekly", tr("أسبوعي", "Weekly")], ["monthly", tr("شهري", "Monthly")], ["quarterly", tr("ربعي", "Quarterly")], ["annual", tr("سنوي", "Annual")]];
  return (
    <div className="col" style={{ gap: 10 }}>
      <div className="row wrap" style={{ gap: 6 }}>{PERIODS.map(([k, lab]) => <button key={k} className={"btn btn--sm " + (period === k ? "btn--dark" : "btn--subtle")} onClick={() => setPeriod(k)}>{lab}</button>)}</div>
      {!d ? <SupLoading /> : d.error ? <SupError lang={lang} /> : (
        <div className="col" style={{ gap: 10 }}>
          <Card><div className="row wrap" style={{ gap: 8, padding: 4 }}>
            <div className="card" style={{ padding: 10, flex: "1 1 120px" }}><div className="subtle" style={{ fontSize: 11 }}>{tr("إيراد الفترة", "Period revenue")}</div><div style={{ fontSize: 16, fontWeight: 800 }}>{d.thisPeriod ? supMoney(d.thisPeriod.verifiedRevenue, d.currency) : "—"}</div></div>
            <div className="card" style={{ padding: 10, flex: "1 1 120px" }}><div className="subtle" style={{ fontSize: 11 }}>{tr("صفقات", "Deals won")}</div><div style={{ fontSize: 16, fontWeight: 800 }}>{d.thisPeriod ? d.thisPeriod.dealsWon : "—"}</div></div>
            <div className="card" style={{ padding: 10, flex: "1 1 120px" }}><div className="subtle" style={{ fontSize: 11 }}>{tr("تغيّر الإيراد", "Revenue Δ")}</div><div style={{ fontSize: 16, fontWeight: 800 }}>{d.periodChange && d.periodChange.verifiedRevenuePct != null ? d.periodChange.verifiedRevenuePct + "%" : "—"}</div></div>
          </div></Card>
          {d.predictions ? <Card><div className="col" style={{ gap: 3, padding: 4 }}>
            <b style={{ fontSize: 13 }}>{tr("التوقّع", "Prediction")}</b>
            {d.predictions.status === "not_enough_data" ? <div className="subtle" style={{ fontSize: 12 }}>{supS(d.predictions.note, lang)}</div> : (
              <div className="subtle" style={{ fontSize: 12 }}>{tr("تحقيق الهدف", "Attainment")}: <b>{d.predictions.attainmentPct}%</b> · <Badge tone={d.predictions.likelihood === "on_track" ? "success" : d.predictions.likelihood === "at_risk" ? "warning" : "danger"}>{String(d.predictions.likelihood).replace(/_/g, " ")}</Badge></div>
            )}
          </div></Card> : null}
          {supS(d.note, lang) ? <div className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{supS(d.note, lang)}</div> : null}
        </div>
      )}
    </div>
  );
}
function ExecMemoryView({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.companyMemory(null, 40), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const TYPE_LABEL = { won_deal: tr("فوز", "Won"), lost_deal: tr("خسارة", "Lost"), churn: tr("تسرّب", "Churn"), renewal: tr("تجديد", "Renewal"), campaign_result: tr("حملة", "Campaign"), product_launch: tr("إطلاق", "Launch"), director_decision: tr("قرار مدير", "Director"), founder_decision: tr("قرار مؤسس", "Founder"), market_insight: tr("رؤية سوق", "Market") };
  const tone = (t) => (t === "won_deal" || t === "renewal" ? "success" : t === "lost_deal" || t === "churn" ? "danger" : "neutral");
  if (!(d.memories || []).length) return <Card><EmptyState icon="sparkles" title={tr("لا ذاكرة بعد", "No memories yet")} body={supS(d.note, lang)} /></Card>;
  return (
    <div className="col" style={{ gap: 8 }}>
      <div className="subtle" style={{ fontSize: 11.5 }}>{tr("الشركة تتذكّر كل حدث مهم — وكل المديرين يتعلّمون منها.", "The company remembers every important event — and every director learns from it.")}</div>
      {d.memories.slice(0, 25).map((m, i) => (
        <Card key={i}><div className="col" style={{ gap: 2, padding: 4 }}>
          <div className="between"><b style={{ fontSize: 12.5 }}>{m.title}</b><Badge tone={tone(m.type)}>{TYPE_LABEL[m.type] || m.type}</Badge></div>
          {m.description ? <div className="subtle" style={{ fontSize: 11.5 }}>{m.description}</div> : null}
          <div className="subtle" style={{ fontSize: 11 }}>{m.impact ? `${tr("الأثر", "Impact")}: ${m.impact} · ` : ""}{m.department || ""}{m.lessons && m.lessons.length ? ` · ${tr("درس", "Lesson")}: ${m.lessons[0]}` : ""}</div>
        </div></Card>
      ))}
    </div>
  );
}
function AssemExecutivePanel({ lang }) {
  const tr = (ar, en) => (lang === "ar" ? ar : en);
  const [view, setView] = useSupState("brief");
  const VIEWS = [["brief", tr("الموجز اليومي", "Daily Brief")], ["vision", tr("الرؤية", "Vision")], ["loop", tr("الحلقة التنفيذية", "Executive Loop")], ["reports", tr("التقارير", "Reports")], ["memory", tr("ذاكرة الشركة", "Company Memory")]];
  return (
    <div className="col" style={{ gap: 12 }}>
      <div className="chipscroll" style={{ gap: 6, paddingBottom: 2 }}>
        {VIEWS.map(([k, lab]) => <button key={k} className={"btn btn--sm " + (view === k ? "btn--dark" : "btn--subtle")} style={{ flexShrink: 0 }} onClick={() => setView(k)}>{lab}</button>)}
      </div>
      {view === "brief" ? <ExecBriefView lang={lang} /> : null}
      {view === "vision" ? <ExecVisionView lang={lang} /> : null}
      {view === "loop" ? <ExecLoopView lang={lang} /> : null}
      {view === "reports" ? <ExecReportsView lang={lang} /> : null}
      {view === "memory" ? <ExecMemoryView lang={lang} /> : null}
    </div>
  );
}

// ---- Sales Science Dashboard (Chief Sales Scientist) — every sales-quality score in one view ----
function SalesSciencePanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.salesScience(), []);
  const hs = useSupData(() => API.assem.humanitySegments(), []);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const s = d.scores || {}, dm = d.decisionMakers || {}, r = d.rates || {};
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const pill = (label, v) => (
    <div className="card" style={{ padding: 9, flex: "1 1 84px", minWidth: 78, textAlign: "center" }}>
      <div className="subtle" style={{ fontSize: 10 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 800, color: v == null ? "var(--fg-4)" : v >= 70 ? "var(--color-green)" : v >= 45 ? "var(--color-orange)" : "var(--color-danger)" }}>{v == null ? "—" : v}</div>
    </div>
  );
  // Score-improvement chip: signed delta with colour (green up / red down / grey unmeasured).
  const DIM_LABELS = { trust: T("الثقة", "Trust"), human: T("إنساني", "Human"), politeness: T("اللباقة", "Politeness"), purchaseIntent: T("نية", "Intent"), relationship: T("علاقة", "Rel.") };
  const deltaChip = (k, v) => {
    const up = v != null && v > 0, down = v != null && v < 0;
    return <span key={k} style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "var(--bg-2)", border: "1px solid var(--border-1)", color: up ? "var(--color-green)" : down ? "var(--color-danger)" : "var(--fg-4)" }}>{DIM_LABELS[k] || k} {v == null ? "—" : (v > 0 ? "+" + v : v)}</span>;
  };
  const st = d.scoreTrend && d.scoreTrend.weekly ? d.scoreTrend : null;       // measured improvement?
  const rg = d.revenueGrowth || null;
  const fmtMoney = (n) => (typeof window.fmtCurrency === "function" ? window.fmtCurrency(n) : String(n));
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 8, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("جودة البيع (متوسط الفريق)", "Sales quality (team average)")}{s.sample ? <span className="subtle"> · {s.sample} {T("محادثة", "convs")}</span> : null}</b>
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          {pill(T("الثقة", "Trust"), s.trust)}{pill(T("إنساني", "Human"), s.human)}{pill(T("اللباقة", "Politeness"), s.politeness)}{pill(T("نية الشراء", "Purchase intent"), s.purchaseIntent)}{pill(T("العلاقة", "Relationship"), s.relationship)}
        </div>
        {/* SCORE IMPROVEMENT over time (P4) — weekly delta per axis, or honest building-history note */}
        <div className="col" style={{ gap: 4, marginTop: 2 }}>
          <span className="subtle" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em" }}>{T("التحسّن هذا الأسبوع", "Improvement this week")}</span>
          {st ? <div className="row" style={{ gap: 5, flexWrap: "wrap" }}>{["trust", "human", "politeness", "purchaseIntent", "relationship"].map((k) => deltaChip(k, st.weekly.dims[k]))}</div>
            : <span className="subtle" style={{ fontSize: 11 }}>{T("يبني السجل — يظهر التحسّن بعد يومين على الأقل من البيانات.", "Building history — improvement shows after at least 2 days of data.")}</span>}
        </div>
        {!s.sample ? <span className="subtle" style={{ fontSize: 11 }}>{L(d.note)}</span> : null}
      </div></Card>
      {/* REVENUE GROWTH (P11) — week-over-week verified revenue, the Revenue-First headline */}
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("نمو الإيراد (أسبوعي)", "Revenue growth (weekly)")}</b>
        {rg && rg.status === "measured" ? (
          <div className="row" style={{ gap: 8, alignItems: "baseline", flexWrap: "wrap" }}>
            <span style={{ fontSize: 19, fontWeight: 800 }}>{fmtMoney(rg.thisPeriod)}</span>
            <span style={{ fontSize: 13, fontWeight: 700, color: (rg.deltaPct || 0) > 0 ? "var(--color-green)" : (rg.deltaPct || 0) < 0 ? "var(--color-danger)" : "var(--fg-4)" }}>{rg.deltaPct == null ? "—" : (rg.deltaPct > 0 ? "▲ +" : rg.deltaPct < 0 ? "▼ " : "") + rg.deltaPct + "%"}</span>
            <span className="subtle" style={{ fontSize: 11 }}>{T("مقابل", "vs")} {fmtMoney(rg.priorPeriod)} {T("الأسبوع السابق", "prior week")}</span>
          </div>
        ) : <span className="subtle" style={{ fontSize: 11.5 }}>{T("يحتاج مدفوعات مُتحقّقة لقياس النمو.", "Needs verified payments to measure growth.")}</span>}
      </div></Card>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("صنّاع القرار", "Decision makers")}</b>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 12 }}>
          <Badge tone="green">{T("صاحب قرار", "Decision maker")} {dm.decision_maker || 0}</Badge>
          <Badge tone="lime">{T("مدير", "Manager")} {dm.manager || 0}</Badge>
          <Badge tone="neutral">{T("مؤثّر", "Influencer")} {dm.influencer || 0}</Badge>
          <Badge tone="orange">{T("حارس بوابة", "Gatekeeper")} {dm.gatekeeper || 0}</Badge>
          <Badge tone="neutral">{T("غير معروف", "Unknown")} {dm.unknown || 0}</Badge>
        </div>
      </div></Card>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("معدلات البيع", "Sales rates")}</b>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 12 }}>
          <Badge tone="neutral">{T("الرد", "Reply")} {r.replyRate == null ? "—" : r.replyRate + "%"}</Badge>
          <Badge tone="neutral">{T("التحويل", "Conversion")} {r.conversionRate == null ? "—" : r.conversionRate + "%"}</Badge>
          <Badge tone="neutral">{T("مغلقة", "Won")} {r.closedWon || 0}</Badge>
          <Badge tone="neutral">{T("اجتماعات", "Meetings")} {r.meetingsBooked || 0}</Badge>
          <Badge tone="neutral">{T("فرص", "Opps")} {r.opportunities || 0}</Badge>
        </div>
      </div></Card>
      {/* EMOTION BREAKDOWN (P6) — revenue + win + meetings + opportunities, all BY emotion */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("المشاعر: إيراد · فوز · اجتماعات · فرص", "Emotion: revenue · win · meetings · opps")}</b>
        {(d.revenueByEmotion || []).length ? (
          <React.Fragment>
            <div className="row between" style={{ fontSize: 10, color: "var(--fg-4)", fontWeight: 700, textTransform: "uppercase" }}>
              <span style={{ flex: "1 1 auto" }}>{T("المشاعر", "Emotion")}</span>
              <span style={{ width: 64, textAlign: "end" }}>{T("إيراد", "Rev")}</span>
              <span style={{ width: 44, textAlign: "end" }}>{T("فوز", "Win")}</span>
              <span style={{ width: 40, textAlign: "end" }}>{T("اجتم.", "Mtgs")}</span>
              <span style={{ width: 40, textAlign: "end" }}>{T("فرص", "Opps")}</span>
            </div>
            {d.revenueByEmotion.slice(0, 6).map((b, i) => (
              <div key={i} className="row between" style={{ fontSize: 12 }}>
                <span style={{ flex: "1 1 auto" }}>{b.label}</span>
                <b style={{ width: 64, textAlign: "end" }}>{b.revenue || 0}</b>
                <span style={{ width: 44, textAlign: "end" }}>{b.winRate == null ? "—" : b.winRate + "%"}</span>
                <span style={{ width: 40, textAlign: "end" }}>{b.meetings || 0}</span>
                <span style={{ width: 40, textAlign: "end" }}>{b.opportunities || 0}</span>
              </div>
            ))}
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 11.5 }}>{T("يحتاج صفقات مغلقة لقراءته.", "Needs closed deals to read.")}</span>}
      </div></Card>
      {/* HUMANITY BY COUNTRY (P7) — the Humanization-Lab drill-down */}
      {hs && !hs.error && (hs.byCountry || []).length ? (
        <Card><div className="col" style={{ gap: 5, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("الإنسانية حسب الدولة", "Humanity by country")}</b>
          {hs.byCountry.slice(0, 5).map((seg, i) => (
            <div key={i} className="row between" style={{ fontSize: 12 }}>
              <span>{seg.key} <span className="subtle">· {seg.samples} {T("محادثة", "convs")}</span></span>
              <b style={{ color: seg.humanity == null ? "var(--fg-4)" : seg.humanity >= 70 ? "var(--color-green)" : "var(--color-orange)" }}>{seg.humanity == null ? "—" : seg.humanity}</b>
            </div>
          ))}
          {hs.byVertical && hs.byVertical.length ? <div className="subtle" style={{ fontSize: 10.5, marginTop: 2 }}>{T("أيضاً متاح حسب القطاع والحملة", "Also available by vertical & campaign")} · /assem/humanity-segments</div> : null}
        </div></Card>
      ) : null}
      {d.bottleneck ? <Card><div className="col" style={{ gap: 4, padding: 4 }}><b style={{ fontSize: 13 }}>{T("عنق الزجاجة في القمع", "Funnel bottleneck")}</b><span style={{ fontSize: 12 }}>{d.bottleneck.stage || d.bottleneck.label || ""}</span></div></Card> : null}
    </div>
  );
}
window.SalesSciencePanel = SalesSciencePanel;

// ---- Skill Marketplace (Phase X): discover skills + the founder-driven lifecycle. NEVER auto-installs;
// "Install" is a status (+ optional founder-gated draft), never code execution. ----
function SkillMarketplacePanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const [d, setD] = React.useState(null);
  const [busy, setBusy] = React.useState(null);
  const [discover, setDiscover] = React.useState({ url: "", category: "objection", open: false, msg: null });
  const load = () => API.assem.skillMarketplace().then(setD).catch(() => setD({ error: true }));
  React.useEffect(() => { load(); }, []);
  const act = async (skillId, status, saveDraft) => { setBusy(skillId + status); try { await API.assem.skillStatus(skillId, status, !!saveDraft); await load(); } finally { setBusy(null); } };
  const runDiscover = async () => {
    if (!discover.url.trim()) return;
    setBusy("discover"); setDiscover((s) => ({ ...s, msg: null }));
    try { const r = await API.assem.discoverSkill(discover.url.trim(), "repo", "github", discover.category);
      if (r && r.ok) { setDiscover({ url: "", category: "objection", open: false, msg: null }); await load(); }
      else setDiscover((s) => ({ ...s, msg: (r && r.message && (lang === "ar" ? r.message.ar : r.message.en)) || T("تعذّر التحليل.", "Couldn't analyze.") })); }
    finally { setBusy(null); }
  };
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const CATS = [["objection", T("اعتراضات", "Objection")], ["decision_maker", T("صاحب القرار", "Decision-maker")], ["emotion", T("المشاعر", "Emotion")], ["playbook", T("دليل بيع", "Playbook")], ["conversation_framework", T("محادثة", "Conversation")], ["human_communication", T("تواصل", "Human comm.")]];
  const tone = (s) => s === "approved" ? "green" : s === "installed" ? "lime" : s === "training_complete" ? "green" : s === "rejected" ? "danger" : "neutral";
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 8, padding: 4 }}>
        <div className="between"><b style={{ fontSize: 13 }}>{T("سوق المهارات", "Skill marketplace")}</b><Button size="sm" variant="ghost" icon="plus" onClick={() => setDiscover((s) => ({ ...s, open: !s.open }))}>{T("اكتشف مهارة", "Discover")}</Button></div>
        {discover.open ? (
          <div className="col" style={{ gap: 6, padding: 8, background: "var(--bg-2)", borderRadius: 8 }}>
            <input value={discover.url} onChange={(e) => setDiscover((s) => ({ ...s, url: e.target.value }))} placeholder={T("رابط عام (GitHub / مقال / فيديو)", "Public URL (GitHub / article / video)")} style={{ fontSize: 12, padding: "7px 9px", borderRadius: 7, border: "1px solid var(--border-1)" }} />
            <div className="row" style={{ gap: 6, flexWrap: "wrap", alignItems: "center" }}>
              <select value={discover.category} onChange={(e) => setDiscover((s) => ({ ...s, category: e.target.value }))} style={{ fontSize: 12, padding: "6px 8px", borderRadius: 7, border: "1px solid var(--border-1)" }}>{CATS.map(([k, l]) => <option key={k} value={k}>{l}</option>)}</select>
              <Button size="sm" variant="dark" onClick={runDiscover} disabled={busy === "discover"}>{busy === "discover" ? T("يحلّل…", "Analyzing…") : T("حلّل", "Analyze")}</Button>
            </div>
            {discover.msg ? <span className="subtle" style={{ fontSize: 11, color: "var(--color-orange)" }}>{discover.msg}</span> : null}
            <span className="subtle" style={{ fontSize: 10 }}>{T("توصية فقط — لا يُستورد ولا يُنفَّذ كود أبداً.", "Recommendation only — no code is ever imported or run.")}</span>
          </div>
        ) : null}
        {d.status === "not_enough_data" ? <span className="subtle" style={{ fontSize: 11.5 }}>{T("لا مهارات مكتشفة بعد — حلّل مصدراً عاماً لتبدأ.", "No discovered skills yet — analyze a public source to start.")}</span> : null}
      </div></Card>
      {(d.skills || []).map((sk) => (
        <Card key={sk.id}><div className="col" style={{ gap: 6, padding: 8 }}>
          <div className="between" style={{ flexWrap: "wrap", gap: 6 }}>
            <b style={{ fontSize: 13 }}>{sk.name} <span className="subtle" style={{ fontSize: 11 }}>· {sk.source} · {lang === "ar" ? sk.categoryLabel.ar : sk.categoryLabel.en}</span></b>
            <Badge tone={tone(sk.status)}>{sk.status}</Badge>
          </div>
          {sk.description ? <span className="subtle" style={{ fontSize: 11.5 }}>{sk.description}</span> : null}
          <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11 }}>
            <Badge tone="neutral">{T("مخاطر", "Risk")}: {sk.risk}</Badge>
            <Badge tone="neutral">{T("ثقة", "Conf")}: {sk.confidence}</Badge>
            {(sk.compatibleDirectors || []).length ? <Badge tone="neutral">{T("متوافق", "Fits")}: {sk.compatibleDirectors.join(", ")} · {(sk.compatibleAgents || []).length} {T("وكلاء", "agents")}</Badge> : null}
          </div>
          <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
            {sk.status === "discovered" ? <React.Fragment><Button size="sm" onClick={() => act(sk.id, "approved")} disabled={busy}>{T("اعتمد", "Approve")}</Button><Button size="sm" variant="ghost" onClick={() => act(sk.id, "rejected")} disabled={busy}>{T("ارفض", "Reject")}</Button></React.Fragment> : null}
            {sk.status === "approved" ? <React.Fragment><Button size="sm" onClick={() => act(sk.id, "installed", true)} disabled={busy}>{T("ثبّت (مسودة معرفة)", "Install (as draft)")}</Button><Button size="sm" variant="ghost" onClick={() => act(sk.id, "rejected")} disabled={busy}>{T("ارفض", "Reject")}</Button></React.Fragment> : null}
            {sk.status === "installed" ? <Button size="sm" onClick={() => act(sk.id, "training_complete")} disabled={busy}>{T("اكتمل التدريب", "Mark training complete")}</Button> : null}
          </div>
        </div></Card>
      ))}
    </div>
  );
}

// ---- CEO Education Roadmap (Phase X): the daily sources + everything learning generated for the ORG. ----
function EducationRoadmapPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const d = useSupData(() => API.assem.educationRoadmap(lang), [lang]);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const g = d.generated || {};
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("مصادر التعلّم اليومية", "Daily learning sources")} <span className="subtle" style={{ fontSize: 11 }}>· {d.sourcesAnalyzed}/{d.sourceTypes}</span></b>
        <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
          {(d.sources || []).map((s) => (
            <span key={s.type} style={{ fontSize: 11, padding: "3px 9px", borderRadius: 7, background: s.status === "analyzed" ? "var(--color-success-soft, #e7f7ec)" : "var(--bg-2)", color: s.status === "analyzed" ? "#15803D" : "var(--fg-3)", border: "1px solid var(--border-1)" }}>{s.status === "analyzed" ? "✓ " : "○ "}{lang === "ar" ? s.label.ar : s.label.en}{s.analyzed ? " · " + s.analyzed : ""}</span>
          ))}
        </div>
      </div></Card>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("ما ولّده التعلّم (للمؤسسة كاملة)", "What learning generated (whole org)")}</b>
        {[["lessons", T("دروس", "Lessons")], ["recommendations", T("توصيات", "Recommendations")], ["newSkills", T("مهارات جديدة", "New skills")], ["trainingPlans", T("خطط تدريب", "Training plans")], ["agentImprovements", T("تحسّن الوكلاء", "Agent improvements")], ["directorImprovements", T("تحسّن المديرين", "Director improvements")]].map(([k, label]) => (
          <div key={k} className="row between" style={{ fontSize: 12 }}><span>{label}</span><b>{(g[k] || []).length}</b></div>
        ))}
        <div className="subtle" style={{ fontSize: 11, marginTop: 4 }}>{T("المؤسسة", "Organization")}: {d.organization.directorsImproved} {T("مديرون تحسّنوا", "directors improved")}{d.organization.mostImprovedAgent ? " · ★ " + d.organization.mostImprovedAgent.name : ""}</div>
        <span className="subtle" style={{ fontSize: 10.5, color: "var(--color-orange)" }}>{T("كل شيء يدخل تعلّم عاصم — لا تطبيق تلقائي؛ موافقة المؤسس مطلوبة.", "Everything enters Assem's learning — nothing auto-applies; founder approval required.")}</span>
      </div></Card>
    </div>
  );
}

// ---- Revenue-First Learning Dashboard (Phase 10): Learning → Improvement → Revenue, WITH PROOF. The
// company learns to generate revenue, not to be smart. Priority is a FORWARD estimate; ROI is MEASURED. ----
const RF_TIER = { high: { bg: "#e7f7ec", fg: "#15803D", ar: "عالٍ", en: "High" }, medium: { bg: "#fff4e5", fg: "#b45309", ar: "متوسط", en: "Medium" }, low: { bg: "var(--bg-2)", fg: "var(--fg-3)", ar: "منخفض", en: "Low" }, ignore: { bg: "#fde8e8", fg: "#b91c1c", ar: "تجاهل", en: "Ignore" } };
function RfImpactChip({ k, level, lang }) {
  const c = level === "high" ? { b: "#e7f7ec", f: "#15803D" } : level === "medium" ? { b: "#fff4e5", f: "#b45309" } : level === "low" ? { b: "var(--bg-2)", f: "var(--fg-3)" } : { b: "var(--bg-1)", f: "var(--fg-4)" };
  return <span style={{ fontSize: 10.5, padding: "2px 7px", borderRadius: 999, background: c.b, color: c.f, border: "1px solid var(--border-1)" }}>{k} {level === "none" ? "—" : level}</span>;
}
function RfDelta({ v }) {
  if (v == null) return <span style={{ color: "var(--fg-4)" }}>—</span>;
  return <b style={{ color: v > 0 ? "var(--color-green)" : v < 0 ? "var(--color-danger)" : "var(--fg-3)" }}>{v > 0 ? "+" + v : v}</b>;
}
function RevenueFirstPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const d = useSupData(() => API.assem.revenueLearningDashboard(), []);
  const focus = useSupData(() => API.assem.ceoFocus(), []);
  const [showDetail, setShowDetail] = React.useState(false);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const learn = d.learning || {}, imp = d.improvement || {}, rev = d.revenue || {};
  const h = d.headline;
  const fmtMoney = (n) => (typeof window.fmtCurrency === "function" ? window.fmtCurrency(n) : String(n));
  const tierBadge = (tier, n) => { const c = RF_TIER[tier] || RF_TIER.low; return <span key={tier} style={{ fontSize: 11, padding: "3px 9px", borderRadius: 7, background: c.bg, color: c.fg, fontWeight: 700, border: "1px solid var(--border-1)" }}>{lang === "ar" ? c.ar : c.en} {n}</span>; };
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* HEADLINE — the 10-second answer: why are we learning this, how much money, how do we know */}
      {h ? (
        <Card><div className="col" style={{ gap: 6, padding: 4 }}>
          <span className="subtle" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em" }}>{T("لماذا نتعلّم هذا؟", "Why are we learning this?")}</span>
          <b style={{ fontSize: 14 }}>{h.whatAreWeLearning}</b>
          {h.whyThisOne ? <span className="subtle" style={{ fontSize: 11.5 }}>{h.whyThisOne}</span> : null}
          <div className="row" style={{ gap: 8, flexWrap: "wrap", marginTop: 2 }}>
            <span style={{ fontSize: 11 }}><span className="subtle">{T("كم المال؟", "How much money?")} </span><Badge tone={h.howMuchMoney.confidence === "estimate" ? "orange" : "neutral"}>{h.howMuchMoney.confidence === "estimate" ? T("تقدير", "estimate") : T("لا بيانات كافية", "not enough data")}</Badge></span>
          </div>
          <span className="subtle" style={{ fontSize: 11 }}><span style={{ fontWeight: 700 }}>{T("كيف نعرف؟ ", "How do we know? ")}</span>{L(h.howDoWeKnow)}</span>
        </div></Card>
      ) : null}
      {/* LEARNING → IMPROVEMENT → REVENUE flow, with proof */}
      <Card><div className="col" style={{ gap: 8, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("تعلّم ← تحسّن ← إيراد", "Learning → Improvement → Revenue")}</b>
        <div className="row" style={{ gap: 8, alignItems: "stretch", flexWrap: "wrap" }}>
          <div className="card" style={{ flex: "1 1 110px", minWidth: 100, padding: 9 }}>
            <div className="subtle" style={{ fontSize: 10 }}>{T("تعلّم", "Learning")}</div>
            <div style={{ fontSize: 18, fontWeight: 800 }}>{learn.queued || 0}</div>
            <div className="subtle" style={{ fontSize: 10 }}>{T("عناصر مُرتّبة", "ranked items")}</div>
          </div>
          <div style={{ alignSelf: "center", fontSize: 16, color: "var(--fg-4)" }}>→</div>
          <div className="card" style={{ flex: "1 1 110px", minWidth: 100, padding: 9 }}>
            <div className="subtle" style={{ fontSize: 10 }}>{T("تحسّن (مقاس)", "Improvement (measured)")}</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: imp.winningSkills ? "var(--color-green)" : "var(--fg-2)" }}>{imp.winningSkills || 0}</div>
            <div className="subtle" style={{ fontSize: 10 }}>{T("مهارات رابحة", "winning skills")}{imp.mostImprovedAgent ? " · ★ " + (imp.mostImprovedAgent.name || imp.mostImprovedAgent.agent || "") : ""}</div>
          </div>
          <div style={{ alignSelf: "center", fontSize: 16, color: "var(--fg-4)" }}>→</div>
          <div className="card" style={{ flex: "1 1 110px", minWidth: 100, padding: 9 }}>
            <div className="subtle" style={{ fontSize: 10 }}>{T("إيراد (مُتحقّق)", "Revenue (verified)")}</div>
            <div style={{ fontSize: 18, fontWeight: 800 }}>{rev.revenueGrowth && rev.revenueGrowth.status === "measured" ? fmtMoney(rev.revenueGrowth.thisPeriod) : "—"}</div>
            <div className="subtle" style={{ fontSize: 10 }}>{rev.revenueGrowth && rev.revenueGrowth.status === "measured" ? (rev.revenueGrowth.deltaPct == null ? "" : (rev.revenueGrowth.deltaPct > 0 ? "▲ +" : rev.revenueGrowth.deltaPct < 0 ? "▼ " : "") + rev.revenueGrowth.deltaPct + "%") : T("يحتاج مدفوعات", "needs payments")}</div>
          </div>
        </div>
        {/* PROOF chain — taught → who improved → Δquality → revenue window (context) */}
        {(d.proofChain || []).length ? (
          <div className="col" style={{ gap: 3, marginTop: 2 }}>
            <span className="subtle" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase" }}>{T("الدليل", "Proof")} · {d.provenItems} {T("مُثبت", "proven")}</span>
            {d.proofChain.slice(0, 4).map((c, i) => (
              <div key={i} className="row between" style={{ fontSize: 11.5 }}>
                <span style={{ flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</span>
                <span className="subtle" style={{ width: 70, textAlign: "end" }}>{c.adoptingAgents} {T("وكيل", "agents")}</span>
                <span style={{ width: 44, textAlign: "end" }}>Δ <RfDelta v={c.qualityDelta} /></span>
              </div>
            ))}
            <span className="subtle" style={{ fontSize: 10 }}>{T("نافذة الإيراد سياق فقط — لا تُنسب لعنصر تعلّم واحد.", "Revenue window is context only — never attributed to one learning item.")}</span>
          </div>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا دليل مقاس بعد — يتراكم مع تبنّي العناصر وتقييمها.", "No measured proof yet — accrues as items are adopted and scored.")}</span>}
      </div></Card>
      {/* PRIORITY tiers — High/Medium/Low/Ignore (forward estimate) */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("أولوية التعلّم (تقدير مستقبلي)", "Learning priority (forward estimate)")}</b>
        <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>{["high", "medium", "low", "ignore"].map((t) => tierBadge(t, (learn.tiers || {})[t] || 0))}</div>
        {learn.topPriority ? (
          <div className="col" style={{ gap: 4, marginTop: 4 }}>
            <span style={{ fontSize: 12, fontWeight: 700 }}>{learn.topPriority.title}</span>
            <div className="row" style={{ gap: 5, flexWrap: "wrap" }}>
              <RfImpactChip k={T("إيراد", "Rev")} level={learn.topPriority.impact.revenue} lang={lang} />
              <RfImpactChip k={T("تحويل", "Conv")} level={learn.topPriority.impact.conversion} lang={lang} />
              <RfImpactChip k={T("ثقة", "Trust")} level={learn.topPriority.impact.trust} lang={lang} />
              <RfImpactChip k={T("صانع قرار", "DM")} level={learn.topPriority.impact.decisionMaker} lang={lang} />
              <RfImpactChip k={T("مشاعر", "Emo")} level={learn.topPriority.impact.emotion} lang={lang} />
            </div>
            <span className="subtle" style={{ fontSize: 10.5 }}>{T("اختبار الإيراد", "Revenue test")}: <b style={{ color: learn.topPriority.willIncreaseRevenue === true ? "var(--color-green)" : learn.topPriority.willIncreaseRevenue === false ? "var(--color-danger)" : "var(--fg-3)" }}>{learn.topPriority.revenueTest}</b></span>
          </div>
        ) : null}
        <span className="subtle" style={{ fontSize: 10 }}>{T("الترتيب يُعيد ترتيب قائمة الموافقة فقط — لا اعتماد أو تدريب تلقائي.", "Ranking reorders the approval queue only — nothing auto-approved or trained.")}</span>
      </div></Card>
      {/* CEO FOCUS distribution across the 5 areas (attention proxy) */}
      {focus && !focus.error ? (
        <Card><div className="col" style={{ gap: 6, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("تركيز عاصم", "Assem's focus")} {focus.primaryFocus ? <span className="subtle" style={{ fontSize: 11 }}>· {L(focus.primaryFocus.label)} {focus.primaryFocus.attentionPct}%</span> : null}</b>
          {focus.status === "active" ? (focus.areas || []).map((a) => (
            <div key={a.area} className="row" style={{ gap: 8, alignItems: "center", fontSize: 11.5 }}>
              <span style={{ width: 78 }}>{L(a.label)}</span>
              <div style={{ flex: "1 1 auto", height: 8, background: "var(--bg-2)", borderRadius: 999, overflow: "hidden" }}><div style={{ width: (a.attentionPct || 0) + "%", height: "100%", background: "var(--color-secondary)" }} /></div>
              <b style={{ width: 36, textAlign: "end" }}>{a.attentionPct == null ? "—" : a.attentionPct + "%"}</b>
            </div>
          )) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا بيانات كافية لقياس التركيز بعد.", "Not enough data to measure focus yet.")}</span>}
          <span className="subtle" style={{ fontSize: 10 }}>{T("مؤشّر انتباه عددي (لا تتبّع وقت). ما عدا الخمسة ثانوي.", "Count-based attention proxy (no time-tracking). Everything outside the five is secondary.")}</span>
        </div></Card>
      ) : null}
      {/* expandable ROI detail (P4/P5/P6/P7/P9) — lazily mounted to keep the screen light */}
      <button onClick={() => setShowDetail((s) => !s)} style={{ alignSelf: "flex-start", fontSize: 12, padding: "5px 11px", borderRadius: 8, border: "1px solid var(--border-1)", background: "#fff", color: "var(--color-secondary)", fontWeight: 700, cursor: "pointer" }}>{showDetail ? T("إخفاء تفاصيل العائد", "Hide ROI detail") : T("عرض عائد المديرين/الوكلاء/المهارات + الفرص", "Show director / agent / skill ROI + opportunities")}</button>
      {showDetail ? <RfRoiDetail lang={lang} /> : null}
    </div>
  );
}
window.RevenueFirstPanel = RevenueFirstPanel;

// ---- Revenue-First ROI detail (lazily mounted): director ROI, agent ROI, skill ROI, opportunity engine,
// vanity audit. Each is reuse-only and labelled measured-vs-estimate. ----
function RfRoiDetail({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const dr = useSupData(() => API.assem.directorRoi(), []);
  const ar = useSupData(() => API.assem.agentRoi(), []);
  const sr = useSupData(() => API.assem.skillRoi(), []);
  const oe = useSupData(() => API.assem.revenueOpportunityEngine(), []);
  const va = useSupData(() => API.assem.noVanityAudit(), []);
  const bestWorst = (best, worst, nameOf, valOf) => (
    <div className="row between" style={{ fontSize: 12, flexWrap: "wrap", gap: 6 }}>
      <span><Badge tone="green">{T("الأفضل", "Best")}</Badge> {best ? nameOf(best) + " · " + valOf(best) : "—"}</span>
      <span><Badge tone="orange">{T("الأسوأ", "Worst")}</Badge> {worst ? nameOf(worst) + " · " + valOf(worst) : "—"}</span>
    </div>
  );
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* Director ROI */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("عائد تعلّم المديرين", "Director learning ROI")}</b>
        {dr && dr.status === "active" ? (
          <React.Fragment>
            {dr.highestReturn ? <div className="row between" style={{ fontSize: 12 }}><span>★ {L(dr.highestReturn.label)}</span><span className="subtle">{T("تحسّن", "Δ")} <RfDelta v={dr.highestReturn.qualityDeltaAvg} /> · {dr.highestReturn.agentImprovement || "—"} {T("وكلاء", "agents")}</span></div> : null}
            {dr.lowestReturn ? <div className="row between" style={{ fontSize: 12 }}><span>{L(dr.lowestReturn.label)}</span><span className="subtle"><RfDelta v={dr.lowestReturn.qualityDeltaAvg} /></span></div> : null}
            <span className="subtle" style={{ fontSize: 10 }}>{T("عائد مقاس = تحسّن الفريق ÷ نشاط التعلّم. الإيراد لا يُنسب لمدير واحد.", "Measured ROI = team improvement ÷ learning activity. Revenue not attributed to one director.")}</span>
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا بيانات كافية (يحتاج لقطتين على الأقل).", "Not enough data (needs ≥2 snapshots).")}</span>}
      </div></Card>
      {/* Agent ROI */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("أفضل/أسوأ استثمار تعلّم (وكلاء)", "Best / worst learning investment (agents)")}</b>
        {ar && ar.status === "active" ? bestWorst(ar.bestInvestment, ar.worstInvestment, (x) => x.name, (x) => `${T("أداء", "perf")} `) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا وكيل تدرّب وتغيّر بشكل مقاس بعد.", "No agent has trained + measurably changed yet.")}</span>}
        {ar && ar.bestInvestment ? <div className="row between" style={{ fontSize: 11.5 }}><span>★ {ar.bestInvestment.name}</span><span className="subtle">{ar.bestInvestment.trainingReceived} {T("تدريب", "training")} · Δ <RfDelta v={ar.bestInvestment.performanceChange} /></span></div> : null}
        {ar && ar.worstInvestment ? <div className="row between" style={{ fontSize: 11.5 }}><span>{ar.worstInvestment.name}</span><span className="subtle">{ar.worstInvestment.trainingReceived} {T("تدريب", "training")} · Δ <RfDelta v={ar.worstInvestment.performanceChange} /></span></div> : null}
      </div></Card>
      {/* Skill ROI */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("عائد المهارات", "Skill ROI")}</b>
        {sr && sr.status === "active" ? (
          <React.Fragment>
            <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11 }}>
              <Badge tone="green">{T("رابحة", "Winning")} {(sr.counts || {}).winning || 0}</Badge>
              <Badge tone="neutral">{T("محايدة", "Neutral")} {(sr.counts || {}).neutral || 0}</Badge>
              <Badge tone="orange">{T("فاشلة", "Failed")} {(sr.counts || {}).failed || 0}</Badge>
              <Badge tone="neutral">{T("تُقاس", "Measuring")} {(sr.measuringSoon || []).length}</Badge>
            </div>
            {sr.bestInvestment ? <div className="row between" style={{ fontSize: 11.5 }}><span>★ {sr.bestInvestment.name}</span><span className="subtle">Δ <RfDelta v={sr.bestInvestment.avgQualityDelta} /> · {sr.bestInvestment.roiPerDay != null ? sr.bestInvestment.roiPerDay + "/" + T("يوم", "day") : "—"}</span></div> : null}
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا مهارة مُثبّتة بأثر مقاس بعد.", "No installed skill with measured impact yet.")}</span>}
        <span className="subtle" style={{ fontSize: 10 }}>{T("الإيراد تقدير المصدر — لا إسناد مقاس.", "Revenue is the source's estimate — never a measured attribution.")}</span>
      </div></Card>
      {/* Revenue Opportunity Engine */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("محرّك فرص الإيراد", "Revenue opportunity engine")}</b>
        {oe && oe.status === "active" ? (
          <React.Fragment>
            <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11 }}>{Object.entries(oe.byType || {}).map(([t, n]) => <Badge key={t} tone={t === "new_market" || t === "new_service" ? "orange" : "neutral"}>{t} {n}</Badge>)}</div>
            {(oe.opportunities || []).filter((o) => o.type === "new_market" || o.type === "new_service").slice(0, 3).map((o, i) => (
              <div key={i} className="col" style={{ gap: 1, borderInlineStart: "2px solid var(--color-orange)", paddingInlineStart: 7 }}>
                <span style={{ fontSize: 11.5 }}>{o.recommendation}</span>
                <span className="subtle" style={{ fontSize: 10 }}>{T("تقدير · بلا إيراد متوقّع · موافقة المؤسس", "estimate · no expected revenue · founder approval")}</span>
              </div>
            ))}
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا فرص بعد — تظهر مع عملاء/أسواق حقيقية.", "No opportunities yet — appear with real leads/markets.")}</span>}
      </div></Card>
      {/* Vanity audit */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("تدقيق الزَّهْو", "No-vanity audit")} {va && va.flaggedCount ? <Badge tone="orange">{va.flaggedCount} {T("تجاهل", "IGNORE")}</Badge> : null}</b>
        {va && va.status === "active" ? (
          (va.flagged || []).length ? va.flagged.slice(0, 4).map((f, i) => (
            <div key={i} className="row between" style={{ fontSize: 11.5 }}><span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.title}</span><span className="subtle">{L(f.reason)}</span></div>
          )) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا تعلّم بلا قيمة مرصود حالياً.", "No vanity learning flagged right now.")}</span>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا بيانات كافية.", "Not enough data.")}</span>}
        <span className="subtle" style={{ fontSize: 10 }}>{T("المرصود «تجاهل» لا يُدرّب الوكلاء — لا أرشفة تلقائية.", "Flagged 'IGNORE' never trains agents — no auto-archive.")}</span>
      </div></Card>
    </div>
  );
}

// ---- Execution War Room (Phase 11): ONE screen — why did we miss / who owns it / what next. Target /
// Actual / Gap / Forecast / Root-Cause / Accountability / Corrective / Opportunities / Learning-Impact. ----
const RX_GRADE = { "A+": { b: "#e7f7ec", f: "#15803D" }, "A": { b: "#e7f7ec", f: "#15803D" }, "B": { b: "#eaf7e9", f: "#3f7d20" }, "C": { b: "#fff4e5", f: "#b45309" }, "D": { b: "#fde8e8", f: "#b91c1c" }, "F": { b: "#fde8e8", f: "#b91c1c" } };
function RxGrade({ grade }) {
  if (!grade) return <span style={{ color: "var(--fg-4)" }}>—</span>;
  const c = RX_GRADE[grade] || { b: "var(--bg-2)", f: "var(--fg-3)" };
  return <span style={{ fontSize: 15, fontWeight: 800, padding: "1px 9px", borderRadius: 7, background: c.b, color: c.f }}>{grade}</span>;
}
const RX_STATUS_TONE = { exceeded: "green", on_track: "green", at_risk: "orange", missed: "danger", no_target: "neutral", top_performer: "green", normal: "neutral", needs_coaching: "orange", critical: "danger" };
function ExecutionWarRoomPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const d = useSupData(() => API.assem.executionWarRoom(), []);
  if (!d) return <SupLoading />;
  if (d.error) return <SupError lang={lang} />;
  const n = d.numbers || {}, f = d.forecast || {}, rc = d.rootCause || {}, acc = d.accountability || {}, ans = d.answers || {};
  const fmtMoney = (x) => (typeof window.fmtCurrency === "function" ? window.fmtCurrency(x) : String(x));
  const verdictTone = f.verdict === "YES" ? "green" : f.verdict === "NO" ? "danger" : "neutral";
  if (d.status === "no_target") {
    return <Card><div className="col" style={{ gap: 6, padding: 8 }}><b style={{ fontSize: 14 }}>{T("غرفة عمليات التنفيذ", "Execution War Room")}</b><span className="subtle" style={{ fontSize: 12 }}>{T("اضبط هدف إيراد شهري لتفعيل غرفة العمليات.", "Set a monthly revenue target to activate the war room.")}</span></div></Card>;
  }
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* THE 3 ANSWERS — why missed / who owns / what next */}
      <Card><div className="col" style={{ gap: 7, padding: 4 }}>
        <span className="subtle" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em" }}>{T("الإجابات الثلاث", "The three answers")}</span>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", alignItems: "baseline" }}>
          <span style={{ fontSize: 12, fontWeight: 700 }}>{T("لماذا أخفقنا؟", "Why did we miss?")}</span>
          <span style={{ fontSize: 12 }}>{L(ans.whyMissed)}</span>
        </div>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", alignItems: "baseline" }}>
          <span style={{ fontSize: 12, fontWeight: 700 }}>{T("من المسؤول؟", "Who owns it?")}</span>
          <Badge tone="neutral">{ans.whoOwns ? L(ans.whoOwns.label) : "—"}</Badge>
        </div>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", alignItems: "baseline" }}>
          <span style={{ fontSize: 12, fontWeight: 700 }}>{T("ما التالي؟", "What's next?")}</span>
          <span style={{ fontSize: 12 }}>{ans.whatNext ? L(ans.whatNext) : "—"}</span>
        </div>
      </div></Card>
      {/* NUMBERS — target / actual / gap / forecast */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          {[[T("الهدف", "Target"), n.target], [T("الفعلي", "Actual"), n.actual], [T("الفجوة", "Gap"), n.gap], [T("التوقّع", "Forecast"), n.forecast]].map(([lbl, v], i) => (
            <div key={i} className="card" style={{ flex: "1 1 90px", minWidth: 80, padding: 9, textAlign: "center" }}>
              <div className="subtle" style={{ fontSize: 10 }}>{lbl}</div>
              <div style={{ fontSize: 15, fontWeight: 800 }}>{v == null ? "—" : fmtMoney(v)}</div>
            </div>
          ))}
        </div>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11.5 }}>
          <Badge tone={n.attainmentPct >= 100 ? "green" : n.attainmentPct >= 80 ? "orange" : "danger"}>{T("التحقيق", "Attainment")} {n.attainmentPct == null ? "—" : n.attainmentPct + "%"}</Badge>
          <Badge tone="neutral">{T("تقدّم الشهر", "Month")} {n.monthProgressPct == null ? "—" : n.monthProgressPct + "%"}</Badge>
          <Badge tone="neutral">{T("خط الأنابيب", "Pipeline")} {fmtMoney(n.pipelineValue || 0)}</Badge>
        </div>
      </div></Card>
      {/* FORECAST verdict */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <div className="row between" style={{ alignItems: "center" }}>
          <b style={{ fontSize: 13 }}>{T("هل سنحقّق الهدف؟", "Will we hit the target?")}</b>
          <Badge tone={verdictTone}>{f.verdict || "UNKNOWN"}</Badge>
        </div>
        {f.scenarios ? (
          <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
            {[["worst", T("الأسوأ", "Worst")], ["expected", T("المتوقّع", "Expected")], ["best", T("الأفضل", "Best")]].map(([k, lbl]) => (
              <div key={k} className="card" style={{ flex: "1 1 90px", minWidth: 84, padding: 8, textAlign: "center" }}>
                <div className="subtle" style={{ fontSize: 10 }}>{lbl}</div>
                <div style={{ fontSize: 13, fontWeight: 800 }}>{fmtMoney(f.scenarios[k].value)}</div>
                <div className="subtle" style={{ fontSize: 10 }}>{f.scenarios[k].attainmentPct == null ? "" : f.scenarios[k].attainmentPct + "%"}</div>
              </div>
            ))}
          </div>
        ) : null}
      </div></Card>
      {/* ROOT CAUSE */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("السبب الجذري", "Root cause")}{rc.missAmount ? <span className="subtle" style={{ fontSize: 11 }}> · {T("فجوة", "gap")} {fmtMoney(rc.missAmount)}</span> : null}</b>
        {rc.status === "diagnosed" ? (
          <React.Fragment>
            <span style={{ fontSize: 12 }}>{L(rc.statement)}</span>
            {(rc.categories || []).map((cat, i) => (
              <div key={i} className="col" style={{ gap: 1, borderInlineStart: "2px solid " + (cat.impact === "high" ? "var(--color-danger)" : "var(--color-orange)"), paddingInlineStart: 7 }}>
                <div className="row between" style={{ fontSize: 11.5 }}>
                  <span style={{ fontWeight: 700 }}>{L(cat.label)}{cat.sharePct != null ? <span className="subtle"> · {cat.sharePct}%</span> : null}</span>
                  <span className="subtle">{L(cat.owner && cat.owner.label)}</span>
                </div>
                <span className="subtle" style={{ fontSize: 10.5 }}>{L(cat.evidence)}</span>
              </div>
            ))}
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 12 }}>{L(rc.statement)}</span>}
      </div></Card>
      {/* ACCOUNTABILITY */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("المساءلة", "Accountability")}</b>
        <div className="row" style={{ gap: 12, flexWrap: "wrap", alignItems: "center" }}>
          <span style={{ fontSize: 12 }}>{T("مدير الإيراد", "Revenue Director")} <RxGrade grade={acc.revenueDirector && acc.revenueDirector.grade} /></span>
          <span style={{ fontSize: 12 }}>{T("مدير المبيعات", "Sales Manager")} <RxGrade grade={acc.salesManager && acc.salesManager.grade} /></span>
        </div>
        <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11.5 }}>
          {acc.bestAgent ? <Badge tone="green">★ {acc.bestAgent.name} {acc.bestAgent.attainmentPct != null ? acc.bestAgent.attainmentPct + "%" : ""}</Badge> : null}
          {acc.worstAgent ? <Badge tone="orange">↓ {acc.worstAgent.name} {acc.worstAgent.attainmentPct != null ? acc.worstAgent.attainmentPct + "%" : ""}</Badge> : null}
          {(acc.critical || []).length ? <Badge tone="danger">{T("حرج", "Critical")}: {acc.critical.length}</Badge> : null}
        </div>
      </div></Card>
      {/* CORRECTIVE ACTIONS */}
      <Card><div className="col" style={{ gap: 5, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("الإجراءات التصحيحية", "Corrective actions")}</b>
        {(d.correctiveActions || []).length ? d.correctiveActions.map((a, i) => (
          <div key={i} className="row between" style={{ fontSize: 11.5, gap: 6 }}>
            <span style={{ flex: "1 1 auto" }}>{L(a.action)}</span>
            <span className="row" style={{ gap: 4, flexShrink: 0 }}>
              <Badge tone={a.priority === "high" ? "danger" : "neutral"}>{a.priority}</Badge>
              <span className="subtle" style={{ fontSize: 10 }}>{L(a.owner && a.owner.label)}</span>
            </span>
          </div>
        )) : <span className="subtle" style={{ fontSize: 11.5 }}>{T("لا إجراءات — على المسار.", "No actions — on track.")}</span>}
        <span className="subtle" style={{ fontSize: 10 }}>{T("توصية فقط — موافقة المؤسس مطلوبة؛ لا تنفيذ تلقائي.", "Recommendation only — founder approval required; nothing auto-executes.")}</span>
      </div></Card>
      {/* OPPORTUNITIES + LEARNING IMPACT */}
      <Card><div className="row between" style={{ padding: 4, fontSize: 12, flexWrap: "wrap", gap: 8 }}>
        <span>{T("فرص الإيراد", "Revenue opportunities")}: <b>{d.revenueOpportunities ? d.revenueOpportunities.count : 0}</b></span>
        <span>{T("مهارات رابحة", "Winning skills")}: <b>{d.learningImpact ? d.learningImpact.winningSkills : 0}</b></span>
      </div></Card>
    </div>
  );
}
window.ExecutionWarRoomPanel = ExecutionWarRoomPanel;

// ---- Growth (Phase 12): Autonomous Revenue Operations — the org discovers opportunities, proposes
// improvements, generates growth initiatives, measures impact. Founder keeps final approval. ----
const GROWTH_DIRECTORS = [["revenue", { ar: "مدير الإيراد", en: "Revenue Director" }], ["marketing", { ar: "مدير القنوات", en: "Channel Director" }], ["customer_success", { ar: "نجاح العملاء", en: "Customer Success" }], ["operations", { ar: "العمليات", en: "Operations" }], ["cto", { ar: "التقني", en: "CTO" }], ["data", { ar: "البيانات", en: "Data Director" }]];
const INIT_NEXT = { proposed: [["approved", "green"], ["rejected", "danger"]], approved: [["executing", "green"], ["cancelled", "neutral"]], executing: [["completed", "green"], ["cancelled", "neutral"]] };
function GrowthOpsPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const fmtMoney = (x) => (x == null ? "—" : (typeof window.fmtCurrency === "function" ? window.fmtCurrency(x) : String(x)));
  const iq = useSupData(() => API.assem.organizationalIq(), []);
  const map = useSupData(() => API.assem.autonomousRevenueMap(), []);
  const [board, setBoard] = React.useState(null);
  const [inits, setInits] = React.useState(null);
  const [form, setForm] = React.useState({ title: "", ownerDirector: "revenue", expectedRevenue: "", open: false, msg: null });
  const [detail, setDetail] = React.useState(false);
  const loadBoard = () => API.assem.ceoOpportunityBoard().then(setBoard).catch(() => setBoard({ error: true }));
  const loadInits = () => API.assem.growthInitiatives().then(setInits).catch(() => setInits({ error: true }));
  React.useEffect(() => { loadBoard(); loadInits(); }, []);
  const create = async () => {
    if (!form.title.trim()) { setForm((f) => ({ ...f, msg: T("العنوان مطلوب", "Title required") })); return; }
    const r = await API.assem.createGrowthInitiative({ title: form.title, ownerDirector: form.ownerDirector, expectedRevenue: form.expectedRevenue ? Number(form.expectedRevenue) : null, createdBy: "founder" });
    if (r && r.ok) { setForm({ title: "", ownerDirector: "revenue", expectedRevenue: "", open: false, msg: null }); loadInits(); loadBoard(); }
    else setForm((f) => ({ ...f, msg: (r && r.error) || "error" }));
  };
  const move = async (id, status) => { await API.assem.growthInitiativeStatus(id, status, status === "completed" ? {} : undefined); loadInits(); loadBoard(); };
  const axisLabel = { learningQuality: T("جودة التعلّم", "Learning"), executionQuality: T("جودة التنفيذ", "Execution"), forecastAccuracy: T("دقة التوقّع", "Forecast acc."), improvementVelocity: T("سرعة التحسّن", "Velocity"), directorPerformance: T("أداء المديرين", "Directors"), agentPerformance: T("أداء الوكلاء", "Agents"), revenueGrowth: T("نمو الإيراد", "Rev. growth") };
  const gradeColor = (gr) => (!gr ? "var(--fg-4)" : /^A/.test(gr) ? "var(--color-green)" : gr === "B" ? "#3f7d20" : gr === "C" ? "var(--color-orange)" : "var(--color-danger)");
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* ORGANIZATIONAL IQ */}
      {iq && !iq.error ? (
        <Card><div className="col" style={{ gap: 7, padding: 4 }}>
          <div className="row between" style={{ alignItems: "center" }}>
            <b style={{ fontSize: 13 }}>{T("ذكاء المؤسسة", "Organizational IQ")}</b>
            <div className="row" style={{ gap: 8, alignItems: "baseline" }}>
              <span style={{ fontSize: 22, fontWeight: 800, color: iq.overall == null ? "var(--fg-4)" : "var(--fg-1)" }}>{iq.overall == null ? "—" : iq.overall}</span>
              <span style={{ fontSize: 15, fontWeight: 800, color: gradeColor(iq.grade) }}>{iq.grade || ""}</span>
              {iq.trend ? <Badge tone={iq.trend.direction === "up" ? "green" : iq.trend.direction === "down" ? "danger" : "neutral"}>{iq.trend.direction === "up" ? "▲" : iq.trend.direction === "down" ? "▼" : "→"} {iq.trend.change > 0 ? "+" : ""}{iq.trend.change}</Badge> : null}
            </div>
          </div>
          <div className="col" style={{ gap: 3 }}>
            {Object.entries(iq.axes || {}).map(([k, v]) => (
              <div key={k} className="row" style={{ gap: 8, alignItems: "center", fontSize: 11 }}>
                <span style={{ width: 96 }}>{axisLabel[k] || k}</span>
                <div style={{ flex: "1 1 auto", height: 7, background: "var(--bg-2)", borderRadius: 999, overflow: "hidden" }}><div style={{ width: (v || 0) + "%", height: "100%", background: v == null ? "var(--bg-2)" : v >= 70 ? "var(--color-green)" : v >= 45 ? "var(--color-orange)" : "var(--color-danger)" }} /></div>
                <b style={{ width: 30, textAlign: "end" }}>{v == null ? "—" : v}</b>
              </div>
            ))}
          </div>
          <span className="subtle" style={{ fontSize: 10 }}>{T("كل محور حقيقي أو «—»؛ دقّة التوقّع «—» حتى تتوفّر لقطات؛ الاتجاه يبني سجلاً.", "Each axis is real or '—'; Forecast-Accuracy is NED until paired snapshots; trend builds history.")}</span>
        </div></Card>
      ) : null}
      {/* AUTONOMOUS REVENUE MAP */}
      {map && !map.error && map.status !== "no_target" ? (
        <Card><div className="col" style={{ gap: 8, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("خريطة الإيراد الذاتية", "Autonomous Revenue Map")}</b>
          {/* center strip: target / actual / gap / forecast verdict */}
          <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
            {[[T("الهدف", "Target"), fmtMoney(map.nodes.target)], [T("الفعلي", "Actual"), fmtMoney(map.nodes.actual)], [T("الفجوة", "Gap"), fmtMoney(map.nodes.gap)]].map(([lbl, v], i) => (
              <div key={i} className="card" style={{ flex: "1 1 80px", minWidth: 74, padding: 8, textAlign: "center" }}><div className="subtle" style={{ fontSize: 10 }}>{lbl}</div><div style={{ fontSize: 13, fontWeight: 800 }}>{v}</div></div>
            ))}
            <div className="card" style={{ flex: "1 1 80px", minWidth: 74, padding: 8, textAlign: "center" }}><div className="subtle" style={{ fontSize: 10 }}>{T("هل نحقّق؟", "Hit it?")}</div><div style={{ fontSize: 13, fontWeight: 800, color: map.summary.verdict === "YES" ? "var(--color-green)" : map.summary.verdict === "NO" ? "var(--color-danger)" : "var(--fg-3)" }}>{map.summary.verdict}</div></div>
          </div>
          {/* connected lanes */}
          <div className="row" style={{ gap: 8, flexWrap: "wrap", fontSize: 11 }}>
            <div className="col" style={{ flex: "1 1 150px", gap: 2 }}>
              <span className="subtle" style={{ fontSize: 10, fontWeight: 700 }}>{T("مصادر ← تغذّي الفعلي", "Sources → feed actual")}</span>
              {(map.nodes.revenueSources || []).slice(0, 3).map((s, i) => <span key={i}>{s.name}: <b>{fmtMoney(s.revenue)}</b></span>)}
              {!(map.nodes.revenueSources || []).length ? <span className="subtle">—</span> : null}
            </div>
            <div className="col" style={{ flex: "1 1 150px", gap: 2 }}>
              <span className="subtle" style={{ fontSize: 10, fontWeight: 700, color: "var(--color-danger)" }}>{T("مخاطر ⚠ توسّع الفجوة", "Risks ⚠ widen gap")}</span>
              {(map.nodes.revenueRisks || []).slice(0, 3).map((r, i) => <span key={i}>{L(r.label)}{r.impactSar ? " · " + fmtMoney(r.impactSar) : ""}</span>)}
              {!(map.nodes.revenueRisks || []).length ? <span className="subtle">—</span> : null}
            </div>
            <div className="col" style={{ flex: "1 1 150px", gap: 2 }}>
              <span className="subtle" style={{ fontSize: 10, fontWeight: 700, color: "var(--color-green)" }}>{T("فرص ↑ تغلق الفجوة", "Opportunities ↑ close gap")}</span>
              {(map.nodes.revenueOpportunities || []).slice(0, 3).map((o, i) => <span key={i} style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{o.type}: {o.title}</span>)}
              {!(map.nodes.revenueOpportunities || []).length ? <span className="subtle">—</span> : null}
            </div>
            <div className="col" style={{ flex: "1 1 150px", gap: 2 }}>
              <span className="subtle" style={{ fontSize: 10, fontWeight: 700, color: "var(--color-secondary)" }}>{T("مبادرات ↗ تنمّي الهدف", "Initiatives ↗ grow target")}</span>
              {(map.nodes.growthInitiatives || []).slice(0, 3).map((g, i) => <span key={i}>{g.title} <span className="subtle">({g.status})</span></span>)}
              {!(map.nodes.growthInitiatives || []).length ? <span className="subtle">—</span> : null}
            </div>
          </div>
          <span className="subtle" style={{ fontSize: 10 }}>{T("كل عقدة حقيقية — إيراد مُتحقّق، مخاطر بأدلة، فرص بإشارات. لا تلفيق.", "Every node is real — verified revenue, evidence-gated risks, signal-backed opportunities. Nothing fabricated.")}</span>
        </div></Card>
      ) : null}
      {/* CREATE GROWTH INITIATIVE */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <div className="row between" style={{ alignItems: "center" }}>
          <b style={{ fontSize: 13 }}>{T("مبادرة نمو جديدة", "New growth initiative")}</b>
          <button onClick={() => setForm((f) => ({ ...f, open: !f.open }))} style={{ fontSize: 12, padding: "4px 10px", borderRadius: 8, border: "1px solid var(--border-1)", background: "#fff", color: "var(--color-secondary)", fontWeight: 700, cursor: "pointer" }}>{form.open ? T("إغلاق", "Close") : T("+ إنشاء", "+ Create")}</button>
        </div>
        {form.open ? (
          <div className="col" style={{ gap: 6 }}>
            <input value={form.title} onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))} placeholder={T("عنوان المبادرة", "Initiative title")} style={{ fontSize: 12, padding: "7px 9px", borderRadius: 7, border: "1px solid var(--border-1)" }} />
            <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
              <select value={form.ownerDirector} onChange={(e) => setForm((f) => ({ ...f, ownerDirector: e.target.value }))} style={{ fontSize: 12, padding: "7px 9px", borderRadius: 7, border: "1px solid var(--border-1)", flex: "1 1 140px" }}>
                {GROWTH_DIRECTORS.map(([id, lbl]) => <option key={id} value={id}>{L(lbl)}</option>)}
              </select>
              <input value={form.expectedRevenue} onChange={(e) => setForm((f) => ({ ...f, expectedRevenue: e.target.value.replace(/[^0-9]/g, "") }))} placeholder={T("إيراد متوقّع (اختياري)", "Expected revenue (optional)")} style={{ fontSize: 12, padding: "7px 9px", borderRadius: 7, border: "1px solid var(--border-1)", flex: "1 1 140px" }} />
            </div>
            <button onClick={create} style={{ fontSize: 12, padding: "7px 11px", borderRadius: 8, border: "none", background: "var(--color-secondary)", color: "#fff", fontWeight: 700, cursor: "pointer", alignSelf: "flex-start" }}>{T("إنشاء (يحتاج موافقتك لاحقاً)", "Create (you approve next)")}</button>
            {form.msg ? <span style={{ fontSize: 11, color: "var(--color-danger)" }}>{form.msg}</span> : null}
            <span className="subtle" style={{ fontSize: 10 }}>{T("الإيراد المتوقّع ادّعاء — الفعلي يُسجّل فقط عند الإكمال. لا تنفيذ تلقائي.", "Expected revenue is a claim — actual is recorded only on completion. Nothing auto-executes.")}</span>
          </div>
        ) : null}
        {/* initiative lifecycle list */}
        {inits && !inits.error && (inits.initiatives || []).length ? (
          <div className="col" style={{ gap: 5, marginTop: 2 }}>
            {inits.initiatives.slice(0, 6).map((i) => (
              <div key={i.id} className="row between" style={{ fontSize: 11.5, gap: 6, alignItems: "center" }}>
                <span style={{ flex: "1 1 auto" }}>{i.title} <span className="subtle">· {i.ownerDirector}{i.expectedRevenue ? " · ~" + fmtMoney(i.expectedRevenue) : ""}{i.status === "completed" && i.actualRevenue != null ? " · ✓ " + fmtMoney(i.actualRevenue) : ""}</span></span>
                <span className="row" style={{ gap: 3, flexShrink: 0 }}>
                  <Badge tone={i.status === "completed" ? "green" : i.status === "rejected" || i.status === "cancelled" ? "neutral" : "orange"}>{i.status}</Badge>
                  {(INIT_NEXT[i.status] || []).map(([s, tone]) => <button key={s} onClick={() => move(i.id, s)} style={{ fontSize: 10, padding: "2px 6px", borderRadius: 6, border: "1px solid var(--border-1)", background: "#fff", color: tone === "danger" ? "var(--color-danger)" : tone === "green" ? "var(--color-green)" : "var(--fg-2)", cursor: "pointer" }}>{s}</button>)}
                </span>
              </div>
            ))}
          </div>
        ) : null}
      </div></Card>
      {/* CEO OPPORTUNITY BOARD */}
      {board && !board.error ? (
        <Card><div className="col" style={{ gap: 6, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("لوحة فرص الـCEO", "CEO Opportunity Board")} <span className="subtle" style={{ fontSize: 11 }}>· {board.total}</span></b>
          {(board.board || []).filter((l) => l.count).map((l) => (
            <div key={l.lane} className="col" style={{ gap: 2 }}>
              <span className="subtle" style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase" }}>{l.lane.replace(/_/g, " ")} · {l.count}</span>
              {l.items.slice(0, 3).map((it, i) => (
                <div key={i} className="row between" style={{ fontSize: 11.5, gap: 6 }}>
                  <span style={{ flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{typeof it.title === "string" ? it.title : L(it.title)}</span>
                  <span className="subtle" style={{ flexShrink: 0 }}>{it.expectedRevenue ? fmtMoney(it.expectedRevenue) : it.impact}</span>
                </div>
              ))}
            </div>
          ))}
          <span className="subtle" style={{ fontSize: 10 }}>{T("مرتّبة بالأثر — كل عنصر له سبب حقيقي ومالك وبوّابة موافقة.", "Ranked by impact — every item has a real why, an owner, and an approval gate.")}</span>
        </div></Card>
      ) : null}
      {/* expandable detail: director ownership + growth review + agent improvement */}
      <button onClick={() => setDetail((s) => !s)} style={{ alignSelf: "flex-start", fontSize: 12, padding: "5px 11px", borderRadius: 8, border: "1px solid var(--border-1)", background: "#fff", color: "var(--color-secondary)", fontWeight: 700, cursor: "pointer" }}>{detail ? T("إخفاء التفاصيل", "Hide detail") : T("عرض ملكية المديرين + مراجعة النمو + تحسين الوكلاء", "Show director ownership + growth review + agent improvement")}</button>
      {detail ? <GrowthDetail lang={lang} /> : null}
    </div>
  );
}
window.GrowthOpsPanel = GrowthOpsPanel;

function GrowthDetail({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o ? (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) : "");
  const fmtMoney = (x) => (x == null ? "—" : (typeof window.fmtCurrency === "function" ? window.fmtCurrency(x) : String(x)));
  const own = useSupData(() => API.assem.directorInitiativeOwnership(), []);
  const rev = useSupData(() => API.assem.executiveGrowthReview(), []);
  const imp = useSupData(() => API.assem.agentImprovementLoop(), []);
  const audit = useSupData(() => API.assem.noFakeGrowthAudit(), []);
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("ملكية مبادرات المديرين", "Director initiative ownership")}</b>
        {own && !own.error ? (own.directors || []).filter((d) => d.created).map((d) => (
          <div key={d.director} className="row between" style={{ fontSize: 11.5 }}>
            <span>{L(d.label)}</span>
            <span className="subtle">{d.created} {T("أُنشئت", "created")} · {d.completed} {T("اكتملت", "done")} · {d.revenueGenerated != null ? fmtMoney(d.revenueGenerated) : "—"} · {d.successRate != null ? d.successRate + "%" : "—"}</span>
          </div>
        )) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا مبادرات بعد.", "No initiatives yet.")}</span>}
        {own && own.status !== "active" ? <span className="subtle" style={{ fontSize: 11 }}>{T("لا مبادرات بعد — أنشئ واحدة أعلاه.", "No initiatives yet — create one above.")}</span> : null}
      </div></Card>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("مراجعة النمو الأسبوعية", "Weekly growth review")}</b>
        {rev && !rev.error ? (
          <React.Fragment>
            <span style={{ fontSize: 11.5 }}>{T("ولّد إيراداً", "Generated revenue")}: <b>{fmtMoney(rev.whatGeneratedRevenue && rev.whatGeneratedRevenue.closedThisMonth)}</b>{rev.whatGeneratedRevenue && rev.whatGeneratedRevenue.bestAgent ? " · ★ " + rev.whatGeneratedRevenue.bestAgent.name : ""}</span>
            <span style={{ fontSize: 11.5 }}>{T("خلق نمواً", "Created growth")}: {(rev.whatCreatedGrowth && rev.whatCreatedGrowth.growthLevers || []).length} {T("روافع", "levers")}</span>
            {rev.highestRoiInitiative ? <span style={{ fontSize: 11.5 }}>{T("أعلى مبادرة عائداً", "Highest-ROI initiative")}: <b>{rev.highestRoiInitiative.title}</b> · {fmtMoney(rev.highestRoiInitiative.actualRevenue)}</span> : null}
            {(rev.whatToScale || []).length ? <span style={{ fontSize: 11 }} className="subtle">{T("وسّع", "Scale")}: {rev.whatToScale.map((s) => s.skill).join(", ")}</span> : null}
          </React.Fragment>
        ) : <span className="subtle" style={{ fontSize: 11 }}>—</span>}
      </div></Card>
      <Card><div className="col" style={{ gap: 4, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("حلقة تحسين الوكلاء", "Agent improvement loop")} {imp && imp.total ? <span className="subtle" style={{ fontSize: 11 }}>· {imp.total}</span> : null}</b>
        {imp && imp.status === "active" ? (
          (imp.proposals || []).slice(0, 5).map((p) => (
            <div key={p.id} className="row between" style={{ fontSize: 11.5 }}>
              <span>{p.name} · {p.category}</span>
              <span className="subtle">{T("دليل", "evidence")}: {p.evidenceScore} · <Badge tone={p.status === "validated" ? "green" : p.status === "approved" ? "lime" : "orange"}>{p.status}</Badge></span>
            </div>
          ))
        ) : <span className="subtle" style={{ fontSize: 11 }}>{T("لا ضعف مقاس بعد — تظهر المقترحات عند توفّر محادثات مقيّمة.", "No measured weakness yet — proposals appear with scored conversations.")}</span>}
        <span className="subtle" style={{ fontSize: 10 }}>{T("كل مقترح يستشهد بدرجة ضعيفة حقيقية؛ لا تطبيق تلقائي.", "Each cites a real weak score; nothing auto-applies.")}</span>
      </div></Card>
      {audit && !audit.error ? <Card><div className="row between" style={{ padding: 4, fontSize: 12 }}><b>{T("تدقيق نمو بلا تزييف", "No-fake-growth audit")}</b><Badge tone={audit.allPass ? "green" : "danger"}>{audit.passed}/{audit.total} {audit.allPass ? T("✓ نزيه", "✓ honest") : ""}</Badge></div></Card> : null}
    </div>
  );
}

// ---- Executive Council (Phase 13): the founder asks a strategic question → the directors CONVENE → Assem
// raises ONE plan (Plan/Risks/Expected-Revenue/Confidence/Evidence). Directors own departments + make
// decisions; founder keeps approval. ----
function ExecCouncilPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o == null ? "" : typeof o === "string" ? o : (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) || "");
  const fmtMoney = (x) => (x == null ? "—" : (typeof window.fmtCurrency === "function" ? window.fmtCurrency(x) : String(x)));
  const [q, setQ] = React.useState(lang === "ar" ? "كيف نحقق مليون ريال إضافية خلال 90 يوم؟" : "How do we make +1M SAR in 90 days?");
  const [plan, setPlan] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const council = useSupData(() => API.assem.executiveCouncil(), []);
  const perf = useSupData(() => API.assem.directorPerformanceScore(), []);
  const auth = useSupData(() => API.assem.directorAuthority(), []);
  const succ = useSupData(() => API.assem.executiveSuccession(), []);
  const audit = useSupData(() => API.assem.noFakeAuthorityAudit(), []);
  const ask = async () => { if (!q.trim()) return; setBusy(true); try { const r = await API.assem.directorCouncilPlan(q); setPlan(r); } catch { setPlan({ error: true }); } finally { setBusy(false); } };
  const gradeColor = (gr) => (!gr ? "var(--fg-4)" : /^A/.test(gr) ? "var(--color-green)" : gr === "B" ? "#3f7d20" : gr === "C" ? "var(--color-orange)" : "var(--color-danger)");
  const fb = plan && plan.ok ? plan.founderBrief : null;
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* FOUNDER QUESTION → COUNCIL PLAN (the success test) */}
      <Card><div className="col" style={{ gap: 7, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("اسأل المجلس التنفيذي", "Ask the Executive Council")}</b>
        <span className="subtle" style={{ fontSize: 11 }}>{T("اطرح سؤالاً استراتيجياً — يجتمع المديرون ويرفع عاصم خطة بانتظار موافقتك.", "Ask a strategic question — the directors convene and Assem raises one plan for your approval.")}</span>
        <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
          <input value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && ask()} style={{ flex: "1 1 220px", fontSize: 12, padding: "8px 10px", borderRadius: 8, border: "1px solid var(--border-1)" }} />
          <button onClick={ask} disabled={busy} style={{ fontSize: 12, padding: "8px 14px", borderRadius: 8, border: "none", background: "var(--color-secondary)", color: "#fff", fontWeight: 700, cursor: busy ? "default" : "pointer", opacity: busy ? 0.6 : 1 }}>{busy ? T("يجتمعون…", "Convening…") : T("اعقد المجلس", "Convene")}</button>
        </div>
        {plan && plan.error ? <span style={{ fontSize: 11, color: "var(--color-danger)" }}>{T("خطأ", "Error")}</span> : null}
        {plan && plan.ok === false ? <span className="subtle" style={{ fontSize: 11.5 }}>{L(plan.message)}</span> : null}
        {fb ? (
          <div className="col" style={{ gap: 6, marginTop: 2 }}>
            <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
              {[[T("الهدف", "Target"), fb.plan.target], [T("التوقّع", "Forecast"), fb.plan.currentForecast], [T("الفجوة", "Gap"), fb.plan.gapToClose]].map(([lbl, v], i) => (
                <div key={i} className="card" style={{ flex: "1 1 90px", minWidth: 80, padding: 8, textAlign: "center" }}><div className="subtle" style={{ fontSize: 10 }}>{lbl}</div><div style={{ fontSize: 14, fontWeight: 800 }}>{fmtMoney(v)}</div></div>
              ))}
            </div>
            <span className="subtle" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase" }}>{T("التزامات المديرين", "Director commitments")} · {plan.contributing}</span>
            {(fb.plan.directorContributions || []).map((c, i) => (
              <div key={i} className="row between" style={{ fontSize: 11.5 }}><span style={{ fontWeight: 700 }}>{L(c.label)}</span><span style={{ flex: "1 1 auto", textAlign: "end", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginInlineStart: 8 }}>{L(c.commitment)}</span></div>
            ))}
            {fb.debate ? (
              <div className="col" style={{ gap: 3, marginTop: 4, padding: "6px 8px", borderRadius: 8, background: "var(--bg-2)" }}>
                <div className="row between" style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase" }}>
                  <span>{T("مناظرة المديرين", "Directors' debate")}</span>
                  <Badge tone={fb.debate.consensus && fb.debate.consensus.reached ? "green" : "orange"}>{fb.debate.consensus ? fb.debate.consensus.committed + "/" + fb.debate.consensus.of : "—"} {T("التزموا", "committed")}</Badge>
                </div>
                {fb.debate.consensus ? <span className="subtle" style={{ fontSize: 10.5 }}>{L(fb.debate.consensus.note)}</span> : null}
                {(fb.debate.abstentions || []).length ? <span className="subtle" style={{ fontSize: 10.5 }}>{T("ممتنعون", "Abstain")}: {fb.debate.abstentions.map((a) => L(a.label)).join("، ")}</span> : null}
                {(fb.debate.tensions || []).slice(0, 2).map((tn, i) => (
                  <div key={i} style={{ fontSize: 10.5 }}><b>{L(tn.label)}:</b> <span className="subtle">{L(tn.concern)}</span></div>
                ))}
              </div>
            ) : null}
            <div className="row" style={{ gap: 6, flexWrap: "wrap", marginTop: 2, fontSize: 11.5 }}>
              <Badge tone="neutral">{T("الإيراد المتوقّع", "Expected rev")}: {L(fb.expectedRevenue)}</Badge>
              <Badge tone={fb.confidence === "estimate" ? "orange" : "neutral"}>{T("الثقة", "Confidence")}: {fb.confidence}</Badge>
              {(fb.risks || []).length ? <Badge tone="danger">{T("مخاطر", "Risks")}: {fb.risks.length}</Badge> : null}
            </div>
            <span className="subtle" style={{ fontSize: 10, color: "var(--color-orange)" }}>{T("الخطة مسجّلة بانتظار موافقة المؤسس — لا وكيل ولا لوحة أجابت؛ بل المجلس. لا تنفيذ حتى توافق.", "The plan is recorded pending founder approval — no agent or dashboard answered; the council did. Nothing executes until you approve.")}</span>
          </div>
        ) : null}
      </div></Card>
      {/* EXECUTIVE COUNCIL weekly brief */}
      {council && !council.error ? (
        <Card><div className="col" style={{ gap: 5, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("المجلس التنفيذي", "Executive Council")} <span className="subtle" style={{ fontSize: 11 }}>· {(council.members || []).length} {T("أعضاء", "members")}</span></b>
          <span style={{ fontSize: 11.5 }}>{council.founderBrief ? L(council.founderBrief.summary) : "—"}</span>
          <div className="row" style={{ gap: 6, flexWrap: "wrap", fontSize: 11 }}>
            {council.founderBrief ? <Badge tone="danger">{T("مخاطر", "Risks")} {(council.founderBrief.agenda.risks || []).length}</Badge> : null}
            {council.founderBrief ? <Badge tone="green">{T("فرص", "Opps")} {(council.founderBrief.agenda.opportunities || []).length}</Badge> : null}
            {council.founderBrief ? <Badge tone="neutral">{T("مبادرات", "Initiatives")} {(council.founderBrief.agenda.growthInitiatives || []).length}</Badge> : null}
          </div>
        </div></Card>
      ) : null}
      {/* PER-DIRECTOR AUTHORITY + PERFORMANCE */}
      {perf && !perf.error ? (
        <Card><div className="col" style={{ gap: 5, padding: 4 }}>
          <b style={{ fontSize: 13 }}>{T("سلطة المديرين وأداؤهم", "Director authority & performance")}</b>
          {(perf.directors || []).map((p) => {
            const a = auth && !auth.error ? (auth.directors || []).find((x) => x.director === p.director) : null;
            return (
              <div key={p.director} className="col" style={{ gap: 1, borderInlineStart: "2px solid var(--border-1)", paddingInlineStart: 7 }}>
                <div className="row between" style={{ fontSize: 11.5 }}>
                  <span style={{ fontWeight: 700 }}>{L(p.label)}</span>
                  <span>{p.overall == null ? "—" : p.overall} <span style={{ fontWeight: 800, color: gradeColor(p.grade) }}>{p.grade || ""}</span></span>
                </div>
                {a ? <span className="subtle" style={{ fontSize: 10 }}>{T("يستطيع", "can")}: {(a.can || []).slice(0, 4).join(", ")} · {T("لا يستطيع", "cannot")}: {(a.cannot || []).filter((x) => !/universal/.test(x)).join(", ") || "—"}</span> : null}
              </div>
            );
          })}
        </div></Card>
      ) : null}
      {/* SUCCESSION + NO-FAKE-AUTHORITY */}
      <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
        {succ && !succ.error ? <Card style={{ flex: "1 1 160px" }}><div className="row between" style={{ padding: 4, fontSize: 12 }}><b>{T("الخلافة", "Succession")}</b><Badge tone={succ.flaggedCount ? "danger" : "green"}>{succ.flaggedCount ? succ.flaggedCount + " " + T("مُعلَّم", "flagged") : T("✓ مستقر", "✓ stable")}</Badge></div></Card> : null}
        {audit && !audit.error ? <Card style={{ flex: "1 1 160px" }}><div className="row between" style={{ padding: 4, fontSize: 12 }}><b>{T("سلطة بلا تزييف", "No-fake authority")}</b><Badge tone={audit.allPass ? "green" : "danger"}>{audit.passed}/{audit.total}{audit.flowEnforced ? " ✓" : ""}</Badge></div></Card> : null}
      </div>
      <span className="subtle" style={{ fontSize: 10 }}>{T("التدفّق: وكيل ← مدير ← عاصم ← المؤسس. المال/الرؤية/النشر للمؤسس فقط.", "Flow: SubAgent → Director → Assem → Founder. Money / vision / deploy stay founder-only.")}</span>
    </div>
  );
}
window.ExecCouncilPanel = ExecCouncilPanel;

// ---- CEO Learning tab: the daily education roadmap + the skill marketplace. ----
function CeoLearningPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  return (
    <div className="col" style={{ gap: 14 }}>
      <EducationRoadmapPanel lang={lang} />
      <SkillMarketplacePanel lang={lang} />
    </div>
  );
}
window.CeoLearningPanel = CeoLearningPanel;

// ---- Phase 14 — EXECUTIVE LEADERSHIP: every director as a LEADER (learns / teaches / plans / answers / improves). ----
function ExecLeadershipPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o == null ? "" : typeof o === "string" ? o : (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) || "");
  const DIRS = [["revenue", T("الإيراد", "Revenue")], ["customer_success", T("نجاح العملاء", "Customer Success")], ["data", T("البيانات", "Data")], ["marketing", T("القنوات", "Channel")], ["operations", T("العمليات", "Operations")], ["cto", T("التقنية", "CTO")]];
  const [dir, setDir] = React.useState("revenue");
  const board = useSupData(() => API.assem.executiveLeadershipBoard(), []);
  const review = useSupData(() => API.assem.directorSuccessionReview(), []);
  const audit = useSupData(() => API.assem.noFakeExecutiveIntelligence(), []);
  const learn = useSupData(() => API.assem.directorSelfLearning(dir), [dir]);
  const plan = useSupData(() => API.assem.departmentImprovementPlan(dir), [dir]);
  const train = useSupData(() => API.assem.directorTrainingResponsibility(dir), [dir]);
  const sboard = useSupData(() => API.assem.directorStrategicBoard(dir), [dir]);
  const flagLabel = (f) => ({ needs_coaching: T("يحتاج تدريباً قيادياً", "Needs coaching"), needs_training: T("يحتاج تدريب الفريق", "Needs training"), needs_review: T("يحتاج مراجعة", "Needs review") }[f] || f);
  const horizonLabel = (h) => ({ "30_day": T("30 يوم", "30-day"), "60_day": T("60 يوم", "60-day"), "90_day": T("90 يوم", "90-day") }[h] || h);
  const flagBy = {}; ((review && review.directors) || []).forEach((d) => { flagBy[d.director] = d.flags; });
  return (
    <div className="col" style={{ gap: 12 }}>
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("مجلس القادة التنفيذيين", "Executive Leadership Board")}</b>
        <span className="subtle" style={{ fontSize: 11 }}>{T("كل مدير كقائد: يتعلّم، يدرّب فريقه، يبني خطة 30/60/90، ويجيب باستراتيجية — بموافقة المؤسس.", "Every director as a leader: learns, trains its team, builds a 30/60/90 plan, answers strategically — founder-approved.")}</span>
        {board && !board.error ? (board.directors || []).map((p) => (
          <div key={p.director} className="col" style={{ gap: 1, borderInlineStart: "2px solid var(--border-1)", paddingInlineStart: 7, marginTop: 2 }}>
            <div className="row between" style={{ fontSize: 11.5 }}>
              <span style={{ fontWeight: 700 }}>{L(p.label)}</span>
              <span>{p.performance && p.performance.overall != null ? p.performance.overall : "—"} <b>{p.performance ? p.performance.grade || "" : ""}</b></span>
            </div>
            <div className="row" style={{ gap: 5, flexWrap: "wrap", fontSize: 10 }}>
              <span className="subtle">{T("تعلّم", "learn")}: {p.learning ? p.learning.lessons + p.learning.recommendations : 0}</span>
              <span className="subtle">· {T("تدريب", "train")}: {p.training ? p.training.needTraining : 0}/{p.training ? p.training.agents : 0}</span>
              <span className="subtle">· {T("خطة", "plan")}: {p.plan ? p.plan.realHorizons : 0}/3</span>
              {(flagBy[p.director] || []).map((f) => <Badge key={f} tone="orange">{flagLabel(f)}</Badge>)}
            </div>
          </div>
        )) : <span className="subtle" style={{ fontSize: 11 }}>{board && board.error ? "—" : T("جارٍ تجميع مجلس القادة…", "Convening the leadership board…")}</span>}
        <div className="row" style={{ gap: 6, flexWrap: "wrap", marginTop: 4 }}>
          {audit && !audit.error ? <Badge tone={audit.allPass ? "green" : "danger"}>{T("ذكاء بلا تزييف", "No-fake exec intel")} {audit.passed}/{audit.total}{audit.flowEnforced ? " ✓" : ""}</Badge> : null}
          {review && !review.error ? <Badge tone={review.flaggedCount ? "orange" : "green"}>{review.flaggedCount ? review.flaggedCount + " " + T("للمراجعة", "flagged") : T("✓ كل المديرين مستقرّون", "✓ all stable")}</Badge> : null}
        </div>
      </div></Card>

      {/* per-director deep view */}
      <Card><div className="col" style={{ gap: 7, padding: 4 }}>
        <div className="chipscroll" style={{ gap: 5 }}>
          {DIRS.map(([k, lbl]) => (
            <button key={k} onClick={() => setDir(k)} style={{ flexShrink: 0, fontSize: 11, padding: "4px 9px", borderRadius: 7, border: "1px solid var(--border-1)", background: dir === k ? "var(--color-primary-tint-soft)" : "#fff", color: dir === k ? "var(--color-secondary)" : "var(--fg-2)", fontWeight: dir === k ? 700 : 600, cursor: "pointer" }}>{lbl}</button>
          ))}
        </div>

        {/* SELF-LEARNING */}
        {learn && !learn.error ? (
          <div className="col" style={{ gap: 3 }}>
            <span style={{ fontSize: 11.5, fontWeight: 700 }}>{T("ماذا تعلّم هذا المدير", "What this director learned")} <Badge tone={learn.confidence === "measured" ? "green" : "neutral"}>{learn.confidence === "measured" ? T("مقيس", "measured") : T("لا بيانات كافية", "NED")}</Badge></span>
            {learn.counts ? <span className="subtle" style={{ fontSize: 10.5 }}>{T("دروس", "lessons")} {learn.counts.lessons} · {T("أخطاء", "mistakes")} {learn.counts.mistakes} · {T("فرص", "opps")} {learn.counts.opportunities} · {T("توصيات", "recs")} {learn.counts.recommendations} · {T("مواضيع تدريب", "training")} {learn.counts.trainingTopics}</span> : null}
            {(learn.mistakes || []).slice(0, 2).map((m, i) => <div key={i} style={{ fontSize: 10.5 }}>✗ <span className="subtle">{L(m.mistake)}</span></div>)}
            {(learn.opportunities || []).slice(0, 2).map((o, i) => <div key={i} style={{ fontSize: 10.5 }}>★ <span className="subtle">{L(o.opportunity)}</span></div>)}
          </div>
        ) : null}

        {/* 30/60/90 PLAN */}
        {plan && !plan.error ? (
          <div className="col" style={{ gap: 3, marginTop: 2 }}>
            <span style={{ fontSize: 11.5, fontWeight: 700 }}>{T("خطة التحسين 30/60/90", "30 / 60 / 90 improvement plan")}</span>
            {(plan.horizons || []).map((h, i) => (
              <div key={i} className="row between" style={{ fontSize: 10.5 }}>
                <span style={{ fontWeight: 700, minWidth: 52 }}>{horizonLabel(h.horizon)}</span>
                <span style={{ flex: "1 1 auto", textAlign: "end", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginInlineStart: 8 }} className="subtle">{h.status === "not_enough_data" ? T("لا بيانات كافية", "NED") : L(h.objective)}</span>
              </div>
            ))}
          </div>
        ) : null}

        {/* TRAINING RESPONSIBILITY */}
        {train && !train.error ? (
          <div className="col" style={{ gap: 2, marginTop: 2 }}>
            <span style={{ fontSize: 11.5, fontWeight: 700 }}>{T("مسؤولية التدريب", "Training responsibility")} <span className="subtle" style={{ fontSize: 10.5 }}>· {train.needTrainingCount}/{train.agentCount} {T("يحتاجون تدريباً", "need training")}</span></span>
            {(train.agents || []).filter((a) => a.weakAreas && a.weakAreas.length).slice(0, 3).map((a, i) => (
              <div key={i} style={{ fontSize: 10.5 }}><b>{a.name}</b> <span className="subtle">— {a.weakAreas.map((w) => w.area).join(", ")}</span></div>
            ))}
          </div>
        ) : null}

        {/* STRATEGIC BOARD */}
        {sboard && !sboard.error ? (
          <div className="col" style={{ gap: 2, marginTop: 2 }}>
            <span style={{ fontSize: 11.5, fontWeight: 700 }}>{T("التفكير الاستراتيجي", "Strategic thinking")} <span className="subtle" style={{ fontSize: 10.5 }}>· {sboard.measuredCount}/{sboard.total} {T("مدعومة بأدلة", "evidence-backed")}</span></span>
            {(sboard.answers || []).slice(0, 4).map((a, i) => (
              <div key={i} className="row between" style={{ fontSize: 10.5 }}>
                <span style={{ flex: "0 0 auto", maxWidth: "55%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{L(a.question)}</span>
                <Badge tone={a.confidence === "measured" ? "green" : a.confidence === "estimate" ? "orange" : "neutral"}>{a.confidence === "measured" ? T("مقيس", "measured") : a.confidence === "estimate" ? T("تقدير", "estimate") : T("لا بيانات", "NED")}</Badge>
              </div>
            ))}
          </div>
        ) : null}
      </div></Card>
      <span className="subtle" style={{ fontSize: 10 }}>{T("القائد: يتعلّم ← يدرّب ← يخطّط ← يجيب ← يتحسّن. كل توصية بدليل وموافقة المؤسس؛ لا تنفيذ تلقائي.", "A leader: learns → trains → plans → answers → improves. Every recommendation carries evidence + founder approval; nothing auto-executes.")}</span>
    </div>
  );
}
window.ExecLeadershipPanel = ExecLeadershipPanel;

// ---- Phase 15 — TRUSTED ADVISOR: trust / relationship / referral / advisory / occasion / custom-request, simple. ----
function TrustedAdvisorPanel({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const L = (o) => (o == null ? "" : typeof o === "string" ? o : (lang === "ar" ? (o.ar || o.en) : (o.en || o.ar)) || "");
  const board = useSupData(() => API.assem.trustedAdvisor(), []);
  const life = useSupData(() => API.assem.relationshipLifecycle(), []);
  const advisors = useSupData(() => API.assem.humanAdvisorScores(), []);
  const referrals = useSupData(() => API.assem.referralIntelligence(), []);
  const occ = useSupData(() => API.assem.occasionIntelligence(), []);
  const reqs = useSupData(() => API.assem.customRequestQueue(), []);
  const kpis = useSupData(() => API.assem.advisoryKpis(), []);
  const bal = useSupData(() => API.assem.salesTrustBalance(), []);
  const audit = useSupData(() => API.assem.noFakeTrustAudit(), []);
  const [busy, setBusy] = React.useState(null);
  const stageLabel = { new: T("جديد", "New"), interested: T("مهتم", "Interested"), qualified: T("مؤهَّل", "Qualified"), customer: T("عميل", "Customer"), trusted: T("موثوق", "Trusted"), vip: T("كبار", "VIP"), advocate: T("مُناصِر", "Advocate") };
  const gradeColor = (g) => (!g ? "var(--fg-4)" : /^A/.test(g) ? "var(--color-green)" : g === "B" ? "#3f7d20" : g === "C" ? "var(--color-orange)" : "var(--color-danger)");
  const submit = async (id) => { setBusy(id); try { await API.assem.submitCustomRequest(id); } catch {} finally { setBusy(null); } };
  const kp = (v, suffix = "") => (v == null ? "—" : v + suffix);
  return (
    <div className="col" style={{ gap: 12 }}>
      {/* HEADLINE — trust before revenue */}
      <Card><div className="col" style={{ gap: 6, padding: 4 }}>
        <b style={{ fontSize: 13 }}>{T("المستشار الموثوق", "Trusted Advisor")}</b>
        <span className="subtle" style={{ fontSize: 11 }}>{T("الثقة قبل الإيراد — يشعر العميل أن الوكيل يريد مساعدته لا بيعه.", "Trust before revenue — the customer feels the agent wants to help, not sell.")}</span>
        {board && !board.error ? (
          <div className="row" style={{ gap: 6, flexWrap: "wrap", marginTop: 2 }}>
            <Badge tone="neutral">{T("درجة المستشار", "Advisor score")}: <b>{board.advisorScore == null ? "—" : board.advisorScore}</b></Badge>
            <Badge tone="neutral">{T("العملاء", "Customers")}: {board.totalCustomers}</Badge>
            <Badge tone="green">{T("جاهزون للإحالة", "Referral-ready")}: {board.referralsReady}</Badge>
            <Badge tone="neutral">{T("مناسبات قادمة", "Occasions")}: {board.occasionsUpcoming}</Badge>
            <Badge tone={board.noFakeTrust && board.noFakeTrust.allPass ? "green" : "danger"}>{T("ثقة بلا تزييف", "No-fake trust")} {board.noFakeTrust ? board.noFakeTrust.passed + "/" + board.noFakeTrust.total : "—"}</Badge>
          </div>
        ) : <span className="subtle" style={{ fontSize: 11 }}>{board && board.error ? "—" : T("جارٍ التحميل…", "Loading…")}</span>}
      </div></Card>

      {/* RELATIONSHIP LADDER */}
      {life && !life.error ? (
        <Card><div className="col" style={{ gap: 5, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("سلّم العلاقة", "Relationship ladder")} <span className="subtle" style={{ fontSize: 10.5 }}>· {life.total} {T("عميل", "customers")}</span></b>
          <div className="row" style={{ gap: 5, flexWrap: "wrap" }}>
            {(life.stages || []).map((s) => (
              <div key={s} className="card" style={{ flex: "1 1 60px", minWidth: 56, padding: 6, textAlign: "center" }}>
                <div style={{ fontSize: 15, fontWeight: 800 }}>{life.counts ? life.counts[s] : 0}</div>
                <div className="subtle" style={{ fontSize: 9.5 }}>{stageLabel[s]}</div>
              </div>
            ))}
          </div>
        </div></Card>
      ) : null}

      {/* HUMAN ADVISOR SCORES */}
      {advisors && !advisors.error ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("درجات المستشار الإنساني", "Human Advisor Scores")} <span className="subtle" style={{ fontSize: 10.5 }}>· {advisors.measuredCount || 0} {T("مقيس", "measured")}</span></b>
          {(advisors.ranked || []).slice(0, 5).map((a) => (
            <div key={a.agentId} className="row between" style={{ fontSize: 11.5 }}>
              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "62%" }}>{a.label}</span>
              <span>{a.overall == null ? "—" : a.overall} <b style={{ color: gradeColor(a.grade) }}>{a.grade || ""}</b></span>
            </div>
          ))}
          {!(advisors.ranked || []).length ? <span className="subtle" style={{ fontSize: 11 }}>{T("لا بيانات كافية بعد (٣ محادثات مقيسة لكل وكيل).", "Not enough data yet (3 scored conversations per agent).")}</span> : null}
        </div></Card>
      ) : null}

      {/* KPIs + BALANCE */}
      {kpis && !kpis.error ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("مؤشّرات استشارية", "Advisory KPIs")}</b>
          <div className="row" style={{ gap: 5, flexWrap: "wrap", fontSize: 10.5 }}>
            <Badge tone="neutral">{T("الثقة", "Trust")}: {kp(kpis.trustScoreAvg)}</Badge>
            <Badge tone="neutral">{T("العلاقة", "Relationship")}: {kp(kpis.relationshipScoreAvg)}</Badge>
            <Badge tone="neutral">{T("القيمة الدائمة", "CLV")}: {kp(kpis.customerLifetimeValue)}</Badge>
            <Badge tone="neutral">{T("معدّل العودة", "Return")}: {kp(kpis.customerReturnRate, "%")}</Badge>
            <Badge tone="neutral">{T("الولاء", "Loyalty")}: {kp(kpis.customerLoyaltyScore)}</Badge>
            <Badge tone="orange">{T("معدّل الإحالة", "Referral rate")}: {T("لا بيانات", "NED")}</Badge>
          </div>
          {bal && !bal.error && bal.balance ? (
            <span className="subtle" style={{ fontSize: 10.5 }}>{T("توازن الثقة/البيع", "Trust↔sales")}: {T("إغلاق عند ثقة منخفضة", "close@low-trust")} {kp(bal.balance.trustLow_close)} · {T("عالية", "high")} {kp(bal.balance.trustHigh_close)} · <b style={{ color: bal.trustSuppressesSales ? "var(--color-danger)" : "var(--color-green)" }}>{bal.verdict === "healthy" ? T("صحّي", "healthy") : bal.verdict === "investigate" ? T("للتحقّق", "investigate") : T("لا بيانات", "NED")}</b></span>
          ) : null}
        </div></Card>
      ) : null}

      {/* OCCASIONS — warm, non-selling */}
      {occ && !occ.error && (occ.upcoming || []).length ? (
        <Card><div className="col" style={{ gap: 3, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("مناسبات لبناء العلاقة (بلا بيع)", "Relationship occasions (no selling)")}</b>
          {(occ.upcoming || []).slice(0, 4).map((o, i) => (
            <div key={i} className="row between" style={{ fontSize: 11 }}><span>{L(o.label)}{o.approx ? " ~" : ""}</span><span className="subtle">{T("خلال", "in")} {o.inDays} {T("يوم", "d")}</span></div>
          ))}
          <span className="subtle" style={{ fontSize: 10, color: "var(--color-orange)" }}>{T("تهنئة دافئة فقط — ممنوع أي عرض أو سعر أو رابط.", "Warm greeting only — no offer / price / link allowed.")}</span>
        </div></Card>
      ) : null}

      {/* REFERRAL OPPORTUNITIES */}
      {referrals && !referrals.error && (referrals.opportunities || []).length ? (
        <Card><div className="col" style={{ gap: 3, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("فرص الإحالة (بموافقة)", "Referral opportunities (approval)")} <span className="subtle" style={{ fontSize: 10.5 }}>· {referrals.readyCount}</span></b>
          {(referrals.opportunities || []).slice(0, 5).map((r) => (
            <div key={r.contactId} className="row between" style={{ fontSize: 11 }}><span>{r.name}</span><Badge tone="green">{r.score}</Badge></div>
          ))}
        </div></Card>
      ) : null}

      {/* CUSTOM REQUESTS — analyse, never reject */}
      {reqs && !reqs.error && (reqs.requests || []).length ? (
        <Card><div className="col" style={{ gap: 4, padding: 4 }}>
          <b style={{ fontSize: 12.5 }}>{T("طلبات مخصّصة (تحليل لا رفض)", "Custom requests (analyse, never reject)")} <span className="subtle" style={{ fontSize: 10.5 }}>· {reqs.count}</span></b>
          {(reqs.requests || []).slice(0, 6).map((r) => (
            <div key={r.id} className="row between" style={{ fontSize: 11, gap: 6 }}>
              <span style={{ flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.company || r.categoryLabel} <span className="subtle">· {r.score == null ? "—" : r.score}/100</span></span>
              <button onClick={() => submit(r.id)} disabled={busy === r.id || r.status !== "new"} style={{ flexShrink: 0, fontSize: 10.5, padding: "3px 9px", borderRadius: 7, border: "1px solid var(--border-1)", background: r.status === "new" ? "var(--color-secondary)" : "var(--bg-2)", color: r.status === "new" ? "#fff" : "var(--fg-3)", fontWeight: 700, cursor: r.status === "new" ? "pointer" : "default" }}>{busy === r.id ? "…" : r.status === "new" ? T("ارفع للموافقة", "Submit") : T("مُرسَل", "Sent")}</button>
            </div>
          ))}
        </div></Card>
      ) : null}

      <span className="subtle" style={{ fontSize: 10 }}>{T("كل توصية بدليل وموافقة المؤسس؛ قيمة الإحالة لا تُلفَّق؛ لا رسالة تُرسَل تلقائياً.", "Every recommendation carries evidence + founder approval; referral value is never fabricated; nothing auto-sends.")}</span>
    </div>
  );
}
window.TrustedAdvisorPanel = TrustedAdvisorPanel;

// ---- AssemSupreme — the ASSEM/CEO area in HEAD: Chat + Company Status + Executive Brief + capabilities. ----
function AssemSupreme({ lang }) {
  const T = (ar, en) => (lang === "ar" ? ar : en);
  const [tab, setTab] = useSupState("chat");
  // Plain-language tabs (no jargon): Chat = talk to Assem · Company Status = how directors/company are doing · What Assem Can Do = capabilities & limits.
  const TABS = [["chat", T("محادثة", "Chat")], ["pilot", T("الطيار", "Pilot")], ["feedback", T("ملاحظات الطيار", "Pilot Feedback")], ["ops", T("العمليات", "Operations")], ["company", T("الشركة المستقلة", "Autonomy")], ["intel", T("ذكاء الأعمال", "Intelligence")], ["discounts", T("الخصومات", "Discounts")], ["executive", T("الموجز التنفيذي", "Executive Brief")], ["council", T("المجلس التنفيذي", "Council")], ["leadership", T("القيادة التنفيذية", "Leadership")], ["warroom", T("غرفة العمليات", "War Room")], ["growth", T("النمو", "Growth")], ["science", T("علم البيع", "Sales Science")], ["advisor", T("المستشار الموثوق", "Trusted Advisor")], ["revlearning", T("التعلّم والإيراد", "Revenue Learning")], ["learning", T("تعلّم عاصم", "CEO Learning")], ["command", T("حالة الشركة", "Company Status")], ["capabilities", T("ماذا يفعل عاصم", "What Assem Can Do")]];
  return (
    <div className="col" style={{ gap: 12 }}>
      <div className="chipscroll" style={{ gap: 6 }}>
        {TABS.map(([k, lbl]) => (
          <button key={k} onClick={() => setTab(k)} style={{ flexShrink: 0, fontSize: 12, padding: "5px 11px", borderRadius: 8, border: "1px solid var(--border-1)", background: tab === k ? "var(--color-primary-tint-soft)" : "#fff", color: tab === k ? "var(--color-secondary)" : "var(--fg-2)", fontWeight: tab === k ? 700 : 600, cursor: "pointer" }}>{lbl}</button>
        ))}
      </div>
      {tab === "chat" ? <AssemScreen embedded /> : null}
      {tab === "pilot" ? <PilotDashboardView lang={lang} /> : null}
      {tab === "feedback" ? <PilotFeedbackView lang={lang} /> : null}
      {tab === "ops" ? <PostSaleOpsView lang={lang} /> : null}
      {tab === "company" ? <AutonomyView lang={lang} /> : null}
      {tab === "intel" ? <IntelligenceView lang={lang} /> : null}
      {tab === "discounts" ? <DiscountsView lang={lang} /> : null}
      {tab === "executive" ? <AssemExecutivePanel lang={lang} /> : null}
      {tab === "council" ? <ExecCouncilPanel lang={lang} /> : null}
      {tab === "leadership" ? <ExecLeadershipPanel lang={lang} /> : null}
      {tab === "warroom" ? <ExecutionWarRoomPanel lang={lang} /> : null}
      {tab === "growth" ? <GrowthOpsPanel lang={lang} /> : null}
      {tab === "science" ? <SalesSciencePanel lang={lang} /> : null}
      {tab === "advisor" ? <TrustedAdvisorPanel lang={lang} /> : null}
      {tab === "revlearning" ? <RevenueFirstPanel lang={lang} /> : null}
      {tab === "learning" ? <CeoLearningPanel lang={lang} /> : null}
      {tab === "command" ? <CommandCenterPanel lang={lang} /> : null}
      {tab === "capabilities" ? <CapabilityPanel lang={lang} /> : null}
    </div>
  );
}
window.AssemSupreme = AssemSupreme;
// Expose the analytics panels so the DATA section renders them (they moved OUT of HEAD into DATA).
window.BrainPanel = BrainPanel; window.GrowthPanel = GrowthPanel; window.StrategicPanel = StrategicPanel;
window.AlertsV2Panel = AlertsV2Panel; window.DirectorTrainingPanel = DirectorTrainingPanel; window.DeployAdvisorPanel = DeployAdvisorPanel;