// Workspaces module page

function WorkspacesHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "96px 0 88px", background: "linear-gradient(160deg, #1A1625 0%, #0F0E14 50%, #13111C 100%)", color: "#F5F5F7" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.35, color: "rgba(255,255,255,0.05)", pointerEvents: "none" }} preserveAspectRatio="none">
        <defs><pattern id="gmhg-workspaces" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse"><path d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" strokeWidth="1"/></pattern></defs>
        <rect width="100%" height="100%" fill="url(#gmhg-workspaces)" />
      </svg>
      <div style={{ position: "absolute", left: -120, top: -180, width: 720, height: 720, background: "radial-gradient(closest-side, rgba(124,92,211,0.25), transparent 70%)", pointerEvents: "none" }} />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: "var(--ink-4)", marginBottom: 20, flexWrap: "wrap" }}>
          <a href="/" style={{ color: "rgba(255,255,255,0.45)" }}>Home</a><span>›</span>
          <a href="/platform/power-modules" style={{ color: "rgba(255,255,255,0.45)" }}>Power Modules</a><span>›</span>
          <span className="tag tag-purple" style={{ margin: 0, padding: "2px 10px" }}>Workspaces</span>
        </div>
        <div className="mob-stack no-border" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center", marginTop: 24 }}>
          <div>
            <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(40px, 5.4vw, 68px)", lineHeight: 1.04, letterSpacing: "-0.03em", margin: "0 0 22px" }}>
              Your own space. <span className="accent">No mixups. No leaks.</span>
            </h1>
            <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
              <div style={{ background: "white", border: "1px solid rgba(0,0,0,0.08)", borderRadius: 16, padding: 20, boxShadow: "0 10px 30px rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.02)", width: "100%" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                  <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>Switch workspace</span>
                  <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>⌘K</span>
                </div>
                {[
                  { name: "Volantis Group", sub: "Parent · 4 entities", n: "VG", active: true },
                  { name: "Volantis Sweden AB", sub: "Operating entity · SE", n: "SE" },
                  { name: "Volantis Norge AS", sub: "Operating entity · NO", n: "NO" },
                  { name: "Project Helix (M&A)", sub: "Deal room · 6 members", n: "PH" },
                ].map((w, i) => (
                  <div key={i} style={{
                    display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", marginBottom: 4,
                    borderRadius: 8,
                    background: w.active ? "var(--accent-soft)" : "transparent",
                    border: w.active ? "1px solid rgba(110,86,207,0.2)" : "1px solid transparent",
                  }}>
                    <span style={{ width: 28, height: 28, borderRadius: 6, background: w.active ? "var(--accent)" : "var(--bg-soft)", color: w.active ? "white" : "var(--ink-2)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600, letterSpacing: "-0.02em" }}>{w.n}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, color: "var(--ink-1)", fontWeight: 500 }}>{w.name}</div>
                      <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{w.sub}</div>
                    </div>
                    {w.active && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--success)" }} />}
                  </div>
                ))}
                <div style={{ marginTop: 8, paddingTop: 12, borderTop: "1px solid rgba(0,0,0,0.06)", fontSize: 12, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontWeight: 500, color: "var(--accent)", cursor: "pointer" }}>+ New workspace</span>
                  <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>↵</span>
                </div>
              </div>
            </div>
            <p style={{ maxWidth: 520, fontSize: 16.5, lineHeight: 1.55, color: "rgba(255,255,255,0.65)", margin: 0 }}>
              Create a private workspace for each team or unit. Keep contracts safe, workstreams separate, and access under full control.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/platform/power-modules">All modules</a>
            </div>
          </div>
          {/* Workspace switcher mock */}
          <div className="mob-hide" style={{ background: "white", border: "1px solid rgba(0,0,0,0.08)", borderRadius: 16, padding: 20, boxShadow: "0 10px 30px rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.02)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>Switch workspace</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>⌘K</span>
            </div>
            {[
              { name: "Volantis Group", sub: "Parent · 4 entities", n: "VG", active: true },
              { name: "Volantis Sweden AB", sub: "Operating entity · SE", n: "SE" },
              { name: "Volantis Norge AS", sub: "Operating entity · NO", n: "NO" },
              { name: "Project Helix (M&A)", sub: "Deal room · 6 members", n: "PH" },
            ].map((w, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", marginBottom: 4,
                borderRadius: 8,
                background: w.active ? "var(--accent-soft)" : "transparent",
                border: w.active ? "1px solid rgba(110,86,207,0.2)" : "1px solid transparent",
              }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: w.active ? "var(--accent)" : "var(--bg-soft)", color: w.active ? "white" : "var(--ink-2)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600, letterSpacing: "-0.02em" }}>{w.n}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, color: "var(--ink-1)", fontWeight: 500 }}>{w.name}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{w.sub}</div>
                </div>
                {w.active && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--success)" }} />}
              </div>
            ))}
            <div style={{ marginTop: 8, paddingTop: 12, borderTop: "1px solid rgba(0,0,0,0.06)", fontSize: 12, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
              <span style={{ fontWeight: 500, color: "var(--accent)", cursor: "pointer" }}>+ New workspace</span>
              <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>↵</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkspacesMetrics() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Designed for enterprise reality</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Built to scale, <em>without the chaos</em>.</h2>
        </div>
        <div className="tick-rule" />
        <div className="grid grid-4" style={{ gap: 0 }}>
          <div style={{ borderRight: "1px solid var(--line)", padding: "0 24px" }}>
            <CounterMetric value={200} suffix="+" label="Workspaces handled by a single tenant" />
          </div>
          <div style={{ borderRight: "1px solid var(--line)", padding: "0 24px" }}>
            <CounterMetric value={1} label="Click to create a new workspace" />
          </div>
          <div style={{ borderRight: "1px solid var(--line)", padding: "0 24px" }}>
            <div className="metric"><div className="num"><em>0</em></div><div className="label">Duplicate playbook maintenance</div></div>
          </div>
          <div style={{ padding: "0 24px" }}>
            <CounterMetric value={5} suffix=" min" label="To onboard a new entity end-to-end" />
          </div>
        </div>
        <div className="tick-rule" />
      </div>
    </section>
  );
}

function WorkspacesBeforeAfter() {
  const Card = ({ tone, tag, title, items }) => (
    <div style={{
      background: "white", color: "var(--ink-1)",
      borderRadius: "var(--r-lg)", padding: 32,
      border: "1px solid rgba(0,0,0,0.08)", boxShadow: "0 8px 30px rgba(0,0,0,0.03), 0 1px 6px rgba(0,0,0,0.015)", position: "relative", overflow: "hidden",
    }}>
      {tone === "after" && (
        <div style={{ position: "absolute", right: -60, top: -60, width: 220, height: 220, background: "radial-gradient(closest-side, rgba(110,86,207,0.08), transparent 70%)", pointerEvents: "none" }} />
      )}
      <div style={{ position: "relative", zIndex: 1 }}>
        <span className="tag" style={tone === "before"
          ? { background: "rgba(180,35,24,0.08)", color: "var(--danger)", borderColor: "rgba(180,35,24,0.18)" }
          : { background: "var(--accent-soft)", color: "var(--accent)", borderColor: "rgba(110,86,207,0.2)" }
        }>{tag}</span>
        <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.018em", margin: "16px 0 18px" }}>{title}</h3>
        {items.map((it, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(0,0,0,0.05)", fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
            <span style={{ flex: "0 0 14px", marginTop: 4, color: tone === "before" ? "var(--danger)" : "var(--accent)" }}>
              {tone === "before"
                ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                : <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>}
            </span>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </div>
  );
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">The shift</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Before & after <em>Workspaces</em>.</h2>
        </div>
        <div className="grid grid-2" style={{ gap: 20 }}>
          <Card tone="before" tag="Before" title="One legal tenant that fits no-one" items={[
            "Every entity competes for templates and clause language",
            "Sensitive deals visible to the wrong reviewers",
            "Reporting mixes Sweden, Norway and Project Helix into noise",
            "New entity onboarding takes weeks of manual setup",
          ]} />
          <Card tone="after" tag="After" title="Workspaces that work without duplicating" items={[
            "Each entity inherits playbooks but owns its own redlines",
            "Per-workspace permissions, audit and data residency",
            "Roll-up reporting across the parent, clean by entity",
            "New workspace in one click. Same SSO. Same admin.",
          ]} />
        </div>
      </div>
    </section>
  );
}

function FourStepsSetup() {
  const steps = [
    { n: "01", title: "Create a workspace", desc: "Pick a parent, name it, set residency. Inherits roles + playbooks." },
    { n: "02", title: "Invite the team", desc: "SCIM provisioning or Slack handle. Roles map automatically." },
    { n: "03", title: "Work independently", desc: "Each workspace has its own queue, redlines and templates." },
    { n: "04", title: "Report globally", desc: "Group-level dashboards roll workspaces up, without leaking." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Built in 5 minutes</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Four steps from <em>setup to scale</em>.</h2>
        </div>
        <div className="tick-rule" style={{ marginBottom: 24 }} />
        <div className="grid grid-4" style={{ gap: 16 }}>
          {steps.map((s) => (
            <div key={s.n} className="card" style={{ padding: 24 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.08em", marginBottom: 14 }}>{s.n}</div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8, letterSpacing: "-0.012em" }}>{s.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkspacesFeatures() {
  const items = [
    { icon: "workspace", title: "Multi-workspace", desc: "Independent workspaces per entity, BU, region or deal, with no cross-bleed." },
    { icon: "permission", title: "Entity hierarchy", desc: "Parent / child structure with optional inheritance of templates and policies." },
    { icon: "intake", title: "Shared intake", desc: "Cross-workspace request portal that routes to the right entity automatically." },
    { icon: "legal", title: "Local playbooks", desc: "Override clause language and approval rules per workspace, without forking." },
    { icon: "analytics", title: "Group reporting", desc: "Roll-up dashboards across workspaces, cycle time, spend, obligations." },
    { icon: "dataroom", title: "Residency per workspace", desc: "Pin each workspace to EU, US, or APAC with workspace-level encryption keys." },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Capabilities</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Everything workspaces <em>should be</em>.</h2>
        </div>
        <div className="grid grid-3" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elevated)" }}>
          {items.map((f, i) => (
            <div key={f.title} style={{
              padding: 28,
              borderRight: ((i + 1) % 3 !== 0) ? "1px solid var(--line)" : "none",
              borderBottom: i < 3 ? "1px solid var(--line)" : "none",
            }}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-soft)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 16 }}>
                <Icon name={f.icon} size={16} />
              </span>
              <h3 className="h-card" style={{ marginBottom: 8 }}>{f.title}</h3>
              <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkspacesQuote() {
  return (
    <section className="section-tight">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{
          background: "linear-gradient(180deg, #F4EFFB, #FAFAF7)", border: "1px solid var(--line)",
          borderRadius: "var(--r-xl)", padding: "36px 40px",
        }}>
          <p style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(20px, 2.2vw, 26px)", lineHeight: 1.35, letterSpacing: "-0.005em",
            margin: "0 0 22px", color: "var(--ink-1)",
          }}>
            "We rebuilt our four-entity legal stack on Workspaces in two weeks. We finally have one platform, without forcing one process."
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 32, height: 32, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)" }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Tomas Lindberg</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)" }}>General Counsel · Northwind Group</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkspacesCTA() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ background: "linear-gradient(180deg, #F4EFFB 0%, #FAFAF7 100%)", border: "1px solid var(--line)", borderRadius: "var(--r-2xl)", padding: "48px 48px" }}>
          <div style={{ maxWidth: 640 }}>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(28px, 3.4vw, 40px)", lineHeight: 1.1, letterSpacing: "-0.025em", margin: "0 0 14px" }}>
              Make workspaces a <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" }}>competitive edge</span>.
            </h2>
            <p style={{ color: "var(--ink-3)", fontSize: 16, lineHeight: 1.55, margin: 0, maxWidth: 520 }}>
              We'll configure to your entities, roles and rules in 25 minutes flat.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/pricing">View pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WsSeparationMockup() {
  const workspaces = [
    { label: "Legal, Sweden", color: "#7B61FF", docs: ["Volantis MSA", "NDA Template", "DPA v2"] },
    { label: "Legal, Norway", color: "#0EA5E9", docs: ["Nordia SLA", "Supplier Agreement"] },
    { label: "Finance", color: "#16A34A", docs: ["CFO Approval Rules", "Invoice Template"] },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>All workspaces</span>
        <span style={{ fontSize: 11, color: "var(--ink-4)", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6, padding: "2px 8px" }}>3 workspaces</span>
      </div>
      <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
        {workspaces.map((ws, i) => (
          <div key={i} style={{ borderRadius: 10, border: "1px solid var(--line)", overflow: "hidden" }}>
            <div style={{ padding: "9px 14px", display: "flex", alignItems: "center", gap: 9, background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
              <div style={{ width: 20, height: 20, borderRadius: 5, background: ws.color, flexShrink: 0 }} />
              <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)" }}>{ws.label}</span>
              <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--ink-5)", padding: "1px 6px", borderRadius: 99, border: "1px solid var(--line)" }}>Private</span>
            </div>
            <div style={{ padding: "8px 14px", display: "flex", gap: 6, flexWrap: "wrap" }}>
              {ws.docs.map((d, j) => (
                <span key={j} style={{ fontSize: 11, color: "var(--ink-3)", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 6, padding: "2px 8px" }}>{d}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ padding: "10px 18px", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 7 }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>No cross-workspace access, fully isolated</span>
      </div>
    </div>
  );
}

function WsPermissionsMockup() {
  const roles = [
    { name: "Sara R.", role: "Admin", access: "Full access", color: "#7B61FF" },
    { name: "Tom W.", role: "Editor", access: "Own contracts", color: "#0EA5E9" },
    { name: "Linnea A.", role: "Viewer", access: "Read-only", color: "#16A34A" },
    { name: "Magnus H.", role: "Guest", access: "Scoped folder", color: "#B97A00" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>Workspace roles · Legal Sweden</span>
        <span style={{ fontSize: 11, color: "var(--accent)", background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.2)", borderRadius: 6, padding: "2px 8px" }}>4 members</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 72px 100px", padding: "7px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Member</span><span>Role</span><span style={{ textAlign: "right" }}>Access</span>
      </div>
      {roles.map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 72px 100px", padding: "11px 18px", borderBottom: i < roles.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <div style={{ width: 24, height: 24, borderRadius: "50%", background: r.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#fff" }}>{r.name.split(" ").map(n => n[0]).join("")}</div>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{r.name}</span>
          </div>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{r.role}</span>
          <span style={{ fontSize: 11, color: "var(--ink-4)", textAlign: "right" }}>{r.access}</span>
        </div>
      ))}
      <div style={{ padding: "10px 18px", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 7 }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Sensitive files blocked from Viewer & Guest roles</span>
      </div>
    </div>
  );
}

function WsBrandingMockup() {
  const workspaces = [
    {
      initials: "VS",
      color: "#7B61FF",
      borderColor: "#7B61FF",
      name: "Volantis Sweden AB",
      url: "sweden.www.contractcontrol.co",
      btnColor: "#7B61FF",
      docs: [
        { label: "Supplier NDA", icon: "✓", iconColor: "#22c55e" },
        { label: "SaaS Agreement", icon: "✓", iconColor: "#22c55e" },
        { label: "DPA, GDPR", icon: "✎", iconColor: "#f59e0b" },
      ],
    },
    {
      initials: "VN",
      color: "#0ea5e9",
      borderColor: "#0ea5e9",
      name: "Volantis Norge AS",
      url: "norway.www.contractcontrol.co",
      btnColor: "#0ea5e9",
      docs: [
        { label: "Employment MSA", icon: "✓", iconColor: "#22c55e" },
        { label: "Vendor Contract", icon: "✓", iconColor: "#22c55e" },
        { label: "Frame Agreement", icon: "✎", iconColor: "#f59e0b" },
      ],
    },
  ];
  return (
    <div style={{ display: "flex", gap: 14, fontFamily: "var(--font-sans)" }}>
      {workspaces.map((ws, wi) => (
        <div key={wi} style={{
          flex: 1, borderRadius: 14, border: `1.5px solid ${ws.borderColor}33`,
          background: "var(--bg-elevated)", overflow: "hidden",
          boxShadow: `0 4px 24px ${ws.color}18`,
        }}>
          {/* Header */}
          <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 34, height: 34, borderRadius: 8, background: ws.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: "#fff", flexShrink: 0 }}>{ws.initials}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ws.name}</div>
              <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{ws.url}</div>
            </div>
          </div>
          {/* Docs */}
          <div style={{ padding: "12px 16px", display: "flex", flexDirection: "column", gap: 7 }}>
            {ws.docs.map((doc, di) => (
              <div key={di} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                <div style={{ flex: 1, height: 7, borderRadius: 4, background: "var(--line)" }} />
                <span style={{ fontSize: 12, color: doc.iconColor, fontWeight: 600 }}>{doc.icon}</span>
              </div>
            ))}
          </div>
          {/* Button */}
          <div style={{ padding: "10px 16px 14px" }}>
            <div style={{ background: ws.btnColor, borderRadius: 8, padding: "8px 0", textAlign: "center", fontSize: 11, fontWeight: 700, color: "#fff", letterSpacing: "0.04em" }}>
              OPEN WORKSPACE
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function WorkspacesFeatureSections() {
  const checkIcon = <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>;
  const sections = [
    {
      eyebrow: "Data separation",
      h2: <>Keep data clean <em>and separate</em>.</>,
      body: "Each team or unit gets its own isolated workspace. Contracts, templates, and workflows stay in their lane, no shared folders, no cross-team confusion.",
      bullets: ["Separate spaces for each entity, team, or unit", "No shared folders or cross-team confusion", "Full control over what each workspace sees and stores"],
      mockup: <WsSeparationMockup />,
      flip: false,
    },
    {
      eyebrow: "Permissions",
      h2: <>Let the <em>right people in</em>.</>,
      body: "Set custom roles for each workspace. Give users exactly what they need to do their job, and nothing more. Sensitive files stay where they belong.",
      bullets: ["Set custom roles for each workspace", "Give users only what they need to do their job", "Block sensitive files from the wrong eyes"],
      mockup: <WsPermissionsMockup />,
      flip: true,
      soft: true,
    },
    {
      eyebrow: "Customisation",
      h2: <>Make each space <em>your own</em>.</>,
      body: "Add your logo, colours, and document styling. Configure local e-signature tools and templates. Build trust with partners and internal teams.",
      bullets: ["Add your logo, colour, and document styling", "Configure local e-signature tools and templates", "Build trust with partners and internal teams"],
      mockup: <WsBrandingMockup />,
      flip: false,
    },
  ];
  return (<>
    {sections.map((s, i) => (
      <section key={i} className="section" style={s.soft ? { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } : {}}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", direction: s.flip ? "rtl" : "ltr" }}>
            <div style={{ direction: "ltr" }}>
              <span className="eyebrow">{s.eyebrow}</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>{s.h2}</h2>
              <p style={{ fontSize: 15.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "18px 0 24px" }}>{s.body}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {s.bullets.map((b, bi) => (
                  <div key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--accent)", marginTop: 2 }}>{checkIcon}</span>
                    {b}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ direction: "ltr" }}>{s.mockup}</div>
          </div>
        </div>
      </section>
    ))}
  </>);
}

function WorkspacesPage() {
  return (
    <div>
      <WorkspacesHero />
      <LogoStrip />
      <WorkspacesMetrics />
      <WorkspacesFeatureSections />
      <WorkspacesFeatures />
      <WorkspacesCTA />
    </div>
  );
}

Object.assign(window, { WorkspacesPage });
