// landing-governance.jsx — "AI Governance & Guardrails" section.
// Replaces the old comparison table. Pill tabs switch the left-column copy;
// the right column shows a canvas orbit demo (safe requests accepted into the
// protected ring, unsafe ones blocked + deflected) with a live status card.
// Vanilla canvas + rAF — no framer-motion dependency. Exports window.Governance.

(function () {
  const useGovT = () => {
    const i18n = (typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n) || null;
    const [, force] = useState(0);
    useEffect(() => {
      if (!i18n) return;
      return i18n.subscribe(() => force((v) => v + 1));
    }, [i18n]);
    return (k, fb) => i18n ? i18n.t(k, fb) : fb;
  };

  /* ---------- copy per tab ---------- */
  const TABS = [
  {
    key: "permissions",
    pill: "Permissions",
    title: "Decide what every agent can touch",
    desc: "Define exactly what each WisAI agent can access, change, and execute by organisation, and individual.",
    body: "Set clear access rules for every AI action. WisAI can be configured to stay disabled, require human approval, or execute approved tasks automatically based on your organisation's governance policy.",
    cta: "Explore permissions"
  },
  {
    key: "zdr",
    pill: "Zero Data Retention",
    title: "None of your proprietary data gets stored or trained on AI models",
    desc: "We only work with zero data retention (ZDR) model providers, so none of your data is stored on their servers or used to train AI models.",
    body: "WisAI processes your prompts, documents, SOPs, vendor data and operational records solely for the task you requested. Anything Wisbid stores sits on ISO 27001 and SOC 2 certified cloud infrastructure.",
    cta: "See data handling"
  },
  {
    key: "audit",
    pill: "Source & audit",
    title: "Full visibility over every AI decision",
    desc: "Every WisAI action is logged from start to finish — reviewable long after the work is closed.",
    body: "The trail captures who prompted it, what data was referenced, what was recommended, what action was taken, and who approved it.",
    cta: "Review the audit trail"
  }];


  /* ---------- permission control flow ---------- */
  function PermissionControlFlow() {
    const t = useGovT();

    return (
      <div className="gv-flow" aria-label={t("gov.flow.aria", "Organisation and user permission controls govern every agent tool call")}>
        <div className="gv-sequence">
          <div className="gv-sequence-top">
            <span>{t("gov.flow.org.label", "Organisation settings")}</span>
            <strong>{t("gov.flow.sequence.title", "Permission check")}</strong>
          </div>

          <div className="gv-sequence-stage">
            <div className="gv-step-screen gv-step-screen--call">
              <div className="gv-step-icon is-amber"><Icon name="send" size={20} /></div>
              <span>{t("gov.flow.action.label", "Agent tool call")}</span>
              <h4>{t("gov.flow.action.title", "Draft Gmail message")}</h4>
              <p>{t("gov.flow.action.meta", "Requested by WisAI")}</p>
              <div className="gv-step-service">
                <img src="assets/gmail-icon.svg" alt="" />
                <b>{t("gov.flow.connector.title", "Gmail")}</b>
                <em>{t("gov.flow.connected", "Connected")}</em>
              </div>
            </div>

            <div className="gv-step-screen gv-step-screen--org">
              <div className="gv-step-icon"><Icon name="building" size={20} /></div>
              <span>{t("gov.flow.org.label", "Organisation settings")}</span>
              <h4>{t("gov.flow.org.title", "Maximum allowed")}</h4>
              <div className="gv-step-rules">
                <div><span>{t("gov.flow.org.rule1", "Search Gmail")}</span><b className="is-on">{t("gov.flow.on", "On")}</b></div>
                <div className="is-emphasis"><span>{t("gov.flow.org.rule2", "Draft Gmail")}</span><b>{t("gov.flow.review", "Review")}</b></div>
              </div>
            </div>

            <div className="gv-step-screen gv-step-screen--user">
              <div className="gv-step-icon"><Icon name="users" size={20} /></div>
              <span>{t("gov.flow.user.label", "User setting")}</span>
              <h4>{t("gov.flow.user.title", "Operator account")}</h4>
              <div className="gv-step-toggle" aria-hidden="true">
                <span>{t("gov.flow.off", "Off")}</span>
                <span className="is-active">{t("gov.flow.review", "Review")}</span>
                <span className="is-disabled">{t("gov.flow.on", "On")}</span>
              </div>
              <p>{t("gov.flow.user.note", "Org limit caps this action at Review.")}</p>
            </div>

            <div className="gv-step-screen gv-step-screen--result">
              <div className="gv-step-icon is-green"><Icon name="check" size={22} /></div>
              <span>{t("gov.flow.result.label", "Effective permission")}</span>
              <h4>{t("gov.flow.result.title", "Review required")}</h4>
              <p>{t("gov.flow.result.meta", "Approval before sending")}</p>
            </div>
          </div>

          <div className="gv-sequence-rail" aria-hidden="true">
            <span>{t("gov.flow.rail.call", "Call")}</span>
            <span>{t("gov.flow.rail.org", "Org")}</span>
            <span>{t("gov.flow.rail.user", "User")}</span>
            <span>{t("gov.flow.rail.result", "Result")}</span>
          </div>
        </div>
      </div>);
  }

  /* ---------- section ---------- */
  const Governance = () => {
    const tUi = useGovT();
    const [tab, setTab] = useState(0);
    const tabs = TABS.map((tb) => ({
      ...tb,
      pill: tUi(`gov.${tb.key}.pill`, tb.pill),
      title: tUi(`gov.${tb.key}.title`, tb.title),
      desc: tUi(`gov.${tb.key}.desc`, tb.desc),
      body: tUi(`gov.${tb.key}.body`, tb.body),
      cta: tUi(`gov.${tb.key}.cta`, tb.cta),
    }));
    const t = tabs[tab];

    return (
      <section className="lp-section gv-section" id="compare">
        <div className="lp-shell">
          <div className="gv-head lp-reveal">
            <span className="lp-eyebrow"><span className="num">07</span>{tUi("gov.eyebrow", "AI governance and guardrails")}</span>
            <h2 className="is-large">{tUi("gov.headline", "Secure AI adoption, with controls built in")}</h2>
          </div>

          <div className="gv-tabs lp-reveal" data-stagger="1" role="tablist">
            {tabs.map((tb, i) =>
            <button
              key={tb.key}
              role="tab"
              aria-selected={tab === i}
              className={`gv-tab ${tab === i ? "is-active" : ""}`}
              onClick={() => setTab(i)}>
              
                {tb.pill}
              </button>
            )}
          </div>

          <div className="gv-grid">
            <div className="gv-copy" key={t.key}>
              <h3>{t.title}</h3>
              <p className="gv-desc">{t.desc}</p>
              <p className="gv-body">{t.body}</p>
              {t.key !== "permissions" && t.key !== "zdr" && (
                <a href="#cta" className="gv-cta" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("wisbid:demo"));}}>
                  {t.cta}<Icon name="arrow-right" size={16} />
                </a>
              )}
            </div>

            <div className="gv-visual lp-reveal" data-stagger="3">
              {tab === 2 && window.AuditTrail ? (
                <AuditTrail />
              ) : tab === 1 && window.ZdrBeam ? (
                <window.ZdrBeam />
              ) : tab === 1 && window.ZdrFlow ? (
                <ZdrFlow />
              ) : window.PermissionFlow ? (
                <window.PermissionFlow />
              ) : (
                <PermissionControlFlow />
              )}
            </div>
          </div>
        </div>
      </section>);

  };

  window.Governance = Governance;
})();