// Product UI mockups, light, refined Sana×Linear style

const MOCKUP_STYLES = `
  @property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  @keyframes rotation {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
  }
  .thinking-card {
    position: relative;
  }
  .thinking-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--gradient-angle), transparent 70%, rgba(123,97,255, 0.8) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotation 1s linear infinite;
    pointer-events: none;
    z-index: 10;
  }
`;

function WorkspaceMock() {
  const [cycle, setCycle] = React.useState(0);
  
  React.useEffect(() => {
    let raf, t0 = performance.now();
    const loop = (t) => {
      const elapsed = (t - t0) / 1000;
      setCycle(elapsed % 20); // 20 second loop
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Phase 1: Intake & Routing (0 - 9.5s)
  const p1_active = cycle < 9.5;
  const p1_typing = cycle > 1.5;
  const p1_filled = cycle > 3.0; // The amount tag fills in
  const p1_thinking = cycle > 3.5; // Flowchart appears, starts "thinking"
  const p1_routed = cycle > 5.5; // Flowchart resolves, lines light up

  // Phase 2: Post-signature AI Obligations (9.5 - 20s)
  const p2_active = cycle >= 9.5;
  const p2_scanning = p2_active && cycle > 10.5;
  const p2_scanProgress = p2_scanning ? Math.max(0, Math.min(1, (cycle - 10.5) / 2.5)) : 0;
  const p2_detected = cycle > 12.5;
  const p2_extracted = cycle > 14.0;

  return (
    <div className="browser fade-up" style={{ animationDelay: "0.15s", background: "var(--bg)", border: "1px solid var(--line)", position: "relative", zIndex: 1 }}>
      <style dangerouslySetInnerHTML={{ __html: MOCKUP_STYLES }} />
      <div className="browser-bar" style={{ borderBottom: "1px solid var(--line)", padding: "10px 16px", display: "flex", gap: 16, alignItems: "center", background: "var(--bg-soft)" }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span className="dot" style={{ background: "#FF5F56" }}></span>
          <span className="dot" style={{ background: "#FFBD2E" }}></span>
          <span className="dot" style={{ background: "#27C93F" }}></span>
        </div>
        <div className="url" style={{ display: "flex", alignItems: "center", gap: 6, background: "var(--bg)", padding: "4px 12px", borderRadius: 6, fontSize: 11, color: "var(--ink-3)", flex: 1, border: "1px solid var(--line)" }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
          contractcontrol.co/workspace/{p1_active ? "draft-agreement" : "MSA-Volantis-Signed"}
        </div>
      </div>

      <div style={{ position: "relative", minHeight: 460, overflow: "hidden" }}>
        
        {/* =========================================================================
            PHASE 1: SMART ROUTING (Document Drafting)
            ========================================================================= */}
        <div style={{
          position: "absolute", inset: 0,
          opacity: p1_active ? 1 : 0, pointerEvents: p1_active ? "auto" : "none",
          transform: p1_active ? "translateY(0) scale(1)" : "translateY(10px) scale(0.98)",
          transition: "opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1)",
          display: "grid", gridTemplateColumns: "1fr 280px",
          background: "var(--bg)"
        }}>
          {/* Document Editor */}
          <div style={{ padding: "40px 48px", display: "flex", flexDirection: "column", borderRight: "1px solid var(--line)", position: "relative" }}>
            <div style={{ width: "100%", maxWidth: 500, margin: "0 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, borderBottom: "1px solid var(--line-strong)", paddingBottom: 16 }}>
                <div style={{ width: 32, height: 32, borderRadius: 6, background: "linear-gradient(135deg, var(--accent), #5033B4)", display: "grid", placeItems: "center", color: "white", fontWeight: 600, fontSize: 14 }}>S</div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 500, color: "var(--ink-1)" }}>Software License Agreement</div>
                  <div style={{ fontSize: 12, color: "var(--ink-4)" }}>Acme Corp × Volantis AB</div>
                </div>
              </div>
              
              <div style={{ fontSize: 13.5, lineHeight: 1.8, color: "var(--ink-2)" }}>
                <p style={{ marginBottom: 16 }}>This Software License and Services Agreement ("Agreement") is entered into by and between Acme Corp ("Provider") and Volantis AB ("Customer").</p>
                <p style={{ fontWeight: 500, color: "var(--ink-1)", marginBottom: 4 }}>1. Services Provided</p>
                <p style={{ marginBottom: 16 }}>The Provider agrees to deliver the enterprise software suite, including all modules specified in Appendix A, alongside premium 24/7 technical support.</p>
                <p style={{ fontWeight: 500, color: "var(--ink-1)", marginBottom: 4 }}>2. Fees and Payment Terms</p>
                <p style={{ marginBottom: 16 }}>
                  The Customer agrees to pay the annual subscription fees. The total contract value for the initial annual term shall be 
                  <span style={{ 
                    display: "inline-flex", alignItems: "center", padding: "0 6px", margin: "0 6px",
                    background: p1_filled ? "var(--accent-soft)" : "var(--bg-mute)", 
                    border: "1px solid", borderColor: p1_filled ? "var(--accent)" : "transparent",
                    color: p1_filled ? "var(--accent-ink)" : "var(--ink-4)",
                    borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 12,
                    transition: "all 600ms cubic-bezier(0.34, 1.56, 0.64, 1)", verticalAlign: "middle",
                    transform: p1_filled ? "scale(1.05)" : "scale(1)"
                  }}>
                    {p1_filled ? "8,500 EUR" : p1_typing ? "8,..." : "0 EUR"}
                  </span> 
                  billed annually in advance. Invoices are payable within 30 days of receipt.
                </p>
              </div>
            </div>
          </div>

          {/* AI Workflow Sidebar */}
          <div style={{ background: "linear-gradient(to bottom, var(--bg-soft), var(--bg))", padding: "24px 20px", display: "flex", flexDirection: "column", gap: 16, position: "relative", zIndex: 2 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, opacity: p1_active ? 1 : 0, transform: p1_active ? "translateY(0)" : "translateY(-10px)", transition: "all 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms" }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)", letterSpacing: "-0.01em" }}>Smart Routing</span>
            </div>

            {/* Logic Branching Flowchart */}
            <div style={{ position: "relative", marginTop: 8 }}>
              
              {/* Decision Node */}
              <div className={p1_thinking && !p1_routed ? "thinking-card" : ""} style={{
                background: "var(--bg)", border: "1px solid var(--line-strong)", borderRadius: 8, padding: "10px 14px",
                display: "flex", alignItems: "center", gap: 10,
                opacity: p1_thinking ? 1 : 0, transform: p1_thinking ? "translateY(0)" : "translateY(10px)",
                transition: "all 600ms cubic-bezier(0.34, 1.56, 0.64, 1)", position: "relative", zIndex: 2
              }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", background: "rgba(123,97,255,0.1)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                </div>
                <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Amount <span style={{ color: "var(--accent-ink)", background: "var(--accent-soft)", padding: "2px 6px", borderRadius: 4 }}>&gt; 5,000 EUR</span></div>
              </div>

              {/* Branching Routes */}
              <div style={{ display: "flex", gap: 16, marginTop: 40, position: "relative" }}>
                
                {/* SVG Connecting Lines */}
                <svg style={{ position: "absolute", top: -40, left: 0, width: "100%", height: 40, zIndex: 1, overflow: "visible", opacity: p1_thinking ? 1 : 0, transition: "opacity 400ms" }}>
                  {/* NO Branch: center of Amount (120) to center of NO (25) */}
                  <path d="M 120 0 C 120 20, 25 20, 25 40" fill="none" stroke="var(--line-strong)" strokeWidth="2" strokeDasharray="4 4" />
                  {/* YES Branch: center of Amount (120) to center of YES (153) */}
                  <path d="M 120 0 C 120 20, 153 20, 153 40" fill="none" stroke={p1_routed ? "var(--accent)" : "var(--line-strong)"} strokeWidth="2" style={{ transition: "stroke 400ms" }} />
                  {/* YES Glow Effect */}
                  <path d="M 120 0 C 120 20, 153 20, 153 40" fill="none" stroke="var(--accent)" strokeWidth="6" opacity={p1_routed ? 0.3 : 0} style={{ transition: "opacity 400ms", filter: "blur(4px)" }} />
                </svg>

                {/* NO Option */}
                <div style={{ width: 50, opacity: p1_thinking ? (p1_routed ? 0.3 : 0.7) : 0, transform: p1_thinking ? "translateY(0)" : "translateY(10px)", transition: "all 600ms ease 100ms", display: "flex", flexDirection: "column", zIndex: 2 }}>
                  <div style={{ display: "flex", justifyContent: "center", marginBottom: 8 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: "var(--ink-4)", background: "var(--bg)", padding: "2px 8px", border: "1px solid var(--line-strong)", borderRadius: 99 }}>NO</div>
                  </div>
                  {/* Disabled Placeholder */}
                  <div style={{ width: "100%", height: 40, border: "1px dashed var(--line-strong)", borderRadius: 8, opacity: 0.5 }}></div>
                </div>

                {/* YES Option (Target Route) */}
                <div style={{ flex: 1, opacity: p1_routed ? 1 : 0, transform: p1_routed ? "translateY(0)" : "translateY(10px)", transition: "all 600ms ease 200ms", display: "flex", flexDirection: "column", zIndex: 2 }}>
                  <div style={{ display: "flex", justifyContent: "center", marginBottom: 8 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: p1_routed ? "var(--accent)" : "var(--ink-4)", background: p1_routed ? "var(--accent-soft)" : "var(--bg)", padding: "2px 8px", border: "1px solid", borderColor: p1_routed ? "rgba(123,97,255,0.3)" : "var(--line-strong)", borderRadius: 99, transition: "all 400ms" }}>YES</div>
                  </div>
                  
                  {/* Final Route Card */}
                  <div style={{
                    background: "var(--bg)", border: "1px solid", borderColor: p1_routed ? "rgba(123,97,255,0.4)" : "var(--line-strong)", borderRadius: 10, padding: "12px",
                    boxShadow: p1_routed ? "0 8px 24px -4px rgba(123,97,255,0.15)" : "0 2px 8px rgba(0,0,0,0.02)",
                    transition: "all 500ms ease"
                  }}>
                    <div style={{ fontSize: 10, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8, fontWeight: 600 }}>Auto-Routing To</div>
                    <div style={{ background: "var(--bg-soft)", border: "1px solid", borderColor: p1_routed ? "rgba(123,97,255,0.2)" : "var(--line)", borderRadius: 8, padding: "8px 12px", display: "flex", alignItems: "center", gap: 10 }}>
                      <img src="https://ui-avatars.com/api/?name=Sarah+K&background=7B61FF&color=fff&rounded=true&bold=true" alt="Avatar" style={{ width: 24, height: 24, borderRadius: "50%", filter: p1_routed ? "none" : "grayscale(100%) opacity(50%)", transition: "all 400ms" }} />
                      <div>
                        <div style={{ fontSize: 12.5, fontWeight: 600, color: p1_routed ? "var(--ink-1)" : "var(--ink-3)", transition: "color 400ms" }}>Sales Manager</div>
                        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>Sarah K.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        {/* =========================================================================
            PHASE 2: AI OBLIGATIONS 
            ========================================================================= */}
        <div style={{
          position: "absolute", inset: 0,
          opacity: p2_active ? 1 : 0, pointerEvents: p2_active ? "auto" : "none",
          transform: p2_active ? "translateY(0)" : "translateY(10px)",
          transition: "opacity 600ms ease, transform 600ms ease",
          display: "grid", gridTemplateColumns: "1fr 320px",
          background: "var(--bg)"
        }}>
          
          {/* Document View */}
          <div style={{ padding: "32px 40px", position: "relative" }}>
            
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <span className="tag tag-success">Signed</span>
              <span className="tag" style={{ border: "1px solid rgba(123,97,255,0.3)", color: "var(--accent)", background: "var(--accent-soft)" }}>
                {p2_extracted ? "2 Obligations tracked" : "Scanning..."}
              </span>
            </div>
            
            <h2 style={{ fontSize: 22, fontWeight: 500, margin: "0 0 6px" }}>Master Services Agreement</h2>
            <div style={{ fontSize: 13, color: "var(--ink-4)", fontFamily: "var(--font-mono)", marginBottom: 32 }}>volantis.ab × contractcontrol</div>

            <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", maxWidth: "85%" }}>
              <p>This Master Services Agreement is entered into by and between Volantis AB and ContractControl, effective as of the signature date.</p>
              
              <p style={{
                position: "relative",
                background: p2_detected ? "rgba(123,97,255,0.08)" : "transparent",
                borderRadius: 4, padding: p2_detected ? "4px 8px" : "0 8px", margin: "16px -8px",
                transition: "background 400ms ease"
              }}>
                <span style={{ fontWeight: p2_detected ? 500 : 400, color: p2_detected ? "var(--accent-ink)" : "inherit" }}>
                  4.1 Compliance Reporting.
                </span> The Supplier shall 
                <span style={{ 
                  background: p2_extracted ? "var(--accent-soft)" : "transparent", 
                  color: p2_extracted ? "var(--accent)" : "inherit",
                  borderBottom: p2_extracted ? "2px solid var(--accent)" : "none",
                  transition: "all 400ms ease"
                }}> provide a quarterly compliance report</span> to the Customer no later than 15 days following the end of each calendar quarter.
              </p>

              <p>5.0 Payment terms. Invoices shall be paid within 30 days of receipt.</p>

              <p style={{
                position: "relative",
                background: p2_detected ? "rgba(123,97,255,0.08)" : "transparent",
                borderRadius: 4, padding: p2_detected ? "4px 8px" : "0 8px", margin: "16px -8px",
                transition: "background 400ms ease 150ms"
              }}>
                <span style={{ fontWeight: p2_detected ? 500 : 400, color: p2_detected ? "var(--accent-ink)" : "inherit" }}>
                  8.2 Auto-Renewal.
                </span> This agreement shall automatically renew for successive one-year terms unless either party provides 
                <span style={{ 
                  background: p2_extracted ? "var(--accent-soft)" : "transparent", 
                  color: p2_extracted ? "var(--accent)" : "inherit",
                  borderBottom: p2_extracted ? "2px solid var(--accent)" : "none",
                  transition: "all 400ms ease 150ms"
                }}> written notice of non-renewal at least sixty (60) days prior</span> to the expiration of the then-current term.
              </p>
            </div>

            {/* AI Scanner Line */}
            {p2_scanning && (
              <div style={{
                position: "absolute", left: 0, right: 0, height: 120,
                top: `${40 + p2_scanProgress * 300}px`,
                background: "linear-gradient(180deg, transparent, rgba(123,97,255,0.15), rgba(123,97,255,0.4))",
                borderBottom: "2px solid var(--accent)",
                pointerEvents: "none", zIndex: 10,
                opacity: p2_scanProgress < 1 ? 1 : 0,
                transition: "opacity 300ms ease"
              }} />
            )}
          </div>

          {/* Obligations Sidebar */}
          <div style={{ borderLeft: "1px solid var(--line)", background: "var(--bg-soft)", padding: 24 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 24 }}>
              <span style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-1)" }}>Obligations</span>
            </div>

            <div style={{ position: "relative" }}>
              {/* Obligation 1 */}
              <div style={{
                background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", borderRadius: 8, padding: 16, marginBottom: 12,
                boxShadow: "0 4px 12px rgba(0,0,0,0.03)",
                opacity: p2_extracted ? 1 : 0, transform: p2_extracted ? "translateX(0)" : "translateX(20px)",
                transition: "all 500ms cubic-bezier(0.16, 1, 0.3, 1)"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "var(--accent)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Action Required</div>
                  <div style={{ fontSize: 11, color: "var(--ink-4)", border: "1px solid var(--line-strong)", padding: "1px 6px", borderRadius: 4 }}>SLA</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-1)", marginBottom: 8, lineHeight: 1.4 }}>Deliver quarterly compliance report</div>
                
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 11, background: "var(--bg-soft)", padding: "2px 6px", borderRadius: 4, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 4 }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
                    Account Exec
                  </span>
                  <span style={{ fontSize: 11, background: "var(--bg-soft)", padding: "2px 6px", borderRadius: 4, color: "var(--ink-3)" }}>Recurring: Quarterly</span>
                </div>
              </div>

              {/* Obligation 2 */}
              <div style={{
                background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", borderRadius: 8, padding: 16,
                boxShadow: "0 4px 12px rgba(0,0,0,0.03)",
                opacity: p2_extracted ? 1 : 0, transform: p2_extracted ? "translateX(0)" : "translateX(20px)",
                transition: "all 500ms cubic-bezier(0.16, 1, 0.3, 1) 150ms"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "#B5651D", textTransform: "uppercase", letterSpacing: "0.06em" }}>Critical Date</div>
                  <div style={{ fontSize: 11, color: "var(--ink-4)", border: "1px solid var(--line-strong)", padding: "1px 6px", borderRadius: 4 }}>Renewal</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-1)", marginBottom: 8, lineHeight: 1.4 }}>Notice of non-renewal (60 days prior)</div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 11, background: "var(--bg-soft)", padding: "2px 6px", borderRadius: 4, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 4 }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
                    Finance
                  </span>
                  <span style={{ fontSize: 11, background: "var(--bg-soft)", padding: "2px 6px", borderRadius: 4, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 4 }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg>
                    Due: Feb 21, 2027
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

// === Intake form mockup ===
function IntakeMock() {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 24, height: 24, borderRadius: 6, background: "var(--bg-elevated)", border: "1px solid var(--line)", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 500 }}>S</span>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Sales, New customer agreement</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>Routed to: Legal · Sarah K.</div>
          </div>
          <span className="tag tag-success" style={{ marginLeft: "auto" }}>Auto-routed</span>
        </div>
      </div>
      <div style={{ padding: "20px 20px 24px" }}>
        <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 6 }}>Counterparty</div>
        <div style={{ display: "flex", gap: 8, alignItems: "center", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 8, marginBottom: 14 }}>
          <span style={{ width: 20, height: 20, borderRadius: 4, background: "linear-gradient(135deg, #FFB58A, #C97D5C)" }}></span>
          <span style={{ fontSize: 13.5 }}>Velora Industries AB</span>
          <span style={{ marginLeft: "auto", fontSize: 11.5, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>Org. 559233-1142</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 6 }}>Contract type</div>
            <div style={{ padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 8, fontSize: 13.5 }}>Customer MSA</div>
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 6 }}>Annual value</div>
            <div style={{ padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 8, fontSize: 13.5, fontFamily: "var(--font-mono)" }}>€ 240,000</div>
          </div>
        </div>

        <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 6 }}>Smart routing</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
          <span className="tag" style={{ background: "var(--bg-soft)" }}>High value</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="1.5"><polyline points="9 18 15 12 9 6" /></svg>
          <span className="tag tag-purple">Self-serve template</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="1.5"><polyline points="9 18 15 12 9 6" /></svg>
          <span className="tag">Sarah K.</span>
        </div>
      </div>
    </div>);

}

// === Lifecycle diagram ===
function LifecycleDiagram() {
  const [hovered, setHovered] = React.useState(null);

  const steps = [
    { label: "Intake",      icon: "intake",      href: "/platform/intake" },
    { label: "Drafting",    icon: "drafting",    href: "/platform/drafting"       },
    { label: "Review",      icon: "review",      href: "/platform/review", comingSoon: false },
    { label: "Negotiation", icon: "negotiation", href: "/platform/negotiation"    },
    { label: "eSignature",  icon: "sign",        href: "/platform/esignature"     },
    { label: "Repository",  icon: "repository",  href: "/platform/repository"     },
    { label: "Analytics",   icon: "analytics",   href: "/platform/analytics"      },
    { label: "Obligations", icon: "obligations", href: "/platform/obligations"    },
  ];

  const W = 900, H = 500;
  const cx = W / 2, cy = H / 2;
  const rx = 310, ry = 168;
  const NR = 27;

  const pos = (deg) => {
    const r = (deg - 90) * Math.PI / 180;
    return { x: cx + rx * Math.cos(r), y: cy + ry * Math.sin(r) };
  };
  const labelPos = (deg) => {
    const r = (deg - 90) * Math.PI / 180;
    return { x: cx + (rx + 68) * Math.cos(r), y: cy + (ry + 52) * Math.sin(r) };
  };

  const nodes = steps.map((s, i) => ({ ...s, angle: (315 + i * 45) % 360 }));

  return (
    <div style={{ width: "100%", maxWidth: 900, margin: "0 auto" }}>
      <svg viewBox="-10 -10 920 520" style={{ width: "100%", overflow: "visible" }}>
        {/* Oval track */}
        <ellipse cx={cx} cy={cy} rx={rx} ry={ry}
          fill="none" stroke="var(--line-strong)" strokeWidth="1.5" />

        {/* Directional arrows at midpoints */}
        {nodes.map((s, i) => {
          const na = nodes[(i + 1) % nodes.length].angle;
          const mid = s.angle > na ? ((s.angle + na + 360) / 2) % 360 : (s.angle + na) / 2;
          const p = pos(mid);
          const r = (mid - 90) * Math.PI / 180;
          const tx = -rx * Math.sin(r), ty = ry * Math.cos(r);
          const ang = Math.atan2(ty, tx) * 180 / Math.PI;
          return (
            <polygon key={i} points="-5,-4 6,0 -5,4"
              transform={`translate(${p.x} ${p.y}) rotate(${ang})`}
              fill="var(--ink-4)" />
          );
        })}

        {/* Nodes */}
        {nodes.map((s) => {
          const p = pos(s.angle);
          const lp = labelPos(s.angle);
          const on = hovered === s.label;
          const cosV = Math.cos((s.angle - 90) * Math.PI / 180);
          const anchor = cosV > 0.3 ? "start" : cosV < -0.3 ? "end" : "middle";
          return (
            <g key={s.label} style={{ cursor: "pointer" }}
              onMouseEnter={() => setHovered(s.label)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => { if (s.href) window.location.href = s.href; }}>
              <circle cx={p.x} cy={p.y} r={NR + 9}
                fill="var(--bg-elevated)"
                stroke={on ? "rgba(110,86,207,0.25)" : "var(--line)"}
                strokeWidth="1" />
              <circle cx={p.x} cy={p.y} r={NR}
                fill={on ? "var(--accent-soft)" : "var(--bg-soft)"}
                stroke={on ? "var(--accent)" : "var(--line)"}
                strokeWidth="1.5" />
              <foreignObject x={p.x - 11} y={p.y - 11} width={22} height={22}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center",
                              width: 22, height: 22, color: s.comingSoon ? "var(--ink-4)" : (on ? "var(--accent)" : "var(--ink-3)") }}>
                  <Icon name={s.icon} size={15} />
                </div>
              </foreignObject>
              <text x={lp.x} y={lp.y - (s.comingSoon ? 9 : 0)} textAnchor={anchor} dominantBaseline="middle"
                style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.09em",
                         fill: s.comingSoon ? "var(--ink-4)" : (on ? "var(--accent)" : "var(--ink-3)"),
                         fontFamily: "inherit", pointerEvents: "none" }}>
                {s.label.toUpperCase()}
              </text>
              {s.comingSoon && (
                <text x={lp.x} y={lp.y + 9} textAnchor={anchor} dominantBaseline="middle"
                  style={{ fontSize: 9, fontWeight: 600, letterSpacing: "0.06em",
                           fill: "var(--accent)", fontFamily: "inherit", pointerEvents: "none" }}>
                  COMING SOON
                </text>
              )}
            </g>
          );
        })}

        {/* Center badge */}
        <rect x={cx - 78} y={cy - 17} width={156} height={34} rx={17} fill="var(--ink-1)" />
        <text x={cx} y={cy + 1} textAnchor="middle" dominantBaseline="middle"
          style={{ fontSize: 13, fontWeight: 500, fill: "white",
                   fontFamily: "inherit", letterSpacing: "-0.01em", pointerEvents: "none" }}>
          ContractControl
        </text>
      </svg>
    </div>
  );
}

// === Counter-up metric ===
function CounterMetric({ value, suffix = "", label, italic, prefix = "" }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(0);
  const targetNum = typeof value === "number" ? value : null;

  React.useEffect(() => {
    if (targetNum == null) {setShown(value);return;}
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          let start = 0;
          const dur = 1100;
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setShown(Math.round(targetNum * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [value, targetNum]);

  return (
    <div className="metric" ref={ref}>
      <div className="num">
        {prefix}
        {italic ? <em>{shown}</em> : shown}
        {suffix}
      </div>
      <div className="label">{label}</div>
    </div>);

}

Object.assign(window, { WorkspaceMock, IntakeMock, LifecycleDiagram, CounterMetric });