// Lifecycle module pages, driven by ModulePage template

function ObligationsHeroMockup() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setTick((t) => (t + 1) % 8); // 8 states: 0 to 7
    }, 1800);
    return () => clearInterval(id);
  }, []);

  // Show status / flags based on tick
  const isScanning = tick === 1 || tick === 2;
  const showHighlight = tick >= 2;
  const showConfidenceBadge = tick >= 2 && tick < 4;
  const showFlyingCard = tick === 3;
  const isExtracted = tick >= 4;
  const showAlertSent = tick >= 5;

  const channels = [
    { icon: "📧", label: "Email", active: showAlertSent },
    { icon: "📱", label: "SMS", active: showAlertSent },
    { icon: "💬", label: "Slack", active: showAlertSent },
  ];

  const rows = [
    { ev: "Price escalation · Northwind",     type: "Financial",  days: 21, owner: "E.L.", tone: "warn" },
    { ev: "SLA review · Brevia Holdings",     type: "SLA / Serv", days: 28, owner: "M.H.", tone: "ok"   },
    { ev: "Insurance cert · Kvist Group",     type: "Compliance", days: 34, owner: "J.H.", tone: "warn" },
    { ev: "Data processing review · Acme",    type: "DPA / Priv", days: 42, owner: "S.T.", tone: "ok"   },
  ];

  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "24px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/obligations_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "420px" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.15fr",
            gap: 16,
            aspectRatio: "1.1 / 1",
            width: "100%",
            maxHeight: 460,
            fontFamily: "var(--font-sans)",
            position: "relative"
          }}>
            {/* LEFT PANE: Document Analyzer */}
            <div style={{
              background: "var(--bg-elevated)",
              border: "1px solid var(--line)",
              borderRadius: 16,
              padding: "16px 14px",
              display: "flex",
              flexDirection: "column",
              gap: 10,
              boxShadow: "0 20px 40px -15px rgba(14,14,16,0.06), 0 4px 12px -4px rgba(14,14,16,0.02)",
              overflow: "hidden",
              position: "relative"
            }}>
              {/* Document Header */}
              <div style={{ display: "flex", alignItems: "center", gap: 8, paddingBottom: 10, borderBottom: "1px solid var(--line)" }}>
                <span style={{ fontSize: 16 }}>📄</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Velora_MSA_2026.pdf</div>
                  <div style={{ fontSize: 9.5, color: "var(--ink-4)" }}>14-pages · Signed PDF</div>
                </div>
                <span style={{
                  fontSize: 9,
                  fontWeight: 600,
                  padding: "2px 6px",
                  borderRadius: 6,
                  background: isScanning ? "rgba(123,97,255,0.12)" : isExtracted ? "rgba(34,197,94,0.12)" : "var(--bg-soft)",
                  color: isScanning ? "#7B61FF" : isExtracted ? "var(--success)" : "var(--ink-4)",
                  border: "1px solid " + (isScanning ? "rgba(123,97,255,0.24)" : isExtracted ? "rgba(34,197,94,0.24)" : "var(--line)"),
                  transition: "all 300ms ease",
                  textTransform: "uppercase",
                  letterSpacing: "0.02em"
                }}>
                  {isScanning ? "AI scanning" : isExtracted ? "Extracted" : "Ready"}
                </span>
              </div>

              {/* Document Body Text Area */}
              <div style={{ flex: 1, position: "relative", display: "flex", flexDirection: "column", gap: 8, fontSize: 10.5, color: "var(--ink-3)", lineHeight: 1.4 }}>
                {/* AI Scanner laser line */}
                {isScanning && (
                  <div style={{
                    position: "absolute",
                    left: 0,
                    right: 0,
                    height: 2,
                    background: "linear-gradient(90deg, transparent, #7B61FF, transparent)",
                    boxShadow: "0 0 8px #7B61FF, 0 0 16px #7B61FF",
                    zIndex: 5,
                    animation: "scannerLine 1.8s ease-in-out infinite",
                  }} />
                )}

                {/* Dummy text lines representing contract */}
                <div style={{ width: "90%", height: 5, background: "var(--line)", borderRadius: 4 }} />
                <div style={{ width: "75%", height: 5, background: "var(--line)", borderRadius: 4 }} />
                <div style={{ width: "85%", height: 5, background: "var(--line)", borderRadius: 4 }} />
                
                <div style={{ position: "relative", padding: "6px 8px", borderRadius: 8, background: showHighlight ? "rgba(110,86,207,0.06)" : "transparent", border: showHighlight ? "1px dashed rgba(110,86,207,0.25)" : "1px solid transparent", transition: "all 300ms ease", marginTop: 4 }}>
                  <span style={{ fontSize: 9, fontWeight: 600, color: "var(--ink-4)", display: "block", marginBottom: 2 }}>SECTION 14.2 · RENEWAL</span>
                  <span style={{ color: showHighlight ? "var(--ink-1)" : "var(--ink-3)", transition: "color 300ms" }}>
                    "This agreement shall automatically renew for successive 12-month term..."
                  </span>

                  {/* AI confidence card overlay */}
                  {showHighlight && (
                    <div style={{
                      position: "absolute",
                      top: "100%",
                      left: 6,
                      right: 6,
                      marginTop: 6,
                      background: "var(--bg-elevated)",
                      border: "1px solid #7B61FF",
                      borderRadius: 8,
                      padding: "6px 8px",
                      boxShadow: "0 8px 20px rgba(110,86,207,0.12)",
                      zIndex: 6,
                      opacity: tick >= 2 ? 1 : 0,
                      transform: tick >= 2 ? "translateY(0)" : "translateY(4px)",
                      transition: "all 300ms ease",
                      display: "flex",
                      alignItems: "center",
                      gap: 6
                    }}>
                      <span style={{ fontSize: 11 }}>🧠</span>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 9.5, fontWeight: 600, color: "#7B61FF" }}>Auto-renewal Detected</div>
                        <div style={{ fontSize: 8.5, color: "var(--ink-4)" }}>Notice: 30 days</div>
                      </div>
                    </div>
                  )}
                </div>

                <div style={{ width: "95%", height: 5, background: "var(--line)", borderRadius: 4, marginTop: showHighlight ? 44 : 4, transition: "margin 300ms ease" }} />
                <div style={{ width: "80%", height: 5, background: "var(--line)", borderRadius: 4 }} />
              </div>

              {/* Small stats at bottom left */}
              <div style={{ fontSize: 9.5, color: "var(--ink-4)", display: "flex", justifyContent: "space-between", paddingTop: 8, borderTop: "1px solid var(--line)" }}>
                <span>AI Engine v4.2</span>
                <span>Scanned: 1</span>
              </div>
            </div>

            {/* FLYING CARD ELEMENT */}
            {showFlyingCard && (
              <div style={{
                position: "absolute",
                top: "40%",
                left: "15%",
                width: "210px",
                background: "var(--bg-elevated)",
                border: "1px solid #7B61FF",
                borderRadius: 10,
                padding: "10px 14px",
                boxShadow: "0 15px 30px rgba(110,86,207,0.25)",
                zIndex: 99,
                display: "flex",
                alignItems: "center",
                gap: 10,
                animation: "flyCard 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards"
              }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--danger)" }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-1)" }}>Auto-renewal</div>
                  <div style={{ fontSize: 9, color: "var(--ink-4)" }}>Velora MSA</div>
                </div>
                <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--danger)", fontFamily: "var(--font-mono)" }}>12d</span>
              </div>
            )}

            {/* RIGHT PANE: Obligations Dashboard */}
            <div style={{
              background: "var(--bg-elevated)",
              border: "1px solid var(--line)",
              borderRadius: 16,
              boxShadow: "0 20px 40px -15px rgba(14,14,16,0.06), 0 4px 12px -4px rgba(14,14,16,0.02)",
              display: "flex",
              flexDirection: "column",
              overflow: "hidden"
            }}>
              {/* Header */}
              <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
                <span style={{ color: "var(--accent)" }}><Icon name="obligations" size={13} /></span>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Upcoming</span>
                <span style={{
                  marginLeft: "auto",
                  fontSize: 10,
                  padding: "2px 8px",
                  borderRadius: 99,
                  background: isExtracted ? "rgba(216,89,89,0.08)" : "rgba(232,179,57,0.08)",
                  color: isExtracted ? "var(--danger)" : "var(--warning)",
                  border: "1px solid " + (isExtracted ? "rgba(216,89,89,0.18)" : "rgba(232,179,57,0.18)"),
                  fontWeight: 600,
                  transition: "all 300ms ease"
                }}>
                  {isExtracted ? "7 open" : "6 open"}
                </span>
              </div>

              {/* Pipeline List */}
              <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-evenly", padding: "4px 0" }}>
                {/* NEW DYNAMICALLY ADDED ROW (Auto-renewal Velora MSA) */}
                <div style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  padding: isExtracted ? "8px 16px" : "0px 16px",
                  borderBottom: isExtracted ? "1px solid var(--line)" : "none",
                  background: isExtracted ? "rgba(123,97,255,0.04)" : "transparent",
                  opacity: isExtracted ? 1 : 0,
                  height: isExtracted ? "auto" : 0,
                  overflow: "hidden",
                  transition: "all 400ms cubic-bezier(0.2, 0.8, 0.2, 1)",
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", flexShrink: 0, background: "var(--danger)" }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Auto-renewal · Velora</div>
                  </div>
                  <span style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--danger)", minWidth: 28, textAlign: "right", flexShrink: 0 }}>12d</span>
                </div>

                {/* BASELINE ROWS */}
                {rows.slice(0, 3).map((r, i) => (
                  <div key={i} style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 10,
                    padding: "8px 16px",
                    borderBottom: i < 2 ? "1px solid var(--line)" : "none"
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", flexShrink: 0, background: r.tone === "high" ? "var(--danger)" : r.tone === "warn" ? "var(--warning)" : "var(--success)" }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 500, color: "var(--ink-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.ev}</div>
                    </div>
                    <span style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: r.tone === "high" ? "var(--danger)" : r.tone === "warn" ? "var(--warning)" : "var(--success)", minWidth: 28, textAlign: "right", flexShrink: 0 }}>{r.days}d</span>
                  </div>
                ))}
              </div>

              {/* BOTTOM INTEGRATIONS & ALERT SYSTEM */}
              <div style={{
                padding: "10px 14px",
                borderTop: "1px solid var(--line)",
                background: "var(--bg-soft)",
                display: "flex",
                alignItems: "center",
                gap: 8,
                position: "relative"
              }}>
                {/* Dispatch overlay alert */}
                <div style={{
                  position: "absolute",
                  inset: 0,
                  background: "#0E0E10",
                  color: "white",
                  padding: "10px 14px",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  opacity: showAlertSent ? 1 : 0,
                  transform: showAlertSent ? "translateY(0)" : "translateY(100%)",
                  transition: "all 400ms cubic-bezier(0.2, 0.8, 0.2, 1)",
                  zIndex: 10
                }}>
                  <span style={{ fontSize: 13, animation: "bounce 1.4s infinite" }}>⚡</span>
                  <div style={{ fontSize: 10.5, flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                    Alert to <strong style={{ color: "#C7BFFF" }}>A.S. (Finance)</strong>
                  </div>
                </div>

                <span style={{ fontSize: 10, color: "var(--ink-4)", marginRight: "auto" }}>Alerts</span>
                <div style={{ display: "flex", gap: 6 }}>
                  {channels.map((c) => (
                    <div key={c.label} style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 4,
                      padding: "3px 8px",
                      borderRadius: 99,
                      background: c.active ? "rgba(110,86,207,0.12)" : "var(--bg-elevated)",
                      border: "1px solid " + (c.active ? "#7B61FF" : "var(--line)"),
                      color: c.active ? "#7B61FF" : "var(--ink-2)",
                      transition: "all 300ms ease",
                    }}>
                      <span style={{ fontSize: 11 }}>{c.icon}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Embedded Animations and Keyframes */}
          <style>{`
            @keyframes scannerLine {
              0% { top: 10%; opacity: 0; }
              10% { opacity: 1; }
              90% { opacity: 1; }
              100% { top: 80%; opacity: 0; }
            }
            @keyframes flyCard {
              0% {
                transform: translate(0, 0) scale(0.9);
                opacity: 0.2;
              }
              15% {
                transform: translate(15px, -15px) scale(1.05);
                opacity: 1;
                border-color: #7B61FF;
                box-shadow: 0 10px 25px rgba(110,86,207,0.4);
              }
              80% {
                transform: translate(180px, -35px) scale(1.02);
                opacity: 1;
              }
              100% {
                transform: translate(215px, -65px) scale(0.95);
                opacity: 0;
              }
            }
            @keyframes bounce {
              0%, 100% { transform: translateY(0); }
              50% { transform: translateY(-2px); }
            }
          `}</style>
        </div>
      </div>
    </div>
  );
}

function RepositoryHeroMockup() {
  const contracts = [
    { date: "2026-05-15", name: "Master Service Agreement", party: "Velora Industries",  type: "MSA",         status: "active",   owner: "Maya H." },
    { date: "2026-05-13", name: "Software License",         party: "Northwind AB",       type: "License",     status: "active",   owner: "Erik L." },
    { date: "2026-05-12", name: "Employment Agreement",     party: "Internal",           type: "HR",          status: "signed",   owner: "Sara J." },
    { date: "2026-04-30", name: "NDA, Mutual",             party: "Brevia Holdings",    type: "NDA",         status: "expiring", owner: "Maya H." },
    { date: "2026-04-22", name: "Vendor Framework",         party: "Modulor GmbH",       type: "Framework",   status: "active",   owner: "Kai M."  },
  ];
  const statusStyle = {
    active:   { bg: "rgba(34,197,94,0.10)",   color: "#15803D", label: "Active" },
    signed:   { bg: "rgba(110,86,207,0.10)",  color: "var(--accent-deep)", label: "Signed" },
    expiring: { bg: "rgba(234,179,8,0.12)",   color: "#92400E", label: "Expiring" },
  };
  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "24px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/repository_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "420px" }}>
          <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), 0 4px 12px -4px rgba(14,14,16,0.04)" }}>
            {/* Toolbar */}
            <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)" }}>
              <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 7, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 8, padding: "5px 10px" }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>Search…</span>
              </div>
            </div>
            {/* Column headers */}
            <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", padding: "6px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
              {["Contract", "Status"].map(h => (
                <span key={h} style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.07em", textTransform: "uppercase", color: "var(--ink-5)" }}>{h}</span>
              ))}
            </div>
            {/* Rows */}
            {contracts.slice(0, 4).map((c, i) => {
              const s = statusStyle[c.status];
              return (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", padding: "9px 16px", borderBottom: i < 3 ? "1px solid var(--line)" : "none", alignItems: "center", background: i === 0 ? "rgba(110,86,207,0.03)" : "transparent" }}>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)", lineHeight: 1.2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
                    <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.party}</div>
                  </div>
                  <span style={{ fontSize: 10.5, padding: "2px 7px", borderRadius: 99, background: s.bg, color: s.color, fontWeight: 500, display: "inline-block", justifySelf: "start" }}>{s.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function NegotiationHeroMockup() {
  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-start",
          padding: "24px 24px 24px 44px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/negotiation_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "350px" }}>
          <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), 0 4px 12px -4px rgba(14,14,16,0.04)" }}>
            {/* Header */}
            <div style={{ padding: "11px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
              <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)" }}>MSA · Velora</span>
              <div style={{ marginLeft: "auto", display: "flex", gap: 3 }}>
                <span style={{ fontSize: 9.5, padding: "2px 5px", borderRadius: 99, background: "rgba(88,67,245,0.08)", color: "var(--accent)", border: "1px solid rgba(88,67,245,0.2)" }}>🟣 Us</span>
                <span style={{ fontSize: 9.5, padding: "2px 5px", borderRadius: 99, background: "rgba(232,147,90,0.10)", color: "#C0713A", border: "1px solid rgba(232,147,90,0.25)" }}>🟠 Them</span>
              </div>
            </div>
            {/* Two-column: document + chat */}
            <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", minHeight: 240 }}>
              {/* Document pane */}
              <div style={{ padding: "14px 12px", borderRight: "1px solid var(--line)" }}>
                {/* Clause 7.4 */}
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 6 }}>7.4 · Liability Cap</div>
                <p style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.6, margin: "0 0 8px", fontFamily: "var(--font-serif)" }}>
                  "...total liability shall be{" "}
                  <span style={{ textDecoration: "line-through", color: "rgba(180,35,24,0.7)", background: "rgba(180,35,24,0.06)", padding: "0 2px", borderRadius: 2 }}>unlimited</span>{" "}
                  <span style={{ color: "rgb(31,138,76)", background: "rgba(31,138,76,0.08)", padding: "0 2px", borderRadius: 2, textDecoration: "underline", textDecorationStyle: "solid" }}>capped at 12× fees</span>."
                </p>
                <div style={{ display: "flex", gap: 4, marginBottom: 14 }}>
                  <button style={{ fontSize: 9.5, padding: "2px 6px", borderRadius: 4, background: "rgba(31,138,76,0.08)", border: "1px solid rgba(31,138,76,0.25)", color: "rgb(31,138,76)", cursor: "pointer" }}>Accept</button>
                  <button style={{ fontSize: 9.5, padding: "2px 6px", borderRadius: 4, background: "rgba(180,35,24,0.06)", border: "1px solid rgba(180,35,24,0.2)", color: "rgba(180,35,24,0.8)", cursor: "pointer" }}>Reject</button>
                </div>
              </div>
              {/* Version history pane */}
              <div style={{ padding: "14px 10px", display: "flex", flexDirection: "column", gap: 0, overflow: "hidden" }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 10 }}>History</div>
                {[
                  { v: "v4", who: "Kai M.", action: "Accepted 12× cap", time: "09:12" },
                  { v: "v3", who: "Maya H.", action: "Proposed 12× fees", time: "15:45" },
                ].map((e, i) => (
                  <div key={i} style={{ display: "flex", gap: 6, paddingBottom: 12, position: "relative" }}>
                    {i < 1 && <div style={{ position: "absolute", left: 13, top: 20, width: 1, height: "100%", background: "var(--line)" }} />}
                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", border: "2px solid var(--bg-elevated)", flexShrink: 0, marginTop: 3, zIndex: 1 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                        <span style={{ fontSize: 9.5, fontWeight: 600, background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 4, padding: "0 3px", color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>{e.v}</span>
                        <span style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-1)" }}>{e.who}</span>
                      </div>
                      <div style={{ fontSize: 10.5, color: "var(--ink-2)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.action}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AnalyticsHeroMockup() {
  const toneColor = { ok: "var(--success)", warn: "var(--warning)", high: "var(--danger)" };
  const circ = 175.9;
  const score = 97;
  const dash = (score / 100) * circ;
  const stats = [
    { 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", label: "Total contracts", value: "24", delta: "+2", tone: "ok" },
    { icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", label: "Active contracts", value: "100%", delta: null, tone: "ok" },
    { icon: "M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", label: "Needs attention", value: "5", delta: null, tone: "warn" },
    { icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", label: "Overdue tasks", value: "4", delta: null, tone: "high" },
  ];
  // Cycle-time bar chart data, days to signature per month
  const bars = [
    { month: "Jan", days: 18 },
    { month: "Feb", days: 14 },
    { month: "Mar", days: 16 },
    { month: "Apr", days: 11 },
    { month: "May", days: 8 },
    { month: "Jun", days: 6 },
  ];
  const maxDays = Math.max(...bars.map(b => b.days));

  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-start",
          padding: "24px 24px 24px 44px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/analytics_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "350px" }}>
          <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), 0 4px 12px -4px rgba(14,14,16,0.04)", display: "flex", flexDirection: "column" }}>
            {/* Toolbar */}
            <div style={{ padding: "9px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--bg-soft)", flexShrink: 0 }}>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Contract Analytics</span>
              <div style={{ display: "flex", gap: 3 }}>
                {["Overview", "Cost", "Revenue"].map((t, i) => (
                  <span key={t} style={{ fontSize: 10, padding: "2px 8px", borderRadius: 5, background: i === 0 ? "var(--ink-1)" : "transparent", color: i === 0 ? "white" : "var(--ink-4)", fontWeight: i === 0 ? 600 : 400 }}>{t}</span>
                ))}
              </div>
            </div>

            {/* 2×2 stat grid */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid var(--line)", flexShrink: 0 }}>
              {stats.map((s, i) => (
                <div key={i} style={{ padding: "11px 14px", borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5 }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={toneColor[s.tone]} strokeWidth="1.8"><path d={s.icon}/></svg>
                    {s.delta && <span style={{ fontSize: 9.5, color: toneColor[s.tone], fontWeight: 600 }}>{s.delta}</span>}
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: "var(--ink-1)", letterSpacing: "-0.02em", lineHeight: 1 }}>{s.value}</div>
                  <div style={{ fontSize: 10, color: "var(--ink-4)", marginTop: 3 }}>{s.label}</div>
                </div>
              ))}
            </div>

            {/* Cycle-time bar chart */}
            <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", flexShrink: 0 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-1)" }}>Avg. cycle time</span>
                <span style={{ fontSize: 10, color: "var(--success)", fontWeight: 500 }}>↓ 67% vs. last year</span>
              </div>
              <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 48 }}>
                {bars.map((b, i) => (
                  <div key={b.month} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                    <div style={{
                      width: "100%",
                      height: Math.round((b.days / maxDays) * 40) + "px",
                      borderRadius: "3px 3px 0 0",
                      background: i === bars.length - 1 ? "var(--accent)" : "var(--accent-soft)",
                    }} />
                    <span style={{ fontSize: 9, color: "var(--ink-5)", lineHeight: 1 }}>{b.month}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Contract Health */}
            <div style={{ padding: "12px 14px", flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-1)", marginBottom: 10 }}>Contract Health</div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg width="56" height="56" viewBox="0 0 64 64" style={{ flexShrink: 0 }}>
                  <circle cx="32" cy="32" r="28" fill="none" stroke="var(--line)" strokeWidth="7" />
                  <circle cx="32" cy="32" r="28" fill="none" stroke="var(--success)" strokeWidth="7"
                    strokeDasharray={`${dash} ${circ}`} strokeLinecap="round"
                    transform="rotate(-90 32 32)" />
                  <text x="32" y="37" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink-1)">{score}</text>
                </svg>
                <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
                  {[{ label: "High", pct: 96, color: "var(--success)" }, { label: "Medium", pct: 4, color: "var(--warning)" }, { label: "Low", pct: 0, color: "var(--danger)" }].map((b) => (
                    <div key={b.label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontSize: 10.5, color: "var(--ink-4)", width: 44 }}>{b.label}</span>
                      <div style={{ flex: 1, height: 5, borderRadius: 99, background: "var(--bg-soft)", overflow: "hidden" }}>
                        <div style={{ height: "100%", width: Math.max(b.pct, 1) + "%", background: b.color, borderRadius: 99 }} />
                      </div>
                      <span style={{ fontSize: 10.5, color: "var(--ink-3)", width: 28, textAlign: "right" }}>{b.pct}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReviewHeroMockup() {
  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-start",
          padding: "24px 24px 24px 44px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/review_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "350px" }}>
          <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), 0 4px 12px -4px rgba(14,14,16,0.04)", display: "flex", height: 320 }}>
            {/* Document Editor Side */}
            <div style={{ flex: 1, borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column" }}>
              <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ color: "var(--accent)" }}><Icon name="drafting" size={13} /></span>
                <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>Velora_MSA_v3.pdf</span>
              </div>
              <div style={{ padding: 18, flex: 1, overflow: "hidden", display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ height: 16, width: "70%", background: "var(--bg-soft)", borderRadius: 4 }} />
                <div style={{ height: 16, width: "90%", background: "var(--bg-soft)", borderRadius: 4 }} />
                <div style={{ padding: "10px 14px", borderRadius: 10, background: "rgba(99,102,241,0.04)", border: "1px solid rgba(99,102,241,0.15)", fontSize: 12, fontFamily: "var(--font-serif)", color: "var(--ink-2)", lineHeight: 1.6 }}>
                  "Either party may terminate this agreement upon <span style={{ background: "rgba(99,102,241,0.12)", borderBottom: "1.5px dashed #6366F1", padding: "1px 0" }}>90 days written notice</span>."
                </div>
                <div style={{ height: 16, width: "80%", background: "var(--bg-soft)", borderRadius: 4 }} />
              </div>
            </div>
            
            {/* Approvals Status Sidebar */}
            <div style={{ width: 170, background: "var(--bg-soft)", display: "flex", flexDirection: "column" }}>
              <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>
                Internal Approvals
              </div>
              <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 18 }}>
                {/* Step 1 */}
                <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--success)", marginTop: 1 }}><Icon name="check" size={14} /></span>
                  <div>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Legal Review</div>
                    <div style={{ fontSize: 10, color: "var(--ink-4)", marginTop: 2 }}>Approved by Sabina H.</div>
                  </div>
                </div>
                {/* Step 2 */}
                <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: "50%", border: "2px solid #D97706",
                    display: "grid", placeItems: "center", marginTop: 2, flexShrink: 0
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#D97706" }} />
                  </span>
                  <div>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Finance Sign</div>
                    <div style={{ fontSize: 10, color: "#D97706", fontWeight: 500, marginTop: 2 }}>In progress</div>
                  </div>
                </div>
                {/* Step 3 */}
                <div style={{ display: "flex", gap: 10, alignItems: "flex-start", opacity: 0.6 }}>
                  <span style={{ width: 14, height: 14, borderRadius: "50%", border: "2px solid var(--line)", marginTop: 2, flexShrink: 0 }} />
                  <div>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Exec Approval</div>
                    <div style={{ fontSize: 10, color: "var(--ink-4)", marginTop: 2 }}>Awaiting</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const moduleData = {
  intake: {
    name: "Intake",
    featuresName: "request & intake",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Intake" }],
      tag: "Intake",
      headline: "The {{accent:legal front door}} your business actually uses.",
      lede: "A self-serve intake portal that routes every contract request to the right workflow, auto-drafted for low risk, queue for high-stakes, with zero email ping-pong.",
      mockup: <IntakeAnimation />,
    },
    metrics: { eyebrow: "Built for structured intake from day one", title: <span>Built for speed, <em>governed for trust</em>.</span>, metrics: [
      { value: 94, suffix: "%", label: "Faster intake-to-draft cycle" },
      { value: "0", italic: true, label: "Manual triage emails" },
      { value: 6, suffix: " min", label: "Avg time to first draft" },
      { value: 100, suffix: "%", label: "Audit trail coverage" },
    ]},
    beforeAfter: {
      beforeTitle: "Legal is buried in 'quick questions'",
      beforeItems: ["Sales pings legal in five Slack channels","Templates live in someone's Drive, last edited 2022","No one knows the status of any request","Approvals happen in forwarded email threads"],
      afterTitle: "One portal. Smart routing. Self-service where it makes sense.",
      afterItems: ["Smart routing decides template, reviewer and SLA","AI drafts on standard paper. Edge cases route to legal.","Every request has a status, owner and clock"],
    },
    steps: { steps: [
      { title: "Request", desc: "Sales fills a 30-second form from Slack, email, or the portal." },
      { title: "Triage", desc: "Smart routing decides template, reviewer, urgency." },
      { title: "Route", desc: "AI drafts low-risk paper; complex ones land with the right reviewer." },
      { title: "Track", desc: "One timeline per request, from intake to renewal." },
    ]},
    features: [
      { icon: "intake", title: "Smart intake", desc: "Sales submits in 30 seconds. Finance sees extra fields automatically. Legal receives clean, structured data every time." },
      { icon: "analytics", title: "Rule-based routing", desc: "By value, region or contract type, the right reviewer gets the right thing." },
{ icon: "review", title: "Approval chains", desc: "Multi-step sign-off, finance for value, security for DPAs." },
    ],
    quote: {},
    cta: { title: "Put request & intake on", accent: "autopilot", body: "Set up routing rules, configure your portal, and go live, all in the same day." },
  },

  drafting: {
    name: "AI Drafting & Workflows",
    featuresName: "drafting & workflows",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Drafting" }],
      tag: "Drafting",
      headline: "Get contracts done faster {{accent:without the back-and-forth}}.",
      lede: "Create contracts from approved templates, ensure compliance automatically, and collaborate with all parties in one place, so nothing slows you down.",
      mockup: <DraftingAnimation />,
    },
    metrics: { eyebrow: "Built for controlled drafting from day one", title: <span>Compliant from the <em>first draft</em>.</span>, metrics: [
      { value: 0, label: "Missed clauses" },
      { value: 100, suffix: "%", label: "Compliant by default" },
      { value: "Live", label: "Multi-author editing" },
      { value: "Faster", label: "Approvals" },
    ]},
    beforeAfter: {
      beforeTitle: "Drafting happens without control",
      beforeItems: ["Anyone can change anything, no guardrails","Missing or risky clauses go unnoticed","Collaboration creates more noise than clarity","Issues are discovered too late, during review"],
      afterTitle: "Draft within guardrails, and catch issues early",
      afterItems: ["Edit contracts within approved templates and rules","Collaborate clearly with internal and external parties","Route issues to the right reviewer before submission"],
    },
    steps: { steps: [
      { title: "Initiate", desc: "From intake, template library, or upload of third-party paper." },
      { title: "Draft", desc: "Edit within guardrails, detect risks, missing clauses, and stay compliant by default" },
      { title: "Review-ready", desc: "Issues flagged and routed before submission" },
      { title: "Execute", desc: "Sign and store as the single source of truth" },
    ]},
    features: [
      { icon: "drafting", title: "Approved templates", desc: "Start from trusted templates that enforce structure and standards" },
      { icon: "negotiation", title: "Smart review routing", desc: "Conditional logic by value, region, or contract type." },
      { icon: "workspace", title: "Co-authoring & comments", desc: "Work with internal and external parties in one shared document" },
      { icon: "permission", title: "Role-based control", desc: "Control who can see and edit specific clauses or sections" },
      { icon: "obligations", title: "Full audit trail", desc: "Track every change, comment, and decision, from draft to approval" },
    ],
    cta: { title: "Go from blank page to signed contract,", accent: "faster", body: "First draft in 60 seconds. Fewer revision rounds. Deals that close on your timeline." },
  },

  review: {
    name: "Internal Review & Approvals",
    featuresName: "internal review & approvals",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Review" }],
      tag: "Review",
      headline: "Get the right eyes on the contract, {{accent:at the right time}}.",
      lede: "Route drafts automatically, gather internal approvals, and collaborate on legal terms before sending the contract to counterparties.",
      mockup: <ReviewHeroMockup />,
    },
    metrics: { eyebrow: "Built for rigorous review from day one", title: <span>Every sign-off <em>logged and tracked</em>.</span>, metrics: [
      { value: 100, suffix: "%", label: "Compliance with approval policies" },
      { value: 3.2, suffix: "x", label: "Faster internal review cycles" },
      { value: 0, label: "Unapproved drafts sent to counterparties" },
      { value: 14, suffix: "m", label: "Average internal sign-off time" },
    ]},
    beforeAfter: {
      beforeTitle: "Internal review is a black box",
      beforeItems: ["Reviewers chase approvals in endless email threads","Initiators send unapproved drafts to counterparties","No visibility on who is holding up the sign-off","Missed internal feedback leads to compliance risks"],
      afterTitle: "Structured workflows, signed off on time",
      afterItems: ["Contracts route to the right internal reviewer automatically","Approvals tracked and logged at every step","Full visibility on bottleneck owners and SLAs","Internal comments kept completely secure and private"],
    },
    steps: { steps: [
      { title: "Route", desc: "Contracts automatically route to the right reviewer based on value or region." },
      { title: "Collaborate", desc: "Discuss drafts and resolve comments internally with your team." },
      { title: "Approve", desc: "Run multi-step sign-offs across legal, finance, and security." },
      { title: "Send", desc: "Push the approved version to counterparties with full confidence." },
    ]},
    features: [
      { icon: "review", title: "Internal approvals", desc: "Sequence or parallel approvals across teams." },
      { icon: "workspace", title: "Private collaboration", desc: "Discuss drafts with internal comments invisible to counterparties." },
    ],
    quote: { quote: "With automated routing and secure internal reviews, we completely eliminated bottlenecks. We always know who needs to sign off next.", author: "Erik Berg", role: "Senior Counsel · Modulor" },
    cta: { title: "Put internal reviews on", accent: "autopilot", body: "Set up routing rules, configure approval chains, and run compliance sign-offs with ease." },
  },

  negotiation: {
    name: "Negotiation",
    featuresName: "negotiation",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Negotiation" }],
      tag: "Negotiation",
      headline: "One place for every {{accent:redline, comment, and version}}.",
      lede: "A shared workspace between you and the counterparty. No more email chains, no more lost versions, no more 'final-final-v3.docx'.",
      mockup: <NegotiationHeroMockup />,
    },
    metrics: { eyebrow: "Built for structured negotiation from day one", title: <span>Negotiate faster, <em>lose nothing</em>.</span>, metrics: [
      { value: 3.2, suffix: "x", label: "Faster negotiation cycle vs email" },
      { value: 100, suffix: "%", label: "Comments and redlines tracked" },
      { value: "0", suffix: " lost", label: "Versions lost or duplicated" },
      { value: 12, label: "Avg comments resolved per deal" },
    ]},
    beforeAfter: {
      beforeTitle: "Email is the enemy of the deal",
      beforeItems: ["Five attachments per thread, all named differently","No way to know which version the counterparty saw","Comments live in Outlook, redlines live in Word","Approvers chase status from the legal team"],
      afterTitle: "A shared workspace built for contracts",
      afterItems: ["Counterparty edits in the same workspace","Live versioning, you always know who saw what","Threaded comments per clause, resolved or open","Internal-only notes invisible to the other side"],
    },
    steps: { steps: [
      { title: "Invite", desc: "Counterparty signs in via secure link. No new account needed." },
      { title: "Negotiate", desc: "Comments and redlines per clause. Internal notes stay internal." },
      { title: "Lift", desc: "Accept counterparty redlines into your version with one click." },
      { title: "Close", desc: "Lock the version, push to signature, archive the conversation." },
    ]},
    features: [
      { icon: "negotiation", title: "External party portal", desc: "Counterparty edits in the same doc, scoped to their role." },
      { icon: "review", title: "Threaded comments", desc: "Per-clause threads with resolved/open states." },
      { icon: "drafting", title: "Smart version diff", desc: "Side-by-side with semantic diff, not just text changes." },
      { icon: "permission", title: "Approval workflows", desc: "Multi-step sign-off with conditional logic." },
      { icon: "obligations", title: "Internal annotations", desc: "Notes only your team sees. Stays out of the other side's view." },
      { icon: "analytics", title: "Audit & redline log", desc: "Who proposed what, who accepted, who saw what version." },
    ],
    quote: { quote: "Our negotiations are visible for the first time. Even our questions become metrics, what gets pushed back on, by whom.", author: "Sabina Hedström", role: "CFO · Acenta Group AB", avatar: "/images/team/sabina-hedstrom.png" },
    cta: { title: "Put negotiation on", accent: "autopilot", body: "Invite counterparties, collaborate in a secure workspace, and close deals faster." },
  },

  signature: {
    name: "eSignature",
    featuresName: "esignature",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "eSignature" }],
      tag: "eIDAS · AES & QES",
      headline: "Signatures that are {{accent:legal everywhere}}.",
      lede: "Native eIDAS Advanced and Qualified Electronic Signatures with audit trail, identity verification, and zero round-trip to a third-party signing tool.",
      mockup: <SignatureAnimation />,
    },
    metrics: { eyebrow: "Built for compliant signatures from day one", title: <span>Signatures that are <em>legal everywhere</em>.</span>, metrics: [
      { value: "eIDAS", italic: false, label: "Qualified Electronic Signatures" },
      { value: 60, suffix: "+", label: "Jurisdictions covered" },
      { value: 45, suffix: "s", label: "Avg time to first signature" },
      { value: "0", italic: true, label: "Third-party round-trips" },
    ]},
    beforeAfter: {
      beforeTitle: "Signing lives in another tool, in 2015",
      beforeItems: ["Export PDF, upload to DocuSign, re-import","Lost context between sign tool and CLM","No audit trail back to the negotiation","Mid-deal questions reopen the whole package"],
      afterTitle: "Signing as part of the lifecycle",
      afterItems: ["Send for signature from inside the contract","eIDAS AES + QES with identity verification","Signed copy auto-routes to repository and obligations","Audit trail covers negotiation through expiry"],
    },
    steps: { steps: [
      { title: "Prepare", desc: "Lock the version. Add signatories. Order the workflow." },
      { title: "Send", desc: "Sign-link delivered via email or SMS, with reminders." },
      { title: "Sign", desc: "Signers complete with AES or QES. Identity verified." },
      { title: "Archive", desc: "Signed packet auto-files to repository and obligations." },
    ]},
    features: [
      { icon: "sign", title: "AES & QES support", desc: "We handle eIDAS Advanced and Qualified, wherever needed." },
      { icon: "permission", title: "Group signatures", desc: "Sequential, parallel, conditional, model your real org." },
      { icon: "obligations", title: "Bulk signatures", desc: "Send 200 NDAs in one batch with templated personalisation." },
      { icon: "intake", title: "In-browser signing", desc: "No download, no app, works on phone, tablet, desktop." },
      { icon: "review", title: "Pull-out", desc: "Signed packet exportable for compliance reviews and SOX." },
      { icon: "analytics", title: "Tamper-evident", desc: "Cryptographic seal + full audit trail per signer." },
      { icon: "legal", title: "PAdES compliant", desc: "Signatures embedded directly in the PDF, LTA format for long-term validation." },
      { icon: "workspace", title: "Adobe-approved certificates", desc: "Signed documents display as trusted in Adobe Acrobat and Reader, no security warnings." },
      { icon: "routing", title: "Parallel & Sequential Flows", desc: "Route documents to signers simultaneously to speed up execution, or strictly sequentially to enforce compliance orders." },
    ],
    quote: {},
    cta: { title: "Put eSignature on", accent: "autopilot", body: "Send your first eIDAS-grade signature in the next 20 minutes, same day live." },
  },

  repository: {
    name: "Contract Repository",
    featuresName: "contract repository",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Repository" }],
      tag: "Repository",
      headline: "Every clause, {{accent:findable in seconds}}.",
      lede: "Search across every contract in your library, by clause, parameter, or plain English question. Find the answer in 4s, not 4 weeks.",
      mockup: <RepositoryHeroMockup />,
    },
    metrics: { eyebrow: "Built for contract visibility from day one", title: <span>Every contract, <em>findable in seconds</em>.</span>, metrics: [
      { value: 60, suffix: "+", label: "Metadata fields auto-extracted" },
      { value: "0.4", suffix: "s", label: "Avg search latency, full-text + clause" },
      { value: 98.6, suffix: "%", label: "AI extraction accuracy on legacy documents" },
      { value: 100, suffix: "%", label: "Of signed contracts indexed" },
    ]},
    beforeAfter: {
      beforeTitle: "Your contracts are a blackhole",
      beforeItems: ["Drive search returns 200 PDFs, you read 12","Renewals discovered when the invoice hits","Counterparty asks a clause question. Answer takes 3 days.","Legacy NDAs untraceable; nobody trusts the corpus"],
      afterTitle: "A searchable, structured source of truth",
      afterItems: ["Plain-English questions across the full library","Parties, dates, value, jurisdiction, all extracted","Smart filters: 'all auto-renewals expiring in 60 days'","Legacy contracts ingested and made searchable in days"],
    },
    steps: { steps: [
      { title: "Ingest", desc: "Drag in legacy PDFs. AI parse extracts metadata." },
      { title: "Extract", desc: "Clauses, parties, dates, values, structured automatically." },
      { title: "Enrich", desc: "Tag by entity, owner, type. Connect to obligations." },
      { title: "Find", desc: "Search by parameter, clause language, or English question." },
    ]},
    features: [
      { icon: "review", title: "Smart extraction", desc: "60+ metadata fields recognised across 12 languages." },
      { icon: "intake", title: "Natural-language search", desc: "Type a question. We return the contracts and the clauses." },
      { icon: "obligations", title: "Clause-cross compare", desc: "Pick a clause, see its variants across the corpus." },
      { icon: "legal", title: "Static knowledge graph", desc: "Connections between contracts, entities, parties and renewals." },
      { icon: "permission", title: "Permissioned access", desc: "Salary contracts hidden from sales by default. Granular." },
      { icon: "dataroom", title: "Legacy import", desc: "Migrate decades of paper in days. Includes paper-only docs." },
    ],
    quote: {},
    cta: { title: "Put contract repository on", accent: "autopilot", body: "We'll ingest a sample of your contracts. Live, searchable, in 30 minutes." },
  },

  analytics: {
    name: "Analytics & Insights",
    featuresName: "analytics & insights",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Analytics" }],
      tag: "Analytics",
      headline: "Turn your contract data into {{accent:decisions}}.",
      lede: "Cycle-time, vendor concentration, revenue leakage and contract-health scores, built on your live contract corpus. The dashboard finance and legal share.",
      mockup: <div style={{ aspectRatio: "1 / 1", display: "flex", flexDirection: "column" }}><AnalyticsHeroMockup /></div>,
    },
    metrics: { eyebrow: "Built for contract intelligence from day one", title: <span>Data that drives <em>better decisions</em>.</span>, metrics: [
      { value: 67, suffix: "%", label: "Faster cycle, year-on-year" },
      { value: "R/Y/G", italic: false, label: "Contract-health heatmap on every entity" },
      { value: "€2.1M", label: "Avg. revenue leakage prevented in year one" },
      { value: "AI-ready", label: "Clean exports to Snowflake / Looker" },
    ]},
    beforeAfter: {
      beforeTitle: "Your contracts are telling you things, you just can't hear them",
      beforeItems: ["No way to know which deal types take longest","Renewals visible only when a customer leaves","Risk concentrated in clauses you can't query","CFO can't tell which contracts are missing critical terms"],
      afterTitle: "Insight, risk, and reconciliation on one live surface",
      afterItems: ["Cycle-time, by stage, by team, by counterparty","Vendor concentration and churn-warning signals","Health score on every contract, metadata, clauses, owners","Clean exports to your warehouse for cross-domain joins"],
    },
    steps: { steps: [
      { title: "Source", desc: "Built on the same database that runs your contracts." },
      { title: "Surface", desc: "20+ dashboards out of the box. No setup." },
      { title: "Customise", desc: "Compose dashboards from clause + workflow data." },
      { title: "Act on it", desc: "Trigger workflows from threshold events automatically." },
    ]},
    features: [
      { icon: "analytics", title: "Contract health score", desc: "Every agreement scored on metadata completeness, clause coverage and obligation hygiene." },
      { icon: "obligations", title: "Renewal & leakage radar", desc: "Forecast 12 months of renewals with confidence scores; flag the at-risk and the auto-renewing." },
      { icon: "drafting", title: "Negotiation insights", desc: "Which clauses get redlined most. By whom. By how much." },
      { icon: "review", title: "Vendor & spend metrics", desc: "Concentration, churn, term, and value across procurement." },
      { icon: "legal", title: "Cycle-time health", desc: "Time-to-sign by stage, team, counterparty and template." },
      { icon: "workspace", title: "AI model insights", desc: "Where AI saves time, where humans intervene, why." },
    ],
    quote: {},
    cta: { title: "Put contract intelligence on", accent: "autopilot", body: "30-minute walk-through of dashboards and health scores live on your data." },
  },

  obligations: {
    name: "Obligations & Renewals",
    featuresName: "obligations & renewals",
    hero: {
      breadcrumbs: [{ label: "Home", href: "/" }, { label: "Platform", href: "/platform" }, { label: "Obligations" }],
      tag: "Obligations",
      headline: "Every commitment {{accent:automatically fulfilled}}.",
      lede: "Intelligent obligation tracking that eliminates manual follow-ups, every renewal, SLA, and price escalation parsed, assigned, and actioned through the integrations your team already uses.",
      mockup: <ObligationsHeroMockup />,
    },
    metrics: { eyebrow: "Built for proactive compliance from day one", title: <span>Never miss a <em>deadline again</em>.</span>, metrics: [
      { value: "0", italic: true, label: "Missed renewals across our active customers" },
      { value: 14, suffix: " days", label: "Default lead-time on renewals" },
      { value: 35, suffix: "+", label: "Obligation types auto-extracted" },
      { value: "0.9M EUR", label: "Avg saved by warning customers ahead of escalation" },
    ]},
    beforeAfter: {
      beforeTitle: "Auto-renewals are silent revenue leakage",
      beforeItems: ["Renewal terms hide in clause 14 of a 90-page contract","Procurement discovers it on the invoice","Vendor lock-in by accident, not strategy","Legal owns escalation but doesn't know it triggered"],
      afterTitle: "Proactive, owned, automated",
      afterItems: ["Every contract auto-parsed for renewal/SLA/escalation","Routed to the right owner with full context","Alerts via email and SMS, per obligation, per owner","Approve, terminate, or renegotiate without leaving the alert"],
    },
    steps: { steps: [
      { title: "Detect", desc: "Obligations parsed from every signed and uploaded contract." },
      { title: "Assign", desc: "Auto-routed to the owner, by entity, vendor, or contract type." },
      { title: "Remind", desc: "Multi-channel alerts. Conditional escalation if not acknowledged." },
      { title: "Act", desc: "Renew, terminate, renegotiate, from the alert itself." },
    ]},
    features: [
      { icon: "obligations", title: "Multi-channel reminders", desc: "Email and SMS reminders per obligation, with conditional escalation if unacknowledged." },
      { icon: "analytics", title: "Renewal pipeline", desc: "Quarterly view of every upcoming renewal and exit window across your portfolio." },
      { icon: "negotiation", title: "Renewal pipeline", desc: "Quarterly view of every renewal across the business." },
      { icon: "intake", title: "Auto-renotices", desc: "Auto-generates termination letters at the right notice window." },
      { icon: "review", title: "Owner accountability", desc: "Per-obligation owner and SLA. Audit trail on every change." },
      { icon: "permission", title: "Leakage tracker", desc: "Find the renewals you missed, and the value they represented." },
    ],
    quote: { quote: "We caught three auto-renewals in the first month that would have cost us 480 KEUR. Built it on a Tuesday, paid back by Friday.", author: "Mira Jonsson", role: "Procurement Director · Linnea & Co" },
    cta: { title: "Put obligations & renewals on", accent: "autopilot", body: "We'll detect 30+ obligation types in your existing contracts in 25 minutes." },
  },
};

window.ccModuleData = moduleData;
function ccModulePage(key) { return <ModulePage data={moduleData[key]} />; }
window.ccModulePage = ccModulePage;
window.ObligationsHeroMockup = ObligationsHeroMockup;