// Homepage sections

function DynamicHeroBackground() {
  return (
    <div style={{
      position: "absolute",
      inset: 0,
      zIndex: 0,
      overflow: "hidden",
      background: "var(--bg)", // base color
      pointerEvents: "none"
    }}>
      {/* Aurora Orbs */}
      <div style={{
        position: "absolute",
        top: "-10%",
        left: "-10%",
        width: "60%",
        height: "60%",
        background: "radial-gradient(circle, rgba(110,86,207,0.18) 0%, rgba(110,86,207,0) 70%)",
        filter: "blur(60px)",
        animation: "float1 15s ease-in-out infinite alternate"
      }} />
      <div style={{
        position: "absolute",
        bottom: "-10%",
        right: "-10%",
        width: "70%",
        height: "70%",
        background: "radial-gradient(circle, rgba(155,129,245,0.15) 0%, rgba(155,129,245,0) 70%)",
        filter: "blur(60px)",
        animation: "float2 18s ease-in-out infinite alternate-reverse"
      }} />
      <div style={{
        position: "absolute",
        top: "20%",
        left: "30%",
        width: "50%",
        height: "50%",
        background: "radial-gradient(circle, rgba(90,60,200,0.1) 0%, rgba(90,60,200,0) 70%)",
        filter: "blur(50px)",
        animation: "float3 20s ease-in-out infinite alternate"
      }} />

      {/* Subtle Data Flow Grid */}
      <div style={{
        position: "absolute",
        top: "-40px", // extra space for panning
        left: 0,
        right: 0,
        bottom: 0,
        backgroundSize: "40px 40px",
        backgroundImage: "linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px)",
        maskImage: "radial-gradient(ellipse 80% 80% at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)",
        WebkitMaskImage: "radial-gradient(ellipse 80% 80% at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)",
        animation: "panBg 40s linear infinite"
      }} />

      {/* CSS Animations */}
      <style>{`
        @keyframes float1 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(8%, 12%) scale(1.1); }
        }
        @keyframes float2 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(-12%, -8%) scale(1.05); }
        }
        @keyframes float3 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(10%, -10%) scale(1.15); }
        }
        @keyframes panBg {
          0% { transform: translateY(0); }
          100% { transform: translateY(40px); }
        }
        @keyframes blink {
          50% { opacity: 0; }
        }
      `}</style>
    </div>
  );
}

function RedlineHeroHeadline({ isCinematic = false }) {
  const [visibleChars, setVisibleChars] = React.useState(0);
  const [strikeActive, setStrikeActive] = React.useState(false);

  const parts = [
    { text: "From Contract", type: "normal" },
    { text: "br", type: "break" },
    { text: "Chaos", type: "strike" },
    { text: " to ", type: "normal" },
    { text: "Control.", type: "highlight" }
  ];

  const totalChars = parts.reduce((acc, p) => acc + (p.type === 'break' ? 1 : p.text.length), 0);

  React.useEffect(() => {
    if (visibleChars < totalChars) {
      // 35-55ms per char for a crisp, snappy typing feel
      const delay = 35 + Math.random() * 20; 
      const timer = setTimeout(() => setVisibleChars(v => v + 1), delay);
      return () => clearTimeout(timer);
    } else if (!strikeActive) {
      // Pause slightly before unleashing the redline over Chaos
      const timer = setTimeout(() => setStrikeActive(true), 400);
      return () => clearTimeout(timer);
    }
  }, [visibleChars, totalChars, strikeActive]);

  let charIndex = 0;

  return (
    <h1 className={isCinematic ? "display" : "display"} style={{ marginTop: isCinematic ? 0 : 24, marginBottom: isCinematic ? 28 : 0, lineHeight: 1.15, position: "relative", zIndex: 10 }}>
      {parts.map((part, pIdx) => {
        if (part.type === 'break') {
          const isVis = charIndex < visibleChars;
          charIndex++;
          return <br key={pIdx} />;
        }

        const chars = part.text.split('').map((char, cIdx) => {
          const isVis = charIndex < visibleChars;
          charIndex++;
          return (
            <span key={cIdx} style={{ 
              opacity: isVis ? 1 : 0, 
              visibility: isVis ? 'visible' : 'hidden',
              whiteSpace: "pre" 
            }}>
              {char}
            </span>
          );
        });

        if (part.type === 'strike') {
          return (
            <span key={pIdx} style={{ 
              position: "relative",
              color: strikeActive ? "var(--ink-4)" : "var(--ink-1)",
              transition: "color 0.8s cubic-bezier(0.16, 1, 0.3, 1)",
              display: "inline-block",
              padding: "0 4px"
            }}>
              {chars}
              <span style={{
                position: "absolute",
                left: "0",
                right: "0",
                top: "50%",
                height: "3px",
                background: "linear-gradient(90deg, #7B61FF 0%, #8C70ED 100%)",
                borderRadius: "2px",
                transform: strikeActive ? "scaleX(1)" : "scaleX(0)",
                transformOrigin: "left center",
                transition: "transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)"
              }} />
            </span>
          );
        }

        if (part.type === 'highlight') {
          return (
            <span key={pIdx} className="brand-text-gradient" style={{ position: "relative", display: "inline-block" }}>
              {chars}
            </span>
          );
        }

        return <span key={pIdx}>{chars}</span>;
      })}
      
      {/* Blinking Cursor */}
      <span style={{
        display: "inline-block",
        width: "4px",
        height: "0.9em",
        backgroundColor: "var(--accent)",
        marginLeft: "6px",
        verticalAlign: "bottom",
        animation: visibleChars < totalChars ? "blink 0.8s step-end infinite" : "none",
        opacity: visibleChars < totalChars ? 1 : 0,
        transition: "opacity 0.4s ease-out"
      }} />
    </h1>
  );
}

function Hero() {
  return (
    <section style={{ padding: "132px 0 72px", position: "relative", overflow: "hidden" }}>
      <DynamicHeroBackground />
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="cc-section-header" style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
          <span className="eyebrow fade-up" style={{ animationDelay: "0s" }}>THE AI CLM PLATFORM</span>
          <RedlineHeroHeadline isCinematic={false} />
          <p className="lede fade-up" style={{ margin: "32px auto 0", animationDelay: "0.1s", textAlign: "center", maxWidth: "60ch" }}>
            One platform for legal, finance, and procurement. From first intake to signed contract, every obligation tracked and every deadline met.
          </p>
          <div className="fade-up hero-actions cc-hero-ctas" style={{ marginTop: 40, display: "flex", gap: 12, justifyContent: "center", animationDelay: "0.15s" }}>
            <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost btn-lg" href="/book-demo"><Icon name="play" size={12} /> Watch 3-min tour</a>
          </div>
          <div className="fade-up" style={{ marginTop: 20, fontSize: 12.5, color: "var(--ink-4)", animationDelay: "0.2s" }}>
            GDPR + eIDAS compliant · No credit card required
          </div>
        </div>

        <div className="mob-hide container" style={{ marginTop: 72, position: "relative", zIndex: 2 }}>
          <WorkspaceMock />
        </div>
      </div>
    </section>
  );
}

function LogoStrip() {
  const logos = ["Bauer Media", "ISS Facility Services", "Caparol", "Bewi Group", "Wellvita", "WaterAid", "Savethechildren"];
  return (
    <section style={{ padding: "32px 0 24px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-4)", textAlign: "center", marginBottom: 22 }}>
          Trusted by legal, finance & ops teams across the Nordics
        </div>
        <div className="logo-strip" style={{ justifyContent: "space-around" }}>
          {logos.map((l) =>
            <span key={l} className="logo-item">{l}</span>
          )}
        </div>
      </div>
    </section>
  );
}

function Metrics() {
  const [activeTab, setActiveTab] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth <= 900);
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  const tabs = [
    {
      id: "intake",
      label: "Intake",
      title: "A clean front door for contract requests",
      desc: "Replace fragmented emails and Slack chats. Business teams submit requests through simple, dynamic intake forms that capture all key commercial fields automatically.",
      linkText: "Explore Intake",
      linkHref: "/platform/intake",
      componentName: "IntakeAnimation"
    },
    {
      id: "drafting",
      label: "Drafting",
      title: "Enforce contract playbook terms as you type",
      desc: "Draft agreements using pre-approved templates with built-in guardrails. Safeguard critical sections while allowing sales and operations to self-serve safely.",
      linkText: "Explore Drafting",
      linkHref: "/platform/drafting",
      componentName: "DraftingAnimation"
    },
    {
      id: "review",
      label: "Review",
      title: "Identify risks and exceptions in seconds",
      desc: "Auto-scan incoming vendor agreements against your playbook. Automatically redline out-of-bounds liabilities, renewal traps, or missing compliance schedules.",
      linkText: "Explore Review",
      linkHref: "/platform/review",
      componentName: "ReviewAnimation"
    },
    {
      id: "negotiation",
      label: "Negotiation",
      title: "One place for every redline, comment, and version",
      desc: "A shared workspace between you and the counterparty. No more email chains, no more lost versions. Threaded comments per clause, internal-only notes, and version diffs.",
      linkText: "Explore Negotiation",
      linkHref: "/platform/negotiation",
      componentName: "NegotiationAnimation"
    },
    {
      id: "signature",
      label: "eSignature",
      title: "Fast, secure, and compliant signing",
      desc: "Route agreements to internal or external signers with eIDAS-compliant signatures. Every document is sealed with a tamper-evident audit trail.",
      linkText: "Explore eSignature",
      linkHref: "/platform/signature",
      componentName: "SignatureAnimation"
    },
    {
      id: "repository",
      label: "Repository",
      title: "Every contract, searchable and structured",
      desc: "A single, AI-powered repository for all signed agreements. Full-text search, smart tagging, and automatic metadata extraction so nothing gets buried in a shared drive.",
      linkText: "Explore Repository",
      linkHref: "/platform/repository",
      componentName: "RepositoryHeroMockup"
    },
    {
      id: "obligations",
      label: "Obligations",
      title: "Proactive renewal and obligation tracking",
      desc: "Never let an auto-renewal or contract milestone catch you by surprise. Automatically extract, track, and receive alerts for every commitment across your contracts.",
      linkText: "Explore Obligations",
      linkHref: "/platform/obligations",
      componentName: "ObligationsHeroMockup"
    }
  ];

  const currentTab = tabs[activeTab];
  const AnimComponent = window[currentTab.componentName] || window.IntakeAnimation;

  return (
    <section className="section" style={{ background: "var(--bg)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        
        {/* Header */}
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 760, margin: "0 auto 48px" }}>
          <span className="eyebrow">THE CLM PLATFORM</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            A complete contract management solution
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            One unified workspace to manage agreements from intake to signature and proactive renewal monitoring.
          </p>
        </div>

        {/* Tab selector */}
        <div style={{
          display: "flex",
          justifyContent: isMobile ? "flex-start" : "center",
          alignItems: "center",
          gap: 8,
          marginBottom: 36,
          overflowX: "auto",
          whiteSpace: "nowrap",
          paddingBottom: isMobile ? 12 : 0,
          WebkitOverflowScrolling: "touch",
          scrollbarWidth: "none"
        }}>
          {tabs.map((tab, idx) => {
            const active = idx === activeTab;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(idx)}
                style={{
                  background: active ? "var(--accent-soft)" : "transparent",
                  color: active ? "var(--accent)" : "var(--ink-3)",
                  border: "1px solid " + (active ? "rgba(123, 97, 255, 0.22)" : "transparent"),
                  padding: "8px 20px",
                  borderRadius: "99px",
                  fontSize: 12.5,
                  fontWeight: 500,
                  letterSpacing: "0.04em",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  transition: "all 160ms ease"
                }}
                onMouseEnter={(e) => {
                  if (!active) {
                    e.currentTarget.style.background = "var(--bg-soft)";
                    e.currentTarget.style.color = "var(--ink-1)";
                  }
                }}
                onMouseLeave={(e) => {
                  if (!active) {
                    e.currentTarget.style.background = "transparent";
                    e.currentTarget.style.color = "var(--ink-3)";
                  }
                }}
              >
                {tab.label}
              </button>
            );
          })}
        </div>

        {/* Panel wrapper */}
        <div className="showcase-panel-mockup" style={{
          background: "radial-gradient(circle at 20% 20%, rgba(123, 97, 255, 0.15) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)",
          borderRadius: 28,
          border: "1px solid var(--line)",
          padding: isMobile ? "32px 24px" : "40px 48px",
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          alignItems: "center",
          gap: isMobile ? "40px" : "48px",
          minHeight: isMobile ? "auto" : 460,
          position: "relative",
          overflow: "hidden"
        }}>
          
          {/* Left: Text Info */}
          <div style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-start",
            textAlign: "left"
          }}>
            <h3 style={{
              fontFamily: "var(--font-sans)",
              fontSize: "clamp(24px, 3.2vw, 36px)",
              fontWeight: 500,
              lineHeight: 1.15,
              color: "var(--ink-1)",
              margin: "0 0 16px",
              letterSpacing: "-0.025em",
              minHeight: isMobile ? "auto" : 84
            }}>
              {currentTab.title}
            </h3>
            
            <p style={{
              fontSize: 15.5,
              color: "var(--ink-3)",
              lineHeight: 1.6,
              margin: "0 0 32px",
              maxWidth: 480,
              minHeight: isMobile ? "auto" : 80
            }}>
              {currentTab.desc}
            </p>

            <a className="btn btn-accent btn-lg" href={currentTab.linkHref} style={{
              display: "flex",
              alignItems: "center",
              gap: 8
            }}>
              {currentTab.linkText} <Icon name="arrow" size={14} />
            </a>
          </div>

          {/* Right: Animation Mockup */}
          <div style={{
            flex: 1,
            width: "100%",
            maxWidth: isMobile ? "100%" : "520px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}>
            {AnimComponent && React.createElement(AnimComponent)}
          </div>

        </div>

      </div>
    </section>
  );
}

function BeforeAfter() {
  const Card = ({ title, color, items }) =>
  <div className="card" style={{ padding: 32 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span className="tag" style={color === "before" ?
      { background: "rgba(180,35,24,0.06)", color: "var(--danger)", borderColor: "rgba(180,35,24,0.16)" } :
      { background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.18)" }
      }>{color === "before" ? "Before" : "After"}</span>
        <span style={{ fontSize: 13, color: "var(--ink-4)" }}>{color === "before" ? "Legal as a bottleneck" : "Legal as a system"}</span>
      </div>
      <h3 className="h-card" style={{ fontSize: 22, marginBottom: 18 }}>{title}</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map((it, i) =>
      <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "12px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
            <span style={{
          flex: "0 0 18px", height: 18, marginTop: 2, borderRadius: 5, display: "grid", placeItems: "center",
          background: color === "before" ? "rgba(180,35,24,0.08)" : "var(--accent-soft)",
          color: color === "before" ? "var(--danger)" : "var(--accent)"
        }}>
              {color === "before" ?
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg> :
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>}
            </span>
            <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{it}</span>
          </div>
      )}
      </div>
    </div>;

  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">The shift</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Before & after ContractControl.
          </h2>
        </div>
        <div className="grid grid-2" style={{ gap: 24 }}>
          <Card title="Quote-to-sign in 14 days, on a good week." color="before" items={[
          "Legal is the bottleneck. Sales waits, deals slip.",
          "Every request is a Slack thread or forwarded PDF.",
          "Templates live in someone's Drive, last edited 2022.",
          "No one knows where a contract is until someone asks."]
          } />
          <Card title="One portal. Smart routing. Self-service where it makes sense." color="after" items={[
          "Sales fills a 30-second form. AI drafts on standard paper.",
          "Edge cases route to legal automatically, with full context.",
          "Every clause negotiated against your approved positions, not from scratch.",
          "Renewals, obligations, and risk live in one searchable place."]
          } />
        </div>
      </div>
    </section>);

}

function Lifecycle() {
  return (
    <section className="section">
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}>
          <span className="eyebrow">How it works</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            The full contract lifecycle, <em>in one platform</em>.
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            From the moment a request lands to the moment it renews: one timeline, every stakeholder.
          </p>
        </div>
        <LifecycleDiagram />
      </div>
    </section>);

}

function IntakeFeature() {
  const features = [
  { icon: "intake", title: "Dynamic intake forms", desc: "Sales fills a 30-second form. Finance gets the same one with extra fields. Legal gets clean inputs." },
  { icon: "negotiation", title: "Slack & Teams native", desc: "Teams request from where they already work. /contract in Slack. Status in DMs." },
  { icon: "analytics", title: "Rule-based routing", desc: "By value, region, contract type. The right reviewer gets the right thing, every time." },
  { icon: "drafting", title: "Live AI co-pilot", desc: "Requesters get drafting suggestions as they type. Fewer back-and-forths, faster outcomes." },
  { icon: "sign", title: "SLA timers", desc: "Every request has a clock. Legal sees what's slipping. Requesters see what's promised." },
  { icon: "review", title: "Approval chains", desc: "Multi-step sign-off with conditional logic: finance for value, security for DPAs." }];

  return (
    <section className="section" style={{ background: "var(--bg)" }}>
      <div className="container">
        <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start", marginBottom: 56 }}>
          <div>
            <span className="eyebrow">Lifecycle · Intake</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              Everything you need for request & intake.
            </h2>
          </div>
          <div style={{ paddingTop: 24 }}>
            <p className="lede">
              The front door teams actually walk through. No more legal email aliases, no more lost requests, no more "did anyone see this?"
            </p>
            <a className="btn-explore mt-4" href="/platform/intake" style={{ marginTop: 16 }}>
              Explore the intake module <Icon name="arrow" size={14} />
            </a>
          </div>
        </div>
        <div className="grid grid-3" style={{ gap: 16 }}>
          {features.map((f, i) =>
          <div key={f.title} className="card" style={{
            padding: 28,
          }}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-soft)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 18 }}>
                <Icon name={f.icon} size={16} />
              </span>
              <h3 className="h-card" style={{ marginBottom: 8 }}>{f.title}</h3>
              <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{f.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}


function Comparison() {
  const rows = [
  { capability: "Self-serve intake portal", us: true, generic: false, legacy: "limited" },
  { capability: "AI drafting on your paper", us: true, generic: "limited", legacy: false },
  { capability: "AI redlines on third-party paper", us: true, generic: false, legacy: false },
  { capability: "eIDAS QES signatures", us: true, generic: "limited", legacy: true },
  { capability: "AI-powered contract repository", us: true, generic: "limited", legacy: true },
  { capability: "Contract health & risk scoring", us: true, generic: false, legacy: false },
  { capability: "Obligation & renewal tracking", us: true, generic: false, legacy: true },
  { capability: "ERP integrations (Fortnox, Visma)", us: true, generic: false, legacy: "limited" },
  { capability: "Implementation time", us: "2 weeks", generic: "1-2 days", legacy: "3-6 months" }];

  const Cell = ({ v }) => {
    if (v === true) return <span style={{ color: "var(--success)" }}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><polyline points="20 6 9 17 4 12" /></svg></span>;
    if (v === false) return <span style={{ color: "var(--ink-5)" }}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12" /></svg></span>;
    if (v === "limited") return <span className="tag" style={{ height: 22, fontSize: 11 }}>Limited</span>;
    return <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", color: "var(--ink-2)" }}>{v}</span>;
  };
  return (
    <section className="section">
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">How we compare</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            One platform, where most stitch three together.
          </h2>
        </div>
        <div className="compare-wrap" style={{ overflowX: "auto", width: "100%", borderRadius: "var(--r-xl)" }}>
          <div className="card compare-table" style={{ padding: 0, minWidth: 800 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr" }}>
              <div style={{ padding: "20px 28px", fontSize: 11.5, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>Capability</div>
              <div style={{ padding: "20px 24px", textAlign: "center", background: "var(--bg-soft)", borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <img src="/logo.svg" style={{ height: 16, width: "auto" }} alt="ContractControl" />
              </div>
              <div style={{ padding: "20px 24px", fontSize: 13, color: "var(--ink-3)", textAlign: "center", background: "var(--bg-soft)", borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>Generic eSign</div>
              <div style={{ padding: "20px 24px", fontSize: 13, color: "var(--ink-3)", textAlign: "center", background: "var(--bg-soft)", borderLeft: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>Legacy CLM</div>

              {rows.map((r, i) =>
              <React.Fragment key={r.capability}>
                  <div style={{ padding: "16px 28px", fontSize: 14, color: "var(--ink-2)", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>{r.capability}</div>
                  <div style={{ padding: "16px 24px", textAlign: "center", borderLeft: "1px solid var(--line)", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Cell v={r.us} /></div>
                  <div style={{ padding: "16px 24px", textAlign: "center", borderLeft: "1px solid var(--line)", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Cell v={r.generic} /></div>
                  <div style={{ padding: "16px 24px", textAlign: "center", borderLeft: "1px solid var(--line)", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Cell v={r.legacy} /></div>
                </React.Fragment>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Testimonial() {
  return (
    <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        {/* Header row: company tagline + Read the story */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="/images/team/sabina-hedstrom.png" alt="Sabina Hedström"
              style={{ width: 32, height: 32, borderRadius: "50%", objectFit: "cover" }} />
            <span style={{ fontSize: 16, fontWeight: 500, color: "var(--ink-1)" }}>
              Acenta Group manages contracts with ContractControl.
            </span>
            <span style={{
              fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase",
              color: "var(--accent)", background: "var(--accent-soft)",
              padding: "3px 8px", borderRadius: 4, border: "1px solid rgba(110,86,207,0.15)",
              whiteSpace: "nowrap"
            }}>Nasdaq Listed</span>
          </div>
          <a className="btn btn-ghost" href="/customers" style={{ flexShrink: 0 }}>Read the story <Icon name="arrow" size={14} /></a>
        </div>

        {/* Hero image */}
        <div style={{
          borderRadius: 16, overflow: "hidden",
          height: "clamp(280px, 40vw, 440px)",
          position: "relative"
        }}>
          <img src="/images/customers/acenta-group.jpg" alt="Acenta Group padel court facility"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>

        {/* Quote below image */}
        <div style={{ marginTop: 32, maxWidth: 700 }}>
          <p style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400,
            fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)", margin: "0 0 16px"
          }}>
            "ContractControl gave us full visibility into our contract portfolio. We finally know exactly what we've committed to, and when every renewal is coming."
          </p>
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>
            Sabina Hedström <span style={{ fontWeight: 400, color: "var(--ink-4)" }}>CFO at Acenta Group AB</span>
          </div>
        </div>
      </div>
    </section>);

}

function FinalCTA() {
  return (
    <section className="section">
      <div className="container">
        <div data-dark style={{
          background: "var(--ink-1)", color: "white", borderRadius: "var(--r-2xl)",
          padding: "72px 56px", position: "relative", overflow: "hidden"
        }}>
          <div style={{ maxWidth: 640, position: "relative", zIndex: 2 }}>
            <span className="eyebrow no-dot" style={{ color: "rgba(255,255,255,0.55)" }}>Get started</span>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(36px, 4.2vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "18px 0 16px", color: "white" }}>
              Discover the future of <span style={{ color: "#C7B4FF" }}>contract management</span>.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.68)", fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: 520 }}>
              See how your team can manage the full contract lifecycle, from intake to obligations. Book a demo and we'll show you how.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
              <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-lg" href="/pricing" style={{ color: "white", border: "1px solid rgba(255,255,255,0.25)" }}>Pricing</a>
            </div>
          </div>
          <svg style={{ position: "absolute", right: -60, top: -60, opacity: 0.18, color: "rgba(255,255,255,0.4)" }} width="520" height="520" viewBox="0 0 520 520" fill="none">
            <defs>
              <pattern id="grid" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
                <path d="M 32 0 L 0 0 0 32" fill="none" stroke="currentColor" strokeWidth="1" />
              </pattern>
            </defs>
            <rect width="520" height="520" fill="url(#grid)" />
          </svg>
        </div>
      </div>
    </section>);

}
// ─── Department Showcase ───────────────────────────────────────────────────────

function DepartmentShowcase() {
  const departments = [
    {
      id: "legal-ops",
      label: "Legal Ops",
      href: "/solutions/team/legal",
      tagline: "Intake to signature without the back-and-forth.",
      desc: "Legal Ops teams use ContractControl to eliminate the request queue. Self-serve intake routes every contract to the right workflow: templated, approved, and tracked without manual intervention.",
      bullets: [
        "Intake forms routed by type, value, and region",
        "Real-time status for every request",
        "Full audit trail, no paper chase",
      ],
    },
    {
      id: "hr-people",
      label: "HR & People",
      href: "/solutions/team/hr",
      tagline: "Hire fast. Contract right. Stay compliant.",
      desc: "HR teams generate offer letters, contractor agreements, and NDAs from templates, signed and stored without a single legal bottleneck.",
      bullets: [
        "Offer letters and contracts generated from one form",
        "Automated routing for approvals and eSignature",
        "Full audit trail on every employment agreement",
      ],
    },
    {
      id: "procurement",
      label: "Procurement",
      href: "/solutions/team/procurement",
      tagline: "Vendor contracts under control, not in a folder.",
      desc: "Procurement teams track commitments, renewals, and price uplifts from a single dashboard, with alerts before opt-out windows close.",
      bullets: [
        "Centralised vendor contract repository",
        "Auto-alerts on renewal and exit windows",
        "Spend visibility across all supplier agreements",
      ],
    },
    {
      id: "sales",
      label: "Sales",
      href: "/solutions/team/sales",
      tagline: "Close faster. Stop waiting on legal.",
      desc: "Sales teams submit a 30-second request and get a signed contract without touching legal. Standard deals go straight to auto-draft and countersign.",
      bullets: [
        "Standard deals signed in hours, not weeks",
        "Live deal status visible in CRM",
        "Self-serve templates with built-in guardrails",
      ],
    },
    {
      id: "finance",
      label: "Finance",
      href: "/solutions/team/finance",
      tagline: "Revenue leakage starts in the contract.",
      desc: "Finance teams connect contract commitments to financial outcomes, tracking payment milestones, uplifts, and renewal dates before they become surprises.",
      bullets: [
        "Obligation and milestone tracking per contract",
        "Renewal forecasting and budget impact",
        "ERP sync with Fortnox, Visma, and NetSuite",
      ],
    },
  ];

  const [active, setActive] = React.useState(0);
  const dept = departments[active];

  const mockups = {
    "legal-ops": <DeptMockupLegalOps />,
    "hr-people": <DeptMockupHR />,
    "procurement": <DeptMockupProcurement />,
    "sales": <DeptMockupSales />,
    "finance": <DeptMockupFinance />,
  };

  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        {/* Header */}
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Built for every team</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            The platform your whole org actually uses.
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            Legal isn't the only team in a contract. ContractControl gives every department the view they need, without stepping on each other.
          </p>
        </div>

        {/* Tabs */}
        <div className="showcase-tabs-wrap">
          <div className="showcase-tabs">
            {departments.map((d, i) => (
              <button
                key={d.id}
                onClick={() => setActive(i)}
                style={{
                  height: 38,
                  padding: "0 20px",
                  borderRadius: 999,
                  border: "1px solid",
                  borderColor: active === i ? "var(--accent)" : "var(--line-strong)",
                  background: active === i ? "var(--accent)" : "var(--bg-elevated)",
                  color: active === i ? "white" : "var(--ink-2)",
                  fontFamily: "inherit",
                  fontSize: 13.5,
                  fontWeight: 500,
                  cursor: "pointer",
                  transition: "all 140ms ease",
                  whiteSpace: "nowrap",
                }}
              >
                {d.label}
              </button>
            ))}
          </div>
        </div>

        {/* Panel */}
        <div className="card mob-stack" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 480 }}>
          {/* Left - copy */}
          <div className="showcase-panel-content">
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 16 }}>
              {dept.label}
            </span>
            <h3 style={{ fontSize: "clamp(20px, 2.2vw, 28px)", fontWeight: 500, letterSpacing: "-0.022em", lineHeight: 1.25, color: "var(--ink-1)", margin: "0 0 16px", minHeight: 70 }}>
              {dept.tagline}
            </h3>
            <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.65, margin: "0 0 28px", minHeight: 100 }}>
              {dept.desc}
            </p>
            <ul style={{ margin: "0 0 32px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {dept.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <span style={{ flex: "0 0 14px", marginTop: 3, color: "var(--accent)", display: "flex", alignItems: "center" }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8"><polyline points="20 6 9 17 4 12" /></svg>
                  </span>
                  {b}
                </li>
              ))}
            </ul>
            <a href={dept.href} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 500, color: "var(--accent)", textDecoration: "none" }}>
              Learn more about {dept.label} <Icon name="arrow" size={12} />
            </a>
          </div>

          {/* Right - mockup */}
          <div className="showcase-panel-mockup">
            {mockups[dept.id]}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Department mockups ────────────────────────────────────────────────────── */

function DeptMockupLegalOps() {
  const rows = [
    { id: "REQ-114", type: "NDA", party: "Velora AB", sla: "2d left", status: "auto-draft", urgency: "low" },
    { id: "REQ-115", type: "MSA", party: "Kvist Group", sla: "4d left", status: "in review", urgency: "normal" },
    { id: "REQ-116", type: "DPA", party: "Helix Legal", sla: "1d left", status: "needs attention", urgency: "high" },
    { id: "REQ-117", type: "SoW", party: "Brevia", sla: "5d left", status: "auto-draft", urgency: "low" },
  ];
  const statusStyle = (s) => {
    if (s === "auto-draft") return { bg: "var(--accent-soft)", color: "var(--accent)" };
    if (s === "in review") return { bg: "rgba(234,179,8,0.1)", color: "#854d0e" };
    return { bg: "rgba(220,38,38,0.08)", color: "#991b1b" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)", fontSize: 12 }}>Intake queue</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", background: "var(--accent-soft)", padding: "2px 8px", borderRadius: 99 }}>4 active</span>
        </div>
        {rows.map((r, i) => {
          const s = statusStyle(r.status);
          return (
            <div key={r.id} style={{ display: "grid", gridTemplateColumns: "48px 60px 1fr auto", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)" }}>{r.id}</span>
              <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>{r.type}</span>
              <span style={{ color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.party}</span>
              <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color, whiteSpace: "nowrap" }}>{r.status}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DeptMockupHR() {
  const contracts = [
    { name: "Sara Lindgren", role: "Senior Engineer", type: "Full-time", status: "Signed", color: "#166534", bg: "rgba(22,163,74,0.08)" },
    { name: "Erik Wallin", role: "Contractor · Design", type: "Contractor", status: "Sent", color: "#854d0e", bg: "rgba(234,179,8,0.1)" },
    { name: "Maja Björk", role: "Head of Product", type: "Full-time", status: "Signed", color: "#166534", bg: "rgba(22,163,74,0.08)" },
    { name: "Tom Heid", role: "Legal Counsel", type: "Full-time", status: "Draft", color: "var(--ink-4)", bg: "var(--bg-soft)" },
  ];
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)", fontSize: 12 }}>Employment contracts · Q2</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "var(--accent-soft)", color: "var(--accent)", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>4 active</span>
        </div>
        {contracts.map((c, i) => (
          <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)", flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{c.name}</div>
              <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{c.role} · {c.type}</div>
            </div>
            <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: c.bg, color: c.color, whiteSpace: "nowrap" }}>{c.status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DeptMockupProcurement() {
  const vendors = [
    { name: "Kvist Group", type: "Software", value: "€84k/yr", renewal: "2025-11-30", daysLeft: 47, status: "renewing" },
    { name: "Brevia", type: "Services", value: "€31k/yr", renewal: "2026-01-15", daysLeft: 93, status: "ok" },
    { name: "Northwind AB", type: "Hardware", value: "€120k", renewal: "2025-10-01", daysLeft: 15, status: "urgent" },
    { name: "Helix Legal", type: "Advisory", value: "€52k/yr", renewal: "2026-03-01", daysLeft: 138, status: "ok" },
  ];
  const statusStyle = (s) => {
    if (s === "urgent") return { color: "#991b1b", bg: "rgba(220,38,38,0.08)" };
    if (s === "renewing") return { color: "#854d0e", bg: "rgba(234,179,8,0.1)" };
    return { color: "#166534", bg: "rgba(22,163,74,0.08)" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>Vendor contracts</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "rgba(220,38,38,0.08)", color: "#991b1b", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>1 urgent</span>
        </div>
        {vendors.map((v, i) => {
          const s = statusStyle(v.status);
          return (
            <div key={v.name} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 8, padding: "9px 14px", borderBottom: i < vendors.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{v.name}</div>
                <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{v.type} · {v.value} · renews {v.renewal}</div>
              </div>
              <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 10px", borderRadius: 99, background: s.bg, color: s.color, whiteSpace: "nowrap" }}>
                {v.daysLeft}d
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DeptMockupSales() {
  const stages = [
    { label: "Request submitted", time: "09:14", done: true },
    { label: "Template auto-drafted", time: "09:15", done: true },
    { label: "Sent for countersign", time: "09:18", done: true },
    { label: "Signed by Velora AB", time: "11:42", done: true },
    { label: "Filed to repository", time: "11:42", done: true },
  ];
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>NDA · Velora AB</span>
          <span style={{ fontSize: 10.5, background: "rgba(22,163,74,0.08)", color: "#166534", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>SIGNED</span>
        </div>
        <div style={{ padding: "14px 14px", display: "flex", flexDirection: "column", gap: 0 }}>
          {stages.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <span style={{ width: 18, height: 18, borderRadius: "50%", background: "#10B981", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>
                </span>
                {i < stages.length - 1 && <span style={{ width: 1, height: 16, background: "var(--line)", margin: "3px 0" }} />}
              </div>
              <div style={{ paddingBottom: i < stages.length - 1 ? 0 : 0 }}>
                <span style={{ color: "var(--ink-2)", fontWeight: 500 }}>{s.label}</span>
                <span style={{ color: "var(--ink-5)", marginLeft: 8, fontFamily: "var(--font-mono)", fontSize: 10.5 }}>{s.time}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: "10px 14px", borderTop: "1px solid var(--line)", background: "var(--accent-soft)", display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          <span style={{ fontSize: 11.5, color: "var(--accent-ink)", fontWeight: 500 }}>Total time: 2 hrs 28 min</span>
        </div>
      </div>
    </div>
  );
}

function DeptMockupFinance() {
  const obligations = [
    { contract: "Kvist Group MSA", type: "Price uplift", due: "2025-11-01", value: "+3.5%", status: "due-soon" },
    { contract: "Northwind SLA", type: "Payment milestone", due: "2025-10-15", value: "€40,000", status: "overdue" },
    { contract: "Brevia Services", type: "Renewal window", due: "2025-12-01", value: "€31k/yr", status: "upcoming" },
    { contract: "Helix Advisory", type: "CPI adjustment", due: "2026-01-01", value: "+2.1%", status: "upcoming" },
  ];
  const statusStyle = (s) => {
    if (s === "overdue") return { color: "#991b1b", bg: "rgba(220,38,38,0.08)", label: "Overdue" };
    if (s === "due-soon") return { color: "#854d0e", bg: "rgba(234,179,8,0.1)", label: "Due soon" };
    return { color: "#166534", bg: "rgba(22,163,74,0.08)", label: "Upcoming" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>Obligation tracker</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "rgba(220,38,38,0.08)", color: "#991b1b", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>1 overdue</span>
        </div>
        {obligations.map((o, i) => {
          const s = statusStyle(o.status);
          return (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "start", gap: 8, padding: "9px 14px", borderBottom: i < obligations.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{o.contract}</div>
                <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{o.type} · due {o.due}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-1)", fontWeight: 500, marginBottom: 2 }}>{o.value}</div>
                <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color }}>{s.label}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function HeroCinematic() {
  const leftNodes = [
    { label: "Intake", sub: "47 pending requests", icon: "intake", top: "28%" },
    { label: "Obligations", sub: "8 renewals due", icon: "obligations", top: "52%" },
    { label: "Drafting", sub: "6 in progress", icon: "drafting", top: "72%" },
  ];
  const rightNodes = [
    { label: "eSignature", sub: "142 signed this month", icon: "sign", top: "28%" },
    { label: "Repository", sub: "2,174 contracts", icon: "repository", top: "52%" },
    { label: "Analytics", sub: "Invoice vs. terms: 4 gaps", icon: "analytics", top: "72%" },
  ];

  const NodeLeft = ({ label, sub, icon, top }) => (
    <div style={{ position: "absolute", top, left: 0, display: "flex", alignItems: "center" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingRight: 16 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-2)", letterSpacing: "-0.01em" }}>{label}</div>
        <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{ display: "flex", alignItems: "center" }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-soft)", border: "1px solid rgba(110,86,207,0.25)", display: "grid", placeItems: "center", flexShrink: 0, zIndex: 1, color: "var(--accent)" }}>
          <Icon name={icon} size={15} />
        </div>
        <div style={{ width: "7vw", height: 1, background: "linear-gradient(to right, rgba(110,86,207,0.3), transparent)" }} />
      </div>
    </div>
  );

  const NodeRight = ({ label, sub, icon, top }) => (
    <div style={{ position: "absolute", top, right: 0, display: "flex", alignItems: "center" }}>
      <div style={{ display: "flex", alignItems: "center" }}>
        <div style={{ width: "7vw", height: 1, background: "linear-gradient(to left, rgba(110,86,207,0.3), transparent)" }} />
        <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-soft)", border: "1px solid rgba(110,86,207,0.25)", display: "grid", placeItems: "center", flexShrink: 0, zIndex: 1, color: "var(--accent)" }}>
          <Icon name={icon} size={15} />
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", paddingLeft: 16 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-2)", letterSpacing: "-0.01em" }}>{label}</div>
        <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );

  return (
    <section style={{ background: "var(--bg)", minHeight: "92vh", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", padding: "80px 0" }}>
      {/* Ambient glow - soft brand accent */}
      <div style={{ position: "absolute", top: "0%", left: "50%", transform: "translateX(-50%)", width: "65vw", height: "55vh", background: "radial-gradient(ellipse at 50% 20%, rgba(110,86,207,0.10) 0%, transparent 65%)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", bottom: "0%", left: "50%", transform: "translateX(-50%)", width: "45vw", height: "35vh", background: "radial-gradient(ellipse at center, rgba(110,86,207,0.06) 0%, transparent 70%)", pointerEvents: "none" }} />
      {/* Subtle horizontal rule at top */}
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(to right, transparent, rgba(110,86,207,0.25), transparent)", pointerEvents: "none" }} />

      {/* Floating module nodes */}
      <div className="mob-hide" style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <div style={{ position: "relative", height: "100%", maxWidth: 1280, margin: "0 auto", padding: "0 24px" }}>
          {leftNodes.map((n) => <NodeLeft key={n.label} {...n} />)}
          {rightNodes.map((n) => <NodeRight key={n.label} {...n} />)}
        </div>
      </div>

      {/* Center content */}
      <div className="container" style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
        <div style={{ maxWidth: 680, margin: "0 auto" }}>
          <span className="eyebrow" style={{ marginBottom: 36 }}>Contract lifecycle management</span>
          <RedlineHeroHeadline isCinematic={true} />
          <p style={{ fontSize: 16.5, color: "var(--ink-3)", lineHeight: 1.7, maxWidth: 460, margin: "0 auto 44px", letterSpacing: "-0.005em" }}>
            One platform for legal, finance, and ops. From the first request to the last renewal.
          </p>
          <div className="hero-actions" style={{ display: "flex", gap: 12, justifyContent: "center" }}>
            <a className="btn btn-primary btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost btn-lg" href="/book-demo"><Icon name="play" size={12} /> Watch 3-min tour</a>
          </div>
          <div style={{ marginTop: 24, fontSize: 12, color: "var(--ink-4)", letterSpacing: "0.02em" }}>
            GDPR + eIDAS compliant · No credit card required
          </div>
        </div>
      </div>
    </section>
  );
}

function EmpathyBanner() {
  return (
    <section className="section" style={{
      background: "radial-gradient(120% 120% at 50% -20%, #FDFDFF 0%, var(--bg-soft) 100%)",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      padding: "120px 0",
      position: "relative",
      overflow: "hidden"
    }}>
      {/* Decorative background ambient glows */}
      <div style={{
        position: "absolute",
        top: -150,
        left: -150,
        width: 400,
        height: 400,
        background: "radial-gradient(circle, rgba(123,97,255,0.04) 0%, transparent 70%)",
        pointerEvents: "none"
      }} />
      <div style={{
        position: "absolute",
        bottom: -200,
        right: -200,
        width: 500,
        height: 500,
        background: "radial-gradient(circle, rgba(123,97,255,0.03) 0%, transparent 70%)",
        pointerEvents: "none"
      }} />

      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 0.9fr",
          gap: "64px",
          alignItems: "center"
        }} className="mob-stack">
          
          {/* Left Column: Copy */}
          <div>
            <div style={{ marginBottom: "20px" }}>
              <span className="eyebrow">The Process Friction</span>
            </div>
            <h2 className="h-section" style={{
              fontSize: "clamp(32px, 3.6vw, 48px)",
              lineHeight: 1.05,
              fontWeight: 500,
              letterSpacing: "-0.028em",
              margin: "0 0 24px",
              color: "var(--ink-1)"
            }}>
              Contracts shouldn't be a <em>bottleneck</em> that slows down your growth.
            </h2>

            <p className="lede" style={{
              fontSize: "16.5px",
              color: "var(--ink-3)",
              lineHeight: 1.7,
              marginBottom: "36px",
              maxWidth: "520px"
            }}>
              The real friction isn't just rogue templates or legal risks: it is the broken process itself. When every agreement is dragged through exhausting email chains, manual PDF uploads, and fragmented chat threads, deal momentum dies and team energy is drained.
            </p>
            
            {/* Empathy Quote Card */}
            <div style={{
              background: "var(--bg-elevated)",
              border: "1px solid var(--line-strong)",
              borderRadius: "16px",
              padding: "24px 28px",
              marginBottom: "36px",
              position: "relative",
              boxShadow: "0 8px 24px rgba(0,0,0,0.02)"
            }}>
              {/* Quote Mark SVG Background */}
              <svg style={{ position: "absolute", top: 18, left: 18, opacity: 0.04, color: "var(--accent)", pointerEvents: "none" }} width="36" height="36" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
              </svg>
              
              <p style={{ fontSize: "14.5px", fontWeight: 500, color: "var(--ink-2)", lineHeight: 1.6, margin: 0, position: "relative", zIndex: 1 }}>
                "We were losing up to two weeks per deal just chasing signatures and approvals across Slack and inbox folders."
              </p>
              
              <div style={{ display: "flex", alignItems: "center", gap: "8px", marginTop: "12px", position: "relative", zIndex: 1 }}>
                <div style={{ width: "4px", height: "4px", borderRadius: "50%", background: "var(--ink-4)" }} />
                <span style={{ fontSize: "12px", fontWeight: 500, color: "var(--ink-4)" }}>
                  Common pain reported by 94% of legal teams before onboarding
                </span>
              </div>
            </div>
            

          </div>

          {/* Right Column: Static SVG visual */}
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div style={{
              width: "100%",
              maxWidth: "440px",
              height: "400px",
              background: `
                radial-gradient(circle at 20% 20%, rgba(123, 97, 255, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
                linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)
              `,
              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)",
              padding: "24px 32px 32px",
              display: "flex",
              flexDirection: "column",
              position: "relative",
              overflow: "hidden"
            }}>
              {/* Subtle static purple glow behind the final resolved stage */}
              <div style={{
                position: "absolute",
                bottom: "-10px",
                right: "-20px",
                width: "200px",
                height: "200px",
                background: "radial-gradient(circle, rgba(123,97,255,0.15) 0%, transparent 70%)",
                filter: "blur(20px)",
                zIndex: 2,
                pointerEvents: "none"
              }} />

              {/* Title Header */}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px", position: "relative", zIndex: 3 }}>
                <span style={{ fontSize: "10.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ink-3)" }}>Process Diagnostic</span>
                
                <div style={{ display: "flex", alignItems: "center" }}>
                  <span style={{
                    fontSize: "9px",
                    fontFamily: "var(--font-sans)",
                    fontWeight: 600,
                    color: "var(--accent)",
                    background: "var(--accent-soft)",
                    border: "1px solid rgba(110, 86, 207, 0.2)",
                    padding: "4px 10px",
                    borderRadius: "99px",
                    textTransform: "uppercase",
                    letterSpacing: "0.08em"
                  }}>
                    Diagnostic Complete
                  </span>
                </div>
              </div>

              {/* Static SVG flow diagram */}
              <div style={{ flex: 1, position: "relative", zIndex: 3, display: "flex", alignItems: "center" }}>
                <svg viewBox="0 0 380 290" style={{ width: "100%", height: "auto", overflow: "visible" }}>
                  {/* Drop shadow filter for cards */}
                  <defs>
                    <filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%">
                      <feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#0e0e10" floodOpacity="0.06" />
                    </filter>
                  </defs>

                  {/* Vertical Connection Lines */}
                  {/* Stage 1 to 2: Dashed Red Line */}
                  <line x1="53" y1="58" x2="53" y2="120" stroke="var(--ink-5)" strokeWidth="2" strokeDasharray="3 3" />
                  {/* Stage 2 to 3: Solid Purple Line */}
                  <line x1="53" y1="148" x2="53" y2="208" stroke="var(--accent)" strokeWidth="2.5" />
                  
                  {/* Arrowhead pointing to Stage 3 lightning bolt icon */}
                  <polygon points="50,208 56,208 53,214" fill="var(--accent)" />

                  {/* Card 1: Email Chaos */}
                  <g filter="url(#cardShadow)">
                    <rect x="16" y="4" width="348" height="66" rx="14" fill="#ffffff" stroke="var(--line-strong)" strokeWidth="1" />
                    {/* Icon container */}
                    <rect x="36" y="20" width="34" height="34" rx="10" fill="var(--bg-soft)" />
                    {/* Paper plane icon */}
                    <g transform="translate(45, 29)" stroke="var(--ink-3)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
                      <path d="m16 2-5.3 15-3-6.8-6.8-3Z" />
                      <line x1="16" y1="2" x2="7.7" y2="10.3" />
                    </g>
                    {/* Texts */}
                    <text x="82" y="38" fill="var(--ink-1)" fontSize="13px" fontWeight="600" fontFamily="var(--font-sans)">Email Chaos</text>
                    <text x="82" y="52" fill="var(--ink-3)" fontSize="11px" fontFamily="var(--font-sans)">"Where is the latest DPA version?"</text>
                    {/* Status Badge */}
                    <rect x="286" y="27" width="62" height="20" rx="4" fill="var(--bg-soft)" />
                    <text x="317" y="41" fill="var(--ink-3)" fontSize="9px" fontWeight="700" letterSpacing="0.08em" textAnchor="middle" fontFamily="var(--font-sans)">SLIPPING</text>
                  </g>

                  {/* Card 2: Slack Threads */}
                  <g filter="url(#cardShadow)">
                    <rect x="16" y="94" width="348" height="66" rx="14" fill="#ffffff" stroke="var(--line-strong)" strokeWidth="1" />
                    {/* Icon container */}
                    <rect x="36" y="110" width="34" height="34" rx="10" fill="var(--bg-soft)" />
                    {/* Chat icon */}
                    <g transform="translate(45, 119)" stroke="var(--ink-3)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
                      <path d="M16 11a2 2 0 0 1-2 2H5l-3 3V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                    </g>
                    {/* Texts */}
                    <text x="82" y="128" fill="var(--ink-1)" fontSize="13px" fontWeight="600" fontFamily="var(--font-sans)">Slack Threads</text>
                    <text x="82" y="142" fill="var(--ink-3)" fontSize="11px" fontFamily="var(--font-sans)">"Pinged finance, still waiting..."</text>
                    {/* Status Badge */}
                    <rect x="286" y="117" width="62" height="20" rx="4" fill="var(--bg-soft)" />
                    <text x="317" y="131" fill="var(--ink-3)" fontSize="9px" fontWeight="700" letterSpacing="0.08em" textAnchor="middle" fontFamily="var(--font-sans)">DELAYED</text>
                  </g>

                  {/* Card 3: ContractControl Flow */}
                  <g filter="url(#cardShadow)">
                    <rect x="16" y="184" width="348" height="66" rx="14" fill="#ffffff" stroke="rgba(123,97,255,0.4)" strokeWidth="1.5" />
                    {/* Icon container */}
                    <rect x="36" y="200" width="34" height="34" rx="10" fill="rgba(123,97,255,0.12)" />
                    {/* Lightning bolt icon */}
                    <g transform="translate(45, 209)" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
                      <polygon points="10 1 2 11 9 11 8 17 16 7 9 7 10 1" />
                    </g>
                    {/* Texts */}
                    <text x="82" y="218" fill="var(--ink-1)" fontSize="13px" fontWeight="600" fontFamily="var(--font-sans)">ContractControl Flow</text>
                    <text x="82" y="232" fill="var(--ink-3)" fontSize="11px" fontFamily="var(--font-sans)">Single workspace. Auto-tracking.</text>
                    {/* Status Badge */}
                    <rect x="286" y="207" width="62" height="20" rx="4" fill="rgba(123,97,255,0.12)" />
                    <text x="317" y="221" fill="var(--accent)" fontSize="9px" fontWeight="700" letterSpacing="0.08em" textAnchor="middle" fontFamily="var(--font-sans)">CONTROL</text>
                  </g>
                </svg>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

function StepCard({ step }) {
  const [isHovered, setIsHovered] = React.useState(false);
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        position: "relative",
        zIndex: 2
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Top Visual Box Container */}
      <div style={{
        position: "relative",
        width: "100%",
        height: "190px",
        background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)",
        border: "1px solid",
        borderColor: isHovered ? "rgba(123,97,255,0.25)" : "var(--line)",
        borderRadius: "20px",
        boxShadow: isHovered 
          ? "0 20px 40px rgba(123,97,255,0.08), 0 1px 3px rgba(123,97,255,0.04)" 
          : "0 4px 20px rgba(0,0,0,0.01), 0 10px 30px rgba(0,0,0,0.01)",
        transform: isHovered ? "translateY(-6px)" : "translateY(0)",
        transition: "all 400ms cubic-bezier(0.16, 1, 0.3, 1)",
        overflow: "hidden",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}>
        {/* Soft radial glow inside the box when hovered */}
        <div style={{
          position: "absolute",
          inset: 0,
          background: "radial-gradient(circle at center, rgba(123,97,255,0.04) 0%, transparent 80%)",
          opacity: isHovered ? 1 : 0,
          transition: "opacity 300ms ease",
          pointerEvents: "none"
        }} />
        
        {/* Render Step Mockup */}
        {step.mockup}
      </div>

      {/* Text Content below the box */}
      <div style={{ marginTop: "24px", padding: "0 4px" }}>
        {/* Step eyebrow/tag */}
        <div style={{
          fontSize: "11px",
          fontWeight: 700,
          color: "var(--accent)",
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          marginBottom: "8px",
          display: "flex",
          alignItems: "center",
          gap: "8px"
        }}>
          <span>{step.num}</span>
          <span style={{ opacity: 0.3 }}>·</span>
          <span>{step.tag}</span>
        </div>

        {/* Step Title */}
        <h3 style={{
          fontSize: "20px",
          fontWeight: 600,
          color: "var(--ink-1)",
          margin: "0 0 10px",
          fontFamily: "var(--font-sans)",
          lineHeight: 1.3
        }}>
          {step.title}
        </h3>

        {/* Step Description */}
        <p style={{
          fontSize: "15px",
          color: "var(--ink-3)",
          lineHeight: 1.6,
          margin: 0
        }}>
          {step.desc}
        </p>
      </div>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    {
      num: "01",
      tag: "ONBOARD",
      title: "Bulk upload & map",
      desc: "Bulk upload all your documents and contracts. Map metadata and contract types, then let ContractControl structure them for you.",
      mockup: (
        <div style={{
          position: "relative",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          overflow: "hidden"
        }}>
          {/* Stacked background documents */}
          <div style={{
            position: "absolute",
            width: "90px",
            height: "120px",
            background: "#FFFFFF",
            border: "1px solid var(--line)",
            borderRadius: "8px",
            transform: "rotate(-6deg) translate(-24px, 12px)",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            opacity: 0.6
          }} />
          
          <div style={{
            position: "absolute",
            width: "90px",
            height: "120px",
            background: "#FFFFFF",
            border: "1px solid var(--line)",
            borderRadius: "8px",
            transform: "rotate(4deg) translate(24px, 10px)",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            opacity: 0.6
          }} />

          {/* Main Upload Dropzone Area */}
          <div style={{
            position: "relative",
            width: "110px",
            height: "130px",
            background: "#FFFFFF",
            border: "1.5px dashed var(--accent)",
            borderRadius: "12px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            boxShadow: "0 10px 25px rgba(110, 86, 207, 0.05)",
            zIndex: 2,
            padding: "12px"
          }}>
            {/* Upload Icon */}
            <div style={{
              width: "36px",
              height: "36px",
              borderRadius: "50%",
              background: "var(--accent-soft)",
              color: "var(--accent)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom: "10px"
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="17 8 12 3 7 8" />
                <line x1="12" y1="3" x2="12" y2="15" />
              </svg>
            </div>
            
            <span style={{ fontSize: "10px", fontWeight: 600, color: "var(--ink-2)", textAlign: "center" }}>Drag & Drop</span>
            <span style={{ fontSize: "8px", color: "var(--ink-4)", marginTop: "2px", textAlign: "center" }}>PDF, Word (.docx)</span>
          </div>
        </div>
      )
    },
    {
      num: "02",
      tag: "CONFIG",
      title: "Define your approval rules",
      desc: "Set up pre-approved templates and routing rules. Mapped to your legal terms once, then stored securely.",
      mockup: (
        <div style={{
          position: "relative",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          overflow: "hidden",
          padding: "12px"
        }}>
          {/* Playbook Card */}
          <div style={{
            width: "160px",
            background: "#FFFFFF",
            border: "1px solid var(--line-strong)",
            borderRadius: "12px",
            boxShadow: "0 10px 25px rgba(0,0,0,0.03)",
            display: "flex",
            flexDirection: "column",
            padding: "12px"
          }}>
            {/* Title */}
            <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px", paddingBottom: "6px", borderBottom: "1px solid var(--line)" }}>
              <div style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--accent)" }} />
              <span style={{ fontSize: "10px", fontWeight: 600, color: "var(--ink-1)", textTransform: "uppercase", letterSpacing: "0.02em" }}>Approval Rules</span>
            </div>
            
            {/* Rule 1 */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px", background: "var(--bg-soft)", padding: "5px 8px", borderRadius: "6px" }}>
              <span style={{ fontSize: "9px", color: "var(--ink-2)" }}>If Value &gt; €50k</span>
              <span style={{ fontSize: "8px", fontWeight: 700, color: "var(--accent)", background: "var(--accent-soft)", padding: "2px 5px", borderRadius: "3px" }}>CFO SIGN</span>
            </div>

            {/* Rule 2 */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--bg-soft)", padding: "5px 8px", borderRadius: "6px" }}>
              <span style={{ fontSize: "9px", color: "var(--ink-2)" }}>Governing Law</span>
              <span style={{ fontSize: "8px", fontWeight: 700, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "2px 5px", borderRadius: "3px" }}>SWEDEN ✓</span>
            </div>
          </div>
        </div>
      )
    },
    {
      num: "03",
      tag: "SELF-SERVICE",
      title: "Empower your team",
      desc: "Let business teams self-serve compliant drafts in seconds via 30-second forms. No legal back-and-forth.",
      mockup: (
        <div style={{
          position: "relative",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          overflow: "hidden",
          padding: "12px"
        }}>
          {/* Form Card */}
          <div style={{
            width: "160px",
            background: "#FFFFFF",
            border: "1px solid var(--line-strong)",
            borderRadius: "12px",
            boxShadow: "0 10px 25px rgba(0,0,0,0.03)",
            display: "flex",
            flexDirection: "column",
            padding: "12px"
          }}>
            {/* Form Field 1 */}
            <div style={{ marginBottom: "6px" }}>
              <div style={{ fontSize: "8px", fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", marginBottom: "2px" }}>Counterparty</div>
              <div style={{
                fontSize: "9.5px",
                color: "var(--ink-1)",
                padding: "5px 7px",
                background: "var(--bg-soft)",
                border: "1px solid var(--line)",
                borderRadius: "5px",
                fontWeight: 500
              }}>
                Velora AB
              </div>
            </div>

            {/* Form Field 2 */}
            <div style={{ marginBottom: "8px" }}>
              <div style={{ fontSize: "8px", fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", marginBottom: "2px" }}>Contract Value</div>
              <div style={{
                fontSize: "9.5px",
                color: "var(--ink-1)",
                padding: "5px 7px",
                background: "var(--bg-soft)",
                border: "1px solid var(--line)",
                borderRadius: "5px",
                fontWeight: 500
              }}>
                €84,000
              </div>
            </div>

            {/* CTA Button */}
            <div style={{
              width: "100%",
              padding: "5px 0",
              background: "var(--accent)",
              color: "#FFFFFF",
              fontSize: "9px",
              fontWeight: 600,
              textAlign: "center",
              borderRadius: "5px",
              boxShadow: "0 4px 10px rgba(110, 86, 207, 0.25)"
            }}>
              Generate NDA
            </div>
          </div>
        </div>
      )
    },
    {
      num: "04",
      tag: "AUTOPILOT",
      title: "Automate the rest",
      desc: "Route approvals, sign securely, and let ContractControl track renewals and post-sign obligations automatically.",
      mockup: (
        <div style={{
          position: "relative",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          overflow: "hidden",
          padding: "12px"
        }}>
          {/* Stacked alerts & indicators */}
          <div style={{
            position: "absolute",
            top: "14px",
            left: "14px",
            background: "rgba(255, 255, 255, 0.9)",
            border: "1px solid var(--line)",
            borderRadius: "6px",
            padding: "4px 8px",
            boxShadow: "0 6px 15px rgba(0,0,0,0.03)",
            display: "flex",
            alignItems: "center",
            gap: "5px",
            transform: "rotate(-4deg)",
            zIndex: 1
          }}>
            <div style={{ width: "4px", height: "4px", borderRadius: "50%", background: "#10B981" }} />
            <span style={{ fontSize: "8.5px", fontWeight: 600, color: "#166534" }}>Renewal: 47d left</span>
          </div>

          {/* Signature Card */}
          <div style={{
            width: "150px",
            background: "#FFFFFF",
            border: "1px solid var(--line-strong)",
            borderRadius: "12px",
            boxShadow: "0 10px 25px rgba(0,0,0,0.03)",
            display: "flex",
            flexDirection: "column",
            padding: "12px",
            transform: "translateY(10px) rotate(2deg)",
            zIndex: 2
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }}>
              <span style={{ fontSize: "8px", fontWeight: 600, color: "var(--ink-4)" }}>SIGNATURE LINE</span>
              <span style={{ fontSize: "7.5px", fontWeight: 700, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "1px 4px", borderRadius: "3px" }}>COMPLETED</span>
            </div>
            
            {/* Cursive trace */}
            <div style={{ height: "20px", position: "relative", display: "flex", alignItems: "center", paddingLeft: "6px", borderBottom: "1px solid var(--line)" }}>
              <span style={{ fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: "12px", color: "var(--accent)", letterSpacing: "1px" }}>John Doe</span>
            </div>
          </div>
        </div>
      )
    }
  ];

  return (
    <section className="section" style={{ background: "var(--bg)", position: "relative", overflow: "hidden", padding: "120px 0" }}>
      {/* Decorative ambient background glows */}
      <div style={{
        position: "absolute",
        top: "30%",
        left: "50%",
        transform: "translateX(-50%)",
        width: "70%",
        height: "40%",
        background: "radial-gradient(circle, rgba(123,97,255,0.03) 0%, rgba(123,97,255,0) 70%)",
        filter: "blur(60px)",
        pointerEvents: "none"
      }} />

      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 900, margin: "0 auto 64px" }}>
          <span className="eyebrow">Onboarding path</span>
          <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(32px, 3.6vw, 44px)", lineHeight: 1.15 }}>
            Connect workflows, rules, and systems into one <em>structured contract environment</em>
          </h2>
          <div style={{ marginTop: 24 }}>
            <p className="lede" style={{ margin: "0 auto", textAlign: "center", fontSize: "16px", color: "var(--ink-3)", maxWidth: "680px", lineHeight: 1.6 }}>
              Eliminate manual coordination by guiding contracts through structured workflows from intake to obligations. Reduce administrative work and accelerate agreement cycles in four simple steps:
            </p>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr 1fr",
          gap: "32px",
          position: "relative"
        }} className="mob-stack">
          
          {/* Timeline connecting lines for desktop */}
          <div className="mob-hide" style={{
            position: "absolute",
            top: "95px",
            left: "12.5%",
            right: "12.5%",
            height: "1px",
            background: "linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent)",
            zIndex: 1
          }} />

          {steps.map((s) => (
            <StepCard key={s.num} step={s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyContractControl() {
  const pains = [
    "Contracts spread across folders, tools, and inboxes create visibility and control gaps.",
    "Manual routines increase the risk of missed deadlines and overlooked obligations.",
    "Searching large archives is slow and unreliable, especially across multiple systems.",
    "Access control becomes difficult as teams grow and responsibilities change.",
    "Security measures vary, increasing risk in regulated environments."
  ];
  const gains = [
    "A centralised contract repository with clear structure and role-based access.",
    "Reliable visibility into active, upcoming, and at-risk contracts, long after signing.",
    "Search and automation that stay fast and dependable, even across thousands of contracts.",
    "Support for compliant workflows, including EU eIDAS-aligned e-signatures and integrations.",
    "EU-hosted infrastructure with GDPR-compliant data handling and full audit trails built in."
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 56px" }}>
          <h2 className="h-section">Why ContractControl?</h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            A better way to manage contracts long-term.
          </p>
        </div>
        <div className="grid grid-2 mob-stack" style={{ gap: 24 }}>
          {/* Traditional */}
          <div className="card" style={{ padding: "36px 32px", textAlign: "center" }}>
            <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 20, letterSpacing: "-0.015em", margin: "0 0 6px", color: "var(--ink-1)" }}>Traditional contract management</h3>
            <p style={{ fontSize: 13.5, color: "var(--ink-4)", margin: "0 0 28px" }}>Document-centric. Fragmented. Hard to scale.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 0, textAlign: "left" }}>
              {pains.map((p, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
                  <span style={{ flex: "0 0 22px", height: 22, borderRadius: "50%", background: "var(--bg-soft)", display: "grid", placeItems: "center", marginTop: 1, color: "var(--ink-5)" }}>
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                  </span>
                  <span style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55 }}>{p}</span>
                </div>
              ))}
            </div>
          </div>
          {/* ContractControl */}
          <div style={{ padding: "36px 32px", textAlign: "center", background: "var(--bg-elevated)", border: "2px solid var(--accent)", borderRadius: 16 }}>
            <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 20, letterSpacing: "-0.015em", margin: "0 0 6px", color: "var(--accent)" }}>Contract management with ContractControl</h3>
            <p style={{ fontSize: 13.5, color: "var(--ink-4)", margin: "0 0 28px", fontWeight: 500 }}>Built for large contract volumes, regulation, and lasting control.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 0, textAlign: "left" }}>
              {gains.map((g, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
                  <span style={{ flex: "0 0 22px", height: 22, borderRadius: "50%", background: "var(--accent)", display: "grid", placeItems: "center", marginTop: 1 }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>
                  </span>
                  <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{g}</span>
                </div>
              ))}
            </div>
            <a className="btn btn-accent btn-lg" href="/book-demo" style={{ marginTop: 32, display: "inline-flex", alignItems: "center", gap: 8 }}>Book demo <Icon name="arrow" size={14} /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stakes() {
  const stakes = [
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </svg>
      ),
      stat: "60%",
      label: "of auto-renewals are missed",
      desc: "Contracts silently renew at worse terms because no one tracked the opt-out window. By the time finance notices, the commitment is locked for another year."
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
          <line x1="12" y1="9" x2="12" y2="13" />
          <line x1="12" y1="17" x2="12.01" y2="17" />
        </svg>
      ),
      stat: "9.2%",
      label: "average revenue leakage",
      desc: "Untracked obligations, forgotten price uplifts, and missed milestones quietly erode margin. The gap between what's agreed and what's invoiced grows every quarter."
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <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" />
          <line x1="12" y1="18" x2="12" y2="12" />
          <line x1="9" y1="15" x2="15" y2="15" />
        </svg>
      ),
      stat: "3-5 weeks",
      label: "lost per audit request",
      desc: "When regulators ask for a contract trail, teams scramble across inboxes, shared drives, and old systems. The cost isn't the fine. It's the weeks of senior time burned reconstructing what should already be structured."
    }
  ];

  return (
    <section data-dark style={{
      background: "linear-gradient(160deg, #1A1625 0%, #0F0E14 50%, #13111C 100%)",
      padding: "96px 0",
      position: "relative",
      overflow: "hidden"
    }}>
      {/* Subtle grid pattern */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.12, pointerEvents: "none" }} preserveAspectRatio="none">
        <defs><pattern id="stakes-grid" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse"><path d="M 48 0 L 0 0 0 48" fill="none" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/></pattern></defs>
        <rect width="100%" height="100%" fill="url(#stakes-grid)" />
      </svg>
      {/* Ambient glow */}
      <div style={{ position: "absolute", top: -100, right: -100, width: 500, height: 500, background: "radial-gradient(circle, rgba(180,35,24,0.12) 0%, transparent 70%)", pointerEvents: "none" }} />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 700, margin: "0 auto 64px" }}>
          <span style={{
            fontSize: 10.5, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase",
            color: "var(--danger)", display: "inline-flex", alignItems: "center", gap: 8
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
            The cost of inaction
          </span>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(28px, 3.5vw, 42px)",
            letterSpacing: "-0.025em", lineHeight: 1.15, margin: "20px 0 16px", color: "#fff"
          }}>
            Every month without structure, <br/>
            <span style={{ color: "rgba(255,255,255,0.4)" }}>contracts quietly cost you more.</span>
          </h2>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,0.5)", lineHeight: 1.6, margin: 0 }}>
            The risk isn't a single missed contract. It's the slow, invisible accumulation of untracked commitments, expired terms, and compliance gaps across your entire portfolio.
          </p>
        </div>

        <div className="grid grid-3 mob-stack" style={{ gap: 20 }}>
          {stakes.map((s, i) => (
            <div key={i} style={{
              background: "rgba(255,255,255,0.03)",
              border: "1px solid rgba(255,255,255,0.08)",
              borderRadius: 16,
              padding: "32px 28px",
              transition: "border-color 200ms ease, background 200ms ease"
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(180,35,24,0.3)"; e.currentTarget.style.background = "rgba(180,35,24,0.04)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)"; e.currentTarget.style.background = "rgba(255,255,255,0.03)"; }}
            >
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: "rgba(180,35,24,0.1)", color: "var(--danger)",
                display: "grid", placeItems: "center", marginBottom: 20
              }}>
                {s.icon}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }}>
                <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 36, fontWeight: 400, color: "#fff", lineHeight: 1 }}>{s.stat}</span>
                <span style={{ fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.5)" }}>{s.label}</span>
              </div>
              <p style={{ fontSize: 14, color: "rgba(255,255,255,0.45)", lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a className="btn btn-accent btn-lg" href="/book-demo" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            Book demo <Icon name="arrow" size={14} />
          </a>
          <p style={{ fontSize: 13, color: "rgba(255,255,255,0.35)", marginTop: 12 }}>
            See how ContractControl eliminates these risks in 30 minutes.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroCinematic, LogoStrip, Metrics, BeforeAfter, Lifecycle, IntakeFeature, Comparison, Testimonial, FinalCTA, EmpathyBanner, HowItWorks, WhyContractControl, Stakes });