function CoreTrustScreen({ dataset, checkedIn }) {
  const coreRows = dataset.coreSignals.map((signalItem, index) => [
    `AUD-${1048 + index}`,
    signalItem,
    index < 2 || checkedIn ? <Badge tone="green">Recorded</Badge> : <Badge tone="blue">Prepared</Badge>
  ]);
  return (
    <div className="stack" data-screen-label="OVO Core Trust Layer">
      <div>
        <div className="section-label">Shared foundation layer</div>
        <h1 className="page-title">Core makes the sales story credible</h1>
        <p className="muted">This layer is visualised for buyers; it is not a live backend in the prototype.</p>
      </div>
      <div className="grid three-col">
        <Card className="card-pad"><Badge tone="blue">Identity</Badge><h3>One person, product-specific memberships</h3><p className="muted">Access is evaluated by tenant, product, role, permission, resource, and action.</p></Card>
        <Card className="card-pad"><Badge tone="teal">Tenant isolation</Badge><h3>PostgreSQL RLS from day one</h3><p className="muted">Every business table is tenant-scoped and fails closed without context.</p></Card>
        <Card className="card-pad"><Badge tone="green">Device binding</Badge><h3>Public-key verification</h3><p className="muted">Private keys remain on device; server verifies signed attendance payloads.</p></Card>
      </div>
      <div className="grid dashboard-grid">
        <Card className="card-pad">
          <h2>Audit trail for {dataset.courseCode}</h2>
          <DataTable columns={["Event ID", "Core Signal", "State"]} rows={coreRows} />
        </Card>
        <Card className="card-pad">
          <h2>Realtime is not authoritative</h2>
          <Timeline items={[
            { title: "Client receives token", detail: "Only server-authorised sessions can be queued." },
            { title: "Signed payload submitted", detail: "Device key, location, nonce, and enrolment are checked." },
            { title: "Database records state", detail: "PostgreSQL remains the system of record." },
            { title: "WebSocket notifies dashboards", detail: "Clients re-fetch authoritative state after reconnect." }
          ]} />
        </Card>
      </div>
    </div>
  );
}

function WorkforceScreen({ dataset }) {
  const employeeRows = dataset.workforce.map((employeeItem) => [
    employeeItem.name,
    employeeItem.team,
    employeeItem.shift,
    <Badge tone={employeeItem.state === "Checked In" ? "green" : employeeItem.state === "Pending" ? "gold" : "blue"}>{employeeItem.state}</Badge>,
    employeeItem.location
  ]);
  const webPortal = (
    <div className="stack">
      <div>
        <div className="section-label">Independent Workforce product</div>
        <h1 className="page-title">Workforce serves universities and any organisation with employees</h1>
        <p className="muted">Shown as a secondary preview in v1. CampusOS remains the main sales path.</p>
      </div>
      <div className="grid metric-grid">
        <MetricCard label="Departments" value="3" detail={dataset.workforceUnit} tone="purple" chip="Unit" />
        <MetricCard label="Checked in" value="2" detail="Morning shift" tone="green" chip="Now" />
        <MetricCard label="Pending" value="1" detail="Admin Office" tone="gold" chip="Action" />
        <MetricCard label="Reports" value="12" detail="This month" tone="blue" chip="Export" />
      </div>
      <Card className="card-pad">
        <h2>Workforce attendance snapshot</h2>
        <DataTable columns={["Employee", "Department", "Shift", "Status", "Location"]} rows={employeeRows} />
      </Card>
    </div>
  );
  const mobileApp = <WorkforceMobileApp dataset={dataset} />;
  return (
    <SurfaceSwitcher
      defaultSurface="web"
      screenLabel="Workforce Preview"
      surfaces={[
        {
          key: "web",
          label: "Web Portal",
          title: "Workforce Web Portal",
          description: "Supervisor and operations view for departments, shifts, attendance, and reports.",
          render: () => webPortal
        },
        {
          key: "mobile",
          label: "Mobile App",
          title: "Workforce Mobile App",
          description: "Dedicated Workforce app with employee and supervisor role-based login.",
          panelClassName: "mobile-surface",
          render: () => mobileApp
        }
      ]}
    />
  );
}

function IntegrationScreen({ dataset }) {
  return (
    <div className="stack" data-screen-label="CampusOS Workforce Integration">
      <div>
        <div className="section-label">Secure cross-product integration</div>
        <h1 className="page-title">CampusOS does not duplicate non-academic staff management</h1>
        <p className="muted">A university can enable Workforce for employees while CampusOS owns academic operations.</p>
      </div>
      <div className="grid three-col">
        <Card className="card-pad">
          <Badge tone="teal">CampusOS</Badge>
          <h3>Academic domain</h3>
          <p className="muted">Students, lecturers, courses, timetables, eligibility, academic reports.</p>
        </Card>
        <Card className="card-pad">
          <Badge tone="blue">Secure APIs</Badge>
          <h3>Product boundary</h3>
          <p className="muted">Tenant, product entitlement, role, and audit context travel with requests.</p>
        </Card>
        <Card className="card-pad">
          <Badge tone="purple">Workforce</Badge>
          <h3>Employee domain</h3>
          <p className="muted">Departments, employees, shifts, staff check-in/out, supervisor approvals.</p>
        </Card>
      </div>
      <Card className="card-pad">
        <h2>Greenfield University integration example</h2>
        <DataTable columns={["Need", "Correct Product", "Reason"]} rows={[
          ["Student attendance for CSC 201", "CampusOS", "Academic course and enrolment ownership"],
          ["Lecturer live session monitoring", "CampusOS", "Course attendance context"],
          ["Security staff shift check-in", "Workforce", "Employee schedule and department ownership"],
          ["University executive summary", "CampusOS + Workforce APIs", "Aggregated only through approved product contracts"]
        ]} />
      </Card>
    </div>
  );
}

function RoadmapScreen() {
  return (
    <div className="stack" data-screen-label="Ecosystem Roadmap">
      <div>
        <div className="section-label">Future ecosystem</div>
        <h1 className="page-title">A family of products built on the same Core</h1>
        <p className="muted">These items are roadmap direction, not Phase 1 operating scope.</p>
      </div>
      <div className="grid three-col">
        {[
          ["OVO Visitor", "Visitor passes, approvals, and campus/office access workflows."],
          ["OVO HotelOS", "Hospitality workforce and property operations built on Core identity."],
          ["OVO HospitalOS", "Healthcare workforce and facility attendance operations."],
          ["OVO PropertyOS", "Property staff, vendors, and site attendance."],
          ["Smart Lock Integration", "Physical access signals connected through secure APIs."],
          ["Other Industry Solutions", "Future products reuse tenancy, roles, attendance, reporting, and audit."]
        ].map((roadmapItem) => (
          <Card className="card-pad" key={roadmapItem[0]}>
            <Badge tone="purple">Roadmap</Badge>
            <h3>{roadmapItem[0]}</h3>
            <p className="muted">{roadmapItem[1]}</p>
          </Card>
        ))}
      </div>
      <Card className="card-pad">
        <h2>Messaging guardrail</h2>
        <p className="muted">
          The sales prototype should say "built on OVO Core" and keep CampusOS and Workforce as independent products.
          Workforce is not the parent platform; Core is the neutral foundation.
        </p>
      </Card>
    </div>
  );
}

Object.assign(window, {
  CoreTrustScreen,
  WorkforceScreen,
  IntegrationScreen,
  RoadmapScreen
});