// Marketing pages: Solutions, Pricing, Customers, Security, Resources, Company
// + 3 missing modules: Dataroom, Document Hub, Legal Hub
// All in one file to keep things tight.

// ===== Reusable bits =====
const PageHero = ({ eyebrow, title, lede, kicker, ctas = true, dark = false }) =>
<section style={{
  padding: "96px 0 56px",
  background: dark ? "linear-gradient(180deg, #0E0E10 0%, #14111F 100%)" : "transparent",
  color: dark ? "white" : undefined,
  position: "relative",
  overflow: "hidden"
}}>
    {dark &&
  <div style={{
    position: "absolute", inset: 0,
    background: "radial-gradient(circle at 30% 20%, rgba(110,86,207,0.22), transparent 60%)",
    pointerEvents: "none"
  }} />
  }
    <div className="container" style={{ position: "relative" }}>
      <div className="cc-section-header" style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <span className="eyebrow fade-up" style={dark ? { color: "rgba(255,255,255,0.6)" } : {}}>{eyebrow}</span>
        <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)", color: dark ? "white" : undefined }}>
          {title}
        </h1>
        {lede && <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center", color: dark ? "rgba(255,255,255,0.72)" : undefined }}>{lede}</p>}
        {kicker && <div style={{ marginTop: 18, fontSize: 12.5, color: dark ? "rgba(255,255,255,0.5)" : "var(--ink-4)" }}>{kicker}</div>}
        {ctas &&
      <div className="fade-up cc-hero-ctas" style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center" }}>
            <a className="btn btn-primary btn-lg" href="/book-demo" style={dark ? { background: "white", color: "var(--ink-1)" } : {}}>Book demo <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost btn-lg" href="/" style={dark ? { color: "white", border: "1px solid rgba(255,255,255,0.25)" } : {}}>Back to home</a>
          </div>
      }
      </div>
    </div>
  </section>;


// ===== Solutions =====
function SolutionsPage() {
  const solutions = [
  { role: "Legal", href: "/solutions/team/legal", title: "Stop being the bottleneck", body: "Self-serve intake for low-risk requests. AI redlines on third-party paper. Your time goes to the work that matters.", metrics: [["94%", "faster turnaround"], ["6 min", "median first draft"]], icon: "legal" },
  { role: "Sales", href: "/solutions/team/sales", title: "Close on your customer's timeline", body: "Standard MSAs, NDAs, and order forms, generated and sent in minutes. Track every signature in your CRM.", metrics: [["3.2×", "deal velocity"], ["0", "lost contracts"]], icon: "negotiation" },
  { role: "Procurement", href: "/solutions/team/procurement", title: "Negotiate from a position of leverage", body: "Vendor risk scored automatically. Renewals tracked. Obligations surfaced before they cost you.", metrics: [["18%", "savings on renewals"], ["100%", "obligation coverage"]], icon: "obligations" },
  { role: "HR & People", href: "/solutions/team/hr", title: "Hire faster, onboard cleaner", body: "Offer letters, contractor agreements, equity docs: on-brand templates with smart routing for variations.", metrics: [["48h", "from offer to signed"], ["12+", "template variations"]], icon: "workspace" },
  { role: "Finance", href: "/solutions/team/finance", title: "Lock in revenue, plug leakage", body: "Auto-renewals tracked, payment terms enforced, contract-health scores on every agreement, and milestone-based invoicing tied straight to your ERP.", metrics: [["€2.1M", "avg. leakage prevented"], ["100%", "milestone visibility"]], icon: "analytics" }];

  return (
    <div>
      <PageHero
        eyebrow="Solutions"
        title={<>One platform, every team, <span className="accent">zero silos</span>.</>}
        lede="ContractControl is built for the entire revenue and operations chain: legal, finance, sales, procurement, HR. Pick your role to see what changes." />
      
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-3" style={{ gap: 16 }}>
            {solutions.map((s) =>
            <a key={s.role} href={s.href} className="card" style={{ padding: 28, textDecoration: "none", color: "inherit", transition: "border-color 160ms ease, transform 160ms ease" }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--ink-5)";e.currentTarget.style.transform = "translateY(-2px)";}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--line)";e.currentTarget.style.transform = "translateY(0)";}}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                  <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                    <Icon name={s.icon} size={16} />
                  </span>
                  <span className="eyebrow no-dot">For {s.role}</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.015em", margin: "0 0 10px" }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: "0 0 20px" }}>{s.body}</p>
                <div style={{ display: "flex", gap: 24, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                  {s.metrics.map(([n, l]) =>
                <div key={l}>
                      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.025em", fontVariantNumeric: "tabular-nums" }}>{n}</div>
                      <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{l}</div>
                    </div>
                )}
                </div>
              </a>
            )}
          </div>
        </div>
      </section>
      <FinalCTA />
    </div>);

}

// ===== Pricing =====
const PRICING_TIERS = [
{ id: "essential", name: "Essential", perUser: 39, body: "For smaller teams that want to digitise and structure their contract processes.", features: [
  "Up to 200 active contracts",
  "Custom shared views & up to 2 groups",
  "Signing workflows",
  "1,000 SES + 200 Nordic eID signatures / year",
  "Up to 2 contract-event reminders",
  "API for read access"], cta: "Get started", maxUsers: 10 },
{ id: "growth", name: "Growth", perUser: 65, body: "For growing organisations that need more automation, control, and integrations.", features: [
  "Everything in Essential, plus:",
  "Unlimited active contracts",
  "Advanced metadata, filters & private views",
  "Custom workflows + conditional fields",
  "Unlimited SES + 500 Nordic eID / year",
  "Unlimited contract-event reminders",
  "Period close & KPIs per counterparty",
  "AI invoice vs. contracted-cost analysis",
  "Read & write API · ERP integrations"], cta: "Get started", maxUsers: 50, recommended: true },
{ id: "enterprise", name: "Enterprise", perUser: null, customCopy: "Custom", body: "For organisations with bespoke compliance, scale, and security needs.", features: [
  "Everything in Growth, plus:",
  "SSO / SAML / SCIM",
  "eIDAS QES signatures",
  "All Power Modules included as they GA",
  "Advanced permissions & SoD",
  "Audit log export",
  "Custom DPA + EU data residency",
  "Dedicated infrastructure options",
  "Named CSM + 24/7 support"], cta: "Talk to sales", maxUsers: Infinity }];

const PRICING_ADDONS = [
  { id: "document-hub", title: "Document Hub", price: 190, desc: "Beyond contracts - one home for board minutes, policies, and corporate records.", status: "active" },
  { id: "advanced-permissions", title: "Advanced Permissions", price: 190, desc: "Clause-level redaction, approval-gated reads, JIT access, and SoD enforcement.", status: "active" },
  { id: "workspaces", title: "Workspaces", price: 290, desc: "Per-entity, per-region or per-business-unit workspaces with clean separation and inheritance.", status: "active" },
  { id: "viewer-seats", title: "Viewer Seats - Unlimited", price: 190, desc: "Read-only access for unlimited stakeholders. Auditors, executives, finance - they review, comment, and download. They never count against your user count.", status: "active" },
  { id: "bulk-signatures", title: "BulkSignatures", price: 190, desc: "Bulk send feature for esignatures to upload recipients via CSV and send unique documents.", status: "active" },
  { id: "clickwrap", title: "Clickwrap", price: 190, desc: "Tracking for terms and conditions approval audits across your website.", status: "active" }
];


function recommendTier(users) {
  if (users <= 10) return "essential";
  if (users <= 50) return "growth";
  return "enterprise";
}

function formatEUR(n) {
  return "€" + n.toLocaleString("en-US");
}

function PricingCalculator() {
  const [users, setUsers] = React.useState(15); // min 5 per package
  const [selectedAddons, setSelectedAddons] = React.useState({});
  const [showAllAddons, setShowAllAddons] = React.useState(false);

  const recommended = recommendTier(users);
  const addonTotal = PRICING_ADDONS.reduce((sum, a) => sum + (selectedAddons[a.id] ? a.price : 0), 0);

  const toggleAddon = (id) => setSelectedAddons((s) => ({ ...s, [id]: !s[id] }));

  const computePrice = (tier) => {
    if (tier.id === "enterprise") return { display: "Custom", sub: "Talk to sales" };
    const seats = users * tier.perUser;
    const total = seats + addonTotal;
    return {
      display: formatEUR(total),
      sub: addonTotal > 0 ?
      `${formatEUR(seats)} seats + ${formatEUR(addonTotal)} add-ons` :
      `${users} × ${formatEUR(tier.perUser)}/user`
    };
  };

  return (
    <section className="section-tight">
      <div className="container">
        {/* Calculator panel */}
        <div className="card cc-pricing-calc-card" style={{ padding: 40, marginBottom: 32, background: "var(--bg-elevated)" }}>
          <div className="cc-pricing-calc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1px 1fr", gap: 40, alignItems: "stretch" }}>
            {/* Left: user slider */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
                <span className="eyebrow no-dot" style={{ color: "var(--accent)" }}>1 · Choose your team size</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-4)" }}>users</span>
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 18 }}>
                <span style={{ fontSize: 56, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--ink-1)", fontVariantNumeric: "tabular-nums" }}>{users >= 100 ? "100+" : users}</span>
                <span style={{ fontSize: 16, color: "var(--ink-4)" }}>active users</span>
              </div>
              <input
                type="range"
                min="5"
                max="100"
                value={users}
                onChange={(e) => setUsers(Number(e.target.value))}
                style={{
                  width: "100%",
                  accentColor: "var(--accent)",
                  height: 6
                }} />
              
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-5)", marginTop: 8, fontFamily: "var(--font-mono)" }}>
                <span>5</span><span>25</span><span>50</span><span>75</span><span>100+</span>
              </div>
              <div style={{ marginTop: 10, fontSize: 12, color: "var(--ink-4)" }}>Minimum 5 users per package.</div>
              <div style={{ marginTop: 20, padding: "12px 16px", background: "var(--accent-soft)", borderRadius: 8, fontSize: 13.5, color: "var(--ink-2)" }}>
                <strong style={{ color: "var(--accent)", fontWeight: 500 }}>Recommended:</strong>{" "}
                {recommended === "essential" && <>Essential plan, best fit for teams of 5-10.</>}
                {recommended === "growth" && <>Growth plan, best fit for teams of 11-50.</>}
                {recommended === "enterprise" && <>Enterprise plan: let's tailor a quote for your team.</>}
              </div>
            </div>

            <div className="cc-pricing-calc-divider" style={{ background: "var(--line)", width: 1 }} />

            {/* Right: add-ons */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
                <span className="eyebrow no-dot" style={{ color: "var(--accent)" }}>2 · Add power modules</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-4)" }}>optional</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {PRICING_ADDONS.slice(0, showAllAddons ? undefined : 4).map((a) => {
                  const isComingSoon = a.status === "coming-soon";
                  const on = !isComingSoon && !!selectedAddons[a.id];
                  return (
                    <div
                      key={a.id}
                      onClick={isComingSoon ? undefined : () => toggleAddon(a.id)}
                      style={{
                        display: "flex", alignItems: "center", justifyContent: "space-between",
                        gap: 16, padding: "12px 16px",
                        background: on ? "var(--accent-soft)" : "var(--bg-soft)",
                        border: "1px solid " + (on ? "var(--accent)" : "var(--line)"),
                        borderRadius: 10,
                        cursor: isComingSoon ? "default" : "pointer",
                        textAlign: "left",
                        transition: "all 160ms ease",
                        font: "inherit",
                        color: "inherit",
                        width: "100%",
                        opacity: isComingSoon ? 0.7 : 1
                      }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0, width: "100%" }}>
                        {!isComingSoon && (
                          <span style={{
                            flex: "0 0 18px", height: 18, borderRadius: 5,
                            background: on ? "var(--accent)" : "transparent",
                            border: "1.5px solid " + (on ? "var(--accent)" : "var(--ink-5)"),
                            display: "grid", placeItems: "center", color: "white"
                          }}>
                            {on && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2"><polyline points="20 6 9 17 4 12" /></svg>}
                          </span>
                        )}
                        <div style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
                            <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-1)" }}>{a.title}</div>
                            {isComingSoon && <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 6px", borderRadius: 4, background: "var(--line)", color: "var(--ink-3)", whiteSpace: "nowrap" }}>Coming soon</span>}
                          </div>
                          {!isComingSoon && <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 1 }}>+ {formatEUR(a.price)}/mo</div>}
                        </div>
                      </div>
                    </div>);
                })}
                {!showAllAddons && PRICING_ADDONS.length > 4 && (
                  <button 
                    onClick={() => setShowAllAddons(true)}
                    style={{ 
                      marginTop: 8, padding: 12, background: "transparent", border: "1px dashed var(--line-strong)", 
                      borderRadius: 10, color: "var(--ink-3)", fontSize: 13, fontWeight: 500, cursor: "pointer", width: "100%" 
                    }}>
                    Show more modules...
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Live tier cards */}
        <div className="grid grid-3 cc-pricing-tiers" style={{ gap: 16, alignItems: "stretch" }}>
          {PRICING_TIERS.map((t) => {
            const isRecommended = t.id === recommended;
            const price = computePrice(t);
            return (
              <div key={t.id} className="card cc-tier-card" style={{
                padding: 32,
                position: "relative",
                background: isRecommended ? "var(--ink-1)" : "var(--bg-elevated)",
                color: isRecommended ? "white" : "var(--ink-1)",
                borderColor: isRecommended ? "var(--ink-1)" : "var(--line)",
                display: "flex", flexDirection: "column",
                transform: isRecommended ? "translateY(-6px)" : "none",
                boxShadow: isRecommended ? "0 24px 48px -16px rgba(110,86,207,0.35)" : "none",
                transition: "all 240ms cubic-bezier(0.4, 0, 0.2, 1)"
              }}>
                {isRecommended &&
                <span style={{ position: "absolute", top: 16, right: 16, background: "var(--accent)", color: "white", fontSize: 11, fontWeight: 500, padding: "4px 10px", borderRadius: 999, letterSpacing: "0.04em" }}>
                    Recommended for you
                  </span>
                }
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: isRecommended ? "rgba(255,255,255,0.6)" : "var(--ink-4)" }}>{t.name}</div>
                <div style={{ marginTop: 18, minHeight: 76 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                    <span style={{ fontSize: 44, fontWeight: 500, letterSpacing: "-0.03em", fontVariantNumeric: "tabular-nums" }}>{price.display}</span>
                    {t.id !== "enterprise" && <span style={{ fontSize: 14, color: isRecommended ? "rgba(255,255,255,0.55)" : "var(--ink-4)" }}>/mo</span>}
                  </div>
                  <div style={{ fontSize: 12.5, color: isRecommended ? "rgba(255,255,255,0.55)" : "var(--ink-4)", marginTop: 4, fontFamily: "var(--font-mono)" }}>{price.sub}</div>
                </div>
                <p style={{ fontSize: 14, color: isRecommended ? "rgba(255,255,255,0.7)" : "var(--ink-3)", margin: "12px 0 24px", lineHeight: 1.55, minHeight: 44 }}>{t.body}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                  {t.features.map((f) =>
                  <li key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14 }}>
                      <span style={{ flex: "0 0 16px", marginTop: 4, color: isRecommended ? "#C7B4FF" : "var(--accent)" }}>
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><polyline points="20 6 9 17 4 12" /></svg>
                      </span>
                      <span style={{ color: isRecommended ? "rgba(255,255,255,0.85)" : "var(--ink-2)" }}>{f}</span>
                    </li>
                  )}
                </ul>
                <a className={isRecommended ? "btn btn-accent btn-lg" : "btn btn-primary btn-lg"} href="/book-demo" style={{ width: "100%" }}>{t.cta} <Icon name="arrow" size={14} /></a>
              </div>);

          })}
        </div>
        <div style={{ textAlign: "center", marginTop: 24, fontSize: 13, color: "var(--ink-4)" }}>
          All prices in EUR · billed annually · No credit card required
        </div>
      </div>
    </section>);

}

function PricingPage() {
  const compare = [
  { cat: "Intake & registration", rows: [
    ["Register types & categories", true, true, true],
    ["Document metadata fields", true, true, true],
    ["Custom shared views", true, true, true],
    ["Custom groups", "Up to 2", "Unlimited", "Unlimited"],
    ["Private custom views", false, true, true],
    ["Advanced filters on metadata", false, true, true],
    ["Advanced metadata fields (person, company, product…)", false, true, true],
    ["External collaborators on documents", false, true, true]]
  },
  { cat: "Drafting & workflows", rows: [
    ["Contract repository", true, true, true],
    ["Active contracts", "Up to 200", "Unlimited", "Unlimited"],
    ["Document & template library", true, true, true],
    ["Custom workflows for docs & templates", false, true, true],
    ["Conditional fields in documents & templates", false, true, true],
    ["Signature & approval flows", false, true, true]]
  },
  { cat: "Signing", rows: [
    ["Signing workflows", true, true, true],
    ["SES (simple) signatures", "1,000 / year", "Unlimited", "Unlimited"],
    ["Nordic eID signatures (BankID SE/NO, MitID, NemID)", "200 / year", "500 / year", "Custom"],
    ["eIDAS QES signatures", false, false, true]]
  },
  { cat: "Tracking & insights", rows: [
    ["Reminders for contract events", "Up to 2", "Unlimited", "Unlimited"],
    ["Period close & KPIs per counterparty", false, true, true],
    ["AI analysis for KPIs & financial data", false, true, true],
    ["Invoice vs. contracted-cost comparison", false, true, true]]
  },
  { cat: "API & integrations", rows: [
    ["API for read access", true, true, true],
    ["API for write access", false, true, true],
    ["ERP integrations", false, true, true],
    ["SSO / SAML / SCIM", false, false, true],
    ["Custom DPA + EU data residency", false, true, true],
    ["Audit log export", false, false, true],
    ["Dedicated infrastructure options", false, false, true]]
  },
  { cat: "Power modules (add-on)", rows: [
    ["Document Hub", "Add-on", "Add-on", "Add-on"],
    ["Advanced Permissions & SoD", false, "Add-on", "Add-on"],
    ["Workspaces", "Add-on", "Add-on", "Add-on"],
    ["Unlimited viewer seats", "Add-on", "Add-on", "Add-on"],
    ["BulkSignatures", "Add-on", "Add-on", "Add-on"],
    ["Clickwrap", "Add-on", "Add-on", "Add-on"]]
  },
  { cat: "Support", rows: [
    ["Email support", true, true, true],
    ["Priority support · 4h SLA", false, true, true],
    ["Named Customer Success Manager", false, false, true],
    ["24/7 support", false, false, true]]
  }];

  const Cell = ({ v }) => v === true ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.2"><polyline points="20 6 9 17 4 12" /></svg> :
  v === false ? <span style={{ color: "var(--ink-5)" }}>-</span> :
  v === "Coming soon" ? <span style={{ fontSize: 11, fontWeight: 500, padding: "3px 8px", borderRadius: 999, background: "rgba(214,141,32,0.10)", color: "#8A5A12", border: "1px solid rgba(214,141,32,0.28)", whiteSpace: "nowrap" }}>Coming soon</span> :
  v === "In beta" ? <span style={{ fontSize: 11, fontWeight: 500, padding: "3px 8px", borderRadius: 999, background: "rgba(26,115,232,0.10)", color: "var(--accent)", border: "1px solid rgba(26,115,232,0.20)", whiteSpace: "nowrap" }}>In beta</span> :
  <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{v}</span>;
  return (
    <div>
      <PageHero
        eyebrow="Pricing"
        title={<>Simple, <em>per-user pricing</em>. <span className="accent">No contract limits</span>.</>}
        lede="Pay for the people using the platform, not for every contract, signature, or template. Billed annually, cancel anytime."
        ctas={false} />
      
      <PricingCalculator />

      <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="cc-pricing-addons-head" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start", marginBottom: 40 }}>
            <div>
              <span className="eyebrow">Power add-ons</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Extend with <em>specialized modules</em>.</h2>
            </div>
            <p className="lede" style={{ paddingTop: 24 }}>
              Stack onto Growth or Enterprise. Per-workspace pricing, not per user, not per document.
            </p>
          </div>
          <div className="grid grid-2" style={{ gap: 16 }}>
            {PRICING_ADDONS.filter(a => a.status !== "coming-soon").map((a) => {
              const isBeta = a.status === "beta";
              
              return (
                <div key={a.title} className="card" style={{ padding: 28, display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24 }}>
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                      <h3 className="h-card" style={{ margin: 0 }}>{a.title}</h3>
                      {isBeta && (
                        <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(26,115,232,0.10)", color: "var(--accent)", border: "1px solid rgba(26,115,232,0.20)", textTransform: "uppercase", letterSpacing: "0.02em" }}>Beta</span>
                      )}
                    </div>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{a.desc}</p>
                  </div>
                  <span style={{ fontSize: 14, fontWeight: 500, color: "var(--accent)", whiteSpace: "nowrap", fontFamily: "var(--font-mono)" }}>+ {formatEUR(a.price)}/mo</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
            <span className="eyebrow">Compare plans</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Every line, <em>side by side</em>.</h2>
            <p className="lede" style={{ marginTop: 16 }}>The full feature matrix: everything every plan ships with, and exactly where the differences live.</p>
          </div>
          <div className="card cc-pricing-compare-wrap" style={{ overflow: "hidden", padding: 0 }}>
            <div className="cc-pricing-compare-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr" }}>
              <div style={{ padding: "20px 28px", fontSize: 11.5, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>Capability</div>
              {["Essential", "Growth", "Enterprise"].map((n) =>
              <div key={n} style={{ padding: "20px 24px", fontSize: 13, fontWeight: 500, color: "var(--ink-1)", textAlign: "center", background: "var(--bg-soft)", borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>{n}</div>
              )}
              {compare.map((g, gi) =>
              <React.Fragment key={g.cat}>
                  <div style={{ padding: "12px 28px", gridColumn: "span 4", fontSize: 11.5, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", background: "var(--accent-soft)", borderBottom: "1px solid var(--line)" }}>{g.cat}</div>
                  {g.rows.map((r, ri) =>
                <React.Fragment key={r[0]}>
                      <div style={{ padding: "14px 28px", fontSize: 14, color: "var(--ink-2)", borderBottom: !(gi === compare.length - 1 && ri === g.rows.length - 1) ? "1px solid var(--line)" : "none" }}>{r[0]}</div>
                      {[r[1], r[2], r[3]].map((v, i) =>
                  <div key={i} style={{ padding: "14px 24px", textAlign: "center", borderLeft: "1px solid var(--line)", borderBottom: !(gi === compare.length - 1 && ri === g.rows.length - 1) ? "1px solid var(--line)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Cell v={v} /></div>
                  )}
                    </React.Fragment>
                )}
                </React.Fragment>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
              { q: "How does user-based billing work for ContractControl plans?", a: "We bill only for active team members who draft, review, or manage contracts. Requesters and external signers are always free and unlimited, which helps you scale operations." },
              { q: "Are there limits on contract storage or transaction volumes?", a: "No, all plans include unlimited contract drafting, signature requests, and repository storage. We do not charge transaction fees or impose storage caps." },
              { q: "What is the standard onboarding timeline for new customers?", a: "Onboarding takes less than a day for Essential and Professional plans, while Enterprise setups average four to six weeks. Enterprise customers receive dedicated support from a Customer Success Manager to sync databases and train teams." },
              { q: "Where does ContractControl store customer data?", a: "All data is hosted in EU-only cloud facilities located in Frankfurt and Stockholm to guarantee GDPR compliance. Our hosting environments are certified under SOC 2 Type II and ISO 27001 security standards." },
              { q: "Do you support Qualified Electronic Signatures (QES)?", a: "Yes, ContractControl supports Qualified Electronic Signatures (QES) through native integrations with trusted identity providers. This standard is available on Enterprise plans to meet strict compliance requirements." },
              { q: "Can I upgrade or downgrade my subscription plan at any time?", a: "Yes, you can upgrade your plan instantly or request a downgrade at the end of your billing cycle. Adjustments are processed through your billing dashboard without service interruptions." }
            ].map(f => ({
              "@type": "Question",
              "name": f.q,
              "acceptedAnswer": {
                "@type": "Answer",
                "text": f.a
              }
            }))
          }) }}
        />
        <div className="container">
          <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
            <span className="eyebrow">FAQ</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Common questions.</h2>
          </div>
          <div style={{ maxWidth: 760, margin: "0 auto" }}>
            {[
              ["How does user-based billing work for ContractControl plans?", "We bill only for active team members who draft, review, or manage contracts. Requesters and external signers are always free and unlimited, which helps you scale operations."],
              ["Are there limits on contract storage or transaction volumes?", "No, all plans include unlimited contract drafting, signature requests, and repository storage. We do not charge transaction fees or impose storage caps."],
              ["What is the standard onboarding timeline for new customers?", "Onboarding takes less than a day for Essential and Professional plans, while Enterprise setups average four to six weeks. Enterprise customers receive dedicated support from a Customer Success Manager to sync databases and train teams."],
              ["Where does ContractControl store customer data?", "All data is hosted in EU-only cloud facilities located in Frankfurt and Stockholm to guarantee GDPR compliance. Our hosting environments are certified under SOC 2 Type II and ISO 27001 security standards."],
              ["Do you support Qualified Electronic Signatures (QES)?", "Yes, ContractControl supports Qualified Electronic Signatures (QES) through native integrations with trusted identity providers. This standard is available on Enterprise plans to meet strict compliance requirements."],
              ["Can I upgrade or downgrade my subscription plan at any time?", "Yes, you can upgrade your plan instantly or request a downgrade at the end of your billing cycle. Adjustments are processed through your billing dashboard without service interruptions."]
            ].map(([q, a], i) =>
            <details key={i} style={{ borderTop: "1px solid var(--line)", padding: "20px 0" }}>
                <summary style={{ display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", fontSize: 16, fontWeight: 500, listStyle: "none" }}>
                  <span>{q}</span>
                  <span style={{ color: "var(--ink-4)" }}>+</span>
                </summary>
                <p style={{ marginTop: 12, fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6 }}>{a}</p>
              </details>
            )}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>);

}

// ===== Customers =====
function CustomersPage() {
  return (
    <div>
      <PageHero
        eyebrow="Customers"
        title={<>Real teams, <em>real results</em>.</>}
        lede="See how teams use ContractControl to get control over their contracts, renewals, and obligations." />

      <section className="section">
        <div className="container" style={{ maxWidth: 900 }}>

          {/* Acenta Group: featured story */}
          <div className="card" style={{ padding: 0, borderRadius: 24, overflow: "hidden" }}>
            {/* Top band */}
            <div className="mob-pad-lg" style={{ background: "linear-gradient(135deg, oklch(22% 0.08 295), oklch(16% 0.05 295))", padding: "48px 56px" }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(155,129,245,0.8)" }}>Customer story</span>
              <h2 style={{ fontSize: "clamp(26px, 3.5vw, 40px)", fontWeight: 500, color: "#fff", margin: "16px 0 0", letterSpacing: "-0.02em", lineHeight: 1.15 }}>
                Acenta Group went from scattered spreadsheets to a single obligation dashboard that the whole team trusts.
              </h2>
            </div>

            {/* Body */}
            <div className="mob-stack mob-pad-lg" style={{ padding: "48px 56px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
              <div>
                <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.75, margin: "0 0 20px" }}>
                  Acenta Group AB is a 20-person company managing a mix of supplier, customer, and service contracts across their operations. Before ContractControl, renewal dates lived in spreadsheets and someone's calendar. Obligations got missed. Exit windows closed without anyone noticing.
                </p>
                <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.75, margin: "0 0 20px" }}>
                  After onboarding, the team had full visibility into every contract obligation: upcoming renewals, notice periods, and price escalation clauses all surfaced automatically and routed to the right person before they became a problem.
                </p>
                <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.75, margin: 0 }}>
                  For a lean team without dedicated legal resources, ContractControl replaced a process that relied entirely on memory and luck.
                </p>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                {/* Stats */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  {[
                    ["0", "missed renewals since going live"],
                    ["100%", "obligation visibility"],
                    ["20", "person team, no legal hire needed"],
                    ["1 day", "to get fully onboarded"],
                  ].map(([n, l]) => (
                    <div key={l} style={{ padding: "20px 24px", background: "var(--bg-soft)", borderRadius: 14, border: "1px solid var(--line)" }}>
                      <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.03em", color: "var(--ink-1)", fontVariantNumeric: "tabular-nums" }}>{n}</div>
                      <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 4, lineHeight: 1.4 }}>{l}</div>
                    </div>
                  ))}
                </div>

                {/* Quote */}
                <div style={{ padding: "24px 28px", background: "var(--accent-soft)", borderRadius: 16, borderLeft: "3px solid var(--accent)" }}>
                  <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 18, lineHeight: 1.45, color: "var(--ink-1)", margin: "0 0 20px" }}>
                    "We used to discover renewal windows after they had already closed. Now we get notified weeks in advance. ContractControl gave us the kind of oversight we never had time to build ourselves."
                  </p>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <img src="/images/team/sabina-hedstrom.png" alt="Sabina Hedström, CFO at Acenta Group AB"
                      style={{ width: 40, height: 40, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>Sabina Hedström</div>
                      <div style={{ fontSize: 12.5, color: "var(--ink-3)" }}>CFO, Acenta Group AB</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Coming soon placeholders */}
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {[1, 2].map((i) => (
              <div key={i} className="card" style={{ padding: 40, minHeight: 180, display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.4, border: "1.5px dashed var(--line)", background: "transparent", boxShadow: "none", borderRadius: 20 }}>
                <span style={{ fontSize: 13, color: "var(--ink-3)" }}>More stories coming soon</span>
              </div>
            ))}
          </div>

        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ===== Security =====
function SecurityPage() {
  const certs = [
  { name: "SOC 2 Type II", desc: "Audited annually" },
  { name: "ISO 27001", desc: "Information security" },
  { name: "ISO 27701", desc: "Privacy management" },
  { name: "GDPR", desc: "EU-only data residency" },
  { name: "eIDAS", desc: "AES & QES signatures" },
  { name: "DORA", desc: "Operational resilience" }];

  const pillars = [
  { title: "Data residency", body: "All customer data is stored in EU-only regions (Frankfurt, Stockholm). No US replication, no third-country transfers." },
  { title: "Encryption", body: "AES-256 at rest, TLS 1.3 in transit. Customer-managed keys (BYOK) available on Enterprise." },
  { title: "Access control", body: "SSO/SAML, SCIM, hardware-key-only options, just-in-time access for support, full session audit." },
  { title: "Incident response", body: "24/7 SOC, 1-hour notification SLA, public status page, post-incident reports within 5 business days." },
  { title: "Privacy by design", body: "Customer data is never used to train third-party models. AI runs in EU-hosted Microsoft Azure tenancies." },
  { title: "Backup & recovery", body: "RPO < 15 min, RTO < 4 hours. Cross-region failover tested quarterly." }];

  return (
    <div>
      <PageHero
        eyebrow="Security & Trust"
        title={<>Compliance <em style={{ color: "rgb(199, 180, 255)" }}>built in</em>, not <span className="accent">bolted on</span>.</>}
        lede="EU-hosted, EU-audited, EU-only. Built for regulated industries: banks, insurers, pharma, public sector."
        dark />
      
      <section className="section-tight" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="grid grid-3" style={{ gap: 12 }}>
            {certs.map((c) =>
            <div key={c.name} style={{ padding: 24, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", display: "flex", alignItems: "center", gap: 16 }}>
                <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", flex: "0 0 44px" }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" /><polyline points="9 12 11 14 15 10" /></svg>
                </span>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>{c.name}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-4)" }}>{c.desc}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
            <span className="eyebrow">Foundations</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Six pillars of <em>trust</em>.</h2>
          </div>
          <div className="grid grid-3" style={{ gap: 16 }}>
            {pillars.map((p) =>
            <div key={p.title} className="card" style={{ padding: 28 }}>
                <h3 style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.015em", margin: "0 0 10px" }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{p.body}</p>
              </div>
            )}
          </div>
          <div style={{ marginTop: 56, padding: 32, background: "var(--bg-soft)", borderRadius: "var(--r-lg)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 500 }}>Trust Center</div>
              <div style={{ fontSize: 13.5, color: "var(--ink-3)", marginTop: 4 }}>Live status, audit reports, DPA, security questionnaire. Self-serve.</div>
            </div>
            <a className="btn btn-primary" href="https://docs.simplesign.io/hub/public/GwPZe3ine2nXPxuXpgo5T7VlgZf4KE1O5DNBmVYoG-s" target="_blank" rel="noopener noreferrer">Visit trust.www.contractcontrol.co <Icon name="arrow" size={14} /></a>
          </div>
        </div>
      </section>
      <FinalCTA />
    </div>);

}

// ===== Resources =====
function ResourcesPage() {
  const featured = { tag: "Guide · 24 min read", title: "The 2026 European CLM benchmark report", desc: "We surveyed 412 legal & operations leaders across the EU on contract velocity, AI adoption, and pain points. Inside: cycle-time benchmarks, vendor consolidation trends, and what actually moves the needle.", img: "report" };

  const sections = [
    { eyebrow: "Tools", title: "Contract maturity health check", desc: "Find out how good control you have of your contracts. Assess risk and friction in 3 minutes.", href: "/health-check", meta: "Interactive" },
    { eyebrow: "Read", title: "Blog", desc: "Insight, opinion, product news. New posts every Tuesday & Thursday.", href: "/blog", meta: "" },
    { eyebrow: "Read", title: "Guides", desc: "Long-form guides. No email gate, no lead form. PDFs ready to share.", href: "/guides", meta: "" },
    { eyebrow: "Watch", title: "Webinars", desc: "Live sessions with operators. Bring questions; we answer in the Q&A.", href: "/webinars", meta: "" },
    { eyebrow: "Tools", title: "Contract templates", desc: "Free, opinionated, battle-tested. CC-BY licensed.", href: "/templates", meta: "" },
    { eyebrow: "Reference", title: "Glossary", desc: "60 CLM terms in plain language, the way operators explain them.", href: "/glossary", meta: "" },
    { eyebrow: "Trust", title: "Security & Trust", desc: "SOC 2, ISO 27001, EU-only data residency. Live status & audit reports.", href: "/security", meta: "Trust center" },
    { eyebrow: "Stories", title: "Customer stories", desc: "How real teams put ContractControl to work.", href: "/customers", meta: "" },
  ];

  return (
    <div>
      <PageHero
        eyebrow="Resources"
        title={<>Field notes for <em>modern legal</em> & <span className="accent">ops teams</span>.</>}
        lede="Benchmarks, guides, templates, calculators, plus the occasional opinion. Written by the team building ContractControl." />
      
      <section className="section-tight">
        <div className="container">
          <a href="/guides" className="card" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", padding: 0, overflow: "hidden", textDecoration: "none", color: "inherit" }}>
            <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <span className="eyebrow">{featured.tag}</span>
              <h2 style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.15, margin: "16px 0 14px" }}>{featured.title}</h2>
              <p style={{ fontSize: 15, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{featured.desc}</p>
              <span style={{ marginTop: 24, fontSize: 14, fontWeight: 500, color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6 }}>Read the report <Icon name="arrow" size={14} /></span>
            </div>
            <div style={{ background: "linear-gradient(135deg, #2A1F66 0%, #7B61FF 100%)", position: "relative", minHeight: 320 }}>
              <div style={{ position: "absolute", inset: "10% 12%", background: "white", borderRadius: 8, padding: 24, transform: "rotate(-2deg)", boxShadow: "0 30px 60px rgba(0,0,0,0.25)" }}>
                <div style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Benchmark · 2026</div>
                <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 26, lineHeight: 1.15, marginTop: 12, color: "var(--ink-1)" }}>The European CLM Benchmark</div>
                <div style={{ marginTop: 16, height: 4, background: "var(--bg-mute)", borderRadius: 2 }}>
                  <div style={{ width: "62%", height: "100%", background: "var(--accent)", borderRadius: 2 }} />
                </div>
                <div style={{ marginTop: 6, fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>n = 412 · 18 countries</div>
              </div>
            </div>
          </a>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ marginBottom: 32 }}>
            <span className="eyebrow">All resources</span>
            <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 500, letterSpacing: "-0.015em" }}>Everything we publish.</h2>
          </div>
          <div className="grid grid-3" style={{ gap: 16 }}>
            {sections.map((s) =>
              <a key={s.title} href={s.href} className="card" style={{ padding: 28, textDecoration: "none", color: "inherit", display: "flex", flexDirection: "column", gap: 10, minHeight: 200 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="eyebrow no-dot" style={{ color: "var(--accent)" }}>{s.eyebrow}</span>
                  <span style={{ fontSize: 12, color: "var(--ink-4)" }}>{s.meta}</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em", margin: "4px 0 0" }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0, flex: 1 }}>{s.desc}</p>
                <div style={{ fontSize: 13, color: "var(--accent)", fontWeight: 500, marginTop: 4 }}>Open →</div>
              </a>
            )}
          </div>
        </div>
      </section>
      <FinalCTA />
    </div>);

}

// ===== Company =====
function CompanyPage() {
  const team = [
    {
      name: "Christian Nicolaisen",
      role: "Founder & CEO",
      photo: "/images/team/christian-nicolaisen.png",
      desc: "SaaS entrepreneur with over 20 years of experience building software companies. Passionate about product innovation, AI, and designing simple solutions to complex business workflows."
    },
    {
      name: "Adam Bodérus",
      role: "CTO",
      photo: "/images/team/adam-boderus.jpeg",
      desc: "20 years building software in security-sensitive industries. Deep passion for system security, robust architecture, and crafting products that customers trust."
    },
    {
      name: "Johan Montelius Hedberg",
      role: "CMO",
      photo: "/images/team/johan-hedberg.png",
      desc: "Over 8 years driving B2B SaaS brand growth. Has scaled companies from early stage to Nasdaq-listed. Builds deep market trust through value-driven strategy."
    },
    {
      name: "Erik Weber",
      role: "Partner Manager",
      photo: "/images/team/erik-weber.png",
      desc: "Builds strong alliances across Europe, helping customers and partners unlock maximum value from the platform."
    }
  ];

  const darkBg = "oklch(14% 0.04 290)";
  const darkCard = "oklch(18% 0.05 290)";

  return (
    <div>
      {/* ── Dark hero with aurora glow ── */}
      <section data-dark style={{
        background: darkBg,
        paddingTop: 180,
        paddingBottom: 120,
        position: "relative",
        overflow: "hidden",
        textAlign: "center",
      }}>
        {/* Aurora glow */}
        <div style={{
          position: "absolute",
          bottom: -40,
          left: "50%",
          transform: "translateX(-50%)",
          width: "70%",
          height: 200,
          background: "radial-gradient(ellipse at center, rgba(110,86,207,0.35) 0%, rgba(155,129,245,0.15) 40%, transparent 70%)",
          filter: "blur(60px)",
          pointerEvents: "none",
        }} />

        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <h1 className="display" style={{ color: "#fff", maxWidth: 800, margin: "0 auto", fontSize: "clamp(38px, 5.5vw, 72px)" }}>
            We believe great teams deserve better contract workflows.
          </h1>
          <div style={{ marginTop: 40 }}>
            <a href="https://jobs.simplesign.io/" className="btn" style={{
              background: "rgba(255,255,255,0.1)",
              color: "#fff",
              border: "1px solid rgba(255,255,255,0.2)",
              backdropFilter: "blur(8px)",
              padding: "12px 28px",
              borderRadius: 99,
              fontSize: 14,
              fontWeight: 500,
              textDecoration: "none",
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              transition: "background 200ms ease",
            }}
              onMouseEnter={e => e.currentTarget.style.background = "rgba(255,255,255,0.18)"}
              onMouseLeave={e => e.currentTarget.style.background = "rgba(255,255,255,0.1)"}
            >
              Looking for careers?
            </a>
          </div>
        </div>
      </section>

      {/* ── Dark mission section ── */}
      <section data-dark style={{ background: darkBg, paddingTop: 80, paddingBottom: 100 }}>
        <div className="container">
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(155,129,245,0.7)", marginBottom: 32 }}>
            Our mission
          </div>
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "start" }}>
            <p style={{
              fontSize: "clamp(22px, 2.8vw, 30px)",
              fontWeight: 400,
              lineHeight: 1.45,
              color: "rgba(255,255,255,0.55)",
              margin: 0,
            }}>
              We are building the platform that gives every team one place to request, draft, negotiate, sign, and track their contracts. No more scattered emails. No more spreadsheets. Just control.
            </p>
            <div>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.4)", margin: "0 0 16px" }}>
                Powered by deep integrations with Nordic eIDs and backed by over a decade of trust, ContractControl takes care of the contract lifecycle so your team can focus on what matters.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.4)", margin: 0 }}>
                Founded in Stockholm. Bootstrapped since day one. Trusted by 800+ businesses across 20+ countries.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── Dark stats + values ── */}
      <section data-dark style={{ background: darkBg, paddingBottom: 100 }}>
        <div className="container">
          {/* Stats */}
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginBottom: 80 }}>
            {[
              { num: "800+", label: "Customers" },
              { num: "€0", label: "Raised" },
              { num: "2012", label: "Founded" },
              { num: "20+", label: "Countries" },
            ].map(s => (
              <div key={s.label} style={{ textAlign: "center" }}>
                <div style={{ fontSize: "clamp(36px, 4.5vw, 52px)", fontWeight: 500, letterSpacing: "-0.04em", color: "#fff", lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{s.num}</div>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.35)", marginTop: 10 }}>{s.label}</div>
              </div>
            ))}
          </div>

          {/* Values heading */}
          <h2 style={{ fontSize: "clamp(30px, 4vw, 48px)", fontWeight: 500, letterSpacing: "-0.03em", color: "#fff", textAlign: "center", margin: "0 0 40px", lineHeight: 1.15 }}>
            How we build and how we work.
          </h2>

          {/* Value cards */}
          <div className="grid grid-3" style={{ gap: 16 }}>
            {[
              { icon: "M13 10V3L4 14h7v7l9-11h-7z", title: "Be proactive", body: "We anticipate needs and act. We do not wait to be told. We drive change and constantly seek better solutions before problems arise." },
              { icon: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5", title: "Simplicity", body: "Everything we do shall be simple. We hide complexity behind intuitive design and smart logic. We make the hard things look easy." },
              { icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", title: "Own the outcome", body: "We take responsibility for the result, from idea to delivery. We finish what we start and ensure quality all the way." },
            ].map(v => (
              <div key={v.title} style={{
                background: darkCard,
                border: "1px solid rgba(110,86,207,0.2)",
                borderRadius: 16,
                padding: "36px 28px",
                display: "flex",
                flexDirection: "column",
                gap: 16,
              }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="rgba(155,129,245,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={v.icon} /></svg>
                <h3 style={{ fontSize: 18, fontWeight: 500, color: "#fff", margin: 0 }}>{v.title}</h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,0.45)", lineHeight: 1.6, margin: 0 }}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Light: Origin story ── */}
      <section className="section" style={{ paddingTop: 100, paddingBottom: 100 }}>
        <div className="container">
          <span className="eyebrow">How we started</span>
          <h2 className="h-section" style={{ marginTop: 18, maxWidth: 600 }}>We started ContractControl <em>because we had to</em>.</h2>
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginTop: 40 }}>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", margin: 0 }}>
              It was 2012. Autonomous vehicles were emerging from labs, rockets were landing themselves, yet Christian, our Founder and CEO, found himself manually copying and pasting text between contract documents just to get something signed.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", margin: 0 }}>
              That friction made one thing obvious: while every other business workflow was being reinvented, contract management had been left behind. So we decided to fix it. We launched as an eSignature solution. Today, ContractControl covers the entire lifecycle.
            </p>
          </div>
        </div>
      </section>

      {/* ── Brand comparison ── */}
      <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <span className="eyebrow">Our brand</span>
          <h2 className="h-section" style={{ marginTop: 18, marginBottom: 56 }}>Two brands, <em>one platform</em>.</h2>

          {/* SimpleSign row */}
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, paddingBottom: 48, borderBottom: "1px solid var(--line)" }}>
            <div>
              <div style={{ fontSize: "clamp(32px, 3.5vw, 44px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.1 }}>SimpleSign</div>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginTop: 10 }}>eSignature engine</div>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", margin: 0, paddingTop: 6 }}>
              Founded in 2012 as the Nordics' first eSignature platform. 30+ eID integrations, AES and QES standards, and the trusted signing engine that powers ContractControl. Also available as a standalone product.
            </p>
          </div>

          {/* ContractControl row */}
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, paddingTop: 48 }}>
            <div>
              <div style={{ fontSize: "clamp(32px, 3.5vw, 44px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.1 }}>ContractControl</div>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginTop: 10 }}>Full lifecycle CLM</div>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", margin: 0, paddingTop: 6 }}>
              As our customers' needs grew, so did the platform. ContractControl handles the entire contract lifecycle: intake, drafting, negotiation, signing, repository, and obligations tracking. SimpleSign is built in.
            </p>
          </div>
        </div>
      </section>

      {/* ── Leadership ── */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <span className="eyebrow">Leadership</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>The team.</h2>
          </div>
          <div className="grid grid-4" style={{ gap: 16 }}>
            {team.map(t => (
              <div key={t.name} style={{ padding: 28, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)" }}>
                {t.photo
                  ? <img src={t.photo} alt={t.name} style={{ width: 56, height: 56, borderRadius: "50%", objectFit: "cover", objectPosition: "top", marginBottom: 18, display: "block" }} />
                  : <div style={{ width: 56, height: 56, borderRadius: "50%", background: t.grad || "var(--accent-soft)", marginBottom: 18 }} />
                }
                <div style={{ fontSize: 16, fontWeight: 500 }}>{t.name}</div>
                <div style={{ fontSize: 13.5, color: "var(--ink-3)", marginTop: 4 }}>{t.role}</div>
                {t.desc && <p style={{ fontSize: 14, color: "var(--ink-4)", lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>{t.desc}</p>}
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48, padding: 28, background: "var(--bg-soft)", borderRadius: "var(--r-lg)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontSize: 17, fontWeight: 500 }}>We're hiring.</div>
              <div style={{ fontSize: 13.5, color: "var(--ink-3)", marginTop: 4 }}>We are always on the hunt for talented engineers, sales, and customer success in Stockholm.</div>
            </div>
            <a className="btn btn-primary" href="https://jobs.simplesign.io/">See open roles <Icon name="arrow" size={14} /></a>
          </div>
        </div>
      </section>

      {/* ── Team photos ── */}
      <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ marginBottom: 40, textAlign: "center" }}>
            <span className="eyebrow">Life at ContractControl</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>The team behind <em>the platform</em>.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", aspectRatio: "16 / 9" }}>
                <img src="/images/team/team-retreat.png" alt="Team working at an outdoor retreat" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", aspectRatio: "4 / 3" }}>
                  <img src="/images/team/team-kubb.png" alt="Team playing kubb" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", aspectRatio: "4 / 3" }}>
                  <img src="/images/team/team-archery.png" alt="Team doing archery" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", aspectRatio: "3 / 4" }}>
                <img src="/images/team/team-merch.png" alt="Team in ContractControl branded merch" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", aspectRatio: "4 / 3" }}>
                <img src="/images/team/team-retreat-terrace.jpg" alt="Team relaxing on an outdoor mountain terrace" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>);

}


// ===== Module pages: Dataroom, Document Hub, Legal Hub =====
const powerModuleData = {
  dataroom: {
    eyebrow: "Power module · Dataroom",
    title: <>Diligence-ready <em>datarooms</em>, in <span className="accent">two clicks</span>.</>,
    lede: "Spin up secure deal rooms with watermarking, granular permissions, and full audit trails, without the legacy VDR price tag.",
    icon: "dataroom",
    features: [
    { title: "Dynamic watermarks", desc: "Per-viewer watermarks with email, IP, timestamp, applied on the fly, never stored." },
    { title: "Read-only by design", desc: "Documents stream to a secure viewer. No download, no print, no clipboard, when you need it locked down." },
    { title: "Q&A workflow", desc: "Counter-party questions routed to the right SME. Approvals before answers go out." },
    { title: "Index & version", desc: "Auto-numbered index, version diffs, and read receipts. The diligence binder of 2026." },
    { title: "Time-bound access", desc: "Auto-expire on closing date. Auto-revoke on deal kill. No more dangling access." },
    { title: "Full audit trail", desc: "Every view, every download, every page, exportable to PDF for the deal file." }]

  },
  "document-hub": {
    eyebrow: "Document Hub",
    title: <>A dedicated hub<br/>for your <em>policies</em>,<br/><span style={{ color: "var(--accent)" }}>terms & guidelines</span>.</>,
    lede: "Create a branded, versioned portal for the documents your team and customers always need, internal policies, online terms, compliance docs. Published once, always current.",
    icon: "docs",
    heroMockup: "policy-hub",
    heroChecks: ["Internal policies & online terms in one place", "Always serving the latest version", "Scoped to exactly who should see it"],
    features: [
    { title: "Full-text search", desc: "Search every page of every document, including scanned PDFs, with AI extraction by default." },
    { title: "Smart folders", desc: "Rules-based folders that auto-populate. Tag once, organize forever." },
    { title: "Version everything", desc: "Every save is a version. Every version is diffable. Restore in one click." },
    { title: "Native editing", desc: "Edit Word and Markdown documents inline, no roundtrip, no lost formatting." },
    { title: "External sharing", desc: "Share with counsel, counterparties, or auditors. Time-limited links, full audit." }],
    featSections: [
      {
        eyebrow: "Internal knowledge base",
        title: "One place for every policy <em>your team needs to find</em>.",
        body: "HR guidelines, IT acceptable use, expense policies, codes of conduct, Document Hub gives staff a single, always-current place to find internal documentation. No more outdated PDFs in email, no more 'where is that policy?'",
        bullets: ["Publish employee handbooks, HR policies, and IT guidelines in one searchable hub", "Role-based access ensures the right people see the right documents", "Always serve the latest version, staff never land on something outdated"],
        flip: false,
        mockup: "internal-policies",
      },
      {
        eyebrow: "Self-serve updates",
        title: "Stop chasing other teams to update <em>online terms</em>.",
        body: "Update online agreements and terms yourself, and get automatically saved versions when you make any update, without relying on Marketing or Engineering.",
        bullets: ["Edit and publish terms directly, no developer required", "Every update auto-saves as a new version with a timestamp", "Rollback to any previous version in one click"],
        flip: true,
        soft: true,
        mockup: "terms-editor",
      },
      {
        eyebrow: "Centralised terms management",
        title: "A single place for all online <em>and internal terms</em>.",
        body: "Manage, publish, and display all of your online terms and their versions from a central hub, ensuring users always have access to the correct contracts.",
        bullets: ["All terms in one place: privacy policy, ToS, DPA, SLAs", "Public URL per document, always serving the latest version", "Version history visible to users with effective dates"],
        flip: false,
        mockup: "terms-hub",
      },
      {
        eyebrow: "Quick setup",
        title: "A branded document hub <em>in 10 minutes</em>.",
        body: "Set up a document hub on your own site, or internally in minutes and customise it to match your brand's style, no manual processes or extensive developer input.",
        bullets: ["Custom logo, colours, and domain in the setup wizard", "Embed on your own site with a single script tag", "Internal or public, access controlled by role"],
        flip: true,
        soft: true,
        mockup: "hub-setup",
      },
      {
        eyebrow: "Embed anywhere",
        title: "Easily integrate online terms <em>anywhere</em>.",
        body: "With Document Hub, you can easily incorporate online terms within other contracts, sign-up pages, website footers, and more, increasing transparency and reducing the time you spend discussing standard terms.",
        bullets: ["Embed terms in website footers, sign-up flows, and agreements", "Single embed code, always serving the latest published version", "Users see the right version at the right time, automatically"],
        flip: false,
        mockup: "hub-embed",
      },
      {
        eyebrow: "Role-based access",
        title: "The right document, <em>to the right person</em>.",
        body: "Assign precise access per document, folder, or hub. Admins control who can view, edit, or publish, so sensitive policies never reach the wrong audience.",
        bullets: ["Set view, edit, and publish rights per role or individual", "Separate permissions for internal staff, external partners, and public users", "Changes take effect instantly, no re-publishing required"],
        flip: true,
        soft: true,
        mockup: "permissions-matrix",
      },
      {
        eyebrow: "Audience segmentation",
        title: "Separate hubs for <em>every audience</em>.",
        body: "Create dedicated portals for different audiences, one for staff, one for customers, one for partners. Each hub is scoped to exactly who should see it, with its own branding and domain.",
        bullets: ["Unlimited hubs, HR policies for staff, terms for customers, NDAs for partners", "Each hub with its own domain, branding, and access rules", "Audiences never see content that isn't meant for them"],
        flip: false,
        mockup: "audience-segments",
      },
      {
        eyebrow: "Access audit trail",
        title: "Know exactly who saw <em>what, and when</em>.",
        body: "Every document view, download, and version change is logged automatically. Pull a full access report in seconds, for compliance reviews, audits, or just peace of mind.",
        bullets: ["Automatic log of every view and download per user and document", "Filter by user, document, date range, or event type", "Export to PDF or CSV for audits and compliance reports"],
        flip: true,
        soft: true,
        mockup: "access-audit",
      },
    ],
  },
  "legal-hub": {
    comingSoon: true,
    eyebrow: "Power module · Legal Hub",
    title: <>Your <em>legal operations</em>, on <span className="accent">one canvas</span>.</>,
    lede: "Playbooks, risk scoring, matter management, the everyday legal back office, finally on one platform.",
    icon: "legal",
    heroMockup: "legal-hub",
    heroChecks: ["Living playbooks", "Auto-score risk", "Matter tracking"],
    features: [
    { title: "Living playbooks", desc: "Codify positions on every clause. AI applies them on every contract, yours or theirs." },
    { title: "Risk scoring", desc: "Auto-score every contract against your playbook. Heat-map across your entire portfolio." },
    { title: "Matter management", desc: "Track every legal task, contracts, disputes, IP filings, with deadlines, owners, and budgets." },
    { title: "Intake & triage", desc: "Route incoming contract reviews and requests to the right specialist automatically." },
    { title: "Knowledge base", desc: "Searchable answers to recurring questions. Answer once, reuse forever." },
    { title: "Reporting", desc: "Board-ready dashboards on contract velocity, risk exposure, and compliance, exportable in one click." }],
    featSections: [
      {
        eyebrow: "Contract review",
        title: "Review contracts in minutes, <em>not hours</em>.",
        body: "ContractControl cuts down the time needed to review contracts by 70% using AI - optimized to handle complex third-party agreements instantly.",
        bullets: [
          "Instant and accurate suggestions and redlines",
          "Run automated compliance checks on any contract, yours or third-party paper",
          "Use expert-created review guides for common types of contracts",
          "Build your own contract review playbooks using AI"
        ],
        flip: false,
        mockup: "playbook-checks"
      },
      {
        eyebrow: "Public guides",
        title: "Enable your team to run <em>first-pass reviews</em> themselves.",
        body: "Create and share links to your contract guides with other teams so they can run a first cut review and check for basic issues - instead of immediately forwarding everything to Legal.",
        bullets: [
          "Share any contract review guide through a simple link",
          "No need for Microsoft Word to run contract reviews",
          "Works on both mobile and desktop"
        ],
        flip: true,
        mockup: "public-guides"
      },
      {
        eyebrow: "Automated playbooks",
        title: "Build your own review playbooks <em>in one click</em>.",
        body: "Create a contract review playbook based on any standard template in minutes, automatically extracting position guidelines and rules.",
        bullets: [
          "Open your standard template contract and click \"Generate Playbook\"",
          "Get a contract review playbook with automatically created rules and guidelines",
          "Test any contract against your review playbook in one click"
        ],
        flip: false,
        soft: true,
        mockup: "playbook-generation"
      },
      {
        eyebrow: "Risk verification",
        title: "Run faster contract reviews <em>using your own playbook</em>.",
        body: "Use plain English to turn your expertise and judgment into a custom playbook for reviewing contracts. Instantly highlight non-compliance and key risks with a single click.",
        bullets: [
          "Get source references for each guideline in the contract",
          "Explain why each guideline has been met or unmet",
          "Easily modify your playbooks over time"
        ],
        flip: true,
        mockup: "guideline-verification"
      }
    ]
  },
  "viewer-seats": {
    eyebrow: "Power module · Viewer Seats",
    title: <>Bring <em>everyone</em> in. <span className="accent">Without paying for everyone</span>.</>,
    lede: "Unlimited read-only seats for the people who need to see contracts but don't draft them, auditors, executives, finance, account managers, internal stakeholders.",
    icon: "permission",
    features: [
    { title: "Truly unlimited", desc: "No per-seat fee. No 10-seat cap. No fair-use clause. Add 5 viewers or 5,000, same price." },
    { title: "Read, search, comment", desc: "Viewers can search the repository, open contracts, leave comments, and download permitted documents." },
    { title: "No drafting, no signing", desc: "Viewers can't create, edit, or sign, by design. They consume; your editors create." },
    { title: "Granular access", desc: "Scope viewers to a workspace, a folder, or a single contract. Inherit permissions from your access model." },
    { title: "Audit-ready", desc: "Every view, every comment, every download, logged. Exportable to PDF for SOC 2 and ISO 27001." },
    { title: "Built for stakeholders", desc: "Auditors, board members, finance, sales, account managers, anyone who reads but doesn't write." }]

  },
  "sales-agent": {
    eyebrow: "Power module · AI Sales Agent",
    title: <>Autonomous <em>redlines</em>, <span className="accent">at sales speed</span>.</>,
    lede: "An AI agent that handles standard counterparty paper end-to-end, accepts your playbook, redlines theirs, escalates only the edge cases.",
    icon: "negotiation",
    features: [
    { title: "Playbook-aligned", desc: "Reads your playbook, applies it on incoming counterparty paper. Approved positions, fallback positions, red lines, all encoded, all auto." },
    { title: "Auto-redline & comment", desc: "Drops in your standard counters with rationale comments customers can see. Reads like a senior associate, ships in minutes." },
    { title: "Edge-case escalation", desc: "When the agent isn't sure, it stops. Flags the clause, the rationale, and routes to the right human with full context." },
    { title: "Brand-true outbound", desc: "Sends drafts in your branding, on your domain, with your team's name. The customer thinks a human did it. Mostly because one approved it." },
    { title: "Tracked end-to-end", desc: "Every counterparty paper, every redline, every concession, logged in the deal record. Sales sees status. RevOps sees patterns." },
    { title: "Bounded by approval", desc: "You set the autonomy limits. From \"propose draft\" to \"send unless flagged\", the dial is yours, the audit trail is everyone's." }]

  },
  "bulk-signatures": {
    eyebrow: "Power module · BulkSignatures",
    title: <>Bulk send <em>e-signatures</em>, at scale.</>,
    lede: "Create templates, upload recipient list CSV files, and trigger bulk agreements. Each row gets a unique document and fields, tracked under an autonomous background process.",
    icon: "bulk",
    heroMockup: "bulk-signatures",
    features: [
      { title: "CSV list upload", desc: "Upload contacts (company, email) along with custom document merge tags (pricing, dates) directly from Excel or CSV." },
      { title: "Dynamic templates", desc: "Define fields once. Our parser auto-maps variables to columns in your upload sheet instantly." },
      { title: "Background processing", desc: "Queue thousands of documents. Rest easy while our smart background daemon processes the queues asynchronously." },
      { title: "Interactive progress tracker", desc: "Monitor delivery rates, bounces, views, and execution speeds in real-time." },
      { title: "Unified batch actions", desc: "Send reminders, update sign deadlines, or recall entire cohorts with a single click." }
    ]
  },
  "dealroom": {
    comingSoon: true,
    eyebrow: "Power module · Dealroom",
    title: <>Collaborative, <em>deal-friendly</em> buyer portals.</>,
    lede: "Close deals faster. Invite stakeholders, host presentation videos, upload proposals, coordinate blockers, and sign all contracts on a single customizable portal.",
    icon: "dealroom",
    heroMockup: "dealroom",
    features: [
      { title: "Custom customer landing pages", desc: "Set up branded spaces for your buyer with their logo, style guide, and project manager contacts." },
      { title: "Multi-stakeholder workspace", desc: "Invite buyers, legal counsel, and technical coordinators to resolve questions in a single chat canvas." },
      { title: "Task & blocker tracking", desc: "Assign clear action items (like 'Approve payment terms' or 'Upload VAT info') to avoid stagnation." },
      { title: "Embedded multi-signing", desc: "Assemble master agreement, SLA, and DPA into a single signing order so they sign all at once." },
      { title: "Engagement analytics", desc: "Track views, downloads, and time spent on key proposal materials to gauge deal warmth." }
    ]
  },
  "clickwrap": {
    comingSoon: true,
    eyebrow: "Power module · Clickwrap",
    title: <>Defensible <em>clickthrough agreements</em>.</>,
    lede: "Embed terms, privacy policies, or SLAs directly on your site, and capture legally binding, version-controlled audit trails for every consent.",
    icon: "clickwrap",
    heroMockup: "clickwrap",
    features: [
      { title: "Affirmative consent logging", desc: "Automatically document active clicks ('I agree', 'Accept') with exact code and UI versions." },
      { title: "Version-controlled tracking", desc: "Link every consent signature to the specific markdown or document version live at that second." },
      { title: "Immutable audit trail", desc: "Log user identifier, time, IP address, user-agent, and terms hash to a secure registry." },
      { title: "Embed-anywhere widgets", desc: "Insert lightweight, mobile-responsive JS widgets in signup pages, shopping carts, or app screens." },
      { title: "Automated re-agreements", desc: "Trigger re-agreement prompts when major clauses or compliance policies change." }
    ],
    featSections: [
      {
        eyebrow: "Intuitive Editor",
        title: "Edit clickwrap agreements in a <em>simple word-processor</em>.",
        body: "Update your terms of service or privacy disclosures inside a clean, collaborative editor. Formatting changes and legal edits can be published instantly without relying on developers.",
        bullets: ["Familiar interface similar to Microsoft Word and Google Docs", "Collaborate in real time with legal ops and compliance leads", "Track word count and draft versions automatically"],
        flip: false,
        mockup: "clickwrap-editor"
      },
      {
        eyebrow: "Instant Reports",
        title: "Automatic tracking and <em>compliance analytics</em>.",
        body: "Monitor user consent rates and audit trails across different countries in real time. Track IP addresses, timestamps, and terms version hashes in a tamper-evident compliance log.",
        bullets: ["Dynamic SVG analytics charts illustrating user consent", "Drill down into metadata records by region (USA vs Europe)", "Immutable audit records prepared for legal defense"],
        flip: true,
        soft: true,
        mockup: "clickwrap-reports"
      },
      {
        eyebrow: "Custom Domain",
        title: "Build user trust with <em>dedicated branding domains</em>.",
        body: "Host clickwrap consent workflows on your own dedicated subdomain. Keep the customer journey fully under your brand layout and security policies.",
        bullets: ["Verify subdomains (e.g. legal.acme.com) in seconds", "Automatic SSL certificate provisioning and management", "Standard CNAME mapping to ContractControl servers"],
        flip: false,
        mockup: "clickwrap-domain"
      },
      {
        eyebrow: "Customizable Contracts",
        title: "Branded clickthrough widgets that <em>match your app style</em>.",
        body: "Tailor the layout, colors, and typography of your clickwrap widgets. Ensure a seamless user interface during app onboarding or shopping cart checkout.",
        bullets: ["Add custom brand logos and set typography rules", "Select brand accent colors for checkboxes and buttons", "Interactive widget preview updates instantly during setup"],
        flip: true,
        soft: true,
        mockup: "clickwrap-contracts"
      },
      {
        eyebrow: "Document Hubs",
        title: "A central home for all of your <em>online terms and policies</em>.",
        body: "Publish and organize terms, privacy policies, cookie sheets, and SLAs in a central searchable portal. Link consent actions to version-controlled documents.",
        bullets: ["Central index of public terms and active policies", "Search-friendly layout for compliance disclosures", "Track version history with effective dates visible to users"],
        flip: false,
        mockup: "clickwrap-document-hub"
      }
    ]
  },
  "complaint-hub": {
    comingSoon: true,
    eyebrow: "Power module · Compliant Hub",
    title: <>Systematic compliance & <em>complaint handling</em>.</>,
    lede: "Maintain regulatory compliance, log complaints, run investigations, assign tasks, and audit resolutions automatically to satisfy ISO and GDPR audits.",
    icon: "complaint-hub",
    heroMockup: "complaint-hub",
    features: [
      { title: "Audit-ready logging", desc: "Instantly categorize customer disputes, GDPR requests, and compliance grievances with clear IDs." },
      { title: "Task-based workflows", desc: "Auto-assign tasks to Legal, HR, or Finance teams to track progress against SLA deadlines." },
      { title: "Versioned remediation", desc: "Log and link corrective actions, customer responses, and legal reviews directly to the case file." },
      { title: "Analytical dashboards", desc: "Identify systemic failure points and compliance risks before they trigger regulatory actions." },
      { title: "Customer portals", desc: "Securely share status updates, document uploads, and resolution reports with external claimants." }
    ]
  }
};

function DocHubMockup({ type }) {
  if (type === "policy-hub") {
    const categories = [
      {
        label: "HR & People",
        color: "rgba(124,92,211,0.08)",
        border: "rgba(124,92,211,0.2)",
        text: "var(--accent)",
        docs: [
          { name: "Employee Handbook", status: "Live" },
          { name: "Remote Work Policy", status: "Live" },
          { name: "Code of Conduct", status: "Live" },
        ],
      },
      {
        label: "IT & Security",
        color: "rgba(31,138,76,0.08)",
        border: "rgba(31,138,76,0.2)",
        text: "var(--success)",
        docs: [
          { name: "Acceptable Use Policy", status: "Live" },
          { name: "Data Retention Policy", status: "Draft" },
        ],
      },
      {
        label: "Compliance",
        color: "rgba(232,179,57,0.08)",
        border: "rgba(232,179,57,0.2)",
        text: "var(--warning)",
        docs: [
          { name: "GDPR Processing Register", status: "Live" },
          { name: "ISO 27001 Statement", status: "Live" },
        ],
      },
    ];
    return (
      <div style={{
        background: "var(--bg-elevated)",
        border: "1px solid var(--line-strong)",
        borderRadius: 16,
        padding: 20,
        boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)",
        width: "100%",
        boxSizing: "border-box"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, borderBottom: "1px solid var(--line)", paddingBottom: 10 }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)" }}>Policy Hub · Acme AB</span>
          <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>7 policies</span>
        </div>
        {categories.map((cat, ci) => (
          <div key={ci} style={{ marginBottom: ci < categories.length - 1 ? 14 : 0 }}>
            <div style={{ display: "flex", marginBottom: 6 }}>
              <span style={{
                fontSize: 10,
                fontWeight: 600,
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                padding: "2px 8px",
                borderRadius: 4,
                background: cat.color,
                border: `1px solid ${cat.border}`,
                color: cat.text
              }}>{cat.label}</span>
            </div>
            {cat.docs.map((d, di) => (
              <div key={di} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", borderTop: di === 0 ? "none" : "1px solid var(--line)" }}>
                <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>
                <span style={{ flex: 1, fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>{d.name}</span>
                <span style={{
                  fontSize: 10,
                  padding: "1px 6px",
                  borderRadius: 4,
                  background: d.status === "Live" ? "rgba(31,138,76,0.08)" : "rgba(232,179,57,0.08)",
                  border: "1px solid " + (d.status === "Live" ? "rgba(31,138,76,0.18)" : "rgba(232,179,57,0.18)"),
                  color: d.status === "Live" ? "var(--success)" : "var(--warning)"
                }}>{d.status}</span>
              </div>
            ))}
          </div>
        ))}
        <div style={{ marginTop: 14, paddingTop: 10, borderTop: "1px solid var(--line)", fontSize: 11, color: "var(--ink-4)", display: "flex", justifyContent: "space-between" }}>
          <span>Always current · version history</span>
          <span style={{ color: "var(--success)", fontWeight: 600 }}>● Live</span>
        </div>
      </div>
    );
  }
  if (type === "playbook-checks") {
    return (
      <div style={{
        background: "var(--bg-elevated)",
        border: "1px solid rgba(123, 97, 255, 0.25)",
        borderRadius: 20,
        padding: "48px 24px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        boxShadow: "0 20px 40px -15px rgba(123, 97, 255, 0.06)",
        width: "100%",
        boxSizing: "border-box",
        aspectRatio: "1.4 / 1"
      }}>
        <div style={{
          background: "var(--bg-elevated)",
          border: "1px solid rgba(123, 97, 255, 0.2)",
          borderRadius: 12,
          boxShadow: "0 10px 25px rgba(14, 14, 16, 0.05)",
          width: "100%",
          maxWidth: 290,
          overflow: "hidden"
        }}>
          {/* Card Header */}
          <div style={{
            padding: "16px 20px 14px",
            background: "rgba(123, 97, 255, 0.05)",
            borderBottom: "1px solid rgba(123, 97, 255, 0.1)",
            textAlign: "center"
          }}>
            <h4 style={{
              margin: 0,
              fontSize: 13,
              fontWeight: 600,
              color: "var(--accent)",
              letterSpacing: "-0.01em"
            }}>Vendor Agreement Playbook</h4>
            
            {/* Badges */}
            <div style={{
              display: "flex",
              justifyContent: "center",
              gap: 8,
              marginTop: 12
            }}>
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: 4,
                background: "rgba(31, 138, 76, 0.08)",
                border: "1px solid rgba(31, 138, 76, 0.2)",
                borderRadius: 99,
                padding: "2px 8px",
                fontSize: 10.5,
                fontWeight: 600,
                color: "var(--success)"
              }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                1 met
              </div>
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: 4,
                background: "rgba(239, 68, 68, 0.08)",
                border: "1px solid rgba(239, 68, 68, 0.2)",
                borderRadius: 99,
                padding: "2px 8px",
                fontSize: 10.5,
                fontWeight: 600,
                color: "var(--danger)"
              }}>
                <svg width="10" height="10" 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>
                0 not met
              </div>
            </div>
          </div>
          
          {/* Card Body */}
          <div style={{
            padding: "20px",
            display: "flex",
            flexDirection: "column",
            gap: 16
          }}>
            {/* Item 1 */}
            <div style={{
              display: "flex",
              gap: 10,
              alignItems: "flex-start"
            }}>
              <span style={{
                width: 14,
                height: 14,
                borderRadius: 99,
                background: "var(--success)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                color: "white",
                flexShrink: 0,
                marginTop: 2
              }}>
                <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4"><polyline points="20 6 9 17 4 12"/></svg>
              </span>
              <p style={{
                margin: 0,
                fontSize: 12,
                color: "var(--ink-2)",
                lineHeight: 1.4,
                fontWeight: 500
              }}>The term should be no longer than 1 year.</p>
            </div>
            
            {/* Item 2 */}
            <div style={{
              display: "flex",
              gap: 10,
              alignItems: "flex-start"
            }}>
              <span style={{
                width: 12,
                height: 12,
                borderRadius: 99,
                border: "2px solid var(--accent)",
                opacity: 0.5,
                display: "inline-flex",
                flexShrink: 0,
                marginTop: 3
              }} />
              <p style={{
                margin: 0,
                fontSize: 12,
                color: "var(--ink-2)",
                lineHeight: 1.4
              }}>Liquidated damages should be capped to 1% per month.</p>
            </div>
            
            {/* Item 3 */}
            <div style={{
              display: "flex",
              gap: 10,
              alignItems: "flex-start"
            }}>
              <span style={{
                width: 12,
                height: 12,
                borderRadius: 99,
                border: "2px solid var(--accent)",
                opacity: 0.5,
                display: "inline-flex",
                flexShrink: 0,
                marginTop: 3
              }} />
              <p style={{
                margin: 0,
                fontSize: 12,
                color: "var(--ink-2)",
                lineHeight: 1.4
              }}>The agreement should not auto-renew.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (type === "public-guides") {
    return (
      <div style={{
        background: "var(--bg-elevated)",
        border: "1px solid var(--line-strong)",
        borderRadius: 16,
        boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)",
        overflow: "hidden",
        width: "100%",
        boxSizing: "border-box"
      }}>
        {/* Browser header */}
        <div style={{
          padding: "10px 16px",
          borderBottom: "1px solid var(--line)",
          display: "flex",
          alignItems: "center",
          gap: 6,
          background: "var(--bg-soft)"
        }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FF5F56" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FFBD2E" }}></span>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#27C93F" }}></span>
        </div>
        {/* Chat message box */}
        <div style={{
          padding: 24,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          background: "var(--bg)",
          minHeight: 180,
          position: "relative"
        }}>
          <div style={{
            background: "var(--bg-elevated)",
            border: "1px solid var(--line-strong)",
            borderRadius: 12,
            padding: 18,
            boxShadow: "0 10px 30px rgba(0,0,0,0.04)",
            width: "100%",
            maxWidth: 320,
            position: "relative"
          }}>
            {/* Header / New Message */}
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--success)" }} />
              <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.05em" }}>New Message</span>
            </div>
            
            {/* Sender */}
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <div style={{
                width: 32,
                height: 32,
                borderRadius: "50%",
                background: "var(--accent-soft)",
                display: "grid",
                placeItems: "center",
                fontSize: 12,
                fontWeight: 600,
                color: "var(--accent)"
              }}>
                AH
              </div>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)" }}>Annabel H.</div>
                <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>Legal Associate</div>
              </div>
            </div>

            {/* Message Body */}
            <p style={{ margin: "0 0 14px", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45 }}>
              Hey, here's a link for the DPA review Guide.
            </p>

            {/* Link attachment */}
            <div style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              background: "var(--bg-soft)",
              border: "1px solid var(--line)",
              borderRadius: 8,
              padding: "10px 12px",
              fontSize: 12,
              fontWeight: 500,
              color: "var(--accent)",
              cursor: "pointer",
              position: "relative"
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
              <span style={{ textDecoration: "underline", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Acme Inc's DPA review Playbook</span>
            </div>

            {/* Browser Cursor */}
            <div style={{
              position: "absolute",
              bottom: -15,
              right: 40,
              pointerEvents: "none",
              zIndex: 10
            }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M4.5 3V19.5L9.5 14.5H19.5L4.5 3Z" fill="#B25900" stroke="white" strokeWidth="1.5" strokeLinejoin="miter"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (type === "playbook-generation") {
    return (
      <div style={{
        background: "var(--bg-elevated)",
        border: "1px solid var(--line-strong)",
        borderRadius: 16,
        padding: 24,
        boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)",
        width: "100%",
        boxSizing: "border-box"
      }}>
        {/* Header */}
        <div style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          borderBottom: "1px solid var(--line)",
          paddingBottom: 14,
          marginBottom: 16
        }}>
          <span style={{ color: "var(--accent)" }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L14.76 8.76L21.52 11.52L14.76 14.28L12 21.04L9.24 14.28L2.48 11.52L9.24 8.76L12 2Z"/></svg>
          </span>
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>Step 2 - Playbook Generation</span>
        </div>

        {/* Position Rules */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{
            background: "var(--accent)",
            color: "white",
            borderRadius: 8,
            padding: "14px 16px",
            fontSize: 11.5,
            lineHeight: 1.45,
            boxShadow: "0 4px 12px rgba(123, 97, 255, 0.2)"
          }}>
            Any change in sub-processors shall be notified to the Customer by the Data Processor within 30 days of engagement.
          </div>
          
          <div style={{
            background: "var(--accent)",
            color: "white",
            borderRadius: 8,
            padding: "14px 16px",
            fontSize: 11.5,
            lineHeight: 1.45,
            boxShadow: "0 4px 12px rgba(123, 97, 255, 0.2)"
          }}>
            Occurrence of any security incidents should be notified to the Data Controller immediately.
          </div>
        </div>
      </div>
    );
  }
  if (type === "guideline-verification") {
    return (
      <div style={{
        background: "var(--bg-elevated)",
        border: "1px solid rgba(123, 97, 255, 0.25)",
        borderRadius: 20,
        padding: "48px 24px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        boxShadow: "0 20px 40px -15px rgba(123, 97, 255, 0.06)",
        width: "100%",
        boxSizing: "border-box",
        aspectRatio: "1.4 / 1"
      }}>
        <div style={{
          background: "var(--bg-elevated)",
          border: "1px solid var(--line-strong)",
          borderRadius: 12,
          boxShadow: "0 10px 25px rgba(14, 14, 16, 0.05)",
          width: "100%",
          maxWidth: 290,
          padding: 20
        }}>
          {/* Badge */}
          <div style={{ marginBottom: 12 }}>
            <span style={{
              background: "var(--success-soft)",
              border: "1px solid rgba(31, 138, 76, 0.2)",
              borderRadius: 6,
              color: "var(--success)",
              padding: "3px 8px",
              fontSize: 10.5,
              fontWeight: 600
            }}>
              Guideline met
            </span>
          </div>

          {/* Guideline text */}
          <p style={{
            margin: "0 0 14px",
            fontSize: 12,
            fontWeight: 500,
            color: "var(--ink-1)",
            lineHeight: 1.45
          }}>
            The term should be no longer than 1 year.
          </p>

          <div style={{ borderTop: "1px solid var(--line)", margin: "14px 0", height: 1 }} />

          {/* Reason section */}
          <div style={{ marginBottom: 16 }}>
            <div style={{
              fontSize: 10,
              fontWeight: 700,
              color: "var(--ink-4)",
              letterSpacing: "0.05em",
              marginBottom: 4
            }}>REASON:</div>
            <p style={{
              margin: 0,
              fontSize: 11.5,
              color: "var(--ink-2)",
              lineHeight: 1.45
            }}>
              The term of agreement is 1 year from the Effective Date.
            </p>
          </div>

          {/* Pagination */}
          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 12,
            fontSize: 11,
            color: "var(--ink-4)"
          }}>
            <button style={{
              border: "1px solid var(--line-strong)",
              background: "var(--bg-soft)",
              borderRadius: 4,
              width: 20,
              height: 20,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "var(--ink-3)",
              cursor: "pointer"
            }}>‹</button>
            <span>Guideline 1/23</span>
            <button style={{
              border: "1px solid var(--line-strong)",
              background: "var(--bg-soft)",
              borderRadius: 4,
              width: 20,
              height: 20,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "var(--ink-3)",
              cursor: "pointer"
            }}>›</button>
          </div>
        </div>
      </div>
    );
  }
  if (type === "terms-editor") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><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>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Privacy Policy</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(31,138,76,0.08)", border: "1px solid rgba(31,138,76,0.2)", color: "var(--success)" }}>Published</span>
        </div>
        <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)" }}>
          {[["§ 1, Data we collect", true], ["§ 2, How we use your data", false], ["§ 3, Third-party sharing", false]].map(([s, active], i) => (
            <div key={i} style={{ padding: "7px 10px", borderRadius: 7, background: active ? "var(--accent-soft)" : "transparent", color: active ? "var(--accent)" : "var(--ink-3)", fontSize: 12.5, marginBottom: 3, fontWeight: active ? 500 : 400 }}>{s}</div>
          ))}
        </div>
        <div style={{ padding: "14px 16px" }}>
          <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.65, margin: "0 0 12px" }}>We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support...</p>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", gap: 6 }}>
              {["v1.0", "v1.1", "v2.0 ✓"].map((v, i) => (
                <span key={v} style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: i === 2 ? "var(--accent-soft)" : "var(--bg-soft)", border: "1px solid " + (i === 2 ? "rgba(124,92,211,0.25)" : "var(--line)"), color: i === 2 ? "var(--accent)" : "var(--ink-4)" }}>{v}</span>
              ))}
            </div>
            <span style={{ fontSize: 11, color: "var(--ink-4)" }}>Auto-saved 2m ago</span>
          </div>
        </div>
      </div>
    );
  }
  if (type === "terms-hub") {
    const docs = [
      { name: "Privacy Policy", version: "v2.0", status: "Live", updated: "Today" },
      { name: "Terms of Service", version: "v3.1", status: "Live", updated: "3d ago" },
      { name: "Data Processing Agreement", version: "v1.2", status: "Live", updated: "1w ago" },
      { name: "Cookie Policy", version: "v1.0", status: "Draft", updated: "2w ago" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Document Hub · Acme AB</span>
          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>4 documents</span>
        </div>
        <div style={{ padding: "8px 0" }}>
          {docs.map((d, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 16px", borderBottom: i < docs.length - 1 ? "1px solid var(--line)" : "none" }}>
              <svg width="13" height="13" 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>
              <span style={{ flex: 1, fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500 }}>{d.name}</span>
              <span style={{ fontSize: 10.5, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{d.version}</span>
              <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.status === "Live" ? "rgba(31,138,76,0.08)" : "rgba(232,179,57,0.08)", border: "1px solid " + (d.status === "Live" ? "rgba(31,138,76,0.2)" : "rgba(232,179,57,0.2)"), color: d.status === "Live" ? "var(--success)" : "var(--warning)" }}>{d.status}</span>
              <span style={{ fontSize: 10.5, color: "var(--ink-5)" }}>{d.updated}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (type === "hub-setup") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Hub setup · Step 2 of 3</span>
        </div>
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
          {[{ label: "Hub name", value: "Acme Legal Hub" }, { label: "Custom domain", value: "legal.acme.com" }, { label: "Brand colour", value: "#1A56DB" }].map((f, i) => (
            <div key={i}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-3)", marginBottom: 4 }}>{f.label}</div>
              <div style={{ height: 34, borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", alignItems: "center", padding: "0 10px", fontSize: 12.5, color: "var(--ink-2)" }}>
                {f.label === "Brand colour" ? <><span style={{ width: 14, height: 14, borderRadius: 3, background: f.value, marginRight: 8, display: "inline-block" }}/>{f.value}</> : f.value}
              </div>
            </div>
          ))}
          <div style={{ marginTop: 4, padding: "10px 12px", borderRadius: 8, background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.2)", fontSize: 11.5, color: "var(--accent)" }}>
            ✓ Your hub will be live at <strong>legal.acme.com</strong> in seconds
          </div>
        </div>
      </div>
    );
  }
  if (type === "hub-embed") {
    const destinations = [
      { label: "Website Footer", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" },
      { label: "Sign Up Page", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" },
      { label: "Agreements", icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" },
    ];
    return (
      <div style={{ background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.22)", borderRadius: 16, padding: 20, boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)", display: "flex", flexDirection: "column", aspectRatio: "1 / 1" }}>
        {/* Embed code box */}
        <div style={{ background: "var(--bg-elevated)", border: "1px solid rgba(124,92,211,0.20)", borderRadius: 12, padding: "16px 16px", textAlign: "center", flexShrink: 0 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", color: "var(--accent)", marginBottom: 10, textTransform: "uppercase" }}>Document Hub embed code</div>
          <div style={{ background: "var(--bg-soft)", border: "1px solid rgba(124,92,211,0.35)", borderRadius: 8, padding: "8px 12px", fontSize: 10.5, color: "var(--accent)", fontFamily: "var(--font-mono)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            https://hub.contractcontrol.com/embed/acme-terms…
          </div>
        </div>
        {/* Vertical connector tree */}
        <div style={{ display: "flex", flex: 1, gap: 0 }}>
          {/* Left: vertical spine */}
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: 32, flexShrink: 0 }}>
            <div style={{ width: 1.5, flex: 1, backgroundImage: "repeating-linear-gradient(to bottom, rgba(124,92,211,0.5) 0px, rgba(124,92,211,0.5) 4px, transparent 4px, transparent 7px)" }} />
          </div>
          {/* Right: destination cards */}
          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-evenly", padding: "16px 0" }}>
            {destinations.map((dest) => (
              <div key={dest.label} style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--bg-elevated)", border: "1px solid rgba(124,92,211,0.20)", borderRadius: 10, padding: "12px 14px" }}>
                <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.20)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.8"><path d={dest.icon}/></svg>
                </span>
                <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)" }}>{dest.label}</span>
                <span style={{ marginLeft: "auto", fontSize: 10.5, color: "var(--success)", fontWeight: 600 }}>Live ✓</span>
              </div>
            ))}
          </div>
        </div>
        {/* Footer status */}
        <div style={{ borderTop: "1px solid rgba(124,92,211,0.15)", paddingTop: 12, display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0 }}>
          <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>3 destinations synced</span>
          <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>Updated just now</span>
        </div>
      </div>
    );
  }
  if (type === "internal-policies") {
    const categories = [
      { label: "HR & People", color: "rgba(124,92,211,0.10)", border: "rgba(124,92,211,0.22)", text: "var(--accent)", docs: ["Employee Handbook", "Leave & Absence Policy", "Code of Conduct"] },
      { label: "IT & Security", color: "rgba(31,138,76,0.07)", border: "rgba(31,138,76,0.20)", text: "var(--success)", docs: ["Acceptable Use Policy", "Data Handling Guidelines"] },
      { label: "Finance", color: "rgba(232,179,57,0.08)", border: "rgba(232,179,57,0.22)", text: "var(--warning)", docs: ["Expense Policy", "Procurement Guidelines"] },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Internal Policy Hub · Acme AB</span>
          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>7 documents</span>
        </div>
        <div style={{ padding: "10px 0" }}>
          {categories.map((cat, ci) => (
            <div key={cat.label} style={{ borderBottom: ci < categories.length - 1 ? "1px solid var(--line)" : "none", paddingBottom: 6, marginBottom: 2 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 16px 4px" }}>
                <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: cat.color, border: `1px solid ${cat.border}`, color: cat.text }}>{cat.label}</span>
              </div>
              {cat.docs.map((doc, di) => (
                <div key={di} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 16px" }}>
                  <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>
                  <span style={{ flex: 1, fontSize: 12.5, color: "var(--ink-2)" }}>{doc}</span>
                  <span style={{ fontSize: 10.5, color: "var(--success)", fontWeight: 500 }}>Live</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (type === "permissions-matrix") {
    const roles = ["Admin", "Editor", "Viewer", "Public"];
    const docs = [
      { name: "Employee Handbook", access: [true, true, true, false] },
      { name: "IT Security Policy", access: [true, true, true, false] },
      { name: "Terms of Service", access: [true, true, false, true] },
      { name: "Board Minutes", access: [true, false, false, false] },
    ];
    const dot = (on) => (
      <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
        {on
          ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.8"><polyline points="20 6 9 17 4 12"/></svg>
          : <div style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--line-strong)" }} />}
      </div>
    );
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Access permissions · Acme AB</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr repeat(4, 52px)", padding: "7px 16px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span>Document</span>
          {roles.map(r => <span key={r} style={{ textAlign: "center" }}>{r}</span>)}
        </div>
        {docs.map((d, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr repeat(4, 52px)", padding: "10px 16px", borderBottom: i < docs.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
            <span style={{ fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500 }}>{d.name}</span>
            {d.access.map((on, j) => <div key={j}>{dot(on)}</div>)}
          </div>
        ))}
      </div>
    );
  }
  if (type === "audience-segments") {
    const hubs = [
      { label: "Staff Portal", domain: "hub.acme.com/staff", audience: "Internal", color: "var(--accent)", count: "12 docs" },
      { label: "Customer Terms", domain: "hub.acme.com/terms", audience: "Public", color: "#16A34A", count: "5 docs" },
      { label: "Partner Hub", domain: "hub.acme.com/partners", audience: "Partners", color: "#0EA5E9", count: "8 docs" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Document Hubs · Acme AB</span>
          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>3 hubs</span>
        </div>
        {hubs.map((h, i) => (
          <div key={i} style={{ padding: "14px 16px", borderBottom: i < hubs.length - 1 ? "1px solid var(--line)" : "none", display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 9, background: h.color + "18", border: `1px solid ${h.color}30`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={h.color} strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>{h.label}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 2 }}>{h.domain}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: h.color + "14", color: h.color, border: `1px solid ${h.color}28` }}>{h.audience}</span>
              <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 4 }}>{h.count}</div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (type === "access-audit") {
    const logs = [
      { user: "Sara R.", initials: "SR", color: "#7B61FF", action: "Viewed", doc: "Employee Handbook", time: "2m ago" },
      { user: "Tom W.", initials: "TW", color: "#0EA5E9", action: "Downloaded", doc: "IT Security Policy", time: "14m ago" },
      { user: "Linnea A.", initials: "LA", color: "#16A34A", action: "Published v3", doc: "Terms of Service", time: "1h ago" },
      { user: "Magnus H.", initials: "MH", color: "#B97A00", action: "Viewed", doc: "Board Minutes", time: "3h ago" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Access audit log</span>
          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>Today</span>
        </div>
        {logs.map((l, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 16px", borderBottom: i < logs.length - 1 ? "1px solid var(--line)" : "none" }}>
            <div style={{ width: 26, height: 26, borderRadius: "50%", background: l.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#fff", flexShrink: 0 }}>{l.initials}</div>
            <div style={{ flex: 1 }}>
              <span style={{ fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500 }}>{l.user}</span>
              <span style={{ fontSize: 12, color: "var(--ink-3)" }}> · {l.action} </span>
              <span style={{ fontSize: 12, color: "var(--accent)", fontWeight: 500 }}>{l.doc}</span>
            </div>
            <span style={{ fontSize: 11, color: "var(--ink-5)", whiteSpace: "nowrap" }}>{l.time}</span>
          </div>
        ))}
        <div style={{ padding: "10px 16px", background: "var(--bg-soft)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>24 events today</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 500 }}>Export CSV →</span>
        </div>
      </div>
    );
  }
  if (type === "clickwrap-editor") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>Terms of Service</span>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: -6 }}>
            <div style={{ width: 22, height: 22, borderRadius: "50%", background: "#7B61FF", border: "1.5px solid var(--bg-elevated)", display: "grid", placeItems: "center", fontSize: 9, fontWeight: 600, color: "white" }}>SH</div>
            <div style={{ width: 22, height: 22, borderRadius: "50%", background: "#0EA5E9", border: "1.5px solid var(--bg-elevated)", display: "grid", placeItems: "center", fontSize: 9, fontWeight: 600, color: "white", marginLeft: -6 }}>TW</div>
            <div style={{ width: 22, height: 22, borderRadius: "50%", background: "#10B981", border: "1.5px solid var(--bg-elevated)", display: "grid", placeItems: "center", fontSize: 9, fontWeight: 600, color: "white", marginLeft: -6 }}>JD</div>
          </div>
        </div>
        <div style={{ padding: "8px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", gap: 4 }}>
            <span style={{ width: 24, height: 24, borderRadius: 4, display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11, background: "var(--accent-soft)", color: "var(--accent)", border: "1px solid rgba(123,97,255,0.2)" }}>B</span>
            <span style={{ width: 24, height: 24, borderRadius: 4, display: "grid", placeItems: "center", fontStyle: "italic", fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-serif)" }}>I</span>
            <span style={{ width: 24, height: 24, borderRadius: 4, display: "grid", placeItems: "center", textDecoration: "underline", fontSize: 11, color: "var(--ink-3)" }}>U</span>
          </div>
          <div style={{ width: 1, height: 16, background: "var(--line-strong)" }} />
          <span style={{ fontSize: 11, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 4 }}>
            Poppins <span style={{ fontSize: 9 }}>▼</span>
          </span>
          <div style={{ width: 1, height: 16, background: "var(--line-strong)" }} />
          <span style={{ fontSize: 11, color: "var(--ink-4)" }}>12 pt</span>
        </div>
        <div style={{ padding: 20, minHeight: 140, background: "var(--bg-elevated)" }}>
          <h4 style={{ margin: "0 0 10px", fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>1. Agreement to Terms</h4>
          <p style={{ margin: 0, fontSize: 12, lineHeight: 1.6, color: "var(--ink-2)", position: "relative" }}>
            By checking the accept box, you agree to these Terms of Service. If you are entering into this agreement on behalf of a company, you represent that you have the authority to bind such entity.
            <span style={{ display: "inline-block", position: "relative", width: 2, height: 14, background: "var(--accent)", verticalAlign: "middle", marginLeft: 2 }}>
              <span style={{ position: "absolute", bottom: 16, left: -4, background: "var(--accent)", color: "white", fontSize: 8, padding: "1px 4px", borderRadius: 3, whiteSpace: "nowrap", fontWeight: 500 }}>
                Sara (Legal)
              </span>
            </span>
          </p>
        </div>
      </div>
    );
  }
  if (type === "clickwrap-reports") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>Consent Audit Records</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(31,138,76,0.08)", border: "1px solid rgba(31,138,76,0.2)", color: "var(--success)" }}>Live Tracking</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <div style={{ padding: "10px 16px", borderRight: "1px solid var(--line)" }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase" }}>Total Consents</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--ink-1)", marginTop: 2 }}>24,198</div>
          </div>
          <div style={{ padding: "10px 16px" }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase" }}>Audit Success</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--success)", marginTop: 2 }}>100.00%</div>
          </div>
        </div>
        <div style={{ padding: 16, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 16, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{ position: "relative", width: 70, height: 70, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="70" height="70" viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="15.915" fill="none" stroke="var(--line-strong)" strokeWidth="3.2"/>
                <circle cx="18" cy="18" r="15.915" fill="none" stroke="var(--accent)" strokeWidth="3.2" strokeDasharray="64 36" strokeDashoffset="25"/>
              </svg>
              <div style={{ position: "absolute", fontSize: 11, fontWeight: 700, color: "var(--ink-1)" }}>64% US</div>
            </div>
            <span style={{ fontSize: 10, color: "var(--ink-3)", fontWeight: 500 }}>US (64%) vs EU (36%)</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {[
              "IP Address captured",
              "UTC Timestamp logged",
              "Document Hash signed",
              "User-Agent details saved"
            ].map((item, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 11.5, color: "var(--ink-2)" }}>
                <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--success-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--success)" }}>
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
                <span>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  if (type === "clickwrap-domain") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)" }}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
          <div style={{ display: "flex", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(14,14,16,0.12)" }} />
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(14,14,16,0.12)" }} />
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(14,14,16,0.12)" }} />
          </div>
          <div style={{ flex: 1, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 6, padding: "3px 12px", display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span style={{ fontSize: 10.5, color: "var(--ink-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-mono)" }}>https://legal.acme.com/terms</span>
          </div>
        </div>
        <div style={{ padding: 16 }}>
          <div style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }}>Custom Subdomain Prefix</div>
            <div style={{ display: "flex", border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden", height: 34, background: "var(--bg-soft)" }}>
              <div style={{ flex: 1, background: "var(--bg-elevated)", padding: "0 10px", display: "flex", alignItems: "center", fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>legal</div>
              <div style={{ padding: "0 10px", background: "var(--bg-soft)", borderLeft: "1px solid var(--line)", fontSize: 12, color: "var(--ink-4)", display: "flex", alignItems: "center" }}>.acme.com</div>
            </div>
          </div>
          <div style={{ marginBottom: 12 }}>
            <table style={{ width: "100%", borderCollapse: "collapse", border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden" }}>
              <thead>
                <tr style={{ background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
                  {["Type", "Host", "Value"].map((col) => (
                    <th key={col} style={{ textAlign: "left", padding: "6px 12px", fontSize: 9.5, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase" }}>{col}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr style={{ fontSize: 11.5, fontFamily: "var(--font-mono)" }}>
                  <td style={{ padding: "8px 12px", color: "var(--ink-3)" }}>CNAME</td>
                  <td style={{ padding: "8px 12px", color: "var(--ink-1)", fontWeight: 500 }}>legal</td>
                  <td style={{ padding: "8px 12px", color: "var(--ink-2)" }}>hubs.contractcontrol.com</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ background: "rgba(123,97,255,0.06)", border: "1px solid rgba(123,97,255,0.18)", borderRadius: 8, padding: "8px 12px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ fontSize: 11, color: "var(--accent)" }}>SSL certificate status</span>
            <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(31,138,76,0.08)", border: "1px solid rgba(31,138,76,0.2)", color: "var(--success)", display: "inline-flex", alignItems: "center", gap: 4 }}>
              <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--success)" }} /> Active
            </span>
          </div>
        </div>
      </div>
    );
  }
  if (type === "clickwrap-contracts") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)", display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 260 }}>
        <div style={{ padding: 16, borderRight: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }}>Accent Color</div>
            <div style={{ display: "flex", gap: 8 }}>
              {["#7B61FF", "#1A56DB", "#1F8A4C", "#000000"].map((color, idx) => (
                <div key={idx} style={{ width: 18, height: 18, borderRadius: "50%", background: color, cursor: "pointer", border: idx === 0 ? "2px solid var(--bg-elevated)" : "none", boxShadow: idx === 0 ? "0 0 0 1.5px var(--accent)" : "none" }} />
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }}>Checkbox Style</div>
            <div style={{ height: 28, borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg-elevated)", display: "flex", alignItems: "center", padding: "0 8px", fontSize: 11.5, color: "var(--ink-2)" }}>
              Standard Checkbox
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }}>Font Family</div>
            <div style={{ height: 28, borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg-elevated)", display: "flex", alignItems: "center", padding: "0 8px", fontSize: 11.5, color: "var(--ink-2)" }}>
              Poppins (Sans-serif)
            </div>
          </div>
        </div>
        <div style={{ padding: 20, display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--bg-elevated)" }}>
          <div style={{ border: "1px solid var(--line)", borderRadius: 10, padding: 14, boxShadow: "0 4px 12px rgba(14,14,16,0.03)" }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)", marginBottom: 8 }}>Create Account</div>
            <div style={{ height: 24, borderRadius: 5, border: "1px solid var(--line)", background: "var(--bg-soft)", marginBottom: 8 }} />
            <div style={{ display: "flex", gap: 8, alignItems: "flex-start", marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: 3, border: "1.5px solid var(--accent)", background: "var(--accent-soft)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 1 }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="3.5"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <span style={{ fontSize: 10, color: "var(--ink-2)", lineHeight: 1.4 }}>I agree to the Terms of Service and Privacy Policy.</span>
            </div>
            <button style={{ width: "100%", border: "none", background: "var(--accent)", color: "white", padding: "6px 0", borderRadius: 5, fontSize: 11.5, fontWeight: 500 }}>Sign Up</button>
          </div>
        </div>
      </div>
    );
  }
  if (type === "clickwrap-document-hub") {
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10)", display: "grid", gridTemplateColumns: "1fr 1.8fr", minHeight: 240 }}>
        <div style={{ padding: "12px 0", background: "var(--bg-soft)", borderRight: "1px solid var(--line)" }}>
          <div style={{ padding: "0 12px 8px", fontSize: 9.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", borderBottom: "1px solid var(--line)" }}>Documents</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "8px 8px 0" }}>
            {[
              ["Terms of Service", true],
              ["Privacy Policy", false],
              ["Cookie Policy", false],
              ["SLA Agreement", false]
            ].map(([name, active]) => (
              <div key={name} style={{ padding: "6px 8px", borderRadius: 6, background: active ? "var(--bg-elevated)" : "transparent", border: active ? "1px solid var(--line)" : "1px solid transparent", color: active ? "var(--ink-1)" : "var(--ink-3)", fontSize: 11.5, fontWeight: active ? 500 : 400 }}>
                {name}
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>Terms of Service</span>
            <span style={{ fontSize: 10, padding: "2px 8px", borderRadius: 99, background: "rgba(31,138,76,0.08)", border: "1px solid rgba(31,138,76,0.2)", color: "var(--success)", display: "inline-flex", alignItems: "center", gap: 3 }}>
               Active v4.2
            </span>
          </div>
          <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>Effective date: May 20, 2026</div>
          <div style={{ height: 1, background: "var(--line)" }} />
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }}>Version History</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                ["v4.2", "Current", "May 20, 2026", "var(--success)"],
                ["v4.1", "Archived", "Jan 12, 2026", "var(--ink-4)"],
                ["v4.0", "Archived", "Oct 01, 2025", "var(--ink-4)"]
              ].map(([v, status, date, color]) => (
                <div key={v} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 8px", background: "var(--bg-soft)", borderRadius: 4, fontSize: 11 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500, color: "var(--ink-2)" }}>{v}</span>
                  <span style={{ color: color, fontWeight: 500 }}>{status}</span>
                  <span style={{ color: "var(--ink-4)" }}>{date}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

function DocHubMockupDark({ type }) {
  if (type === "terms-hub") {
    const docs = [
      { name: "Privacy Policy", version: "v2.0", status: "Live", updated: "Today" },
      { name: "Terms of Service", version: "v3.1", status: "Live", updated: "3d ago" },
      { name: "Data Processing Agreement", version: "v1.2", status: "Live", updated: "1w ago" },
      { name: "Cookie Policy", version: "v1.0", status: "Draft", updated: "2w ago" },
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Document Hub · Acme AB</span>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", fontFamily: "var(--font-mono)" }}>4 docs</span>
      </div>
      {docs.map((d, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.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>
          <span style={{ flex: 1, fontSize: 12.5, color: "rgba(255,255,255,0.85)", fontWeight: 500 }}>{d.name}</span>
          <span style={{ fontSize: 10.5, color: "rgba(255,255,255,0.35)", fontFamily: "var(--font-mono)" }}>{d.version}</span>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.status === "Live" ? "rgba(134,239,172,0.12)" : "rgba(252,211,77,0.10)", border: "1px solid " + (d.status === "Live" ? "rgba(134,239,172,0.25)" : "rgba(252,211,77,0.25)"), color: d.status === "Live" ? "#86EFAC" : "#FCD34D" }}>{d.status}</span>
        </div>
      ))}
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid rgba(255,255,255,0.1)", fontSize: 11.5, color: "rgba(255,255,255,0.55)", display: "flex", justifyContent: "space-between" }}>
        <span>Full-text search · version history</span>
        <span style={{ color: "#86EFAC" }}>● Live</span>
      </div>
    </>);
  }
  if (type === "policy-hub") {
    const categories = [
      {
        label: "HR & People",
        docs: [
          { name: "Employee Handbook", status: "Live" },
          { name: "Remote Work Policy", status: "Live" },
          { name: "Code of Conduct", status: "Live" },
        ],
      },
      {
        label: "IT & Security",
        docs: [
          { name: "Acceptable Use Policy", status: "Live" },
          { name: "Data Retention Policy", status: "Draft" },
        ],
      },
      {
        label: "Compliance",
        docs: [
          { name: "GDPR Processing Register", status: "Live" },
          { name: "ISO 27001 Statement", status: "Live" },
        ],
      },
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Policy Hub · Acme AB</span>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", fontFamily: "var(--font-mono)" }}>7 policies</span>
      </div>
      {categories.map((cat, ci) => (
        <div key={ci} style={{ marginBottom: ci < categories.length - 1 ? 10 : 0 }}>
          <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase", color: "rgba(255,255,255,0.35)", marginBottom: 4 }}>{cat.label}</div>
          {cat.docs.map((d, di) => (
            <div key={di} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 0", borderTop: di === 0 ? "none" : "1px solid rgba(255,255,255,0.06)" }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.35)" 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>
              <span style={{ flex: 1, fontSize: 12, color: "rgba(255,255,255,0.82)", fontWeight: 500 }}>{d.name}</span>
              <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 99, background: d.status === "Live" ? "rgba(134,239,172,0.12)" : "rgba(252,211,77,0.10)", border: "1px solid " + (d.status === "Live" ? "rgba(134,239,172,0.25)" : "rgba(252,211,77,0.25)"), color: d.status === "Live" ? "#86EFAC" : "#FCD34D" }}>{d.status}</span>
            </div>
          ))}
        </div>
      ))}
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid rgba(255,255,255,0.1)", fontSize: 11, color: "rgba(255,255,255,0.55)", display: "flex", justifyContent: "space-between" }}>
        <span>Always current · version history</span>
        <span style={{ color: "#86EFAC" }}>● Live</span>
      </div>
    </>);
  }
  if (type === "bulk-signatures") {
    const batches = [
      { name: "Employment_SE.csv", sent: 45, total: 45, status: "Completed", pct: 100 },
      { name: "NDA_Batch_Q2.csv", sent: 118, total: 120, status: "Processing", pct: 98 },
      { name: "Vendor_Update.csv", sent: 8, total: 50, status: "Queueing", pct: 16 }
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Bulk Signatures</span>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", fontFamily: "var(--font-mono)" }}>3 batches</span>
      </div>
      {batches.map((b, i) => (
        <div key={i} style={{ padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
            <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.9)", fontWeight: 500 }}>{b.name}</span>
            <span style={{ fontSize: 11, color: b.pct === 100 ? "#86EFAC" : "#FCD34D" }}>{b.sent}/{b.total}</span>
          </div>
          <div style={{ height: 6, width: "100%", background: "rgba(255,255,255,0.1)", borderRadius: 3, overflow: "hidden" }}>
            <div style={{ height: "100%", width: `${b.pct}%`, background: b.pct === 100 ? "#10B981" : "#F59E0B", borderRadius: 3 }} />
          </div>
        </div>
      ))}
    </>);
  }
  if (type === "dealroom") {
    const tasks = [
      { title: "Approve payment terms", done: true },
      { title: "Upload VAT details", done: false },
      { title: "Sign master contract", done: false }
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Dealroom · Project Volantis</span>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)" }}>Growth plan</span>
      </div>
      <div style={{ marginBottom: 14, background: "rgba(255,255,255,0.05)", borderRadius: 8, padding: 10, border: "1px solid rgba(255,255,255,0.08)" }}>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 6 }}>Files (3)</div>
        {["Proposal.pdf", "Video_Tour.mp4", "Mutual_NDA.pdf"].map((f, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "rgba(255,255,255,0.8)", marginBottom: 4 }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>
            {f}
          </div>
        ))}
      </div>
      <div>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 6 }}>Deal Blockers (3)</div>
        {tasks.map((t, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "rgba(255,255,255,0.8)", marginBottom: 4 }}>
            <span style={{
              width: 12, height: 12, borderRadius: 3, border: "1px solid rgba(255,255,255,0.3)",
              display: "grid", placeItems: "center", background: t.done ? "#10B981" : "transparent"
            }}>
              {t.done && <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="4"><polyline points="20 6 9 17 4 12"/></svg>}
            </span>
            <span style={{ textDecoration: t.done ? "line-through" : "none", color: t.done ? "rgba(255,255,255,0.4)" : "white" }}>{t.title}</span>
          </div>
        ))}
      </div>
    </>);
  }
  if (type === "clickwrap") {
    const logs = [
      { user: "john.doe@gmail.com", doc: "Terms v4.2", ip: "92.241.11.4", time: "2 min ago" },
      { user: "anna.k@company.se", doc: "Terms v4.2", ip: "88.24.120.20", time: "1 hour ago" },
      { user: "m.nilsen@norge.no", doc: "SLA v1.5", ip: "194.22.4.91", time: "3 hours ago" }
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Clickwrap Audits</span>
        <span style={{ fontSize: 11, color: "#86EFAC" }}>● Tracking Active</span>
      </div>
      {logs.map((l, i) => (
        <div key={i} style={{ padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)", fontSize: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", color: "rgba(255,255,255,0.9)", fontWeight: 500, marginBottom: 2 }}>
             <span>{l.user}</span>
             <span style={{ color: "rgba(255,255,255,0.4)", fontFamily: "var(--font-mono)", fontSize: 10 }}>{l.time}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", color: "rgba(255,255,255,0.5)", fontSize: 11 }}>
             <span>Accepted <strong>{l.doc}</strong></span>
             <span>IP: {l.ip}</span>
          </div>
        </div>
      ))}
    </>);
  }
  if (type === "complaint-hub") {
    const complaints = [
      { id: "CASE-104", title: "GDPR Deletion Request", status: "Under Review", color: "#FCD34D" },
      { id: "CASE-103", title: "Billing Term Mismatch", status: "Investigating", color: "#60A5FA" },
      { id: "CASE-102", title: "Terms Modification Dispute", status: "Resolved", color: "#34D399" }
    ];
    return (<>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Compliant Hub</span>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)" }}>ISO 9001 Compliance</span>
      </div>
      {complaints.map((c, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)", fontSize: 12 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: c.color }} />
          <div style={{ flex: 1 }}>
            <div style={{ color: "rgba(255,255,255,0.9)", fontWeight: 500 }}>{c.title}</div>
            <div style={{ color: "rgba(255,255,255,0.4)", fontSize: 10.5, marginTop: 1 }}>{c.id}</div>
          </div>
          <span style={{ fontSize: 10.5, color: c.color }}>{c.status}</span>
        </div>
      ))}
    </>);
  }
  return null;
}

function LegalHubAnim() {
  const STAGES = [
    "playbook",   // 0  Define positions
    "scanning",   // 1  Check incoming contract
    "scoring",    // 2  Risk score computed
    "routing",    // 3  Auto-route matter
    "aligned",    // 4  Playbook aligned
  ];
  const [stage, setStage] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setStage((stage + 1) % STAGES.length), 2700);
    return () => clearTimeout(t);
  }, [stage]);

  const at = (s) => stage >= STAGES.indexOf(s);
  const eq = (s) => stage === STAGES.indexOf(s);

  return (
    <div style={{
      width: "100%", maxWidth: 580, height: 520,
      background: "var(--bg-elevated)",
      border: "1px solid var(--line)",
      borderRadius: 20,
      boxShadow: "0 30px 60px -20px rgba(14,14,16,0.18), 0 8px 16px -8px rgba(14,14,16,0.05)",
      overflow: "hidden",
      position: "relative",
      display: "flex", flexDirection: "column",
    }}>
      {/* Top chrome */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
          <Icon name="legal" size={14} />
        </span>
        <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>
          Acme Playbook Manager
          <div style={{ fontSize: 10.5, color: "var(--ink-4)", fontWeight: 400 }}>
            14 active rules · 3 platforms connected
          </div>
        </div>
        <span style={{
          fontSize: 10.5, fontFamily: "var(--font-mono)",
          padding: "3px 9px", borderRadius: 999,
          background: eq("aligned") ? "rgba(31,138,76,0.10)" : (eq("scoring") || eq("routing") ? "rgba(180,35,24,0.08)" : "var(--accent-soft)"),
          color: eq("aligned") ? "var(--success)" : (eq("scoring") || eq("routing") ? "var(--danger)" : "var(--accent)"),
          border: "1px solid " + (eq("aligned") ? "rgba(31,138,76,0.20)" : (eq("scoring") || eq("routing") ? "rgba(180,35,24,0.16)" : "rgba(110,86,207,0.20)")),
          transition: "all 280ms ease",
        }}>
          {eq("aligned") ? "Aligned" : (eq("scoring") || eq("routing") ? "Risk Alert" : (eq("scanning") ? "Scanning" : "Monitoring"))}
        </span>
      </div>

      {/* Main canvas */}
      <div style={{ position: "relative", flex: 1, padding: 18, display: "grid", gridTemplateColumns: "180px 1fr", gap: 14, overflow: "hidden" }}>
        {/* Left: playbook rules list */}
        <div style={{ background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 12, padding: 14, fontSize: 12 }}>
          <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>PLAYBOOK</div>
          {[
            { name: "Governing Law", active: false },
            { name: "Limitation of Liability", active: true, badge: eq("aligned") ? "Passed" : (at("scoring") ? "Breach" : null) },
            { name: "Payment Terms", active: false },
            { name: "Intellectual Property", active: false },
            { name: "Indemnification", active: false },
            { name: "Data Processing", active: false },
          ].map((f) => (
            <div key={f.name} style={{
              display: "flex", flexDirection: "column",
              padding: "6px 8px",
              background: f.active ? "var(--bg-elevated)" : "transparent",
              border: f.active ? "1px solid var(--line)" : "1px solid transparent",
              borderRadius: 6,
              marginBottom: 4,
            }}>
              <span style={{ fontSize: 11.5, color: f.active ? "var(--ink-1)" : "var(--ink-3)", fontWeight: f.active ? 500 : 400 }}>{f.name}</span>
              {f.badge && (
                <span style={{
                  alignSelf: "flex-start",
                  marginTop: 4, fontSize: 8.5, fontWeight: 600, letterSpacing: "0.04em",
                  padding: "1px 5px", borderRadius: 4, textTransform: "uppercase",
                  background: f.badge === "Passed" ? "rgba(31,138,76,0.08)" : "rgba(180,35,24,0.08)",
                  color: f.badge === "Passed" ? "var(--success)" : "var(--danger)"
                }}>{f.badge}</span>
              )}
            </div>
          ))}
        </div>

        {/* Right: dynamic stage area */}
        <div style={{ position: "relative", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden", display: "flex", flexDirection: "column", height: "100%" }}>
          
          {/* Stage 0: playbook rules detail */}
          {eq("playbook") && (
            <div style={{ padding: 14, animation: "stageIn 300ms ease" }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", color: "var(--accent)", textTransform: "uppercase", marginBottom: 6 }}>Standard Position</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)", marginBottom: 4 }}>1x Annual Contract Value</div>
              <p style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.5, margin: "0 0 12px" }}>
                Liability cap must not exceed 100% of the fees paid by customer in the preceding 12 months.
              </p>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", color: "var(--ink-4)", textTransform: "uppercase", marginBottom: 6 }}>Fallback Position 1</div>
              <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)", marginBottom: 2 }}>2x Annual Value (with approval)</div>
              <p style={{ fontSize: 11, color: "var(--ink-4)", lineHeight: 1.5, margin: 0 }}>
                Escalate to Sarah K. for approval if counterparty demands 2x cap.
              </p>
            </div>
          )}

          {/* Stage 1: scanning */}
          {eq("scanning") && (
            <div style={{ padding: 14, animation: "stageIn 300ms ease", display: "flex", flexDirection: "column", gap: 10, height: "100%" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-3)" }}>VendorAgreement_v3.pdf</span>
                <span style={{ fontSize: 10, color: "var(--accent)", fontWeight: 500 }}>Scanning clauses...</span>
              </div>
              {/* Fake doc lines */}
              <div style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
                {[100, 90, 95, 40, 85, 75, 90].map((w, i) => (
                  <div key={i} style={{ height: 4, width: w + "%", background: "var(--line)", borderRadius: 2 }} />
                ))}
              </div>
              <div style={{ height: 2, background: "var(--line)", position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", top: 0, bottom: 0, width: "30%", background: "var(--accent)", animation: "intakeShimmer 1.5s linear infinite" }} />
              </div>
            </div>
          )}

          {/* Stage 2: risk score / breach detected */}
          {eq("scoring") && (
            <div style={{ padding: 14, animation: "stageIn 300ms ease", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                  <span style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-2)" }}>Limitation of Liability</span>
                  <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 6px", borderRadius: 4, background: "rgba(180,35,24,0.08)", color: "var(--danger)" }}>Breach</span>
                </div>
                <div style={{ background: "rgba(180,35,24,0.04)", border: "1px solid rgba(180,35,24,0.15)", borderRadius: 8, padding: 10, marginBottom: 8 }}>
                  <div style={{ fontSize: 10, color: "var(--danger)", fontWeight: 600, marginBottom: 4 }}>Clause 9.1 (detected position):</div>
                  <p style={{ fontSize: 11, color: "var(--ink-2)", margin: 0, lineHeight: 1.4, fontStyle: "italic" }}>
                    "...either party's total liability under this agreement shall be unlimited..."
                  </p>
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 10, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Risk Score:</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: "var(--danger)" }}>High Risk (85/100)</span>
              </div>
            </div>
          )}

          {/* Stage 3: matter routing */}
          {eq("routing") && (
            <div style={{ padding: 14, animation: "stageIn 300ms ease", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", color: "var(--ink-4)", textTransform: "uppercase", marginBottom: 8 }}>Matter #4902 · Approval Route</div>
                <div style={{ background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, padding: 10 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-1)" }}>Sarah Andersson</div>
                  <div style={{ fontSize: 10, color: "var(--ink-4)", marginTop: 2 }}>Head of Legal Ops · Owner</div>
                  <div style={{ marginTop: 8, display: "inline-flex", alignItems: "center", gap: 5, fontSize: 9.5, fontWeight: 600, letterSpacing: "0.04em", padding: "2px 6px", borderRadius: 4, background: "rgba(232,179,57,0.1)", border: "1px solid rgba(232,179,57,0.25)", color: "var(--warning)", textTransform: "uppercase" }}>
                    Awaiting Review
                  </div>
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 8, fontSize: 11, color: "var(--ink-4)", lineHeight: 1.4 }}>
                Routed to Sarah K. via Risk Trigger.
              </div>
            </div>
          )}

          {/* Stage 4: Playbook aligned / resolved */}
          {eq("aligned") && (
            <div style={{ padding: 14, animation: "stageIn 300ms ease", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                  <span style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-2)" }}>Limitation of Liability</span>
                  <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 6px", borderRadius: 4, background: "rgba(31,138,76,0.08)", color: "var(--success)" }}>Aligned</span>
                </div>
                <div style={{ background: "rgba(31,138,76,0.04)", border: "1px solid rgba(31,138,76,0.15)", borderRadius: 8, padding: 10, marginBottom: 8 }}>
                  <div style={{ fontSize: 10, color: "var(--success)", fontWeight: 600, marginBottom: 4 }}>Clause 9.1 (aligned fallback):</div>
                  <p style={{ fontSize: 11, color: "var(--ink-2)", margin: 0, lineHeight: 1.4 }}>
                    "...total liability shall not exceed the fees paid in the preceding 12 months..."
                  </p>
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 10, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Risk Score:</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: "var(--success)" }}>Low Risk (12/100)</span>
              </div>
            </div>
          )}

        </div>
      </div>

      {/* Stepper at bottom */}
      <div style={{ borderTop: "1px solid var(--line)", padding: "12px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--bg-soft)" }}>
        <div style={{ display: "flex", gap: 6 }}>
          {STAGES.map((s, i) => (
            <span key={s} style={{
              width: i === stage ? 28 : 8, height: 4, borderRadius: 2,
              background: i <= stage ? "var(--accent)" : "var(--line-strong)",
              transition: "all 320ms ease",
            }} />
          ))}
        </div>
        <div style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", color: "var(--ink-4)", letterSpacing: "0.10em" }}>
          {[
            "01 · DEFINE PLAYBOOK",
            "02 · AUTO-SCAN",
            "05 · PLAYBOOK ALIGNED",
          ][stage]}
        </div>
      </div>
    </div>
  );
}

function GenericModulePage({ slug }) {
  const m = powerModuleData[slug];
  if (!m) return null;
  // Build breadcrumb label from eyebrow ("Power Module · Dataroom" → "Dataroom")
  const crumb = (m.eyebrow || "").split("·").pop().trim() || m.title;
  const isDarkHero = true;

  return (
    <div>
      <section data-dark style={{ position: "relative", overflow: "hidden", padding: "72px 0 88px", background: isDarkHero ? "linear-gradient(160deg, #1A1625 0%, #0F0E14 50%, #13111C 100%)" : "var(--bg)", color: isDarkHero ? "white" : "var(--ink-1)" }}>
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: isDarkHero ? 0.18 : 0.5, color: isDarkHero ? "rgba(255,255,255,0.35)" : "rgba(14,14,16,0.06)", pointerEvents: "none" }} preserveAspectRatio="none">
          <defs><pattern id={"gmhg-" + slug} 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-" + slug + ")"} />
        </svg>
        <div style={{ position: "absolute", left: -120, top: -180, width: 720, height: 720, background: `radial-gradient(closest-side, ${isDarkHero ? "rgba(124,92,211,0.55)" : "rgba(124,92,211,0.20)"}, transparent 70%)`, pointerEvents: "none" }} />
        <div className="container" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: isDarkHero ? "rgba(255,255,255,0.55)" : "var(--ink-4)", marginBottom: 20, flexWrap: "wrap" }}>
            <a href="/" style={{ color: isDarkHero ? "rgba(255,255,255,0.55)" : "var(--ink-4)" }}>Home</a>
            <span>›</span>
            <a href="/platform/power-modules" style={{ color: isDarkHero ? "rgba(255,255,255,0.55)" : "var(--ink-4)" }}>Power Modules</a>
            <span>›</span>
            <span className="tag tag-purple" style={isDarkHero ? { margin: 0, padding: "2px 10px", fontSize: 12.5, background: "rgba(124,92,211,0.18)", borderColor: "rgba(124,92,211,0.35)", color: "#D9CDFF" } : { margin: 0, padding: "2px 10px", fontSize: 12.5 }}>{crumb}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
            {m.comingSoon && (
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", padding: "3px 9px", borderRadius: 99, background: "rgba(124,92,211,0.14)", border: "1px solid rgba(124,92,211,0.28)", color: "var(--accent)", display: "inline-flex", alignItems: "center" }}>Coming soon</span>
            )}
          </div>
          {m.heroMockup ? (
            <div className="mob-stack no-border" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center", marginTop: 24 }}>
              <div>
                <h1 className="display" style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(40px, 5.4vw, 68px)", lineHeight: 1.04, letterSpacing: "-0.03em", margin: "0 0 22px", color: "#fff" }}>{m.title}</h1>
                <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
                  <div style={slug === "legal-hub" ? { display: "flex", justifyContent: "center", width: "100%" } : (isDarkHero ? { background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 16, padding: 18, backdropFilter: "blur(8px)", width: "100%" } : { background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", 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%" })}>
                    {slug === "legal-hub" ? <LegalHubAnim /> : (isDarkHero ? <DocHubMockupDark type={m.heroMockup} /> : <DocHubMockup type={m.heroMockup} />)}
                  </div>
                </div>
                <p style={{ maxWidth: 520, fontSize: 16.5, lineHeight: 1.55, color: isDarkHero ? "rgba(255,255,255,0.72)" : "var(--ink-3)", margin: 0 }}>{m.lede}</p>
                <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  {m.comingSoon ? (
                    <a className={isDarkHero ? "btn btn-accent btn-lg" : "btn btn-primary btn-lg"} href={`/platform/power-modules/${slug}/waitlist`}>Sign up on waiting list <Icon name="arrow" size={14} /></a>
                  ) : (
                    <a className={isDarkHero ? "btn btn-accent btn-lg" : "btn btn-primary btn-lg"} href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
                  )}
                  <a className="btn btn-lg" href="/platform/power-modules" style={isDarkHero ? { color: "white", border: "1px solid rgba(255,255,255,0.25)" } : { color: "var(--ink-1)", border: "1px solid var(--line-strong)" }}>All modules</a>
                </div>
                {m.heroChecks && (
                  <div style={{ marginTop: 28, display: "flex", gap: 24, fontSize: 12.5, color: "var(--ink-4)", flexWrap: "wrap" }}>
                    {m.heroChecks.map((t) => (
                      <div key={t} style={{ display: "flex", alignItems: "center", gap: 6 }}>
                        <span style={{ color: "var(--success)" }}>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                        </span>
                        {t}
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div className="mob-hide" style={slug === "legal-hub" ? { display: "flex", justifyContent: "center" } : (isDarkHero ? { background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 16, padding: 18, backdropFilter: "blur(8px)" } : { background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", borderRadius: 16, padding: 18, boxShadow: "0 10px 30px rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.02)" })}>
                {slug === "legal-hub" ? <LegalHubAnim /> : (isDarkHero ? <DocHubMockupDark type={m.heroMockup} /> : <DocHubMockup type={m.heroMockup} />)}
              </div>
            </div>
          ) : (
            <div style={{ maxWidth: 880, marginTop: 24 }}>
              <h1 className="display fade-up" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", margin: 0, color: "white" }}>{m.title}</h1>
              <p className="lede fade-up" style={{ marginTop: 24, maxWidth: 640 }}>{m.lede}</p>
              <div className="fade-up" style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                {m.comingSoon ? (
                  <a className="btn btn-primary btn-lg" href={`/platform/power-modules/${slug}/waitlist`}>Sign up on waiting list <Icon name="arrow" size={14} /></a>
                ) : (
                  <a className="btn btn-primary 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>
          )}
        </div>
      </section>
      <LogoStrip />
      {slug === "clickwrap" && (
        <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
              <span className="eyebrow">Self-serve terms</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Complete control of your <em>clickwrap agreements</em></h2>
              <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
                From a quick setup that takes minutes to updating clickwrap agreements without relying on other teams, ContractControl gives your legal team full control of agreements.
              </p>
            </div>
          </div>
        </section>
      )}
      {slug === "document-hub" && (
        <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
              <span className="eyebrow">Why teams switch</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Give your policies <em>a proper home</em>.</h2>
              <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
                Document Hub is a dedicated, branded portal for specific document groups, internal policies for staff, or online terms for customers. Version-controlled, always current, always in the right hands.
              </p>
            </div>
            <div className="tick-rule" />
            <div className="grid grid-3" style={{ gap: 0 }}>
              {[
                { num: "1", label: "hub per document group", note: "Create dedicated portals for HR policies, IT guidelines, customer terms, or compliance docs, each scoped to exactly who should see it." },
                { num: "∞", label: "versions, always current", note: "Publish once, serve forever. Update a policy and every link immediately reflects the change, no broken PDFs, no outdated attachments." },
                { num: "0", label: "policies served from email", note: "Staff find the policy they need in the hub. Customers see the right terms at the right time. No attachments, no chasing, no outdated copies." },
              ].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>
      )}
      {slug === "document-hub" && (
        <section className="section" style={{
          background: "radial-gradient(120% 120% at 50% -20%, #FDFDFF 0%, var(--bg-soft) 100%)",
          borderBottom: "1px solid var(--line)",
          padding: "96px 0",
          position: "relative",
          overflow: "hidden"
        }}>
          <div className="container">
            <div style={{
              display: "grid",
              gridTemplateColumns: "1.15fr 0.85fr",
              gap: "64px",
              alignItems: "center"
            }} className="mob-stack">
              <div>
                <span className="eyebrow">The Policy Friction</span>
                <h2 className="display" style={{
                  fontSize: "clamp(30px, 4vw, 44px)",
                  lineHeight: 1.1,
                  fontWeight: 600,
                  letterSpacing: "-0.03em",
                  margin: "18px 0 22px",
                  color: "var(--ink-1)"
                }}>
                  Your policies shouldn't live in a <span style={{ color: "var(--accent)" }}>document graveyard</span>.
                </h2>
                <p className="lede" style={{
                  fontSize: "16px",
                  color: "var(--ink-3)",
                  lineHeight: 1.65,
                  marginBottom: "32px",
                  maxWidth: "540px"
                }}>
                  When critical terms, employee guidelines, and compliance requirements are scattered across folders, outdated intranets, or hardcoded website scripts, compliance slips and teams slow down. We believe company policies and terms should have a dedicated, version-controlled home where they are always accessible and up-to-date.
                </p>
                <div style={{
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line-strong)",
                  borderRadius: "16px",
                  padding: "20px 24px",
                  position: "relative",
                  boxShadow: "0 8px 24px rgba(0,0,0,0.02)"
                }}>
                  <p style={{ fontSize: "14px", fontWeight: 500, color: "var(--ink-2)", lineHeight: 1.6, margin: 0 }}>
                    "We were constantly worrying if staff were reading outdated expense rules, or if our online terms matched what legal actually approved."
                  </p>
                  <div style={{ display: "flex", alignItems: "center", gap: "8px", marginTop: "10px" }}>
                    <span style={{ fontSize: "12px", fontWeight: 500, color: "var(--ink-4)" }}>
                      - Common pain before centralizing document operations
                    </span>
                  </div>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <div style={{
                  width: "100%",
                  maxWidth: "380px",
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line-strong)",
                  borderRadius: "20px",
                  boxShadow: "0 20px 40px rgba(14,14,16,0.03)",
                  padding: "28px",
                  display: "flex",
                  flexDirection: "column",
                  gap: "16px"
                }}>
                  <span style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--ink-4)" }}>Policy Diagnostic</span>
                  <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
                    {[
                      { label: "Scattered PDF Attachments", desc: "Outdated copies in inboxes", status: "Friction", color: "var(--danger)", bg: "rgba(180,35,24,0.08)" },
                      { label: "Developer Bottlenecks", desc: "Hardcoded terms on site", status: "Manual", color: "var(--danger)", bg: "rgba(180,35,24,0.08)" },
                      { label: "Document Hub Portal", desc: "Self-serve, always-current terms", status: "Autopilot", color: "var(--success)", bg: "var(--success-soft)" }
                    ].map((step, idx) => (
                      <div key={idx} style={{
                        padding: "12px 14px",
                        background: step.bg,
                        border: "1px solid var(--line)",
                        borderRadius: "12px",
                        display: "flex",
                        alignItems: "center",
                        gap: "12px"
                      }}>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: "12.5px", fontWeight: 600, color: "var(--ink-1)" }}>{step.label}</div>
                          <div style={{ fontSize: "10.5px", color: "var(--ink-4)", marginTop: 2 }}>{step.desc}</div>
                        </div>
                        <span style={{ fontSize: "9px", fontWeight: 700, color: step.color, textTransform: "uppercase", letterSpacing: "0.05em" }}>{step.status}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}
      {slug === "document-hub" && (
        <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
              <span className="eyebrow">The Plan</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Three steps to <em>unified document control</em>.</h2>
              <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
                Brand, centralize, and publish your policies and terms in minutes.
              </p>
            </div>
            
            <div className="grid grid-3" style={{ gap: 24 }}>
              {[
                {
                  num: "01",
                  tag: "CREATE",
                  title: "Set up your hub",
                  desc: "Brand your document portal with logos, custom HSL colors, and custom domains in minutes."
                },
                {
                  num: "02",
                  tag: "CONTROL",
                  title: "Update with ease",
                  desc: "Edit policies centrally in our visual editor with automatic version timestamps and instant rollbacks."
                },
                {
                  num: "03",
                  tag: "PUBLISH",
                  title: "Embed & share",
                  desc: "Serve terms via secure links or embed code that always outputs the latest version automatically."
                }
              ].map((step, idx) => (
                <div key={idx} style={{
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line-strong)",
                  borderTop: "3px solid var(--accent)",
                  borderRadius: "16px",
                  padding: "32px 24px",
                  position: "relative",
                  boxShadow: "0 4px 12px rgba(0,0,0,0.02)"
                }}>
                  <div style={{
                    position: "absolute",
                    right: 20,
                    bottom: 10,
                    fontSize: "64px",
                    fontWeight: 800,
                    color: "rgba(123, 97, 255, 0.05)",
                    userSelect: "none"
                  }}>{step.num}</div>
                  <div style={{ fontSize: "10px", fontWeight: 600, color: "var(--accent)", letterSpacing: "0.1em", marginBottom: 8 }}>{step.tag}</div>
                  <h3 className="h-card" style={{ marginBottom: 12, fontWeight: 600 }}>{step.title}</h3>
                  <p style={{ fontSize: "13.5px", color: "var(--ink-3)", lineHeight: 1.55, margin: 0, position: "relative", zIndex: 2 }}>{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
      {slug === "legal-hub" && (
        <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
              <span className="eyebrow">The Plan</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Three steps to <em>unified legal operations</em>.</h2>
              <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
                Lower friction, automate compliance, and regain matter control in three simple steps.
              </p>
            </div>
            
            <div className="grid grid-3" style={{ gap: 24 }}>
              {[
                {
                  num: "01",
                  tag: "CODIFY",
                  title: "Import your positions",
                  desc: "Load your playbook position templates, fallback rules, and governing guidelines into ContractControl once."
                },
                {
                  num: "02",
                  tag: "AUTOMATE",
                  title: "Verify compliance",
                  desc: "Run instant playbook compliance checks automatically as team members draft and review."
                },
                {
                  num: "03",
                  tag: "MONITOR",
                  title: "Track matters live",
                  desc: "Monitor contract velocity, risk scoring, and matter tracking across a single visual dashboard."
                }
              ].map((step, idx) => (
                <div key={idx} style={{
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line-strong)",
                  borderTop: "3px solid var(--accent)",
                  borderRadius: "16px",
                  padding: "32px 24px",
                  position: "relative",
                  boxShadow: "0 4px 12px rgba(0,0,0,0.02)"
                }}>
                  <div style={{
                    position: "absolute",
                    right: 20,
                    bottom: 10,
                    fontSize: "64px",
                    fontWeight: 800,
                    color: "rgba(123, 97, 255, 0.05)",
                    userSelect: "none"
                  }}>{step.num}</div>
                  <div style={{ fontSize: "10px", fontWeight: 600, color: "var(--accent)", letterSpacing: "0.1em", marginBottom: 8 }}>{step.tag}</div>
                  <h3 className="h-card" style={{ marginBottom: 12, fontWeight: 600 }}>{step.title}</h3>
                  <p style={{ fontSize: "13.5px", color: "var(--ink-3)", lineHeight: 1.55, margin: 0, position: "relative", zIndex: 2 }}>{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
      {m.featSections && m.featSections.map((fs, i) => (
        <section key={i} className="section" style={fs.soft ? { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } : {}}>
          <div className="container">
            <div className={"feat-grid" + (fs.flip ? " feat-grid--flip" : "")}>
              <div>
                <span className="eyebrow">{fs.eyebrow}</span>
                <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }} dangerouslySetInnerHTML={{ __html: fs.title }} />
                <p className="lede" style={{ marginBottom: 28 }}>{fs.body}</p>
                {fs.bullets && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                    {fs.bullets.map((b, j) => (
                      <div key={j} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                        <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                        </span>
                        <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div>
                <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                  <DocHubMockup type={fs.mockup} />
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}
      <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
            <span className="eyebrow">Capabilities</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Everything in <em>one module</em>.</h2>
          </div>
          <div className="grid grid-3 cc-border-grid" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elevated)" }}>
            {m.features.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: 18 }}>
                  <Icon name={m.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>
      {m.comingSoon ? (
        <FinalCTA
          eyebrow={m.eyebrow}
          title={<>{m.eyebrow.split("·").pop().trim()} coming soon,<br /><span style={{ color: "#C7B4FF" }}>join the waitlist</span>.</>}
          description={`${m.lede.slice(0, -1)}. Early access opens to waitlist members first.`}
          ctaText="Sign up on waiting list"
          ctaHref={`/platform/power-modules/${slug}/waitlist`}
        />
      ) : (
        <FinalCTA />
      )}
    </div>);

}

Object.assign(window, { SolutionsPage, PricingPage, CustomersPage, SecurityPage, ResourcesPage, CompanyPage, GenericModulePage });