// Hero platform mock — styled to match the real ActiveManage admin UI
const { useState: useStateMock, useEffect: useEffectMock } = React;

// Fixed platform palette (the app is light + blue, regardless of site theme —
// this reads as a genuine screenshot of the product).
const PB = {
  page:    "#F6F8FA",
  side:    "#EAEDF1",
  sideBorder: "#DDE2E8",
  blue:    "#1C82C4",
  blueDark:"#176FA8",
  blueTile:"#E7F1FB",
  red:     "#E5484D",
  card:    "#FFFFFF",
  cardBorder: "#E5E9ED",
  title:   "#2B4257",
  label:   "#46535F",
  faint:   "#8A95A1",
  line:    "#EDF0F3",
};

const NAV_VIEWS = [
  { id: "home",       label: "Admin Home" },
  { id: "datastores", label: "Datastores" },
  { id: "forms",      label: "Forms" },
  { id: "dashboards", label: "Dashboards" },
  { id: "permissions",label: "Permissions" },
  { id: "communication", label: "Communication" },
  { id: "booking",    label: "Booking" },
  { id: "ecommerce",  label: "eCommerce" },
  { id: "api",        label: "API Server" },
];

function PlatformMock() {
  const [view, setView] = useStateMock(0);
  const [tick, setTick] = useStateMock(0);
  const [paused, setPaused] = useStateMock(false);

  useEffectMock(() => {
    if (paused) return;
    // Home view dwells longer so the full feature list can scroll past
    const dwell = NAV_VIEWS[view].id === "home" ? 16000 : 7000;
    const t = setTimeout(() => setView(v => (v + 1) % NAV_VIEWS.length), dwell);
    return () => clearTimeout(t);
  }, [paused, view]);

  useEffectMock(() => {
    setTick(0);
    const t = setInterval(() => setTick(v => v + 1), 600);
    return () => clearInterval(t);
  }, [view]);

  const v = NAV_VIEWS[view].id;

  return (
    <div className="mock" style={{ width: "100%", background: PB.page }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="mock-bar" style={{ background: "#fff", borderBottom: `1px solid ${PB.cardBorder}` }}>
        <div className="dots">
          <div className="dot" style={{ background: "#FF5F57" }}></div>
          <div className="dot" style={{ background: "#FEBC2E" }}></div>
          <div className="dot" style={{ background: "#28C840" }}></div>
        </div>
        <div className="url" style={{ color: PB.faint }}>app.activemanage.co.uk</div>
        <div style={{ width: 36 }}></div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "150px 1fr", minHeight: 440, color: PB.label }}>
        <PlatformSidebar view={v} onPick={(i) => setView(i)} />
        <div style={{ background: PB.page, minWidth: 0, display: "flex", flexDirection: "column" }}>
          {/* faint warm top accent like the real app */}
          <div style={{ height: 4, background: "linear-gradient(90deg, #F7E3D0, #EAD9F0 60%, #D9E6F5)" }}></div>
          <div style={{ padding: 16, flex: 1, minWidth: 0 }}>
            {v === "home"       && <ArchitectHome tick={tick} />}
            {v === "datastores" && <DatastoresScreen tick={tick} />}
            {v === "forms"      && <FormsScreen tick={tick} />}
            {v === "dashboards" && <DashboardScreen tick={tick} />}
            {v === "permissions"&& <PermissionsScreen tick={tick} />}
            {v === "communication" && <CommunicationScreen tick={tick} />}
            {v === "booking"    && <BookingScreen tick={tick} />}
            {v === "ecommerce"  && <EcommerceScreen tick={tick} />}
            {v === "api"        && <ApiScreen tick={tick} />}
          </div>
        </div>
      </div>
    </div>
  );
}

function PlatformSidebar({ view, onPick }) {
  const pill = (label, active, i) => (
    <button onClick={() => i != null && onPick(i)} style={{
      width: "100%", textAlign: "center", padding: "7px 8px", borderRadius: 6, marginBottom: 5,
      fontSize: 10.5, fontWeight: 600, cursor: "pointer", border: "none",
      background: active ? PB.blue : "#fff",
      color: active ? "#fff" : PB.blue,
      boxShadow: active ? "none" : `inset 0 0 0 1px ${PB.cardBorder}`,
      display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
    }}>{label}</button>
  );
  const navItem = (label, viewId, idx) => {
    const active = view === viewId;
    return (
      <button onClick={() => onPick(idx)} key={label} style={{
        width: "100%", textAlign: "left", padding: "5px 8px", borderRadius: 5,
        fontSize: 11, cursor: "pointer", border: "none",
        background: active ? PB.blueTile : "transparent",
        color: active ? PB.blue : PB.label,
        fontWeight: active ? 600 : 450,
        display: "flex", alignItems: "center", gap: 7,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: 3, background: active ? PB.blue : "transparent" }}></span>
        {label}
      </button>
    );
  };
  return (
    <div style={{ background: PB.side, borderRight: `1px solid ${PB.sideBorder}`, padding: 12, display: "flex", flexDirection: "column", gap: 2 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "2px 4px 12px" }}>
        <img src="images/AMicon.svg" width="22" height="22" alt="" />
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 12, color: PB.title }}>ActiveManage</span>
      </div>
      {pill("Admin Home", view === "home", 0)}
      {pill("Architect Panel", view !== "home" && view !== "status", null)}
      {pill("Status Panel", false, null)}

      <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: "0.08em", color: PB.faint, margin: "12px 4px 5px" }}>ARCHITECT</div>
      {NAV_VIEWS.filter(nv => nv.id !== "home").map(nv => navItem(nv.label, nv.id, NAV_VIEWS.findIndex(x => x.id === nv.id)))}

      <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: "0.08em", color: PB.faint, margin: "12px 4px 5px" }}>SUPPORT</div>
      {["New Requests", "All Users", "Invoices"].map(l => (
        <div key={l} style={{ padding: "5px 8px", fontSize: 11, color: PB.label, display: "flex", alignItems: "center", gap: 7 }}>
          <span style={{ width: 5, height: 5, borderRadius: 3, background: "transparent" }}></span>{l}
        </div>
      ))}

      <div style={{ marginTop: "auto", paddingTop: 12, borderTop: `1px solid ${PB.sideBorder}`, display: "flex", alignItems: "center", gap: 7 }}>
        <span style={{ width: 22, height: 22, borderRadius: 11, background: "#CBD3DB" }}></span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 9.5, fontWeight: 600, color: PB.title, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>AM Support</div>
        </div>
      </div>
    </div>
  );
}

// Tiny blue line-icon set used in cards
function Ico({ name }) {
  const p = {
    shield: <path d="M12 3 4 6v6c0 4 3.5 6.5 8 8 4.5-1.5 8-4 8-8V6z" />,
    form:   <><rect x="4" y="4" width="16" height="16" rx="2" /><path d="M8 9h8M8 13h8M8 17h5" /></>,
    data:   <><ellipse cx="12" cy="6" rx="7" ry="3" /><path d="M5 6v6c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3 3 7 3s7-1.3 7-3v-6" /></>,
    layout: <><rect x="4" y="4" width="16" height="16" rx="2" /><path d="M4 9h16M9 9v11" /></>,
    activity: <path d="M3 12h4l3 8 4-16 3 8h4" />,
    plug:   <><path d="M9 7V3M15 7V3M7 7h10v4a5 5 0 0 1-10 0z" /><path d="M12 16v5" /></>,
    cart:   <><circle cx="9" cy="20" r="1.4" /><circle cx="17" cy="20" r="1.4" /><path d="M3 4h2l2.4 12h10l2-8H6" /></>,
    chat:   <path d="M4 5h16v11H9l-5 4z" />,
    cog:    <><circle cx="12" cy="12" r="3" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2 2M16.4 16.4l2 2M18.4 5.6l-2 2M7.6 16.4l-2 2" /></>,
    cal:    <><rect x="4" y="5" width="16" height="16" rx="2" /><path d="M4 10h16M9 3v4M15 3v4" /></>,
    api:    <><path d="M8 9l-4 3 4 3M16 9l4 3-4 3" /><path d="M13 7l-2 10" /></>,
    bolt:   <path d="M13 3 5 13h6l-1 8 8-10h-6z" />,
    search: <><circle cx="11" cy="11" r="6" /><path d="M20 20l-3.5-3.5" /></>,
    globe:  <><circle cx="12" cy="12" r="8" /><path d="M4 12h16M12 4c2.5 2.5 2.5 13 0 16M12 4c-2.5 2.5-2.5 13 0 16" /></>,
  }[name] || <circle cx="12" cy="12" r="8" />;
  return (
    <span style={{ width: 24, height: 24, borderRadius: 5, background: PB.blueTile, display: "grid", placeItems: "center", flexShrink: 0 }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={PB.blue} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{p}</svg>
    </span>
  );
}

function ArchitectHome({ tick }) {
  // The full Architect Panel — every category, split across 3 columns,
  // continuously scrolling so nothing has to be shrunk.
  const columns = [
    [
      ["Security", "shield", ["Permissions", "Authentication Methods", "Security Settings", "Blocked User Accounts", "Blocked IP Addresses"]],
      ["Subscriptions", "bolt", ["Feature Sets", "Features", "Subscription Packages"]],
      ["Searching", "search", ["Site Searching"]],
      ["Internationalisation", "globe", ["Languages"]],
    ],
    [
      ["Forms", "form", ["Conditional Forms", "Dynamic Add Fields", "Custom Fields", "Custom Forms", "Line Item Builders", "User Input Views"]],
      ["Dashboards", "layout", ["Custom Dashboard Blocks", "Dashboard Styles", "Shared Dashboard Layout"]],
      ["Commercial", "cart", ["Carts"]],
      ["Communication", "chat", ["Manage Meetings", "Manage Chat Engines"]],
    ],
    [
      ["Integration & Connections", "plug", ["Database Hosts", "E-mail Accounts", "API Server", "Table Sync", "Deployments", "API Clients", "Azure AD Tenants"]],
      ["Data", "data", ["Datastores", "File Stores", "Data Extraction", "File Import Routines"]],
      ["Layout & Pages", "layout", ["Pages", "Browse Views", "Document Templates", "Admin Panel Builder", "Header"]],
      ["Configuration", "cog", ["Site Settings", "Multitenancy", "Friendly URLs", "SEO"]],
      ["Activity", "activity", ["Activity Log", "E-mail Log", "Error Log", "SMS Log"]],
      ["Automation", "cal", ["Tasks", "Task Log", "Polling"]],
      ["Styling", "cog", ["Logo"]],
      ["Help & Support", "chat", ["Manage Articles"]],
    ],
  ];

  const Grid = () => (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, alignItems: "start", paddingBottom: 10 }}>
      {columns.map((col, ci) => (
        <div key={ci} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {col.map(([title, icon, items]) => (
            <div key={title} style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 11 }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 11.5, fontWeight: 600, color: PB.title, marginBottom: 8 }}>{title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {items.map(it => (
                  <div key={it} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 10, color: PB.label }}>
                    <Ico name={icon} />
                    <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: PB.title }}>Architect Panel</div>
        <span style={{ fontSize: 9, fontFamily: "var(--font-mono)", color: PB.faint }}>60+ tools</span>
      </div>
      <div style={{ height: 372, overflow: "hidden", maskImage: "linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent)", WebkitMaskImage: "linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent)" }}>
        <div className="mock-vscroll">
          <Grid />
          <Grid />
        </div>
      </div>
    </div>
  );
}

function ScreenHeader({ title, sub, action }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 12 }}>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: PB.title }}>{title}</div>
        {sub && <div style={{ fontSize: 10, color: PB.faint, marginTop: 2, fontFamily: "var(--font-mono)" }}>{sub}</div>}
      </div>
      {action && <span style={{ background: PB.blue, color: "#fff", fontSize: 10, fontWeight: 600, padding: "6px 12px", borderRadius: 6 }}>{action}</span>}
    </div>
  );
}

function DatastoresScreen({ tick }) {
  const fields = [
    ["ref", "Random Alphanumeric", "PK"],
    ["patient_name", "Text Box", "req"],
    ["nhs_number", "Text Box · indexed", "idx"],
    ["dob", "Date", ""],
    ["address", "Postal Address", ""],
    ["consultant", "User Search", ""],
    ["consent", "Signature", ""],
    ["risk", "Slider · 1–10", ""],
    ["status", "Pills", ""],
  ];
  const rows = [
    ["P-00481", "S. Patel", "Active"], ["P-00480", "M. Hughes", "Active"],
    ["P-00479", "R. Khan", "Triage"], ["P-00478", "T. Brown", "Active"],
    ["P-00477", "A. Singh", "Critical"], ["P-00476", "L. Wright", "Closed"],
  ];
  const statusColour = (s) => s === "Critical" ? PB.red : s === "Triage" ? "#C77700" : s === "Closed" ? PB.faint : "#1F9254";
  return (
    <div>
      <ScreenHeader title="Datastores · patients" sub="9 fields · 12,847 rows · audit mode on" action="+ New Field" />
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 12 }}>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
          {fields.map(([n, t, tag], i) => (
            <div key={n} style={{
              display: "grid", gridTemplateColumns: "1fr auto", gap: 8, alignItems: "center",
              padding: "8px 11px", borderTop: i === 0 ? "none" : `1px solid ${PB.line}`,
              background: i === tick % fields.length ? PB.blueTile : "#fff",
            }}>
              <span style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 10.5, color: PB.label }}>
                <span style={{ width: 5, height: 5, borderRadius: 3, background: tag === "PK" ? PB.blue : "#C2CAD2" }}></span>
                {n}
              </span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: PB.faint }}>
                {tag && <span style={{ color: PB.blue, marginRight: 6 }}>{tag}</span>}{t}
              </span>
            </div>
          ))}
        </div>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
          <div style={{ padding: "7px 11px", background: "#F4F6F8", borderBottom: `1px solid ${PB.line}`, fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em", display: "grid", gridTemplateColumns: "1fr 1.1fr 0.8fr" }}>
            <span>ref</span><span>name</span><span>status</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr 0.8fr", padding: "8px 11px", borderTop: i === 0 ? "none" : `1px solid ${PB.line}`, fontSize: 10, alignItems: "center" }}>
              <span style={{ fontFamily: "var(--font-mono)", color: PB.label }}>{r[0]}</span>
              <span style={{ color: PB.title }}>{r[1]}</span>
              <span style={{ color: statusColour(r[2]), fontWeight: 600, fontSize: 9 }}>{r[2]}</span>
            </div>
          ))}
          <div style={{ padding: "7px 11px", borderTop: `1px solid ${PB.line}`, fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, background: "#F4F6F8" }}>
            AUTO: form · API · search · audit
          </div>
        </div>
      </div>
    </div>
  );
}

function FormsScreen({ tick }) {
  const chips = ["Text Box", "Dropdown", "Date", "Slider", "Tickboxes", "Postal Address", "Signature", "AJAX Search", "File Upload", "Dynamic Add", "Conditional", "Line Items"];
  return (
    <div>
      <ScreenHeader title="Forms · Patient Intake" sub="14 fields · validated · conditional logic" action="Preview" />
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 12 }}>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 11 }}>
          <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 9 }}>Field types</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
            {chips.map((c, i) => (
              <span key={c} style={{
                fontSize: 9.5, padding: "4px 8px", borderRadius: 5,
                border: `1px solid ${i === tick % chips.length ? PB.blue : PB.cardBorder}`,
                color: i === tick % chips.length ? PB.blue : PB.label,
                background: i === tick % chips.length ? PB.blueTile : "#fff",
                fontFamily: "var(--font-mono)",
              }}>{c}</span>
            ))}
            <span style={{ fontSize: 9, color: PB.faint, alignSelf: "center", fontFamily: "var(--font-mono)" }}>+38</span>
          </div>
        </div>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 13, display: "flex", flexDirection: "column", gap: 9 }}>
          {[["Full name", "Sarah Patel"], ["NHS number", "885 391 044"], ["Date of birth", "14 / 04 / 1986"]].map(([l, v]) => (
            <PField key={l} label={l} value={v} />
          ))}
          <div>
            <PLabel>Risk score</PLabel>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ flex: 1, height: 4, borderRadius: 2, background: `linear-gradient(90deg, ${PB.blue}, #C77700, ${PB.red})`, position: "relative" }}>
                <span style={{ position: "absolute", left: "62%", top: "50%", width: 12, height: 12, borderRadius: 6, background: "#fff", border: `2px solid ${PB.blue}`, transform: "translate(-50%,-50%)" }}></span>
              </span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600, color: PB.title }}>6.2</span>
            </div>
          </div>
          <div>
            <PLabel>Allergies</PLabel>
            <div style={{ display: "flex", gap: 5 }}>
              {["Penicillin", "Nuts", "Latex"].map((a, i) => (
                <span key={a} style={{ fontSize: 9.5, padding: "3px 8px", borderRadius: 999, border: `1px solid ${[0,2].includes(i) ? PB.blue : PB.cardBorder}`, background: [0,2].includes(i) ? PB.blue : "#fff", color: [0,2].includes(i) ? "#fff" : PB.label }}>{[0,2].includes(i) ? "✓ " : ""}{a}</span>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 2 }}>
            <span style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint }}>VALIDATED 14/14</span>
            <span style={{ background: PB.blue, color: "#fff", fontSize: 10, fontWeight: 600, padding: "6px 13px", borderRadius: 6 }}>Submit</span>
          </div>
        </div>
      </div>
    </div>
  );
}
function PLabel({ children }) {
  return <div style={{ fontSize: 8.5, color: PB.faint, marginBottom: 3, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.05em" }}>{children}</div>;
}
function PField({ label, value }) {
  return (
    <div>
      <PLabel>{label}</PLabel>
      <div style={{ height: 26, border: `1px solid ${PB.cardBorder}`, borderRadius: 5, background: "#fff", display: "flex", alignItems: "center", padding: "0 9px", fontSize: 10.5, color: PB.title }}>{value}</div>
    </div>
  );
}

function DashboardScreen({ tick }) {
  const bars = [42, 58, 71, 65, 80, 92, 88, 95, 78, 90];
  return (
    <div>
      <ScreenHeader title="Dashboard" sub="custom blocks · live" action="Edit Layout" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 9 }}>
        {[["Active", "12,847", "+12%"], ["Triaged", "284", "+8"], ["Avg wait", "9m", "-2m"], ["P0", "0", "—"]].map(([l, v, d]) => (
          <div key={l} style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 11 }}>
            <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em" }}>{l}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, color: PB.title, marginTop: 3 }}>{v}</div>
            <div style={{ fontSize: 9, color: "#1F9254", fontFamily: "var(--font-mono)" }}>{d}</div>
          </div>
        ))}
        <div style={{ gridColumn: "span 3", background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 13 }}>
          <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 10 }}>Throughput · 10 weeks</div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 96 }}>
            {bars.map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, background: i === bars.length - 1 ? PB.blue : "#BcD3E6", backgroundColor: i === bars.length - 1 ? PB.blue : "#BBD0E4", borderRadius: "3px 3px 0 0" }}></div>
            ))}
          </div>
        </div>
        <div style={{ gridColumn: "span 1", background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 13, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8 }}>
          <svg width="74" height="74" viewBox="0 0 84 84">
            <circle cx="42" cy="42" r="32" fill="none" stroke="#EAF0F5" strokeWidth="13" />
            <circle cx="42" cy="42" r="32" fill="none" stroke={PB.blue} strokeWidth="13" strokeDasharray={`${0.48*201} 201`} transform="rotate(-90 42 42)" />
            <circle cx="42" cy="42" r="32" fill="none" stroke="#C77700" strokeWidth="13" strokeDasharray={`${0.30*201} 201`} strokeDashoffset={`-${0.48*201}`} transform="rotate(-90 42 42)" />
            <circle cx="42" cy="42" r="32" fill="none" stroke={PB.red} strokeWidth="13" strokeDasharray={`${0.22*201} 201`} strokeDashoffset={`-${0.78*201}`} transform="rotate(-90 42 42)" />
          </svg>
          <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint }}>Triage mix</div>
        </div>
      </div>
    </div>
  );
}

function PermissionsScreen({ tick }) {
  const groups = ["Super Admin", "Clinician", "Reception", "Auditor", "Patient"];
  const cols = ["Patients", "Appts", "Rx", "Audit", "Billing"];
  const matrix = [
    [3, 3, 3, 3, 3],
    [2, 2, 2, 1, 0],
    [2, 2, 0, 0, 1],
    [1, 1, 1, 1, 1],
    [1, 1, 0, 0, 1],
  ];
  const lbl = ["—", "R", "RW", "ALL"];
  const bg = (l) => l === 3 ? PB.blue : l === 2 ? "#9Fc6E6" : l === 2 ? "#9FC6E6" : l === 1 ? "#DCEAF6" : "#F0F2F5";
  const fg = (l) => l === 3 ? "#fff" : "#46535F";
  return (
    <div>
      <ScreenHeader title="Permissions" sub="security groups × datastores · default-deny" action="+ Group" />
      <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: `1.3fr repeat(${cols.length}, 1fr)`, background: "#F4F6F8" }}>
          <div style={{ padding: "8px 11px", fontFamily: "var(--font-mono)", fontSize: 8.5, color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em" }}>Group</div>
          {cols.map(c => <div key={c} style={{ padding: "8px 4px", fontFamily: "var(--font-mono)", fontSize: 8.5, color: PB.faint, textTransform: "uppercase", textAlign: "center" }}>{c}</div>)}
        </div>
        {groups.map((g, i) => (
          <div key={g} style={{ display: "grid", gridTemplateColumns: `1.3fr repeat(${cols.length}, 1fr)`, borderTop: `1px solid ${PB.line}` }}>
            <div style={{ padding: "9px 11px", fontSize: 11, fontWeight: 500, color: PB.title }}>{g}</div>
            {matrix[i].map((l, j) => (
              <div key={j} style={{ padding: 4, display: "grid", placeItems: "center" }}>
                <span style={{ width: "100%", height: 22, borderRadius: 4, background: bg(l), color: fg(l), display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 600 }}>{lbl[l]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, display: "flex", gap: 8, alignItems: "center", fontSize: 9.5, fontFamily: "var(--font-mono)", color: PB.faint }}>
        <span>Field-level:</span>
        <span style={{ padding: "2px 7px", borderRadius: 3, background: "#F5E9D8", color: "#8A5A00" }}>nhs_number · masked for Reception</span>
        <span style={{ padding: "2px 7px", borderRadius: 3, background: "#F5E9D8", color: "#8A5A00" }}>billing · hidden</span>
      </div>
    </div>
  );
}

function CommunicationScreen({ tick }) {
  const msgs = [
    ["✉", "Appointment confirmation", "Delivered", "SendGrid", "#1F9254"],
    ["✉", "Renewal reminder · 14 days", "Opened", "SMTP", "#1C82C4"],
    ["☎", "2FA passcode", "Delivered", "SMS · Twilio", "#1F9254"],
    ["✉", "Invoice INV-2847", "Clicked", "MS Graph", "#1C82C4"],
    ["☎", "Booking reminder", "Queued", "SMS", "#C77700"],
    ["✉", "Password reset", "Delivered", "SES", "#1F9254"],
  ];
  return (
    <div>
      <ScreenHeader title="Communication" sub="e-mail · SMS · templates · inbox processing" action="New Template" />
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12 }}>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
          {msgs.map((m, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "18px 1fr auto", gap: 9, alignItems: "center", padding: "9px 12px", borderTop: i === 0 ? "none" : `1px solid ${PB.line}`, background: i === tick % msgs.length ? PB.blueTile : "#fff" }}>
              <span style={{ color: PB.blue, fontSize: 12 }}>{m[0]}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 11, color: PB.title, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{m[1]}</div>
                <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint }}>{m[3]}</div>
              </div>
              <span style={{ fontSize: 8.5, fontWeight: 700, fontFamily: "var(--font-mono)", color: m[4] }}>{m[2]}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["Sent today", "1,284"], ["Open rate", "62%"], ["SMS delivered", "418"]].map(([k, v]) => (
            <div key={k} style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 12 }}>
              <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em" }}>{k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, color: PB.title, marginTop: 3 }}>{v}</div>
            </div>
          ))}
          <div style={{ background: "#F4F6F8", border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: "9px 12px", fontSize: 9, fontFamily: "var(--font-mono)", color: PB.faint }}>
            INBOX ACTION · parse → datastore
          </div>
        </div>
      </div>
    </div>
  );
}

function BookingScreen({ tick }) {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
  const slots = ["09:00", "10:00", "11:00", "13:00", "14:00", "15:00"];
  // booking state per [slot][day]: 0 free, 1 booked, 2 held
  const state = [
    [1, 0, 1, 0, 2],
    [0, 1, 0, 1, 0],
    [1, 1, 0, 0, 1],
    [0, 0, 2, 1, 0],
    [1, 0, 1, 0, 1],
    [0, 1, 0, 1, 0],
  ];
  return (
    <div>
      <ScreenHeader title="Booking Calendars" sub="slots · locations · attendance · confirmations" action="+ Event Type" />
      <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: `52px repeat(${days.length}, 1fr)`, background: "#F4F6F8" }}>
          <div></div>
          {days.map(d => <div key={d} style={{ padding: "8px 0", textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 9, color: PB.faint, textTransform: "uppercase" }}>{d}</div>)}
        </div>
        {slots.map((s, si) => (
          <div key={s} style={{ display: "grid", gridTemplateColumns: `52px repeat(${days.length}, 1fr)`, borderTop: `1px solid ${PB.line}` }}>
            <div style={{ padding: "0 8px", display: "flex", alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 9, color: PB.faint }}>{s}</div>
            {days.map((d, di) => {
              const st = state[si][di];
              return (
                <div key={di} style={{ padding: 3 }}>
                  <div style={{
                    height: 26, borderRadius: 4,
                    background: st === 1 ? PB.blue : st === 2 ? "#F5E1C4" : "#EFF4F8",
                    color: st === 1 ? "#fff" : st === 2 ? "#8A5A00" : "#B8C2CC",
                    display: "grid", placeItems: "center",
                    fontFamily: "var(--font-mono)", fontSize: 8, fontWeight: 600,
                  }}>{st === 1 ? "BKD" : st === 2 ? "HELD" : "·"}</div>
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, display: "flex", gap: 12, fontSize: 9, fontFamily: "var(--font-mono)", color: PB.faint }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: PB.blue }}></span>Booked</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: "#F5E1C4" }}></span>Held</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: "#EFF4F8" }}></span>Free</span>
        <span style={{ marginLeft: "auto" }}>Auto-confirm · e-mail + SMS</span>
      </div>
    </div>
  );
}

function EcommerceScreen({ tick }) {
  const orders = [
    ["#4821", "A. Chen", "£128.00", "Paid", "#1F9254"],
    ["#4820", "R. Okafor", "£54.00", "Fulfilled", "#1C82C4"],
    ["#4819", "M. Díaz", "£312.00", "Paid", "#1F9254"],
    ["#4818", "K. Yamada", "£19.99", "Refunded", "#8A95A1"],
    ["#4817", "S. Ahmed", "£86.50", "Pending", "#C77700"],
  ];
  return (
    <div>
      <ScreenHeader title="eCommerce / Carts" sub="Stripe · vendors · discounts · orders" action="+ Listing" />
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 12 }}>
        <div style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.7fr 1fr 0.8fr 0.8fr", padding: "7px 12px", background: "#F4F6F8", fontFamily: "var(--font-mono)", fontSize: 8.5, color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em" }}>
            <span>Order</span><span>Customer</span><span>Total</span><span>Status</span>
          </div>
          {orders.map((o, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "0.7fr 1fr 0.8fr 0.8fr", padding: "9px 12px", borderTop: `1px solid ${PB.line}`, fontSize: 10.5, alignItems: "center" }}>
              <span style={{ fontFamily: "var(--font-mono)", color: PB.label }}>{o[0]}</span>
              <span style={{ color: PB.title }}>{o[1]}</span>
              <span style={{ fontFamily: "var(--font-mono)", color: PB.title }}>{o[2]}</span>
              <span style={{ fontSize: 8.5, fontWeight: 700, fontFamily: "var(--font-mono)", color: o[4] }}>{o[3]}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["Revenue · today", "£4,182"], ["Orders", "38"], ["Avg. basket", "£110"]].map(([k, v]) => (
            <div key={k} style={{ background: PB.card, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: 12 }}>
              <div style={{ fontSize: 8.5, fontFamily: "var(--font-mono)", color: PB.faint, textTransform: "uppercase", letterSpacing: "0.05em" }}>{k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, color: PB.title, marginTop: 3 }}>{v}</div>
            </div>
          ))}
          <div style={{ background: PB.blueTile, border: `1px solid ${PB.cardBorder}`, borderRadius: 8, padding: "9px 12px", fontSize: 9, fontFamily: "var(--font-mono)", color: PB.blue, fontWeight: 600 }}>
            ● Stripe connected
          </div>
        </div>
      </div>
    </div>
  );
}

function ApiScreen({ tick }) {
  const eps = [
    ["GET", "/api/patients", "list, filter"],
    ["GET", "/api/patients/:id", "single record"],
    ["POST", "/api/patients", "create + validate"],
    ["PATCH", "/api/patients/:id", "partial update"],
    ["DELETE", "/api/patients/:id", "soft delete"],
    ["GET", "/api/patients/export.csv", "CSV export"],
  ];
  const mc = { GET: "#1F9254", POST: PB.blue, PATCH: "#C77700", DELETE: PB.red };
  return (
    <div>
      <ScreenHeader title="API Server" sub="auto-generated · permissions inherited" action="New Client" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          {eps.map(([m, p, h], i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "46px 1fr", gap: 8, alignItems: "center",
              background: PB.card, border: `1px solid ${i === tick % eps.length ? PB.blue : PB.cardBorder}`, borderRadius: 6, padding: "7px 10px",
            }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 8, fontWeight: 700, color: mc[m], background: `color-mix(in oklab, ${mc[m]} 13%, #fff)`, borderRadius: 3, textAlign: "center", padding: "2px 0" }}>{m}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: PB.title, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p}</span>
            </div>
          ))}
        </div>
        <div style={{ background: "#0F2233", borderRadius: 8, padding: 12, fontFamily: "var(--font-mono)", fontSize: 9.5, lineHeight: 1.6, color: "#CFE2F0" }}>
          <div style={{ color: "#6FC58A" }}>GET /api/patients/P-00481</div>
          <div style={{ color: "#6B8299", marginTop: 2 }}>← 200 OK · 142ms</div>
          <div style={{ marginTop: 6 }}>{"{"}</div>
          {[["ref", "P-00481"], ["patient_name", "Sarah Patel"], ["nhs_number", "885 391 044"], ["risk", "6.2"], ["status", "Active"]].map(([k, v], i) => (
            <div key={k} style={{ paddingLeft: 12 }}>
              <span style={{ color: "#E0A878" }}>"{k}"</span>: <span style={{ color: "#8FD08F" }}>"{v}"</span>{i < 4 ? "," : ""}
            </div>
          ))}
          <div>{"}"}</div>
        </div>
      </div>
    </div>
  );
}

/* =============================================================================
   INTEGRATED ITSM — the support desk that lives inside every app we ship.
   Styled with the fixed platform palette (PB) so it reads as a real screenshot
   of the product, matching PlatformMock.
   ============================================================================= */

function ItsmSection({ onNavigate }) {
  const shots = [
    { src: "images/itsm/tickettypes.png",  step: "01", cap: "Pick the type of request",   url: "support · new request" },
    { src: "images/itsm/lognewticket.png", step: "02", cap: "Log the details in-app",      url: "support · new request" },
    { src: "images/itsm/mytickets.png",    step: "03", cap: "Track every request & SLA",   url: "support · my requests" },
  ];
  const points = [
    ["In-app request logging", "No separate portal, no tier-1 queue, no offshore call centre — it's a panel inside the software you already use."],
    ["Incidents, changes & features", "Raise a bug fix, change request, feature idea or how-to question — each routed and tracked against its own SLA."],
    ["Approvals & full history", "Electronic authorisation, live status and a complete audit trail on every request and reply."],
    ["Straight to the engineers", "The people who built your software are the people who answer — nothing gets lost in translation."],
  ];
  return (
    <section className="itsm">
      <div className="container">
        <div className="itsm-head">
          <span className="eyebrow">Support, built in</span>
          <h2 className="h-large" style={{ marginTop: 16 }}>
            Every app ships with its own<br/>
            <em style={{ fontFamily: "Instrument Serif, serif", fontStyle: "italic", fontWeight: 400 }} className="grad-text">integrated service desk.</em>
          </h2>
          <p className="lead" style={{ marginTop: 16 }}>
            Our own ITSM is woven directly into the software we build for you. Log a bug, request a change or suggest a feature without ever leaving the app — it lands straight with the engineers who built it.
          </p>
        </div>

        {/* Real screenshots of the built-in support desk, framed like the product */}
        <div className="itsm-gallery">
          {shots.map((s) => (
            <figure className="itsm-shot" key={s.step}>
              <div className="mock">
                <div className="mock-bar">
                  <div className="dots">
                    <div className="dot" style={{ background: "#FF5F57" }}></div>
                    <div className="dot" style={{ background: "#FEBC2E" }}></div>
                    <div className="dot" style={{ background: "#28C840" }}></div>
                  </div>
                  <div className="url">{s.url}</div>
                  <div style={{ width: 36 }}></div>
                </div>
                <div className="itsm-shot-frame">
                  <img src={s.src} alt={s.cap} loading="lazy" />
                </div>
              </div>
              <figcaption><span className="itsm-step">{s.step}</span>{s.cap}</figcaption>
            </figure>
          ))}
        </div>

        <div className="itsm-foot">
          <ul className="itsm-points">
            {points.map(([t, d]) => (
              <li key={t}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg>
                <div>
                  <strong>{t}</strong>
                  <span>{d}</span>
                </div>
              </li>
            ))}
          </ul>

          <button className="btn btn-primary" onClick={() => onNavigate && onNavigate("contact")}>
            Talk to us about support
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PlatformMock, ItsmSection });

const _mockScrollStyle = document.createElement("style");
_mockScrollStyle.innerHTML = `
.mock-vscroll { animation: mockVScroll 26s linear infinite; will-change: transform; }
@keyframes mockVScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.mock:hover .mock-vscroll { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mock-vscroll { animation: none; } }
`;
document.head.appendChild(_mockScrollStyle);