// Advanced Permissions module page

function PermissionsHero() {
  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-permissions" 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-permissions)" />
      </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" }}>Advanced Permissions</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" }}>
              <span className="accent">Least privilege</span>,<br/>
              by default -<br/>
              across every contract.
            </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: 18, 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: 12 }}>
                  <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>Role · Finance manager</span>
                  <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>v2.4</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto auto", gap: 0, fontSize: 12 }}>
                  {[["Resource","Read","Write","Sign"],
                    ["MSAs · EU","✓","-","-"],
                    ["DPAs · EU","✓","✓","-"],
                    ["Salary contracts","redacted","-","-"],
                    ["Renewals queue","✓","✓","✓"],
                    ["Audit log","✓","-","-"],
                  ].map((row, ri) => row.map((cell, ci) => (
                    <div key={ri+"-"+ci} style={{
                      padding: "8px 10px",
                      borderBottom: ri < 5 ? "1px solid rgba(0,0,0,0.05)" : "none",
                      fontFamily: ri === 0 ? "inherit" : (ci === 0 ? "inherit" : "var(--font-mono)"),
                      fontSize: ri === 0 ? 10.5 : 11.5,
                      fontWeight: ri === 0 ? 500 : 400,
                      letterSpacing: ri === 0 ? "0.1em" : 0,
                      textTransform: ri === 0 ? "uppercase" : "none",
                      color: ri === 0 ? "var(--ink-4)"
                           : ci === 0 ? "var(--ink-2)"
                           : cell === "✓" ? "var(--success)"
                           : cell === "-" ? "var(--ink-4)"
                           : "var(--warning)",
                      textAlign: ci === 0 ? "left" : "center",
                    }}>{cell}</div>
                  )))}
                </div>
                <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid rgba(0,0,0,0.06)", fontSize: 11.5, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
                  <span>14 conditional rules · 3 attributes</span>
                  <span style={{ color: "var(--success)", fontWeight: 500 }}>● Active</span>
                </div>
              </div>
            </div>
            <p style={{ maxWidth: 520, fontSize: 16.5, lineHeight: 1.55, color: "rgba(255,255,255,0.65)", margin: 0 }}>
              Role-, attribute-, and entity-based access controls that scale from 10 to 10,000 users, with clause-level redactions, approval-gated reads, and a full audit trail.
            </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>
          {/* Permission matrix mock */}
          <div className="mob-hide" style={{ background: "white", border: "1px solid rgba(0,0,0,0.08)", borderRadius: 16, padding: 18, 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: 12 }}>
              <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>Role · Finance manager</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>v2.4</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto auto", gap: 0, fontSize: 12 }}>
              {[["Resource","Read","Write","Sign"],
                ["MSAs · EU","✓","-","-"],
                ["DPAs · EU","✓","✓","-"],
                ["Salary contracts","redacted","-","-"],
                ["Renewals queue","✓","✓","✓"],
                ["Audit log","✓","-","-"],
              ].map((row, ri) => row.map((cell, ci) => (
                <div key={ri+"-"+ci} style={{
                  padding: "8px 10px",
                  borderBottom: ri < 5 ? "1px solid rgba(0,0,0,0.05)" : "none",
                  fontFamily: ri === 0 ? "inherit" : (ci === 0 ? "inherit" : "var(--font-mono)"),
                  fontSize: ri === 0 ? 10.5 : 11.5,
                  fontWeight: ri === 0 ? 500 : 400,
                  letterSpacing: ri === 0 ? "0.1em" : 0,
                  textTransform: ri === 0 ? "uppercase" : "none",
                  color: ri === 0 ? "var(--ink-4)"
                       : ci === 0 ? "var(--ink-2)"
                       : cell === "✓" ? "var(--success)"
                       : cell === "-" ? "var(--ink-4)"
                       : "var(--warning)",
                  textAlign: ci === 0 ? "left" : "center",
                }}>{cell}</div>
              )))}
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid rgba(0,0,0,0.06)", fontSize: 11.5, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
              <span>14 conditional rules · 3 attributes</span>
              <span style={{ color: "var(--success)", fontWeight: 500 }}>● Active</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PermissionsMetrics() {
  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 for trust, <em>at every scale</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={20000} label="Users handled per tenant" prefix="" suffix="+" />
          </div>
          <div style={{ borderRight: "1px solid var(--line)", padding: "0 24px" }}>
            <CounterMetric value={6} label="Permission dimensions (role · attr · entity · region · time · purpose)" />
          </div>
          <div style={{ borderRight: "1px solid var(--line)", padding: "0 24px" }}>
            <CounterMetric value={100} suffix="%" label="Of reads, writes & signs audit-logged" />
          </div>
          <div style={{ padding: "0 24px" }}>
            <div className="metric"><div className="num"><em>0</em></div><div className="label">Untracked accesses, ever</div></div>
          </div>
        </div>
        <div className="tick-rule" />
      </div>
    </section>
  );
}

function PermissionsBeforeAfter() {
  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>Advanced Permissions</em>.</h2>
        </div>
        <div className="grid grid-2" style={{ gap: 20 }}>
          <Card tone="before" tag="Before" title="All-or-nothing access that satisfies no one" items={[
            "Sales sees salary contracts they shouldn't",
            "Reviewers wait days for IT to grant access",
            "Approvals happen in email, not in the system",
            "Audits become weeks of screenshot collection",
          ]} />
          <Card tone="after" tag="After" title="Permissions modelled the way your company is" items={[
            "Role + attribute + entity rules expressed as policies",
            "Unlimited roles and groups with metadata-level control",
            "Clause-level redactions and watermarks per role",
            "Every read, write and sign captured in audit log",
          ]} />
        </div>
      </div>
    </section>
  );
}

function PermissionsSetup() {
  const steps = [
    { n: "01", title: "Model roles", desc: "Define roles with inherited base permissions for your common archetypes." },
    { n: "02", title: "Write rules", desc: "Compose policies in plain English, entity, region, value, purpose." },
    { n: "03", title: "Inherit, override", desc: "Workspaces and folders inherit policy. Override per resource as needed." },
    { n: "04", title: "Audit", desc: "Live policy evaluator and full audit trail per user, per document." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Built in 1 hour</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 PermissionsFeatures() {
  const items = [
    { icon: "permission", title: "RBAC + ABAC", desc: "Role and attribute-based controls in one policy engine. No either/or." },
    { icon: "review", title: "Clause-level redaction", desc: "Hide salary, pricing, IP clauses per role, same document, different views." },
    { icon: "sign", title: "Approval-gated reads", desc: "Sensitive folders require named approver before opening. Logged with reason." },
    { icon: "workspace", title: "Granular Roles & Groups", desc: "Create unlimited custom roles and groups with precise access levels (Read, Write, Sign, or None) mapped directly to your metadata and workflows." },
    { icon: "analytics", title: "Audit & SoD", desc: "Separation-of-duties enforced at policy time, not after the fact." },
    { icon: "dataroom", title: "Residency controls", desc: "Restrict access by IP, region or device posture per workspace." },
  ];
  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 advanced permissions <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 PermissionsQuote() {
  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 finally have the levers to model access exactly how it actually works, without breaking our culture of openness."
          </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 }}>Maja Eriksson</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)" }}>CISO · Helix Legal</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PermissionsCTA() {
  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 advanced permissions 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 30 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">Pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PermissionsValueProps() {
  return (
    <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Why teams switch</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Stop giving everyone <em>too much access</em>.</h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            Most teams default to broad access because scoping is too hard. Advanced Permissions makes least-privilege the easy path, not the exception.
          </p>
        </div>
        <div className="tick-rule" />
        <div className="grid grid-3" style={{ gap: 0 }}>
          {[
            { num: "0", label: "unscoped data leaks", note: "Clause-level redactions and scoped links mean every user sees exactly what they're meant to, nothing more, nothing less." },
            { num: "100%", label: "audit trail coverage", note: "Every view, edit, download, and approval is logged. Full compliance trail across every contract, folder, and workspace, without asking anyone." },
            { num: "∞", label: "roles & groups", note: "Create unlimited groups and custom roles mapped to system metadata. Onboard new staff instantly by sharing documents directly to groups." },
          ].map((p, i, arr) => (
            <div key={p.label} style={{ borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none", padding: "0 24px" }}>
              <div className="metric">
                <div className="num" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)", fontSize: "clamp(40px, 5vw, 64px)" }}>{p.num}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-2)", margin: "8px 0 10px" }}>{p.label}</div>
                <div style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{p.note}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="tick-rule" />
      </div>
    </section>
  );
}

function PermissionsPage() {
  return (
    <div>
      <PermissionsHero />
      <LogoStrip />
      <PermissionsValueProps />
      <PermissionsBeforeAfter />
      <PermissionsFeatures />
      <PermissionsQuote />
      <PermissionsCTA />
    </div>
  );
}

Object.assign(window, { PermissionsPage });