<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SaaS pages × 3 nav styles · Lattice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html, body { margin: 0; padding: 0; height: 100%; background: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
</style>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>

<script type="text/babel" src="design-canvas.jsx"></script>
<script type="text/babel" src="app-chrome.jsx"></script>
<script type="text/babel" src="page-customer.jsx"></script>
<script type="text/babel" src="page-dashboard.jsx"></script>
<script type="text/babel" src="page-admin.jsx"></script>
<script type="text/babel">
  const { DesignCanvas, DCSection, DCArtboard,
          SidebarChrome, RailChrome, RailItem, RailSectionHeader, TopbarChrome,
          Icon, P } = window;

  const W = 1440, H = 900;

  // ── Secondary panel content per page, for the dark rail chrome ─────
  // Companies list — relevant context next to a customer/company page
  const CompaniesPanel = () => (
    <>
      <RailSectionHeader action={<Icon d={P.plus} size={12} />}>
        Pinned
      </RailSectionHeader>
      {[
        ["NS", "Northstar Logistics", "Tier 1 · EMEA", "#f6c560", true],
        ["HC", "Halcyon",              "Renewal Q3",   "#a8c8e8"],
        ["KS", "Kestrel",              "Pilot",        "#c8e8a8"],
      ].map(([i, n, s, col, active]) => (
        <RailItem key={i} active={active}
          leading={<div style={{
            width: 24, height: 24, borderRadius: 5, background: col,
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "#3a2210", fontSize: 10, fontWeight: 700,
          }}>{i}</div>}
          label={n} sub={s} />
      ))}

      <RailSectionHeader>All companies · 248</RailSectionHeader>
      {[
        ["BF","Brooke Foods",     "added 2 days",  "#e8c8a8"],
        ["MV","Moss & Verra",     "added 5 days",  "#c8a8e8"],
        ["TD","Tide Co.",         "added a week",  "#a8e8c8"],
        ["VR","Verra Tech",       "added a week",  "#e8a87c"],
        ["LW","Lowell Works",     "added 2 weeks", "#a8c8e8"],
        ["OK","Okra Studios",     "added 3 weeks", "#e8a8c8"],
      ].map(([i, n, s, col]) => (
        <RailItem key={i}
          leading={<div style={{
            width: 24, height: 24, borderRadius: 5, background: col,
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "#3a2210", fontSize: 10, fontWeight: 700,
          }}>{i}</div>}
          label={n} sub={s} />
      ))}
    </>
  );

  // Saved dashboards / reports — context for the dashboard page
  const DashboardsPanel = () => (
    <>
      <RailSectionHeader action={<Icon d={P.plus} size={12} />}>
        My dashboards
      </RailSectionHeader>
      {[
        ["Workspace overview", "default", true],
        ["Revenue · weekly",   "shared by Theo"],
        ["Pipeline health",    "auto-refresh 5m"],
        ["Team performance",   "private"],
      ].map(([n, s, active]) => (
        <RailItem key={n} active={active}
          leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
            <Icon d={P.bar} size={14} />
          </span>}
          label={n} sub={s} />
      ))}

      <RailSectionHeader>Shared with me</RailSectionHeader>
      {[
        ["Q2 board review",   "from Mira"],
        ["Marketing funnel",   "from Devi"],
        ["Customer success",   "from Sun"],
        ["Churn watch",        "from Theo"],
      ].map(([n, s]) => (
        <RailItem key={n}
          leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
            <Icon d={P.bar} size={14} />
          </span>}
          label={n} sub={s} />
      ))}
    </>
  );

  // Settings tree — context for the admin page
  const SettingsPanel = () => (
    <>
      <RailSectionHeader>Workspace</RailSectionHeader>
      {[
        ["General",       P.settings],
        ["Members",       P.people, true],
        ["Roles",         P.check],
        ["Teams",         P.people],
        ["Integrations",  P.workflow],
        ["Billing",       P.target],
        ["API & Webhooks", P.workflow],
        ["Audit log",     P.doc],
      ].map(([n, ico, active]) => (
        <RailItem key={n} active={active}
          leading={<span style={{
            color: active ? "#fff" : "#9a9aa6", display: "flex",
          }}><Icon d={ico} size={14} /></span>}
          label={n} />
      ))}
      <RailSectionHeader>Personal</RailSectionHeader>
      {[
        ["Profile",       P.people],
        ["Notifications", P.bell],
        ["Sessions",      P.target],
      ].map(([n, ico]) => (
        <RailItem key={n}
          leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
            <Icon d={ico} size={14} />
          </span>}
          label={n} />
      ))}
    </>
  );

  // Tabs per page for the dark top bar
  const customerTabs  = ["Overview", "Activity", "People", "Notes", "Files"];
  const dashboardTabs = ["Overview", "Reports", "Goals", "Anomalies", "Custom"];
  const adminTabs     = ["General", "Members", "Roles", "Integrations", "Billing", "API"];

  function App() {
    return (
      <DesignCanvas>
        <DCSection
          id="customer"
          title="Customer / company page"
          subtitle="A CRM record — same content, three nav shells."
        >
          <DCArtboard id="cust-sidebar" label="Sidebar nav" width={W} height={H}>
            <SidebarChrome active="companies"><CustomerBody theme="light"/></SidebarChrome>
          </DCArtboard>
          <DCArtboard id="cust-rail" label="Icon rail + secondary" width={W} height={H}>
            <RailChrome active="companies" secondary={<CompaniesPanel/>}>
              <CustomerBody theme="dark"/>
            </RailChrome>
          </DCArtboard>
          <DCArtboard id="cust-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
            <TopbarChrome tabs={customerTabs} activeTab="Activity"
              breadcrumb="northstar-logistics">
              <CustomerBody theme="light"/>
            </TopbarChrome>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="dashboard"
          title="Dashboard page"
          subtitle="KPIs, time-series, funnel and activity."
        >
          <DCArtboard id="dash-sidebar" label="Sidebar nav" width={W} height={H}>
            <SidebarChrome active="home"><DashboardBody theme="light"/></SidebarChrome>
          </DCArtboard>
          <DCArtboard id="dash-rail" label="Icon rail + secondary" width={W} height={H}>
            <RailChrome active="home" secondary={<DashboardsPanel/>}>
              <DashboardBody theme="dark"/>
            </RailChrome>
          </DCArtboard>
          <DCArtboard id="dash-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
            <TopbarChrome tabs={dashboardTabs} activeTab="Overview"
              breadcrumb="dashboard">
              <DashboardBody theme="light"/>
            </TopbarChrome>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="admin"
          title="Admin page"
          subtitle="Workspace settings → Members table."
        >
          <DCArtboard id="admin-sidebar" label="Sidebar nav" width={W} height={H}>
            <SidebarChrome active="settings"><AdminBody theme="light"/></SidebarChrome>
          </DCArtboard>
          <DCArtboard id="admin-rail" label="Icon rail + secondary" width={W} height={H}>
            <RailChrome active="settings" secondary={<SettingsPanel/>}>
              <AdminBody theme="dark"/>
            </RailChrome>
          </DCArtboard>
          <DCArtboard id="admin-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
            <TopbarChrome tabs={adminTabs} activeTab="Members"
              breadcrumb="settings">
              <AdminBody theme="light"/>
            </TopbarChrome>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
