MobilityOps/frontend/src/pages/AboutDemo.tsx

import { Trans, useTranslation } from "react-i18next";
import { useAuth } from "../context/AuthContext";
import { useDemoGuide } from "../context/DemoGuideContext";
import { useDemoManifest } from "../context/DemoManifestContext";
import { useLocaleFormat } from "../i18n/format";
import { Icon } from "../components/Icons";
import { IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
import { PRODUCT_NAME } from "../product";

const INTEGRATION_ICON: Record<string, "n8n" | "rag" | "mcp"> = {
  n8n: "n8n",
  ragcore: "rag",
  mcp_hub: "mcp",
};

const N8N_STATUS_LABEL_KEY: Record<string, string> = {
  disabled: "notConnected",
  unavailable: "deliveryFailed",
  degraded: "retryAvailable",
  operational: "operational",
  no_evidence: "prepared",
};

export function AboutDemo() {
  const { t } = useTranslation(["demo", "integrations"]);
  const { formatDateTime } = useLocaleFormat();
  const { manifest, loading } = useDemoManifest();
  const { user } = useAuth();
  const { openGuide } = useDemoGuide();

  function statusLabelKey(key: string, statusCode: string): string {
    if (key === "n8n") return N8N_STATUS_LABEL_KEY[statusCode] ?? statusCode;
    return statusCode;
  }

  return (
    <div className="page">
      <PageHeader
        eyebrow={t("about.eyebrow")}
        title={t("about.title", { productName: PRODUCT_NAME })}
        description={manifest ? t("about.description", { orgName: manifest.organization_name }) : undefined}
      />

      {loading && <LoadingState label={t("about.loading")} />}

      {manifest && (
        <>
          {user?.role === "operations_manager" && (
            <section className="record-surface about-card about-cta">
              <div>
                <strong>{t("about.ctaTitle")}</strong>
                <p>{t("about.ctaBody")}</p>
              </div>
              <button type="button" className="button button-primary" onClick={openGuide}>
                <Icon name="spark" /> {t("about.ctaButton")}
              </button>
            </section>
          )}

          <section className="record-surface about-card">
            <h2>{t("about.problemTitle")}</h2>
            <p>{t("about.problemBody", { orgName: manifest.organization_name, productName: PRODUCT_NAME })}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.scopeTitle")}</h2>
            <p>{t("about.scopeBody", { productName: PRODUCT_NAME })}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.realTitle")}</h2>
            <p>{t("about.realBody")}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.syntheticTitle")}</h2>
            <p>{t("about.syntheticBody", { testDomain: ".test" })}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.architectureTitle")}</h2>
            <p>{t("about.architectureBody")}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.securityTitle")}</h2>
            <p>{t("about.securityBody")}</p>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.testingTitle")}</h2>
            <p>{t("about.testingBody")}</p>
          </section>

          <section aria-label={t("about.integrationsTitle")} className="record-surface">
            <SectionHeading title={t("about.integrationsTitle")} description={t("about.integrationsDescription")} />
            <div className="integration-cards">
              {manifest.integrations.map((integration) => (
                <article key={integration.key}>
                  <IntegrationMark kind={INTEGRATION_ICON[integration.key]} />
                  <div>
                    <span className="integration-kicker">
                      {t(`integrations:statusLabels.${statusLabelKey(integration.key, integration.status_code)}`)}
                    </span>
                    <h2>{t(`integrationSummary.titles.${integration.key}`, { ns: "demo" })}</h2>
                    <p>{t(`integrationSummary.${integration.detail_code}`, { ns: "demo", ...integration.detail_params })}</p>
                  </div>
                </article>
              ))}
            </div>
          </section>

          <section className="record-surface about-card">
            <h2>{t("about.resetTitle")}</h2>
            <p>
              <Trans
                i18nKey={user?.role === "operations_manager" ? "about.resetBodyManager" : "about.resetBodyEmployee"}
                t={t}
                values={{ when: manifest.last_reset_at ? formatDateTime(manifest.last_reset_at) : t("about.unknown") }}
                components={{ strong: <strong /> }}
              />
            </p>
          </section>

          <section className="access-note record-surface" aria-label={t("about.limitationsTitle")}>
            <Icon name="shield" />
            <p>
              <strong>{t("about.limitationsTitle")}</strong>
              <span>{t("about.limitationsBody")}</span>
            </p>
          </section>
        </>
      )}
    </div>
  );
}