function BrandMark({ compact = false }) {
  return (
    <div className="brand-lockup">
      <div className="brand-mark">OVO</div>
      {!compact && (
        <div>
          <div className="brand-title">OVO Platform</div>
          <div className="brand-subtitle">Core + CampusOS + Workforce</div>
        </div>
      )}
    </div>
  );
}

function Badge({ tone = "blue", children }) {
  return <span className={`badge ${tone}`}>{children}</span>;
}

const ovoIconPaths = {
  home: (<><path d="M3.5 11 12 4l8.5 7" /><path d="M6 9.8V20h12V9.8" /></>),
  calendar: (<><rect height="15.5" rx="2" width="16.5" x="3.75" y="5" /><path d="M3.75 9.6h16.5M8.2 3v3.4M15.8 3v3.4" /></>),
  chart: (<path d="M5 20v-7M12 20V5.5M19 20v-10" />),
  user: (<><circle cx="12" cy="8.2" r="3.6" /><path d="M5 19.8c1.4-3.3 4-4.9 7-4.9s5.6 1.6 7 4.9" /></>),
  users: (<><circle cx="9.2" cy="8.6" r="3.2" /><path d="M3.4 19.6c1.2-2.9 3.3-4.3 5.8-4.3s4.6 1.4 5.8 4.3" /><circle cx="17.2" cy="9.6" r="2.5" /><path d="M17.9 14.9c1.7.5 2.9 1.8 3.6 3.8" /></>),
  bell: (<><path d="M6.2 15.8v-5.2a5.8 5.8 0 0 1 11.6 0v5.2l1.7 2.4H4.5l1.7-2.4Z" /><path d="M9.9 20.7a2.3 2.3 0 0 0 4.2 0" /></>),
  grid: (<><rect height="6.4" rx="1.5" width="6.4" x="4" y="4" /><rect height="6.4" rx="1.5" width="6.4" x="13.6" y="4" /><rect height="6.4" rx="1.5" width="6.4" x="4" y="13.6" /><rect height="6.4" rx="1.5" width="6.4" x="13.6" y="13.6" /></>),
  clipboard: (<><rect height="15.6" rx="2" width="12.8" x="5.6" y="4.6" /><rect height="3.2" rx="1.2" width="5.8" x="9.1" y="2.9" /><path d="m9.4 12.6 2 2 3.4-3.7" /></>),
  pulse: (<path d="M3 12.5h3.6L9.2 6l4.4 12.4 2.4-5.9H21" />),
  alert: (<><path d="M12 4.2 21 19.4H3L12 4.2Z" /><path d="M12 10.2v3.6" /><circle cx="12" cy="16.6" fill="currentColor" r=".4" stroke="none" /><circle cx="12" cy="16.6" r="1" /></>),
  file: (<><path d="M6.5 3.5h7.2l4.8 4.8v12.2h-12V3.5Z" /><path d="M13.5 3.7v4.8h4.8M9.6 12.6h4.8M9.6 16h4.8" /></>),
  clock: (<><circle cx="12" cy="12" r="8.2" /><path d="M12 7.6V12l3 2" /></>),
  checkcircle: (<><circle cx="12" cy="12" r="8.2" /><path d="m8.4 12.3 2.4 2.4 4.8-5.2" /></>),
  check: (<path d="m5 12.6 4.4 4.4L19 7.4" />),
  live: (<><path d="M5.2 12.4a9.6 9.6 0 0 1 13.6 0" /><path d="M8.2 15.4a5.4 5.4 0 0 1 7.6 0" /><circle cx="12" cy="18.5" fill="currentColor" r="1.5" stroke="none" /></>),
  shield: (<><path d="M12 3.6 18.8 6v5.8c0 4.5-2.9 7.4-6.8 8.8-3.9-1.4-6.8-4.3-6.8-8.8V6L12 3.6Z" /><path d="m9.2 11.8 2 2 3.6-4" /></>),
  search: (<><circle cx="11" cy="11" r="6.4" /><path d="m15.8 15.8 4.4 4.4" /></>),
  chevronleft: (<path d="M14.6 5.6 8.2 12l6.4 6.4" />),
  chevronright: (<path d="m9.4 5.6 6.4 6.4-6.4 6.4" />),
  eye: (<><path d="M2.9 12S6.6 5.9 12 5.9 21.1 12 21.1 12 17.4 18.1 12 18.1 2.9 12 2.9 12Z" /><circle cx="12" cy="12" r="2.7" /></>),
  eyeoff: (<><path d="M4.5 8.2C3.4 9.5 2.9 12 2.9 12s3.7 6.1 9.1 6.1c1.6 0 3-.5 4.3-1.2M9 6.4A9.5 9.5 0 0 1 12 5.9c5.4 0 9.1 6.1 9.1 6.1a16.3 16.3 0 0 1-2.4 2.9" /><path d="M9.9 9.9a2.7 2.7 0 0 0 3.9 3.8" /><path d="m4 4 16 16" /></>),
  logout: (<><path d="M14 8V6.2A2.2 2.2 0 0 0 11.8 4H6.2A2.2 2.2 0 0 0 4 6.2v11.6A2.2 2.2 0 0 0 6.2 20h5.6a2.2 2.2 0 0 0 2.2-2.2V16" /><path d="M9.5 12H21m-3.4-3.6L21 12l-3.4 3.6" /></>),
  smartphone: (<><rect height="17.6" rx="2.4" width="10" x="7" y="3.2" /><path d="M11 17.9h2" /></>),
  lock: (<><rect height="8.8" rx="2" width="12.6" x="5.7" y="10.8" /><path d="M8.6 10.8V8.2a3.4 3.4 0 0 1 6.8 0v2.6" /><path d="M12 14.4v1.8" /></>)
};

function Icon({ name = "dot", size = 18, className = "" }) {
  return (
    <svg
      aria-hidden="true"
      className={`ovo-icon ${className}`}
      fill="none"
      height={size}
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.9"
      viewBox="0 0 24 24"
      width={size}
    >
      {ovoIconPaths[name] || <circle cx="12" cy="12" fill="currentColor" r="1.6" stroke="none" />}
    </svg>
  );
}

function Button({ children, onClick, tone = "default", type = "button", disabled }) {
  return (
    <button className={`button ${tone}`} disabled={disabled} onClick={onClick} type={type}>
      {children}
    </button>
  );
}

function GhostButton({ children, onClick, className = "", disabled }) {
  return (
    <button className={`ghost-button ${className}`} disabled={disabled} onClick={onClick} type="button">
      {children}
    </button>
  );
}

function Card({ children, className = "" }) {
  return <section className={`card ${className}`}>{children}</section>;
}

function MetricCard({ label, value, detail, tone = "teal", chip = "Live" }) {
  return (
    <Card className="metric-card">
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span className="muted">{label}</span>
        <Badge tone={tone}>{chip}</Badge>
      </div>
      <div className="metric-value">{value}</div>
      <div className="muted">{detail}</div>
    </Card>
  );
}

function ProgressBar({ value }) {
  return (
    <div className="progress-track">
      <div className="progress-fill" style={{ width: `${value}%` }}></div>
    </div>
  );
}

function MiniChart({ values = [42, 66, 58, 76, 69, 83, 72, 88, 81] }) {
  return (
    <div className="mini-chart" aria-label="attendance trend chart">
      {values.map((chartValue, index) => (
        <div className="bar" key={index} style={{ height: `${chartValue}%` }}></div>
      ))}
    </div>
  );
}

function DataTable({ columns, rows }) {
  return (
    <div style={{ overflowX: "auto" }}>
      <table className="table">
        <thead>
          <tr>
            {columns.map((columnItem) => <th key={columnItem}>{columnItem}</th>)}
          </tr>
        </thead>
        <tbody>
          {rows.map((rowItem, rowIndex) => (
            <tr key={rowIndex}>
              {rowItem.map((cellItem, cellIndex) => <td key={cellIndex}>{cellItem}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

const phoneNavIcons = {
  Home: "home",
  Timetable: "calendar",
  Attendance: "chart",
  Profile: "user",
  Session: "live",
  Roster: "users",
  Alerts: "bell",
  Report: "file",
  Dashboard: "grid",
  Approvals: "clipboard",
  Monitor: "pulse",
  Today: "home",
  "Check-in": "checkcircle",
  History: "clock",
  Team: "users",
  Shifts: "calendar",
  Reports: "file"
};

function PhoneFrame({ children, product = "CampusOS", navItems, activeNav, onNavChange, hideNav = false }) {
  const defaultNavItems = ["Home", "Sessions", "Check-in", "Profile"];
  const resolvedNavItems = navItems || defaultNavItems;
  return (
    <div className="phone-shell">
      <div className="phone-screen">
        <div className="phone-top">
          <span>9:41</span>
          <Badge tone={product === "Workforce" ? "purple" : "teal"}>{product}</Badge>
        </div>
        <div className="phone-content-scroll">
          {children}
        </div>
        {!hideNav && (
          <div className="phone-nav">
            {resolvedNavItems.map((navItem) => (
              <button
                className={activeNav === navItem ? "active" : ""}
                disabled={!onNavChange}
                key={navItem}
                onClick={() => onNavChange && onNavChange(navItem)}
                type="button"
              >
                <Icon name={phoneNavIcons[navItem] || "dot"} size={17} />
                <span>{navItem}</span>
              </button>
            ))}
          </div>
        )}
        <div className="phone-home-indicator"></div>
      </div>
    </div>
  );
}

function SurfaceSwitcher({ screenLabel, defaultSurface, surfaces }) {
  const initialSurface = defaultSurface || surfaces[0]?.key;
  const [activeSurface, setActiveSurface] = React.useState(initialSurface);
  const active = surfaces.find((surface) => surface.key === activeSurface) || surfaces[0];
  const safeId = (screenLabel || "preview").toLowerCase().replace(/[^a-z0-9]+/g, "-");

  return (
    <div className="surface-shell" data-screen-label={screenLabel}>
      <div className="surface-toolbar">
        <div>
          <div className="section-label">Preview mode</div>
          <strong>{active.title}</strong>
          {active.description && <p className="muted">{active.description}</p>}
        </div>
        <div className="surface-tabs" role="tablist" aria-label={`${screenLabel} view mode`}>
          {surfaces.map((surface) => (
            <button
              aria-controls={`${safeId}-${surface.key}`}
              aria-selected={active.key === surface.key}
              className={active.key === surface.key ? "active" : ""}
              key={surface.key}
              onClick={() => setActiveSurface(surface.key)}
              role="tab"
              type="button"
            >
              {surface.label}
            </button>
          ))}
        </div>
      </div>
      <div className="surface-panels">
        {surfaces.map((surface) => (
          <div
            className={`surface-panel ${surface.panelClassName || ""}`}
            hidden={active.key !== surface.key}
            id={`${safeId}-${surface.key}`}
            key={surface.key}
            role="tabpanel"
          >
            {surface.render()}
          </div>
        ))}
      </div>
    </div>
  );
}

function ValidationChecklist({ checkedIn }) {
  const validationItems = [
    ["Token Valid", "Server authorised"],
    ["Enrolment OK", "Course registration matched"],
    ["Device Verified", "Secure key matched"],
    ["GPS OK", "Inside campus geofence"],
    ["Nonce Clean", "No replay detected"]
  ];
  return (
    <div className="device-list">
      {validationItems.map((validationItem) => (
        <div className="device-row" key={validationItem[0]}>
          <div>
            <strong>{validationItem[0]}</strong>
            <div className="muted">{validationItem[1]}</div>
          </div>
          <Badge tone={checkedIn ? "green" : "blue"}>{checkedIn ? "OK" : "Ready"}</Badge>
        </div>
      ))}
    </div>
  );
}

function Sidebar({ activeScreen, onNavigate }) {
  return (
    <aside className="sidebar">
      <BrandMark />
      <nav className="nav-list" aria-label="Prototype sections">
        {window.ovoNavItems.map((navItem) => (
          <button
            className={`nav-button ${activeScreen === navItem.key ? "active" : ""}`}
            key={navItem.key}
            onClick={() => onNavigate(navItem.key)}
            type="button"
          >
            <span className="nav-dot"></span>
            <span>
              <strong>{navItem.label}</strong>
              <span className="muted" style={{ display: "block", fontSize: 11 }}>{navItem.role}</span>
            </span>
          </button>
        ))}
      </nav>
      <div className="sidebar-note">
        <Badge tone="green">Sales prototype</Badge>
        <p className="muted" style={{ marginBottom: 0 }}>
          Click through one connected university attendance story. Mock data only.
        </p>
      </div>
    </aside>
  );
}

function Topbar({ activeLabel, activeScreen, checkedIn, onNavigate, onRunCheckIn, onReset }) {
  return (
    <header className="topbar">
      <div>
        <div className="section-label">{activeLabel}</div>
        <strong>Greenfield University demo dataset</strong>
        <select
          aria-label="Prototype section"
          className="mobile-section-select"
          onChange={(event) => onNavigate(event.target.value)}
          value={activeScreen}
        >
          {window.ovoNavItems.map((navItem) => (
            <option key={navItem.key} value={navItem.key}>{navItem.label}</option>
          ))}
        </select>
      </div>
      <div className="row">
        <Badge tone={checkedIn ? "green" : "gold"}>
          {checkedIn ? "Student checked in" : "Awaiting student check-in"}
        </Badge>
        <Button tone="success" onClick={onRunCheckIn}>Run check-in</Button>
        <GhostButton onClick={onReset}>Reset</GhostButton>
      </div>
    </header>
  );
}

function Timeline({ items }) {
  return (
    <div className="timeline">
      {items.map((timelineItem, index) => (
        <div className="timeline-item" key={timelineItem.title}>
          <div className="timeline-dot">{index + 1}</div>
          <div>
            <strong>{timelineItem.title}</strong>
            <div className="muted">{timelineItem.detail}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  BrandMark,
  Badge,
  Icon,
  Button,
  GhostButton,
  Card,
  MetricCard,
  ProgressBar,
  MiniChart,
  DataTable,
  PhoneFrame,
  SurfaceSwitcher,
  ValidationChecklist,
  Sidebar,
  Topbar,
  Timeline
});