/* ReportMock — a faux "living report" platform view used as the hero product
   shot and in "What you get". Built like clear technical documentation:
   left doc-nav + a ranked process inventory with mono match scores. */
const { Badge, MatchScore } = window.AIScanDesignSystem_81b9d1;

const REPORT_NAV = [
  "Technology landscape",
  "Process inventory",
  "Opportunity map",
  "Recommendations",
  "What not to do",
];

const PROCESSES = [
  { name: "Invoice reconciliation", tag: "Finance", score: 9.2, note: "High volume, rules-based, well-documented." },
  { name: "Customer support triage", tag: "Operations", score: 8.6, note: "Repetitive intake, clear escalation paths." },
  { name: "Supplier onboarding", tag: "Procurement", score: 7.1, note: "Moderate volume, some judgement required." },
  { name: "Quarterly board reporting", tag: "Leadership", score: 4.3, note: "Low volume, high context — park for now." },
];

function ReportMock({ compact = false }) {
  return (
    <div className={"ls-report" + (compact ? " ls-report--compact" : "")} role="img" aria-label="Illustrative preview of the AI Scan living report: a ranked inventory of business processes with AI-suitability match scores.">
      <div className="ls-report__chrome">
        <span className="ls-report__dot" /><span className="ls-report__dot" /><span className="ls-report__dot" />
      </div>
      <div className="ls-report__body">
        <aside className="ls-report__nav">
          <div className="ls-report__navlabel">Living report</div>
          {REPORT_NAV.map((s, i) => (
            <a key={s} className={"ls-report__navitem" + (i === 1 ? " is-active" : "")} href="#" tabIndex={-1} onClick={(e) => e.preventDefault()}>
              <span className="ls-report__navnum">{String(i + 1).padStart(2, "0")}</span>{s}
            </a>
          ))}
        </aside>
        <section className="ls-report__main">
          <div className="ls-report__crumb">02 · Process inventory</div>
          <h4 className="ls-report__title">Ranked by pain × volume × AI suitability</h4>
          <div className="ls-report__list">
            {PROCESSES.map((p) => (
              <div key={p.name} className="ls-proc">
                <div className="ls-proc__left">
                  <div className="ls-proc__name">{p.name}</div>
                  <div className="ls-proc__note">{p.note}</div>
                </div>
                <div className="ls-proc__meta">
                  <Badge tone="neutral">{p.tag}</Badge>
                  <MatchScore value={p.score.toFixed(1)} size="sm" tone={p.score >= 8 ? "high" : p.score < 5 ? "default" : "accent"} />
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
window.ReportMock = ReportMock;