/* Systemiz site — Workspace Demo · Page templates
   Each template returns a Notion-style page body. Registered on window.WorkspacePages
   so 02c-workspace-demo.jsx can route by id without an import system. */

(function () {
  const Icon = window.WSIcon;

  // small avatar component — uses real images for chris/jack
  const Avatar = ({ who, size = 16 }) => {
    const src = who === "chris" ? "assets/chris.png" : who === "jack" ? "assets/jack.png" : null;
    if (!src) return null;
    return <img src={src} alt={who} className="wp-avatar-img" style={{ width: size, height: size }} />;
  };

  // per-department metadata. icon (lucide SVG name), cover gradient, lede copy
  const DEPT_META = {
    dept_strategy: {
      icon: "target",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #2a1a4a 0%, #0e0e0e 100%)",
      lede: "Define your strategy, align on your business vision, and track the progress towards your goals."
    },
    dept_marketing: {
      icon: "megaphone",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #0a1a3a 0%, #0e0e0e 100%)",
      lede: "Run all your marketing in one place to see what's working and where your leads come from."
    },
    dept_operations: {
      icon: "settings-2",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #2a0a10 0%, #0e0e0e 100%)",
      lede: "Run the day-to-day of your business smoothly so the company keeps moving without you in the room."
    },
    dept_product: {
      icon: "package",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #2a1408 0%, #0e0e0e 100%)",
      lede: "One dashboard to manage fulfilment and deliver every product or service on time."
    },
    dept_people: {
      icon: "users",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #2a0a24 0%, #0e0e0e 100%)",
      lede: "Look after your team in one place so every person feels supported and keeps growing."
    },
    dept_finance: {
      icon: "wallet",
      eyebrow: "Department",
      cover: "linear-gradient(135deg, #0a2818 0%, #0e0e0e 100%)",
      lede: "See the money side of your business at a glance so you always know exactly where you stand."
    }
  };

  // banner header (used on cockpit + person dashboards)
  function BannerHeader({ icon, title, eyebrow, useBanner, cover, iconImg, iconNode, iconSvg, iconColor, iconLogo }) {
    return (
      <div className="wp-header">
        <div
          className={"wp-cover" + (useBanner ? " wp-cover-banner" : "")}
          style={!useBanner && cover ? { background: cover } : undefined}>
          {useBanner && <img src="assets/banner.png" alt="" className="wp-banner-img" />}
        </div>
        <div className="wp-icon-wrap">
          {iconLogo ?
          <span className="wp-icon wp-icon-logo"><img src={iconLogo} alt="" /></span> :
          iconNode ?
          <span className="wp-icon wp-icon-node">{iconNode}</span> :
          iconSvg ?
          <span className="wp-icon wp-icon-svg" style={iconColor ? { color: iconColor } : undefined}>
              <Icon n={iconSvg} />
            </span> :
          iconImg ?
          <span className="wp-icon wp-icon-img"><img src={iconImg} alt="" /></span> :

          <span className="wp-icon">{icon}</span>
          }
        </div>
        <div className="wp-title-row">
          {eyebrow && <span className="wp-eyebrow">{eyebrow}</span>}
          <h1 className="wp-title">{title}</h1>
        </div>
      </div>);

  }

  // ---------- COCKPIT (Systemiz OS — default landing) ----------
  function Cockpit({ goto }) {
    return (
      <div className="wp">
        <BannerHeader title="Systemiz OS" iconLogo="assets/systemiz-logo.png" useBanner />

        <p className="wp-lede">Your entire business made visible in one intuitive Notion dashboard for you, your team, and AI.</p>

        <div className="wp-grid wp-grid-2-3">
          {/* OVERVIEW */}
          <div className="wp-card">
            <div className="wp-card-head">
              <Icon n="settings-2" />
              <span>Overview</span>
            </div>
            <div className="wp-overview">
              <div className="wp-ov-banner">
                <img src="assets/banner.png" alt="Systemiz" />
              </div>
              <ul className="wp-ov-list">
                <li><span className="wp-ov-k">Date:</span> 20 April</li>
                <li><span className="wp-ov-k">Quarter:</span> 53 days left</li>
                <li><span className="wp-ov-k">Goals on track:</span> 3 / 4</li>
                <li className="wp-ov-callout">
                  <span className="wp-ov-tag">Mission</span>
                  We help business owners build systems that set them free
                </li>
              </ul>
              <div className="wp-progress">
                <div className="wp-progress-label">Goal Progress<span>69%</span></div>
                <div className="wp-progress-bar"><div style={{ width: "69%" }}></div></div>
              </div>
            </div>
          </div>

          {/* TEAM DASHBOARDS */}
          <div className="wp-card">
            <div className="wp-card-head">
              <Icon n="layout-dashboard" />
              <span>Team Dashboards</span>
            </div>
            <div className="wp-team">
              <div className="wp-team-card" data-tour="chris-card" onClick={() => goto("person_chris")}>
                <div className="wp-team-avatar">
                  <img src="assets/chris.png" alt="Chris Punt" />
                </div>
                <div className="wp-team-name">
                  <Avatar who="chris" size={14} />
                  Chris Punt
                </div>
                <div className="wp-team-role">CEO · Founder</div>
              </div>
              <div className="wp-team-card" onClick={() => goto("person_jack")}>
                <div className="wp-team-avatar">
                  <img src="assets/jack.png" alt="Jack Ward" />
                </div>
                <div className="wp-team-name">
                  <Avatar who="jack" size={14} />
                  Jack Ward
                </div>
                <div className="wp-team-role">COO · Integrator</div>
              </div>
              <div className="wp-team-card wp-team-empty">
                <Icon n="plus" />
                <span>New page</span>
              </div>
            </div>
          </div>
        </div>

        {/* PROJECTS */}
        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="check-circle-2" />
            <span>Projects</span>
            <div className="wp-tabs">
              <span className="active">in progress</span>
              <span>active goals</span>
              <span>by goals</span>
              <span>tasks</span>
              <span>timeline</span>
            </div>
          </div>
          <div className="wp-projects">
            {[
            { t: "Launch flagship offer", icon: "briefcase", who: "both", s: "P1", p: 72 },
            { t: "Refresh brand website", icon: "globe", who: "chris", s: "P1", p: 45 },
            { t: "Hire operations manager", icon: "graduation-cap", who: "jack", s: "P1", p: 28 },
            { t: "Build referral program", icon: "megaphone", who: "chris", s: "P2", p: 12 }].
            map((pr, i) =>
            <div key={i} className="wp-project">
                <div className="wp-project-title">
                  <span className="wp-project-ic"><Icon n={pr.icon} /></span>
                  {pr.t}
                </div>
                <div className="wp-project-pills">
                  <span className="wp-pill wp-pill-prog">In Progress</span>
                  <span className={"wp-pill wp-pill-" + pr.s.toLowerCase()}>{pr.s}</span>
                </div>
                <div className="wp-project-owner">
                  {pr.who === "both" ?
                <><span className="wp-owner-chip"><Avatar who="chris" size={14} /><span>Chris</span></span><span className="wp-owner-chip"><Avatar who="jack" size={14} /><span>Jack</span></span></> :
                <span className="wp-owner-chip"><Avatar who={pr.who} size={14} /><span>{pr.who === "chris" ? "Chris" : "Jack"}</span></span>}
                </div>
                <div className="wp-project-progress">
                  <div className="wp-mini-bar">
                    <div style={{ width: pr.p + "%" }}></div>
                  </div>
                  <span className="wp-mini-pct">{pr.p}%</span>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="wp-grid wp-grid-3">
          <div className="wp-stat">
            <div className="wp-stat-label">Goal Progress</div>
            <div className="wp-stat-num wp-stat-orange">69%</div>
          </div>
          <div className="wp-stat">
            <div className="wp-stat-label">Daily Tasks</div>
            <div className="wp-stat-num wp-stat-blue">82%</div>
          </div>
          <div className="wp-stat">
            <div className="wp-stat-label">Daily KPI Score</div>
            <div className="wp-stat-num wp-stat-green">4 / 5</div>
          </div>
        </div>
      </div>);

  }

  // dept color lookup — mirror sidebar dot colors so the page icon ties back
  const DEPT_COLORS = {
    dept_strategy: "#a78bfa",
    dept_marketing: "#3b82f6",
    dept_operations: "#ef3a4c",
    dept_product: "#fb923c",
    dept_people: "#ec4899",
    dept_finance: "#22c55e"
  };

  // per-dept goals / KPIs / projects — tailored to each function
  const DEPT_DATA = {
    dept_strategy: {
      goals: [
        { p: "prog", t: "Hit Q3 OKRs", pct: 67 },
        { p: "prog", t: "Annual planning", pct: 40 },
        { p: "done", t: "Q2 retrospective" }],
      kpis: [
        { lbl: "Goal completion", val: "67%", pct: 67, kind: "donut" },
        { lbl: "OKRs on track", val: "8 / 12", trend: "+2", kind: "big" }],
      projects: [
        { t: "Annual strategy refresh", who: "chris", s: "P1", pct: 50 },
        { t: "Q3 OKR rollout", who: "both", s: "P1", pct: 62 },
        { t: "Board deck prep", who: "chris", s: "P2", pct: 74 }]
    },
    dept_marketing: {
      goals: [
        { p: "prog", t: "$50k MQL pipeline", pct: 72 },
        { p: "prog", t: "Launch Q3 campaign", pct: 30 },
        { p: "done", t: "Content audit" }],
      kpis: [
        { lbl: "Pipeline target", val: "72%", pct: 72, kind: "donut" },
        { lbl: "MQLs · week", val: "142", trend: "+18", kind: "big" }],
      projects: [
        { t: "Q3 ad campaign launch", who: "chris", s: "P1", pct: 50 },
        { t: "SEO content sprint", who: "chris", s: "P1", pct: 62 },
        { t: "Email nurture rebuild", who: "jack", s: "P2", pct: 74 }]
    },
    dept_operations: {
      goals: [
        { p: "prog", t: "SOP coverage 90%", pct: 78 },
        { p: "prog", t: "Weekly scorecard live", pct: 60 },
        { p: "done", t: "Q2 systems audit" }],
      kpis: [
        { lbl: "SOP coverage", val: "78%", pct: 78, kind: "donut" },
        { lbl: "Tickets · week", val: "42", trend: "−5", kind: "big" }],
      projects: [
        { t: "SOP library v2", who: "jack", s: "P1", pct: 50 },
        { t: "Scorecard rollout", who: "jack", s: "P1", pct: 62 },
        { t: "Process audit", who: "chris", s: "P2", pct: 74 }]
    },
    dept_product: {
      goals: [
        { p: "prog", t: "Ship Q3 release", pct: 60 },
        { p: "prog", t: "On-time delivery 95%", pct: 88 },
        { p: "done", t: "Q2 retrospective" }],
      kpis: [
        { lbl: "On-time delivery", val: "88%", pct: 88, kind: "donut" },
        { lbl: "Active builds", val: "12", trend: "+3", kind: "big" }],
      projects: [
        { t: "Q3 product launch", who: "both", s: "P1", pct: 50 },
        { t: "Customer portal rebuild", who: "chris", s: "P1", pct: 62 },
        { t: "Mobile app refresh", who: "jack", s: "P2", pct: 74 }]
    },
    dept_people: {
      goals: [
        { p: "prog", t: "Fill 3 open roles", pct: 33 },
        { p: "prog", t: "Onboarding NPS > 9", pct: 90 },
        { p: "done", t: "Q2 review cycle" }],
      kpis: [
        { lbl: "Open roles filled", val: "1 / 3", pct: 33, kind: "donut" },
        { lbl: "Team eNPS", val: "+58", trend: "+6", kind: "big" }],
      projects: [
        { t: "Hiring sprint Q3", who: "jack", s: "P1", pct: 50 },
        { t: "Onboarding rebuild", who: "jack", s: "P1", pct: 62 },
        { t: "Quarterly reviews", who: "chris", s: "P2", pct: 74 }]
    },
    dept_finance: {
      goals: [
        { p: "prog", t: "MRR target $90k", pct: 93 },
        { p: "done", t: "Burn under $45k" },
        { p: "done", t: "Q2 close" }],
      kpis: [
        { lbl: "MRR vs target", val: "93%", pct: 93, kind: "donut" },
        { lbl: "Outstanding AR", val: "$40k", trend: "−$8k", kind: "big" }],
      projects: [
        { t: "Monthly close automation", who: "jack", s: "P1", pct: 50 },
        { t: "Cashflow forecast", who: "chris", s: "P1", pct: 62 },
        { t: "Annual budget", who: "jack", s: "P2", pct: 74 }]
    }
  };

  // little circular progress chart for dept KPI cards
  const Donut = ({ pct, color, size = 84, stroke = 9 }) => {
    const r = (size - stroke) / 2;
    const c = 2 * Math.PI * r;
    const dash = Math.max(0, Math.min(100, pct)) / 100 * c;
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="wp-donut">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#1f1f1f" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
                strokeLinecap="round" strokeDasharray={`${dash} ${c}`}
                transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      </svg>);

  };

  // ---------- DEPARTMENT DASHBOARD (generic, used for all 6 departments) ----------
  function DeptDashboard({ title, pageId }) {
    const display = title.replace(/ Dashboard$/, "");
    const meta = DEPT_META[pageId] || { icon: "target", eyebrow: "Department", cover: "linear-gradient(135deg, #11141a 0%, #0e0e0e 100%)", lede: "" };
    const color = DEPT_COLORS[pageId] || "var(--brand)";
    const data = DEPT_DATA[pageId] || DEPT_DATA.dept_strategy;
    return (
      <div className="wp">
        <BannerHeader
          eyebrow={meta.eyebrow}
          iconSvg={meta.icon}
          iconColor={color}
          title={display}
          cover={meta.cover} />
        {meta.lede && <p className="wp-lede">{meta.lede}</p>}

        <div className="wp-grid wp-grid-2">
          <div className="wp-card">
            <div className="wp-card-head">
              <Icon n="target" />
              <span>Goals</span>
            </div>
            <ul className="wp-list">
              {data.goals.map((g, i) => {
                const pct = g.p === "done" ? 100 : (g.pct != null ? g.pct : 0);
                return (
                  <li key={i}>
                    <span className={"wp-pill " + (g.p === "done" ? "wp-pill-done" : "wp-pill-prog")}>{g.p === "done" ? "Done" : "In Progress"}</span>
                    <span className="wp-goal-text">{g.t}</span>
                    <span className="wp-goal-prog">
                      <Donut pct={pct} color={color} size={16} stroke={3} />
                      <span className="wp-goal-pct" style={{ color }}>{pct}%</span>
                    </span>
                  </li>);

              })}
            </ul>
          </div>
          <div className="wp-card">
            <div className="wp-card-head">
              <Icon n="bar-chart-3" />
              <span>KPIs · this week</span>
            </div>
            <div className="wp-dept-kpis">
              {data.kpis.map((k, i) =>
              <div key={i} className="wp-dept-kpi">
                {k.kind === "donut" ?
                  <div className="wp-dept-kpi-donut">
                    <Donut pct={k.pct} color={color} size={72} stroke={8} />
                    <div className="wp-dept-kpi-donut-val" style={{ color }}>{k.val}</div>
                  </div> :
                  <div className="wp-dept-kpi-big" style={{ color }}>{k.val}</div>
                }
                <div className="wp-dept-kpi-lbl">{k.lbl}</div>
                {k.trend && <div className="wp-dept-kpi-trend">{k.trend}</div>}
              </div>
              )}
            </div>
          </div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="check-circle-2" />
            <span>Projects</span>
          </div>
          <div className="wp-projects wp-projects-3">
            {data.projects.map((pr, i) =>
            <div key={i} className="wp-project">
                <div className="wp-project-title"><span className="wp-project-ic"><Icon n="folder" /></span> {pr.t}</div>
                <div className="wp-project-pills">
                  <span className="wp-pill wp-pill-prog">In Progress</span>
                  <span className={"wp-pill wp-pill-" + pr.s.toLowerCase()}>{pr.s}</span>
                </div>
                <div className="wp-project-owner">
                  {pr.who === "both" ?
                  <><span className="wp-owner-chip"><Avatar who="chris" size={14} /><span>Chris</span></span><span className="wp-owner-chip"><Avatar who="jack" size={14} /><span>Jack</span></span></> :
                  <span className="wp-owner-chip"><Avatar who={pr.who} size={14} /><span>{pr.who === "chris" ? "Chris" : "Jack"}</span></span>}
                </div>
                <div className="wp-project-progress">
                  <div className="wp-mini-bar"><div style={{ width: pr.pct + "%" }}></div></div>
                  <span className="wp-mini-pct">{pr.pct}%</span>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="list-checks" />
            <span>Tasks</span>
            <div className="wp-tabs">
              <span className="active">daily</span>
              <span>upcoming</span>
              <span>by project</span>
            </div>
          </div>
          <ul className="wp-tasks">
            <li><span className="wp-checkbox"></span> Review weekly scorecard <Avatar who="chris" /><span className="wp-task-tag">Today</span></li>
            <li><span className="wp-checkbox"></span> Approve new SOP draft <Avatar who="jack" /><span className="wp-task-tag">Today</span></li>
            <li><span className="wp-checkbox done"></span><span className="wp-task-done">Leadership 1:1</span> <Avatar who="chris" /><span className="wp-task-tag">Done</span></li>
          </ul>
        </div>
      </div>);

  }

  // ---------- PROJECTS & TASKS (Strategy sub-page) ----------
  function ProjectsTasks() {
    const projects = [
    { t: "Launch flagship offer", who: "chris", status: "In Progress", p: 67, due: "May 12" },
    { t: "Build customer portal", who: "both", status: "In Progress", p: 50, due: "May 28" },
    { t: "Q3 product launch", who: "both", status: "In Progress", p: 49, due: "Jun 04" },
    { t: "Refresh sales funnel", who: "jack", status: "In Progress", p: 33, due: "Jun 14" },
    { t: "Annual team retreat", who: "chris", status: "Not Started", p: 0, due: "Jun 20" },
    { t: "Hire operations manager", who: "jack", status: "In Progress", p: 88, due: "Apr 30" }];

    const galleryProjects = projects.slice(0, 4);

    // tasks grouped by project (board view)
    const taskBoard = [
    { proj: "Launch flagship offer", color: "#a78bfa", tasks: [
      { t: "Draft one-pager", who: "jack", due: "Apr 23", done: false },
      { t: "Set pricing", who: "chris", due: "Apr 25", done: false },
      { t: "Record launch video", who: "chris", due: "Apr 28", done: true }] },
    { proj: "Build customer portal", color: "#3b82f6", tasks: [
      { t: "Record walkthrough", who: "chris", due: "Today", done: false },
      { t: "Wire up auth", who: "jack", due: "Apr 22", done: false }] },
    { proj: "Q3 product launch", color: "#fb923c", tasks: [
      { t: "Finalize features", who: "chris", due: "Apr 24", done: false },
      { t: "Schedule beta", who: "jack", due: "Apr 26", done: false }] },
    { proj: "Refresh sales funnel", color: "#22c55e", tasks: [
      { t: "Send proposal", who: "jack", due: "Today", done: false },
      { t: "Review scorecard", who: "chris", due: "Tomorrow", done: true }] }];

    const calendar = [
    { day: 21, items: [{ t: "Record video", who: "chris" }] },
    { day: 22, items: [{ t: "1:1 sync", who: "both" }] },
    { day: 23, items: [{ t: "SOP review", who: "jack" }, { t: "Client call", who: "chris" }] },
    { day: 24, items: [] },
    { day: 25, items: [{ t: "Q3 OKR check", who: "both" }] },
    { day: 26, items: [] },
    { day: 27, items: [{ t: "Sales recap", who: "jack" }] }];


    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Strategy"
          iconSvg="clipboard-list"
          iconColor="#a78bfa"
          title="Projects & Tasks"
          cover="linear-gradient(135deg, #1a1530 0%, #0e0e0e 100%)" />

        <p className="wp-lede">One dashboard giving you visibility on all the projects & tasks everyone on the team is busy with.</p>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="kanban" /><span>Projects database</span>
            <div className="wp-tabs">
              <span className="active">gallery</span><span>table</span><span>board</span><span>timeline</span>
            </div>
          </div>
          <div className="wp-projects">
            {galleryProjects.map((pr, i) =>
            <div key={i} className="wp-project">
                <div className="wp-project-title">
                  <span className="wp-project-ic"><Icon n="folder" /></span>
                  {pr.t}
                </div>
                <div className="wp-project-pills">
                  <span className={"wp-pill " + (pr.status === "Not Started" ? "wp-pill-warn" : "wp-pill-prog")}>{pr.status}</span>
                </div>
                <div className="wp-project-owner">
                  {pr.who === "both" ?
                  <><span className="wp-owner-chip"><Avatar who="chris" size={14} /><span>Chris</span></span><span className="wp-owner-chip"><Avatar who="jack" size={14} /><span>Jack</span></span></> :
                  <span className="wp-owner-chip"><Avatar who={pr.who} size={14} /><span>{pr.who === "chris" ? "Chris" : "Jack"}</span></span>}
                </div>
                <div className="wp-project-progress">
                  <div className="wp-mini-bar"><div style={{ width: pr.p + "%" }}></div></div>
                  <span className="wp-mini-pct">{pr.p}%</span>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="list-checks" /><span>Tasks database</span>
            <div className="wp-tabs"><span className="active">board</span><span>table</span><span>today</span><span>upcoming</span></div>
          </div>
          <div className="wp-board wp-board-tasks">
            {taskBoard.map((col, ci) =>
            <div key={ci} className="wp-col">
                <div className="wp-col-head">
                  <span className="wp-col-dot" style={{ background: col.color }}></span>
                  <span className="wp-col-title">{col.proj}</span>
                  <span className="wp-col-count">{col.tasks.length}</span>
                </div>
                {col.tasks.map((tk, i) =>
                <div key={i} className="wp-task-card">
                    <div className="wp-task-card-title">
                      <span className={"wp-checkbox" + (tk.done ? " done" : "")}></span>
                      <span className={tk.done ? "wp-task-done wp-task-name" : "wp-task-name"}>{tk.t}</span>
                    </div>
                    <div className="wp-task-card-meta">
                      <span className="wp-task-card-owner">
                        <Avatar who={tk.who} size={12} />
                        <span>{tk.who === "chris" ? "Chris" : "Jack"}</span>
                      </span>
                      <span className="wp-task-card-due">{tk.due}</span>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="contact" /><span>Calendar · this week</span>
          </div>
          <div className="wp-cal">
            {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d, i) =>
            <div key={i} className="wp-cal-col">
                <div className="wp-cal-head"><span>{d}</span><span className="wp-cal-num">{calendar[i].day}</span></div>
                <div className="wp-cal-body">
                  {calendar[i].items.map((it, j) =>
                <div key={j} className="wp-cal-event">
                      <div className="wp-cal-event-t">{it.t}</div>
                      <div className="wp-cal-event-who">
                        {it.who === "both" ? <><Avatar who="chris" size={12} /><Avatar who="jack" size={12} /></> : <Avatar who={it.who} size={12} />}
                      </div>
                    </div>
                )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- COMPANY BRAIN (3x2 grid + SOP database) ----------
  function CompanyBrain() {
    const blocks = [
    { ic: "compass", h: "Vision & Mission", b: "We help founders build AI operating systems with Notion & Claude that set them free." },
    { ic: "target", h: "ICP", b: "6-8 Figure E-com business owners drowning in operational chaos & scattered tools." },
    { ic: "package", h: "Offers", b: <>1. AIOS Sprint in 30 days.<br />2. Systems partner for E-com businesses.</> },
    { ic: "scale", h: "Decision Principles", b: "1) Cognitive freedom over features. 2) People-first, AI second. 3) Ship in 30 days." },
    { ic: "mic", h: "Voice & Tone", b: "Direct. Founder-to-founder. No corporate filler. Confidence without arrogance." },
    { ic: "users", h: "Team Structure", b: <>Chris (CEO · Dynamo)<br />Jack (COO · Steel)<br />2 Notion consultants</> }];

    const sops = [
    { t: "Client onboarding · v3", owner: "jack", cat: "Onboarding", upd: "Apr 18", status: "Active" },
    { t: "Outbound message templates", owner: "chris", cat: "Sales", upd: "Apr 14", status: "Active" },
    { t: "Loom recording standards", owner: "chris", cat: "Content", upd: "Apr 09", status: "Active" },
    { t: "Weekly KPI review process", owner: "jack", cat: "Operations", upd: "Apr 07", status: "Active" },
    { t: "Notion workspace conventions", owner: "jack", cat: "Operations", upd: "Apr 02", status: "Active" },
    { t: "Claude prompt library", owner: "chris", cat: "AI", upd: "Mar 28", status: "Outdated" }];


    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Operations"
          iconSvg="brain"
          iconColor="#ef3a4c"
          title="Company Brain"
          cover="linear-gradient(135deg, #1a0a0d 0%, #0e0e0e 100%)" />

        <p className="wp-lede">A single source of truth for everything your team and Claude need to know to run the business.</p>

        <div className="wp-grid wp-grid-3 wp-grid-tight">
          {blocks.map((s, i) =>
          <div key={i} className="wp-toggle">
              <div className="wp-toggle-head">
                <Icon n="chevron-down" />
                <Icon n={s.ic} />
                <span className="wp-toggle-title">{s.h}</span>
              </div>
              <div className="wp-toggle-body">{s.b}</div>
            </div>
          )}
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="book-open" /><span>SOP database</span>
            <div className="wp-tabs"><span className="active">all</span><span>by category</span><span>by owner</span></div>
          </div>
          <div className="wp-table wp-table-sop">
            <div className="wp-table-row wp-table-head">
              <div>SOP</div><div>Owner</div><div>Category</div><div>Updated</div><div>Status</div>
            </div>
            {sops.map((s, i) =>
            <div key={i} className="wp-table-row">
                <div className="wp-table-cell"><span className="wp-cell-ic"><Icon n="book-open" /></span> {s.t}</div>
                <div className="wp-table-cell wp-table-owner"><Avatar who={s.owner} /></div>
                <div className="wp-table-cell"><span className="wp-pill wp-pill-cat">{s.cat}</span></div>
                <div className="wp-table-cell wp-table-due">{s.upd}</div>
                <div className="wp-table-cell"><span className={"wp-pill " + (s.status === "Active" ? "wp-pill-done" : "wp-pill-warn")}>{s.status}</span></div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- CRM ----------
  function CRMPage() {
    const stages = [
    { name: "Lead", color: "#7a7a7a", total: "$22k" },
    { name: "Qualified", color: "#3b82f6", total: "$42k" },
    { name: "Proposal", color: "#f5b544", total: "$37k" },
    { name: "Won", color: "#22c55e", total: "$37k" }];

    const cards = {
      Lead: [{ c: "Atlas Studios", who: "chris", v: "$5k" }, { c: "Northwind Co", who: "jack", v: "$5k" }, { c: "Mira & Co", who: "chris", v: "$12k" }],
      Qualified: [{ c: "Acme Inc.", who: "jack", v: "$25k" }, { c: "Helix Health", who: "chris", v: "$12k" }, { c: "Ridgeline", who: "jack", v: "$5k" }],
      Proposal: [{ c: "BrightLane", who: "chris", v: "$25k" }, { c: "Coastal AG", who: "jack", v: "$12k" }],
      Won: [{ c: "Foundry Labs", who: "chris", v: "$25k" }, { c: "Owl & Sons", who: "jack", v: "$12k" }]
    };
    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Marketing / Sales"
          iconSvg="users"
          iconColor="#3b82f6"
          title="CRM"
          cover="linear-gradient(135deg, #0a1422 0%, #0e0e0e 100%)" />

        <p className="wp-lede">Track every lead and customer in one pipeline so no deal ever falls through the cracks.</p>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="kanban" />
            <span>Pipeline · this quarter</span>
            <div className="wp-tabs">
              <span className="active">board</span><span>table</span><span>timeline</span>
            </div>
          </div>
          <div className="wp-board">
            {stages.map((s) =>
            <div key={s.name} className="wp-col">
                <div className="wp-col-head">
                  <span className="wp-col-dot" style={{ background: s.color }}></span>
                  <span>{s.name}</span>
                  <span className="wp-col-count">{s.total}</span>
                </div>
                {cards[s.name].map((c, i) =>
              <div key={i} className="wp-board-card">
                    <div className="wp-bc-title"><span className="wp-cell-ic"><Icon n="building-2" /></span> {c.c}</div>
                    <div className="wp-bc-meta">
                      <span>{c.v} · MRR</span>
                      <Avatar who={c.who} size={14} />
                    </div>
                  </div>
              )}
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- HIRING & ONBOARDING ----------
  function HiringPage() {
    return (
      <div className="wp">
        <BannerHeader
          eyebrow="People / Culture"
          iconSvg="user-plus"
          iconColor="#ec4899"
          title="Hiring & Onboarding"
          cover="linear-gradient(135deg, #1a0a1a 0%, #0e0e0e 100%)" />

        <p className="wp-lede">Hire and onboard new team members in a way that gets them setup and running in days, not weeks.</p>

        <div className="wp-grid wp-grid-2">
          <div className="wp-card">
            <div className="wp-card-head"><Icon n="user-plus" /><span>Open Roles</span></div>
            <ul className="wp-list">
              <li><span className="wp-pill wp-pill-prog">Active</span> Operations Lead · 12 applicants <Avatar who="jack" /></li>
              <li><span className="wp-pill wp-pill-prog">Active</span> AI Engineer · 8 applicants <Avatar who="chris" /></li>
              <li><span className="wp-pill wp-pill-done">Hired</span> Community Manager <Avatar who="jack" /></li>
            </ul>
          </div>
          <div className="wp-card">
            <div className="wp-card-head"><Icon n="play-circle" /><span>Onboarding Flow</span></div>
            <ol className="wp-steps">
              <li><b>Day 0</b> · Auto-provisioned Notion + Slack + tooling access</li>
              <li><b>Day 1</b> · 12 SOPs + 8 Looms delivered to their dashboard</li>
              <li><b>Day 2</b> · First real ticket; Claude on standby for Q&amp;A</li>
              <li><b>Day 3</b> · Producing real output, no founder bottleneck</li>
            </ol>
          </div>
        </div>
      </div>);

  }

  // ---------- FINANCE OS ----------
  function FinancePage() {
    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const profit = [22, 28, 26, 34, 32, 41, 38, 47, 52, 48, 58, 65];
    const cw = 720, ch = 220;
    const padL = 44, padR = 18, padT = 18, padB = 36;
    const maxV = 72, minV = 0;
    const iw = cw - padL - padR;
    const ih = ch - padT - padB;
    const xStep = iw / (months.length - 1);
    const pX = (i) => padL + xStep * i;
    const pY = (v) => padT + ih - ((v - minV) / (maxV - minV)) * ih;
    const pts = profit.map((v, i) => [pX(i), pY(v)]);
    const pathLine = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
    const pathArea = pathLine + ` L ${pX(months.length - 1).toFixed(1)} ${(padT + ih).toFixed(1)} L ${padL.toFixed(1)} ${(padT + ih).toFixed(1)} Z`;
    const gridYs = [0, 1, 2, 3].map((i) => padT + ih / 3 * i);
    const yTicks = [0, 24, 48, 72];

    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Finance / Legal"
          iconSvg="banknote"
          iconColor="#22c55e"
          title="Finance OS"
          cover="linear-gradient(135deg, #0a1a10 0%, #0e0e0e 100%)" />

        <p className="wp-lede">See the real picture of your business finances in 30 seconds, every day.</p>

        <div className="wp-grid wp-grid-3">
          <div className="wp-stat"><div className="wp-stat-label">MRR</div><div className="wp-stat-num wp-stat-green">$84k</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Cash on hand</div><div className="wp-stat-num">$312k</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Burn / mo</div><div className="wp-stat-num wp-stat-orange">$41k</div></div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="trending-up" /><span>Profit · last 12 months</span>
            <div className="wp-tabs"><span className="active">monthly</span><span>quarterly</span><span>YTD</span></div>
          </div>
          <div className="wp-chart-wrap">
            <svg viewBox={`0 0 ${cw} ${ch}`} className="wp-line-chart">
              <defs>
                <linearGradient id="profit-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#22c55e" stopOpacity="0.32" />
                  <stop offset="100%" stopColor="#22c55e" stopOpacity="0" />
                </linearGradient>
              </defs>
              {gridYs.map((y, i) =>
              <line key={i} x1={padL} y1={y} x2={padL + iw} y2={y} stroke="#1f1f1f" strokeWidth="1" />
              )}
              <path d={pathArea} fill="url(#profit-grad)" />
              <path d={pathLine} fill="none" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              {pts.map((p, i) =>
              <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#0e0e0e" stroke="#22c55e" strokeWidth="1.6" />
              )}
              {months.map((m, i) =>
              <text key={i} x={pX(i)} y={ch - 10} fill="#7a7a7a" fontSize="11" textAnchor="middle">{m}</text>
              )}
              {yTicks.map((v, i) =>
              <text key={i} x={padL - 10} y={pY(v) + 4} fill="#7a7a7a" fontSize="10" textAnchor="end">${v}k</text>
              )}
            </svg>
          </div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head">
            <Icon n="bar-chart-3" /><span>Finance Tracker</span>
            <div className="wp-tabs"><span className="active">all</span><span>by month</span><span>by category</span></div>
          </div>
          <div className="wp-table">
            <div className="wp-table-row wp-table-head">
              <div>Entry</div><div>Category</div><div>Amount</div><div>Date</div><div>Status</div>
            </div>
            <div className="wp-table-row wp-table-stub">
              <div className="wp-table-cell"><span className="wp-cell-ic"><Icon n="banknote" /></span> Monthly subscription · Acme Inc</div>
              <div className="wp-table-cell"><span className="wp-pill wp-pill-cat">Revenue</span></div>
              <div className="wp-table-cell">$8,500</div>
              <div className="wp-table-cell wp-table-due">May 04</div>
              <div className="wp-table-cell"><span className="wp-pill wp-pill-done">Paid</span></div>
            </div>
          </div>
        </div>
      </div>);

  }

  // ---------- PERSON DASHBOARD (CEO / COO) ----------
  function PersonDashboard({ pageId }) {
    const isChris = pageId === "person_chris";
    const name = isChris ? "Chris Punt" : "Jack Ward";
    const role = isChris ? "CEO · Founder" : "COO · Integrator";
    const who = isChris ? "chris" : "jack";

    const lede = isChris ?
    "Your CEO dashboard giving you a birdseye view of what's going on in your business. " :
    "Every team member has their own team dashboard showing their unique projects, tasks, meetings, calendar and SOPs.";
    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Team Dashboard"
          title={name}
          iconImg={"assets/" + who + ".png"}
          useBanner />
        <div className="wp-person-meta">{role}</div>
        <p className="wp-lede">{lede}</p>

        <div className="wp-grid wp-grid-3">
          <div className="wp-stat"><div className="wp-stat-label">Goals on track</div><div className="wp-stat-num wp-stat-green">{isChris ? "3 / 4" : "2 / 3"}</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Daily KPIs</div><div className="wp-stat-num">{isChris ? "5 / 5" : "4 / 5"}</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Tasks today</div><div className="wp-stat-num wp-stat-blue">{isChris ? "6" : "8"}</div></div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head"><Icon n="check-circle-2" /><span>My Projects</span></div>
          <div className="wp-projects wp-projects-3">
            {(isChris ?
            [{ t: "Launch flagship offer", p: 67, s: "P1" }, { t: "Refresh sales funnel", p: 0, s: "P1" }, { t: "Q3 content plan", p: 12, s: "P2" }] :
            [{ t: "Hire operations manager", p: 88, s: "P1" }, { t: "BAU Q3", p: 71, s: "P1" }, { t: "Build customer portal", p: 33, s: "P2" }]).
            map((pr, i) =>
            <div key={i} className="wp-project">
                <div className="wp-project-title"><span className="wp-project-ic"><Icon n="folder" /></span> {pr.t}</div>
                <div className="wp-project-pills">
                  <span className="wp-pill wp-pill-prog">In Progress</span>
                  <span className={"wp-pill wp-pill-" + pr.s.toLowerCase()}>{pr.s}</span>
                </div>
                <div className="wp-project-owner">
                  <span className="wp-owner-chip"><Avatar who={who} size={14} /><span>{name.split(" ")[0]}</span></span>
                </div>
                <div className="wp-project-progress">
                  <div className="wp-mini-bar"><div style={{ width: pr.p + "%" }}></div></div>
                  <span className="wp-mini-pct">{pr.p}%</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- TEAM DIRECTORY ----------
  function TeamDirectory() {
    const people = [
    { who: "chris", name: "Chris Punt", role: "CEO · Founder", email: "chris@systemiz.com", focus: "Vision · Sales · Content", stats: { tasks: 12, goals: "3 / 4" } },
    { who: "jack", name: "Jack Ward", role: "COO · Integrator", email: "jack@systemiz.com", focus: "Ops · Hiring · Delivery", stats: { tasks: 18, goals: "2 / 3" } }];

    return (
      <div className="wp">
        <BannerHeader
          eyebrow="People / Culture"
          iconSvg="contact"
          iconColor="#ec4899"
          title="Team Directory"
          cover="linear-gradient(135deg, #1a0a1a 0%, #0e0e0e 100%)" />
        <p className="wp-lede">One page for your entire team so you always know who does what and how to reach them.</p>

        <div className="wp-grid wp-grid-2">
          {people.map((p, i) =>
          <div key={i} className="wp-card wp-team-detail">
              <div className="wp-td-head">
                <img src={"assets/" + p.who + ".png"} alt={p.name} className="wp-td-avatar" />
                <div>
                  <div className="wp-td-name">{p.name}</div>
                  <div className="wp-td-role">{p.role}</div>
                </div>
              </div>
              <div className="wp-td-stats">
                <div><div className="wp-td-num">{p.stats.tasks}</div><div className="wp-td-lbl">Open tasks</div></div>
                <div><div className="wp-td-num">{p.stats.goals}</div><div className="wp-td-lbl">Goals on track</div></div>
              </div>
              <ul className="wp-td-list">
                <li><span className="wp-td-k">Focus</span>{p.focus}</li>
                <li><span className="wp-td-k">Email</span>{p.email}</li>
              </ul>
            </div>
          )}
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head"><Icon n="contact" /><span>All people · table</span></div>
          <div className="wp-table">
            <div className="wp-table-row wp-table-head"><div>Person</div><div>Role</div><div>Department</div><div>Status</div></div>
            {people.map((p, i) =>
            <div key={i} className="wp-table-row">
                <div className="wp-table-cell wp-table-owner"><Avatar who={p.who} /> {p.name}</div>
                <div className="wp-table-cell" style={{ whiteSpace: "nowrap" }}>{p.role}</div>
                <div className="wp-table-cell">{p.who === "chris" ? "Strategy" : "Operations"}</div>
                <div className="wp-table-cell"><span className="wp-pill wp-pill-done">Active</span></div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- KPI DASHBOARD ----------
  function KPIDashboard() {
    const kpis = [
    { lbl: "MRR", val: "$84k", trend: "+12%", color: "green" },
    { lbl: "Pipeline", val: "$240k", trend: "+8%", color: "blue" },
    { lbl: "Active clients", val: "18", trend: "+2", color: "blue" },
    { lbl: "Churn", val: "2.1%", trend: "-0.4%", color: "green" },
    { lbl: "Outbound · wk", val: "320", trend: "+40", color: "blue" },
    { lbl: "Booked calls · wk", val: "12", trend: "+3", color: "green" }];

    const weekly = [
    { metric: "Sales calls booked", who: "chris", target: 10, actual: 12, status: "ok" },
    { metric: "Outbound messages", who: "jack", target: 250, actual: 320, status: "ok" },
    { metric: "SOPs published", who: "jack", target: 2, actual: 1, status: "warn" },
    { metric: "Looms recorded", who: "chris", target: 3, actual: 4, status: "ok" },
    { metric: "Client check-ins", who: "jack", target: 18, actual: 16, status: "warn" }];


    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Operations"
          iconSvg="trending-up"
          iconColor="#ef3a4c"
          title="KPI Dashboard"
          cover="linear-gradient(135deg, #1a0a0d 0%, #0e0e0e 100%)" />
        <p className="wp-lede">A live view of the numbers that actually matter so you always know which lever to pull next.</p>

        <div className="wp-grid wp-grid-3">
          {kpis.slice(0, 3).map((k, i) =>
          <div key={i} className="wp-stat">
              <div className="wp-stat-label">{k.lbl}</div>
              <div className={"wp-stat-num wp-stat-" + k.color}>{k.val}</div>
              <div className="wp-stat-trend">{k.trend}</div>
            </div>
          )}
        </div>
        <div className="wp-grid wp-grid-3">
          {kpis.slice(3).map((k, i) =>
          <div key={i} className="wp-stat">
              <div className="wp-stat-label">{k.lbl}</div>
              <div className={"wp-stat-num wp-stat-" + k.color}>{k.val}</div>
              <div className="wp-stat-trend">{k.trend}</div>
            </div>
          )}
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head"><Icon n="bar-chart-3" /><span>Weekly scorecard</span></div>
          <div className="wp-table">
            <div className="wp-table-row wp-table-head"><div>Metric</div><div>Owner</div><div>Target</div><div>Actual</div><div>Status</div></div>
            {weekly.map((w, i) =>
            <div key={i} className="wp-table-row">
                <div className="wp-table-cell">{w.metric}</div>
                <div className="wp-table-cell wp-table-owner"><Avatar who={w.who} /></div>
                <div className="wp-table-cell wp-table-due">{w.target}</div>
                <div className="wp-table-cell wp-table-due">{w.actual}</div>
                <div className="wp-table-cell"><span className={"wp-pill " + (w.status === "ok" ? "wp-pill-done" : "wp-pill-warn")}>{w.status === "ok" ? "On track" : "Behind"}</span></div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- CLAUDE OS ----------
  function ClaudeOS() {
    const skills = [
    { ic: "mic", n: "Voice → Task", d: "Speak; Claude logs to Notion with project, priority, due date." },
    { ic: "video", n: "Meeting → Tasks", d: "Auto-extract decisions and action items from call transcripts." },
    { ic: "book-open", n: "SOP from Loom", d: "Upload a screen recording; Claude writes the SOP with screenshots." },
    { ic: "bar-chart-3", n: "Weekly Brief", d: "Every Monday. Stripe, Shopify, Skool, KPIs, summarized." },
    { ic: "users", n: "Lead triage", d: "Reads inbound, scores fit, drafts replies in your tone." },
    { ic: "kanban", n: "Project status", d: "Pulls real progress from databases; flags blockers." }];

    const recent = [
    { t: "Drafted 4 outbound messages for Atlas Studios", who: "chris", ago: "12m ago" },
    { t: "Generated weekly KPI brief", who: "jack", ago: "2h ago" },
    { t: "Wrote SOP from yesterday's Loom", who: "jack", ago: "Yesterday" },
    { t: "Triaged 8 inbound leads", who: "chris", ago: "Yesterday" }];

    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Operations"
          iconSvg="bot"
          iconColor="#ef3a4c"
          title="Claude OS"
          cover="linear-gradient(135deg, #1f0a08 0%, #0e0e0e 100%)" />
        <p className="wp-lede">Manage every AI agent, prompt and automation in your business from one place.</p>

        <div className="wp-grid wp-grid-3 wp-grid-tight">
          {skills.map((s, i) =>
          <div key={i} className="wp-skill">
              <div className="wp-skill-head"><Icon n={s.ic} /><span>{s.n}</span></div>
              <div className="wp-skill-body">{s.d}</div>
              <div className="wp-skill-foot"><span className="wp-pill wp-pill-prog">Connected</span></div>
            </div>
          )}
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head"><Icon n="activity" /><span>Recent runs</span></div>
          <ul className="wp-list wp-list-rows">
            {recent.map((r, i) =>
            <li key={i}><Avatar who={r.who} /><span style={{ flex: 1 }}>{r.t}</span><span className="wp-task-tag">{r.ago}</span></li>
            )}
          </ul>
        </div>
      </div>);

  }

  // ---------- MEETINGS ----------
  function Meetings() {
    const upcoming = [
    { t: "Weekly L10 sync", who: "both", when: "Mon 9:00", dur: "60m" },
    { t: "Sales review", who: "chris", when: "Tue 14:00", dur: "30m" },
    { t: "Hiring panel · Ops Lead", who: "jack", when: "Wed 11:00", dur: "45m" },
    { t: "Client check-in · Foundry", who: "chris", when: "Thu 10:00", dur: "30m" }];

    const past = [
    { t: "Q2 planning", who: "both", when: "Apr 14", notes: "12 action items · all assigned" },
    { t: "1:1 sync", who: "both", when: "Apr 12", notes: "3 items · 2 done" },
    { t: "Discovery · Acme Inc", who: "chris", when: "Apr 10", notes: "Proposal due Apr 22" }];

    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Operations"
          iconSvg="calendar"
          iconColor="#ef3a4c"
          title="Meetings"
          cover="linear-gradient(135deg, #0a1422 0%, #0e0e0e 100%)" />
        <p className="wp-lede">Every meeting along with the AI notes captured in one place so nothing said or decided ever gets lost.</p>

        <div className="wp-grid wp-grid-2">
          <div className="wp-card">
            <div className="wp-card-head"><Icon n="contact" /><span>Upcoming</span></div>
            <ul className="wp-list wp-list-rows">
              {upcoming.map((m, i) =>
              <li key={i}>
                  <span className="wp-pill wp-pill-prog">{m.when}</span>
                  <span style={{ flex: 1 }}>{m.t}</span>
                  <span className="wp-task-tag">{m.dur}</span>
                  {m.who === "both" ? <><Avatar who="chris" /><Avatar who="jack" /></> : <Avatar who={m.who} />}
                </li>
              )}
            </ul>
          </div>
          <div className="wp-card">
            <div className="wp-card-head"><Icon n="check-circle-2" /><span>Recent · with notes</span></div>
            <ul className="wp-list wp-list-rows">
              {past.map((m, i) =>
              <li key={i}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, marginBottom: 2 }}>{m.t}</div>
                    <div style={{ fontSize: 11, color: "var(--fg-4)" }}>{m.notes}</div>
                  </div>
                  <span className="wp-task-tag">{m.when}</span>
                  {m.who === "both" ? <><Avatar who="chris" /><Avatar who="jack" /></> : <Avatar who={m.who} />}
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>);

  }

  // ---------- INVOICES ----------
  function InvoicesPage() {
    const invoices = [
    { client: "Foundry Labs", amount: "$25,000", date: "Apr 28", who: "chris", status: "Paid" },
    { client: "Owl & Sons", amount: "$25,000", date: "Apr 22", who: "jack", status: "Paid" },
    { client: "BrightLane", amount: "$25,000", date: "Apr 19", who: "chris", status: "Sent" },
    { client: "Helix Health", amount: "$15,000", date: "Apr 17", who: "jack", status: "Sent" },
    { client: "Coastal AG", amount: "$8,500", date: "Apr 15", who: "chris", status: "Paid" },
    { client: "Atlas Studios", amount: "$5,000", date: "Apr 03", who: "jack", status: "Overdue" }];

    const stat = (s) => s === "Paid" ? "wp-pill-done" : s === "Overdue" ? "wp-pill-warn" : "wp-pill-prog";

    return (
      <div className="wp">
        <BannerHeader
          eyebrow="Finance / Legal"
          iconSvg="receipt"
          iconColor="#22c55e"
          title="Invoices"
          cover="linear-gradient(135deg, #0a1a10 0%, #0e0e0e 100%)" />
        <p className="wp-lede">Track every invoice in one view so you always know what's owed and when it's coming in.</p>

        <div className="wp-grid wp-grid-3">
          <div className="wp-stat"><div className="wp-stat-label">Paid · 30d</div><div className="wp-stat-num wp-stat-green">$58.5k</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Outstanding</div><div className="wp-stat-num">$40k</div></div>
          <div className="wp-stat"><div className="wp-stat-label">Overdue</div><div className="wp-stat-num wp-stat-orange">$5k</div></div>
        </div>

        <div className="wp-card wp-card-wide">
          <div className="wp-card-head"><Icon n="receipt" /><span>All invoices</span>
            <div className="wp-tabs"><span className="active">all</span><span>paid</span><span>open</span><span>overdue</span></div>
          </div>
          <div className="wp-table">
            <div className="wp-table-row wp-table-head">
              <div>Client</div><div>Amount</div><div>Date</div><div>Owner</div><div>Status</div>
            </div>
            {invoices.map((inv, i) =>
            <div key={i} className="wp-table-row">
                <div className="wp-table-cell"><span className="wp-cell-ic"><Icon n="building-2" /></span> {inv.client}</div>
                <div className="wp-table-cell">{inv.amount}</div>
                <div className="wp-table-cell wp-table-due">{inv.date}</div>
                <div className="wp-table-cell wp-table-owner"><Avatar who={inv.who} /></div>
                <div className="wp-table-cell"><span className={"wp-pill " + stat(inv.status)}>{inv.status}</span></div>
              </div>
            )}
          </div>
        </div>
      </div>);

  }

  // ---------- GENERIC PAGE (still used as fallback) ----------
  function GenericPage({ title }) {
    return (
      <div className="wp">
        <BannerHeader eyebrow="Page" iconSvg="file-text" title={title} />
        <p className="wp-lede">Another page in your Business OS, tailored to your business and connected to your team and Claude.</p>
        <div className="wp-card wp-card-wide wp-empty">
          <Icon n="package" />
          <div className="wp-empty-title">Built during your sprint</div>
          <div className="wp-empty-body">We tailor every page to your business model during the 30-day sprint.</div>
        </div>
      </div>);

  }

  window.WorkspacePages = {
    cockpit: Cockpit,

    // department dashboards
    dept_strategy: DeptDashboard,
    dept_marketing: DeptDashboard,
    dept_operations: DeptDashboard,
    dept_product: DeptDashboard,
    dept_people: DeptDashboard,
    dept_finance: DeptDashboard,

    // sub-pages
    projects_tasks: ProjectsTasks,
    brain: CompanyBrain,
    crm: CRMPage,
    hiring: HiringPage,
    finance_os: FinancePage,
    team: TeamDirectory,
    kpi: KPIDashboard,
    claude_os: ClaudeOS,
    meetings: Meetings,
    invoices: InvoicesPage,

    // person dashboards
    person_chris: PersonDashboard,
    person_jack: PersonDashboard
  };
})();