// Resource pages: Blog, Guides, Webinars, ROI Calculator, Templates,
// RFP Toolkit, Glossary, Changelog, Help Center, Developers
// Sana × Linear style, light, editorial, intentional whitespace.

// ---------- shared bits ----------
function ResourceHero({ eyebrow, title, lede, kicker }) {
  return (
    <section className="hero" style={{ padding: "112px 0 56px", textAlign: "center" }}>
      <div className="container" style={{ maxWidth: 880, position: "relative" }}>
        <span className="eyebrow fade-up">{eyebrow}</span>
        <h1 className="display fade-up" style={{ marginTop: 18, fontSize: "clamp(40px, 5.4vw, 72px)", animationDelay: "0.05s" }}>
          {title}
        </h1>
        <p className="lede fade-up" style={{ marginTop: 20, animationDelay: "0.1s", maxWidth: 660, marginInline: "auto" }}>
          {lede}
        </p>
        {kicker && (
          <div className="fade-up" style={{ marginTop: 22, animationDelay: "0.15s", color: "var(--ink-3)", fontSize: 13, letterSpacing: "0.04em", textTransform: "uppercase" }}>
            {kicker}
          </div>
        )}
      </div>
    </section>
  );
}

function FilterChips({ items, active, onPick }) {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center", marginTop: 8, marginBottom: 56 }}>
      {items.map((it) => (
        <button
          key={it}
          onClick={() => onPick(it)}
          className="chip"
          style={{
            padding: "8px 14px",
            borderRadius: 999,
            border: "1px solid var(--line)",
            background: active === it ? "var(--ink-1)" : "white",
            color: active === it ? "white" : "var(--ink-2)",
            fontSize: 13,
            fontWeight: 500,
            cursor: "pointer",
            transition: "all 0.15s",
          }}>
          {it}
        </button>
      ))}
    </div>
  );
}

// ====================================================================
// BLOG
// ====================================================================
function BlogPage() {
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "" });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email) {
      setSubmitting(true);
      const portalId = "144265445";
      const formGuid = "040963f9-9eef-445d-966c-c8e8078d4130";
      const submitUrl = `https://api-eu1.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`;

      const hutkMatch = document.cookie.match(/(?:^|; )hubspotutk=([^;]*)/);
      const hutk = hutkMatch ? hutkMatch[1] : undefined;

      const payload = {
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email }
        ],
        context: {
          hutk: hutk,
          pageUri: window.location.href,
          pageName: document.title
        }
      };

      fetch(submitUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
      })
      .then(() => {
        setSubmitting(false);
        setSubmitted(true);
      })
      .catch((err) => {
        console.error("HubSpot Submission Error:", err);
        setSubmitting(false);
        // Fail-safe success
        setSubmitted(true);
      });
    }
  };

  const BlogThumbSimpleSign = () => (
    <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style={{ display: "block", width: "100%", height: "auto" }}>
      <defs>
        <linearGradient id="tBg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#F8F6FC" />
          <stop offset="100%" stopColor="#EDE8F5" />
        </linearGradient>
        <linearGradient id="tAcc" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#7B61FF" />
          <stop offset="100%" stopColor="#9B81F5" />
        </linearGradient>
      </defs>
      <rect width="400" height="200" fill="url(#tBg)" />
      <ellipse cx="200" cy="100" rx="120" ry="70" fill="rgba(110,86,207,0.08)" />
      <rect x="30" y="60" width="120" height="80" rx="10" fill="white" stroke="rgba(110,86,207,0.15)" strokeWidth="1" />
      <text x="90" y="93" textAnchor="middle" fill="rgba(0,0,0,0.35)" fontFamily="system-ui,sans-serif" fontSize="7" letterSpacing="1">BEFORE</text>
      <text x="90" y="108" textAnchor="middle" fill="var(--ink-1, #1a1a2e)" fontFamily="system-ui,sans-serif" fontSize="13" fontWeight="600">SimpleSign</text>
      <text x="90" y="122" textAnchor="middle" fill="rgba(0,0,0,0.4)" fontFamily="system-ui,sans-serif" fontSize="8">eSignature only</text>
      <line x1="158" y1="100" x2="228" y2="100" stroke="url(#tAcc)" strokeWidth="1.5" strokeDasharray="4 3" />
      <polygon points="228,96 236,100 228,104" fill="#9B81F5" />
      <rect x="250" y="44" width="120" height="112" rx="10" fill="rgba(110,86,207,0.08)" stroke="rgba(110,86,207,0.3)" strokeWidth="1" />
      <text x="310" y="77" textAnchor="middle" fill="#7B61FF" fontFamily="system-ui,sans-serif" fontSize="7" letterSpacing="1">NOW</text>
      <text x="310" y="92" textAnchor="middle" fill="var(--ink-1, #1a1a2e)" fontFamily="system-ui,sans-serif" fontSize="11" fontWeight="600">ContractControl</text>
      <text x="310" y="107" textAnchor="middle" fill="rgba(0,0,0,0.45)" fontFamily="system-ui,sans-serif" fontSize="7">Full contract lifecycle</text>
      <text x="310" y="125" textAnchor="middle" fill="rgba(0,0,0,0.3)" fontFamily="system-ui,sans-serif" fontSize="7">Intake · Drafting · Review</text>
      <text x="310" y="137" textAnchor="middle" fill="rgba(0,0,0,0.3)" fontFamily="system-ui,sans-serif" fontSize="7">Signature · Repository · Obligations</text>
    </svg>
  );

  const posts = [
    {
      cat: "From the team",
      date: "May 2026",
      read: "5 min",
      title: "From SimpleSign to ContractControl: Why We're Expanding",
      blurb: "Why we are expanding our product suite, how ContractControl manages the full contract lifecycle, and how SimpleSign remains our powerful, dedicated eSignature solution.",
      href: "/blog/from-simplesign-to-contractcontrol",
      Thumb: BlogThumbSimpleSign,
      author: { name: "Johan Montelius Hedberg", photo: "/images/team/johan-hedberg.png" },
    },
    // Coming soon, two more posts will appear here
  ];

  const ComingSoonCard = () => (
    <div className="card" style={{ padding: 28, borderRadius: 18, display: "flex", flexDirection: "column", gap: 14, minHeight: 220, opacity: 0.45, border: "1.5px dashed var(--line)", background: "transparent", boxShadow: "none" }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <span style={{ fontSize: 13, color: "var(--ink-3)" }}>Coming soon</span>
      </div>
    </div>
  );

  return (
    <div>
      <ResourceHero
        eyebrow="From the team"
        title={<>The ContractControl blog.</>}
        lede="Product thinking, company news, and field notes from building a modern contract platform."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 28 }}>
            {posts.map((p, i) => (
              <a key={i} href={p.href} className="card" style={{
                padding: 0, borderRadius: 18, textDecoration: "none", color: "inherit",
                display: "flex", flexDirection: "column", overflow: "hidden", minHeight: 260
              }}>
                {p.Thumb && <div style={{ overflow: "hidden", borderBottom: "1px solid var(--line)" }}><p.Thumb /></div>}
                <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 12, color: "var(--ink-3)" }}>
                    <span className="badge">{p.cat}</span>
                    <span>{p.read}</span>
                  </div>
                  <h3 style={{ fontSize: 20, lineHeight: 1.25, margin: 0, fontWeight: 500, letterSpacing: "-0.005em" }}>
                    {p.title}
                  </h3>
                  <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55, margin: 0, flex: 1 }}>{p.blurb}</p>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                    {p.author ? (
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <img src={p.author.photo} alt={p.author.name} style={{ width: 28, height: 28, borderRadius: "50%", objectFit: "cover" }} />
                        <span style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>{p.author.name}</span>
                      </div>
                    ) : <div />}
                    <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{p.date}</span>
                  </div>
                </div>
              </a>
            ))}
            <ComingSoonCard />
            <ComingSoonCard />
          </div>

          <div style={{ marginTop: 56, padding: "32px 40px", background: "var(--bg-soft)", borderRadius: 16, border: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>More on the way</div>
              <div style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 4 }}>We'll be writing about product, customers, and how we think about CLM. Subscribe to stay in the loop.</div>
            </div>
            {submitted ? (
              <div style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--accent-soft)", padding: "12px 24px", borderRadius: 10, border: "1px solid rgba(110,86,207,0.2)" }}>
                <span style={{ color: "var(--accent)", display: "grid", placeItems: "center" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                </span>
                <span style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-1)" }}>
                  Thanks for subscribing, {form.firstName}!
                </span>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
                <input
                  type="text" required placeholder="First name"
                  value={form.firstName} onChange={set("firstName")}
                  style={{
                    padding: "11px 16px", borderRadius: 10, border: "1px solid var(--line)", minWidth: 120, fontSize: 14, fontFamily: "inherit", background: "var(--bg)", color: "var(--ink-1)", outline: "none"
                  }}
                />
                <input
                  type="text" required placeholder="Last name"
                  value={form.lastName} onChange={set("lastName")}
                  style={{
                    padding: "11px 16px", borderRadius: 10, border: "1px solid var(--line)", minWidth: 120, fontSize: 14, fontFamily: "inherit", background: "var(--bg)", color: "var(--ink-1)", outline: "none"
                  }}
                />
                <input
                  type="email" required placeholder="you@company.com"
                  value={form.email} onChange={set("email")}
                  style={{
                    padding: "11px 16px", borderRadius: 10, border: "1px solid var(--line)", minWidth: 180, fontSize: 14, fontFamily: "inherit", background: "var(--bg)", color: "var(--ink-1)", outline: "none"
                  }}
                />
                <button className="btn btn-primary" type="submit" disabled={submitting} style={{ display: "flex", alignItems: "center", justifyContent: "center", minWidth: 110 }}>
                  {submitting ? (
                    <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <span className="spinner" style={{ width: 12, height: 12, border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "white", borderRadius: "50%", display: "inline-block" }}></span>
                      Subscribing
                    </span>
                  ) : "Subscribe"}
                </button>
              </form>
            )}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// BLOG POST, From SimpleSign to ContractControl
// ====================================================================
// ---------- Blog TOC (sticky left sidebar) ----------
function BlogTOC() {
  const tocItems = [
    { id: "two-brands", label: "Why two brands" },
    { id: "clm-suite", label: "The full CLM suite" },
    { id: "trust", label: "Trust and focus" },
    { id: "existing-customers", label: "Existing customers" },
  ];
  const [active, setActive] = React.useState(null);

  React.useEffect(() => {
    const headings = tocItems.map(t => document.getElementById(t.id)).filter(Boolean);
    if (!headings.length) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-80px 0px -60% 0px", threshold: 0 });
    headings.forEach(h => obs.observe(h));
    return () => obs.disconnect();
  }, []);

  return (
    <nav className="blog-toc" style={{ position: "sticky", top: 100, alignSelf: "start" }}>
      <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 14 }}>On this page</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2, borderLeft: "1px solid var(--line)", paddingLeft: 0 }}>
        {tocItems.map(t => (
          <a
            key={t.id}
            href={"#" + t.id}
            onClick={(e) => {
              e.preventDefault();
              const el = document.getElementById(t.id);
              if (el) {
                const y = el.getBoundingClientRect().top + window.scrollY - 90;
                window.scrollTo({ top: y, behavior: "smooth" });
              }
            }}
            style={{
              display: "block",
              padding: "6px 0 6px 16px",
              fontSize: 13,
              fontWeight: active === t.id ? 500 : 400,
              color: active === t.id ? "var(--accent)" : "var(--ink-3)",
              textDecoration: "none",
              borderLeft: active === t.id ? "2px solid var(--accent)" : "2px solid transparent",
              marginLeft: -1,
              transition: "color 150ms ease, border-color 150ms ease",
              lineHeight: 1.4,
            }}
          >
            {t.label}
          </a>
        ))}
      </div>
    </nav>
  );
}

function BlogPostSimpleSignPage() {
  const prose = {
    fontSize: 17, lineHeight: 1.75, color: "var(--ink-2)", margin: "0 0 28px"
  };
  const h2Style = {
    fontSize: "clamp(22px, 2.8vw, 30px)", fontWeight: 500, letterSpacing: "-0.02em",
    margin: "56px 0 20px", color: "var(--ink-1)", lineHeight: 1.2
  };
  const pullQuote = {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: "clamp(22px, 2.8vw, 30px)", lineHeight: 1.3, color: "var(--ink-1)",
    borderLeft: "3px solid var(--accent)", paddingLeft: 28, margin: "40px 0"
  };

  return (
    <div>
      {/* Back link */}
      <div style={{ padding: "24px 0 0" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <a href="/blog" style={{ fontSize: 13, color: "var(--ink-3)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
            Blog
          </a>
        </div>
      </div>

      {/* Header */}
      <section style={{ padding: "48px 0 56px" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 24 }}>
            <span className="badge">From the team</span>
            <span style={{ fontSize: 13, color: "var(--ink-3)" }}>5 min read · May 2026</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "clamp(32px, 5vw, 54px)", lineHeight: 1.08, letterSpacing: "-0.035em", margin: "0 0 32px", color: "var(--ink-1)" }}>
            Why We're Expanding: From SimpleSign to ContractControl
          </h1>
          <p style={{ fontSize: 19, color: "var(--ink-2)", lineHeight: 1.6, margin: 0 }}>
            Why we are expanding our product suite, how ContractControl manages the full contract lifecycle, and why SimpleSign remains our powerful, dedicated eSignature solution.
          </p>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14 }}>
            <img src="/images/team/johan-hedberg.png" alt="Johan Montelius Hedberg"
              style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>Johan Montelius Hedberg</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Published May 2026</div>
            </div>
          </div>
        </div>
      </section>

      {/* Cover graphic */}
      <section style={{ paddingBottom: 64 }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <div style={{ borderRadius: 20, overflow: "hidden", border: "1px solid var(--line)" }}>
            <svg viewBox="0 0 760 380" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Diagram showing the evolution of the SimpleSign company into two dedicated brands: SimpleSign for best-in-class eSignature and ContractControl for best-in-class CLM with eSignature as a built-in feature." style={{ display: "block", width: "100%", height: "auto" }}>
              <defs>
                <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="oklch(18% 0.06 295)" />
                  <stop offset="100%" stopColor="oklch(12% 0.04 295)" />
                </linearGradient>
                <linearGradient id="accentGrad" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="#7B61FF" />
                  <stop offset="100%" stopColor="#9B81F5" />
                </linearGradient>
                <linearGradient id="ssGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(255,255,255,0.08)" />
                  <stop offset="100%" stopColor="rgba(255,255,255,0.02)" />
                </linearGradient>
                <linearGradient id="ccGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(110,86,207,0.18)" />
                  <stop offset="100%" stopColor="rgba(110,86,207,0.04)" />
                </linearGradient>
              </defs>
              
              {/* Background */}
              <rect width="760" height="380" fill="url(#bgGrad)" />
              
              {/* Grid */}
              {[...Array(9)].map((_, i) => <line key={`v${i}`} x1={i * 95} y1="0" x2={i * 95} y2="380" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />)}
              {[...Array(5)].map((_, i) => <line key={`h${i}`} x1="0" y1={i * 95} x2="760" y2={i * 95} stroke="rgba(255,255,255,0.04)" strokeWidth="1" />)}
              
              {/* Glow orbs */}
              <ellipse cx="380" cy="190" rx="250" ry="130" fill="rgba(110,86,207,0.12)" />
              
              {/* Flow Connectors from Shared Foundation */}
              <path d="M 210 270 L 210 245" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="2" strokeDasharray="3 3" />
              <polygon points="210,240 206,247 214,247" fill="rgba(255,255,255,0.3)" />
              
              <path d="M 550 270 L 550 245" fill="none" stroke="url(#accentGrad)" strokeWidth="2" strokeDasharray="3 3" />
              <polygon points="550,240 546,247 554,247" fill="#9B81F5" />
              
              {/* Cross-integration arrow: SimpleSign powers ContractControl */}
              <path d="M 350 145 C 385 145 385 145 410 145" fill="none" stroke="url(#accentGrad)" strokeWidth="2" />
              <polygon points="414,145 406,141 406,149" fill="#9B81F5" />
              <text x="380" y="135" textAnchor="middle" fill="rgba(155,129,245,0.8)" fontFamily="system-ui,sans-serif" fontSize="9" fontWeight="600" letterSpacing="0.5">BUILT-IN FEATURE</text>
              
              {/* Left Pillar: SimpleSign */}
              <rect x="80" y="45" width="260" height="190" rx="16" fill="url(#ssGrad)" stroke="rgba(255,255,255,0.1)" strokeWidth="1.2" />
              <rect x="95" y="60" width="130" height="20" rx="10" fill="rgba(255,255,255,0.06)" />
              <text x="105" y="73" fill="rgba(255,255,255,0.6)" fontFamily="system-ui,sans-serif" fontSize="9" fontWeight="700" letterSpacing="0.8">BEST IN CLASS ESIGNATURE</text>
              <text x="95" y="108" fill="#FFFFFF" fontFamily="system-ui,sans-serif" fontSize="22" fontWeight="700" letterSpacing="-0.5">SimpleSign</text>
              <text x="95" y="130" fill="rgba(255,255,255,0.5)" fontFamily="system-ui,sans-serif" fontSize="12" fontWeight="500">Pure, frictionless signing</text>
              
              <line x1="95" y1="148" x2="325" y2="148" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
              
              <g transform="translate(95, 160)" fill="rgba(255,255,255,0.65)" fontFamily="system-ui,sans-serif" fontSize="11" fontWeight="500">
                <text x="0" y="15">✦ Deep Nordic eID integrations</text>
                <text x="0" y="32">✦ High-volume signature flows</text>
                <text x="0" y="49">✦ Standalone, focused simplicity</text>
              </g>

              {/* Right Pillar: ContractControl */}
              <rect x="420" y="45" width="260" height="190" rx="16" fill="url(#ccGrad)" stroke="rgba(110,86,207,0.4)" strokeWidth="1.5" />
              <rect x="435" y="60" width="130" height="20" rx="10" fill="rgba(110,86,207,0.2)" />
              <text x="445" y="73" fill="#9B81F5" fontFamily="system-ui,sans-serif" fontSize="9" fontWeight="700" letterSpacing="0.8">BEST IN CLASS CLM</text>
              <text x="435" y="108" fill="#FFFFFF" fontFamily="system-ui,sans-serif" fontSize="22" fontWeight="700" letterSpacing="-0.5">ContractControl</text>
              <text x="435" y="130" fill="rgba(255,255,255,0.7)" fontFamily="system-ui,sans-serif" fontSize="12" fontWeight="500">Complete contract lifecycle</text>
              
              <line x1="435" y1="148" x2="665" y2="148" stroke="rgba(110,86,207,0.2)" strokeWidth="1" />
              
              <g transform="translate(435, 160)" fill="rgba(255,255,255,0.75)" fontFamily="system-ui,sans-serif" fontSize="11" fontWeight="500">
                <text x="0" y="15">✦ 8+ years of co-creation</text>
                <text x="0" y="32">✦ Intake, drafting, review & repository</text>
                <text x="0" y="49">✦ SimpleSign built-in as a feature</text>
              </g>

              {/* Shared Foundation (Bottom box) */}
              <rect x="80" y="270" width="600" height="75" rx="16" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1.2" />
              <text x="380" y="293" textAnchor="middle" fill="#9B81F5" fontFamily="system-ui,sans-serif" fontSize="10" fontWeight="700" letterSpacing="2">THE SIMPLESIGN COMPANY FOUNDATION</text>
              <text x="380" y="312" textAnchor="middle" fill="#FFFFFF" fontFamily="system-ui,sans-serif" fontSize="14" fontWeight="600" letterSpacing="-0.1">MVP 2011 · Launched 2012 · Dedicated Entity 2014</text>
              <text x="380" y="330" textAnchor="middle" fill="rgba(255,255,255,0.45)" fontFamily="system-ui,sans-serif" fontSize="11">One company, 15 years of Nordic trust, two focused brands</text>
            </svg>
          </div>
        </div>
      </section>

      {/* Article body */}
      <section style={{ paddingBottom: 96 }}>
        <div className="container" style={{ maxWidth: 1080 }}>
          <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 64 }}>

            {/* Sticky Table of Contents sidebar */}
            <BlogTOC />

            {/* Article content */}
            <div style={{ maxWidth: 760 }}>

          <p style={prose}>
            SimpleSign (both our company and our eSignature platform) was one of the first innovators in the Nordics within the eSignature space. We developed our first MVP in 2011, launched the platform in 2012, and established SimpleSign as its own entity in 2014. Over the last 15 years, we have built deep trust and history within our space, serving thousands of Nordic teams who require secure, compliant, and legally binding agreements.
          </p>
          <p style={prose}>
            SimpleSign developed into a best in class solution for eSignatures, renowned for its deep integrations with Nordic eIDs and its fast, frictionless signing experience. That dedication and core signing capability remain stronger than ever.
          </p>

          <blockquote style={pullQuote}>
            "We are the same company you have trusted for 15 years, now offering two dedicated brands to give your team clear focus and flexibility."
          </blockquote>

          <h2 id="two-brands" style={h2Style}>Why we evolved into two dedicated brands</h2>
          <p style={prose}>
            As our customers grew, their operational requirements matured. We observed that signing was rarely where the contract process slowed down. Instead, the real friction happened before and after the signature: gathering intake details in chat tools, collaborating on drafts over email, chasing internal approvals, and manually tracking obligations.
          </p>
          <p style={prose}>
            We built ContractControl to solve these front-to-back bottlenecks. The platform isn't a brand new codebase; we have been co-creating and refining it alongside our core customers for over eight years.
          </p>
          <p style={prose}>
            To serve both simple and complex requirements with absolute precision, our company evolved to support two distinct brands, each with a clear individual focus:
          </p>
          <ul style={{ ...prose, paddingLeft: 20, marginBottom: 28, listStyleType: "disc" }}>
            <li style={{ marginBottom: 12 }}>
              <strong>SimpleSign</strong> remains our best in class brand for standalone eSignatures, designed for teams that need fast, secure, and straightforward signing.
            </li>
            <li>
              <strong>ContractControl</strong> is our best in class brand for Contract Lifecycle Management (CLM), designed for teams that need full operational control over the entire lifecycle, where SimpleSign is fully integrated as a core feature.
            </li>
          </ul>

          <h2 id="clm-suite" style={h2Style}>ContractControl: The full CLM suite</h2>
          <p style={prose}>
            Our new products are created with our customers in mind, drawing on deep industry knowledge and placing innovation at our core. ContractControl provides a complete, modern operational environment for the entire contract lifecycle, treating eSignature as one essential step in a much larger, automated flow.
          </p>

          <div style={{ margin: "40px 0", padding: "28px 32px", background: "var(--bg-soft)", borderRadius: 16, border: "1px solid var(--line)" }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 16 }}>What ContractControl covers</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 24px" }}>
              {[
                { label: "Intake, capture requests before they get lost", href: "/platform/intake" },
                { label: "Drafting, AI-assisted from template or scratch", href: "/platform/drafting" },
                { label: "Review, redlines, AI summaries, tracked changes", href: "/platform/negotiation" },
                { label: "Approvals, route by value, type, or counterparty", href: "/platform/negotiation" },
                { label: "eSignature: 30+ eIDs and native signing", href: "/platform/esignature" },
                { label: "Repository, searchable, structured, always current", href: "/platform/repository" },
                { label: "Obligations, surface renewals and deadlines automatically", href: "/platform/obligations" },
                { label: "Analytics, revenue exposure, cycle time, clause trends", href: "/platform/analytics" },
              ].map(({ label, href }) => (
                <a key={label} href={href} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5, textDecoration: "none" }}
                  onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
                  onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.8" style={{ flexShrink: 0, marginTop: 3 }}><polyline points="20 6 9 17 4 12"/></svg>
                  {label}
                </a>
              ))}
            </div>
          </div>

          <h2 id="trust" style={h2Style}>Trust, flexibility, and focus</h2>
          <p style={prose}>
            This brand architecture gives our customers the flexibility to choose the exact level of control they need. If you require high-performance, standalone eSignature, SimpleSign remains your dedicated solution. If you need to manage the end-to-end lifecycle across your organization, ContractControl provides the full suite.
          </p>
          <p style={prose}>
            Our core mission remains unchanged: helping you move from contract chaos to control with products built on 15 years of Nordic trust, continuous customer co-creation, and modern innovation.
          </p>

          <h2 id="existing-customers" style={h2Style}>What this means for existing customers</h2>
          <p style={prose}>
            If you are a SimpleSign customer today, our Customer Success and Sales team will be reaching out during 2026 to walk you through what ContractControl offers and answer any questions you have. Nothing changes with your existing account, your documents, or your signing flow, and there is no action required on your end. We will come to you.
          </p>

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

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// GUIDES
// ====================================================================
function GuidesPage() {
  const guides = [
    { tag: "Most popular", pages: 40, title: "The 2026 CLM Buyer's Guide", desc: "RFP scoring, total cost of ownership, hidden gotchas, and the questions vendors hate.", cover: "purple-deep" },
    { tag: "New", pages: 28, title: "The Legal Ops Operating System", desc: "How to run legal as a function, metrics, rituals, headcount, tools, and the year-one roadmap.", cover: "ink" },
    { tag: "", pages: 22, title: "Clause libraries that scale", desc: "A clause-library design pattern that scales from 10 contracts a month to 10,000.", cover: "soft-1" },
    { tag: "", pages: 18, title: "AI in Legal: a sober field guide", desc: "What LLMs are good at in CLM, what they're terrible at, and how to staff the difference.", cover: "soft-2" },
    { tag: "", pages: 24, title: "From request to revenue", desc: "How sales-led companies design intake → draft → sign so it doesn't bottleneck deals.", cover: "soft-4" },
  ];

  const covers = {
    "purple-deep": { background: "linear-gradient(135deg, oklch(38% 0.18 295), oklch(58% 0.20 295))", color: "white" },
    "ink": { background: "var(--ink-1)", color: "white" },
    "soft-1": { background: "linear-gradient(135deg, oklch(96% 0.05 295), oklch(98% 0.02 270))", color: "var(--ink-1)" },
    "soft-2": { background: "linear-gradient(135deg, oklch(96% 0.04 80), oklch(98% 0.02 60))", color: "var(--ink-1)" },
    "soft-3": { background: "linear-gradient(135deg, oklch(95% 0.05 200), oklch(98% 0.02 220))", color: "var(--ink-1)" },
    "soft-4": { background: "linear-gradient(135deg, oklch(96% 0.04 30), oklch(98% 0.02 50))", color: "var(--ink-1)" },
  };

  const [modal, setModal] = React.useState(null); // guide title or null
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
  const [done, setDone] = React.useState(false);
  const [focused, setFocused] = React.useState(null);

  const inputStyle = (k) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)",
    fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleDownload = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email) {
      setDone(true);
    }
  };

  const closeModal = () => { setModal(null); setDone(false); setForm({ firstName: "", lastName: "", email: "", company: "" }); };

  return (
    <div>
      <ResourceHero
        eyebrow="Guides & resources"
        title={<>Long-form thinking, <span className="accent">without the fluff</span>.</>}
        lede="In-depth guides on CLM, legal ops, and contract strategy. Enter your details and download any guide instantly."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
            {guides.map((g, i) => (
              <button key={i} onClick={() => setModal(g.title)} style={{
                borderRadius: 20, overflow: "hidden", textDecoration: "none", color: "inherit",
                display: "flex", flexDirection: "column", background: "none", border: "none",
                padding: 0, cursor: "pointer", textAlign: "left",
              }}>
                <div className="card" style={{ borderRadius: 20, overflow: "hidden", display: "flex", flexDirection: "column", width: "100%" }}>
                  <div style={{
                    ...covers[g.cover],
                    aspectRatio: "4 / 3", padding: 32,
                    display: "flex", flexDirection: "column", justifyContent: "space-between",
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, opacity: 0.85, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                      <span>Guide</span>
                    </div>
                    <h3 style={{ fontSize: 22, lineHeight: 1.15, margin: 0, fontWeight: 500, letterSpacing: "-0.005em" }}>{g.title}</h3>
                  </div>
                  <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                    {g.tag && <span className="badge" style={{ alignSelf: "flex-start" }}>{g.tag}</span>}
                    <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55, flex: 1 }}>{g.desc}</p>
                    <div style={{ fontSize: 13, color: "var(--accent)", fontWeight: 500, display: "flex", alignItems: "center", gap: 6 }}>
                      Download PDF <Icon name="arrow" size={12} />
                    </div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Download modal */}
      {modal && (
        <div onClick={closeModal} style={{ position: "fixed", inset: 0, background: "rgba(14,14,16,0.55)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          <div onClick={(e) => e.stopPropagation()} className="card" style={{ maxWidth: 480, width: "100%", padding: 40, borderRadius: 20, position: "relative" }}>
            <button onClick={closeModal} style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", cursor: "pointer", color: "var(--ink-3)", padding: 4 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>

            {done ? (
              <div style={{ textAlign: "center", padding: "16px 0" }}>
                <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 20px" }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 8px", letterSpacing: "-0.02em" }}>Check your inbox</h2>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>We've sent the download link to {form.email}. It should arrive within a minute.</p>
              </div>
            ) : (
              <>
                <div style={{ marginBottom: 28 }}>
                  <span className="eyebrow" style={{ marginBottom: 10, display: "block" }}>Free download</span>
                  <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.02em" }}>{modal}</h2>
                  <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0 }}>Enter your details and we'll send the PDF straight to your inbox.</p>
                </div>
                <form onSubmit={handleDownload} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div>
                      <label style={labelStyle}>First name</label>
                      <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                        onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                    </div>
                    <div>
                      <label style={labelStyle}>Last name</label>
                      <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                        onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                    </div>
                  </div>
                  <div>
                    <label style={labelStyle}>Work email</label>
                    <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                      onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                  </div>
                  <div>
                    <label style={labelStyle}>Company</label>
                    <input type="text" required placeholder="Volantis AB" value={form.company} onChange={set("company")}
                      onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                  </div>
                  <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 4 }}>
                    Send me the PDF <Icon name="arrow" size={14} />
                  </button>
                </form>
              </>
            )}
          </div>
        </div>
      )}

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// WEBINARS
// ====================================================================
function WebinarCountdown() {
  const target = new Date("2026-08-28T15:00:00+02:00");
  const [diff, setDiff] = React.useState(target - Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setDiff(target - Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const d = Math.max(0, diff);
  const days    = Math.floor(d / 86400000);
  const hours   = Math.floor((d % 86400000) / 3600000);
  const minutes = Math.floor((d % 3600000)  / 60000);
  const seconds = Math.floor((d % 60000)    / 1000);
  const box = (n, label) => (
    <div style={{ textAlign: "center", minWidth: 56 }}>
      <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink-1)", fontVariantNumeric: "tabular-nums" }}>{String(n).padStart(2,"0")}</div>
      <div style={{ fontSize: 11, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 2 }}>{label}</div>
    </div>
  );
  const sep = <span style={{ fontSize: 24, fontWeight: 300, color: "var(--ink-5)", paddingBottom: 14 }}>:</span>;
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
      {box(days, "days")}{sep}{box(hours, "hrs")}{sep}{box(minutes, "min")}{sep}{box(seconds, "sec")}
    </div>
  );
}

// ====================================================================
// WEBINARS INDEX
// ====================================================================
function WebinarsPage() {
  return (
    <div>
      <ResourceHero
        eyebrow="Webinars"
        title={<>Learn live with the <span className="accent">ContractControl</span> team.</>}
        lede="Short, focused sessions on contract management, product features, and real-world CLM workflows. Register for upcoming webinars or watch past recordings."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 860 }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 24 }}>Upcoming</div>

          <a href="/webinars/from-simplesign-to-contractcontrol" className="card" style={{ display: "flex", gap: 0, borderRadius: 20, overflow: "hidden", textDecoration: "none", color: "inherit", flexDirection: "row" }}>
            {/* Date strip */}
            <div style={{ width: 96, background: "linear-gradient(180deg, oklch(30% 0.12 295), oklch(20% 0.08 295))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "24px 0", flexShrink: 0, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 20%, rgba(110,86,207,0.5), transparent 70%)", pointerEvents: "none" }} />
              <div style={{ position: "relative", textAlign: "center" }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", color: "rgba(255,255,255,0.5)", textTransform: "uppercase" }}>Aug</div>
                <div style={{ fontSize: 36, fontWeight: 600, color: "white", lineHeight: 1, margin: "4px 0 2px" }}>28</div>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)" }}>2026</div>
              </div>
            </div>

            {/* Content */}
            <div style={{ padding: "28px 32px", flex: 1, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <div style={{ flex: "1 1 340px" }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 12 }}>
                  <span className="eyebrow" style={{ fontSize: 11 }}>15:00 CET · 50 min</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 10px", letterSpacing: "-0.01em", lineHeight: 1.25 }}>
                  From SimpleSign to ContractControl
                </h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>
                  What's different, what you gain, and what migration actually looks like, with live Q&A.
                </p>
              </div>
              <span className="btn btn-primary" style={{ flexShrink: 0 }}>Register, free <Icon name="arrow" size={13} /></span>
            </div>
          </a>

          <div style={{ marginTop: 64 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 20 }}>Past recordings</div>
            <div style={{ padding: "32px", background: "var(--bg-soft)", borderRadius: 16, border: "1px solid var(--line)", textAlign: "center" }}>
              <div style={{ fontSize: 15, color: "var(--ink-3)" }}>No recordings yet, check back after the August session.</div>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// WEBINAR INLINE REGISTRATION FORM
// ====================================================================
function WebinarInlineForm() {
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
  const [focused, setFocused] = React.useState(null);
  const [done, setDone] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const inputStyle = (k) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email) {
      setSubmitting(true);
      setTimeout(() => { setSubmitting(false); setDone(true); }, 800);
    }
  };

  if (done) {
    return (
      <div style={{ textAlign: "center", padding: "24px 0" }}>
        <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 16px" }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>You're registered!</div>
        <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
          We've sent a calendar invite to {form.email}. See you on August 28th.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div>
          <label style={labelStyle}>First name</label>
          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
        </div>
        <div>
          <label style={labelStyle}>Last name</label>
          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
        </div>
      </div>
      <div>
        <label style={labelStyle}>Work email</label>
        <input type="email" required placeholder="linnea@company.com" value={form.email} onChange={set("email")}
          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
      </div>
      <div>
        <label style={labelStyle}>Company</label>
        <input type="text" placeholder="Volantis AB" value={form.company} onChange={set("company")}
          onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
      </div>
      <button type="submit" className="btn btn-primary btn-lg" disabled={submitting} style={{ marginTop: 4 }}>
        {submitting ? "Registering…" : <>{`Register, it's free`} <Icon name="arrow" size={14} /></>}
      </button>
      <div style={{ fontSize: 11.5, color: "var(--ink-4)", textAlign: "center", lineHeight: 1.5 }}>
        No spam. You'll get a calendar invite and one reminder.
      </div>
    </form>
  );
}

// ====================================================================
// WEBINAR DETAIL, From SimpleSign to ContractControl
// ====================================================================
function WebinarDetailSimpleSignPage() {
  const registered = 28;
  const topics = [
    "Why teams switch from SimpleSign, and what finally tips them over",
    "What ContractControl does that a standalone eSign tool can't",
    "Intake, drafting, signing, repository: how the full lifecycle fits together",
    "Migration in practice: data, templates, and getting teams on board",
    "Live Q&A, bring your specific setup and we'll work through it",
  ];
  const speakers = [
    { name: "Sara Lindgren", role: "Head of Customer Success, ContractControl", initials: "SL", gradient: "linear-gradient(135deg,#C7D2FE,#7B61FF)" },
    { name: "Mikael Persson", role: "CTO, ContractControl", initials: "MP", gradient: "linear-gradient(135deg,#A7F3D0,#059669)" },
  ];

  return (
    <div>
      <section style={{ padding: "96px 0 0" }}>
        <div className="container">
          <div style={{ maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow fade-up">Webinar · August 28, 2026</span>
            <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(36px, 5vw, 64px)" }}>
              From <span className="accent">SimpleSign</span> to<br/>ContractControl.
            </h1>
            <p className="lede fade-up" style={{ margin: "24px auto 0", maxWidth: 560, animationDelay: "0.05s" }}>
              A straight-talking session on what's different, what you gain, and what migration actually looks like, with live Q&A.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "56px 0 80px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 48, alignItems: "flex-start", maxWidth: 1080, margin: "0 auto" }}>

            {/* Left: event detail */}
            <div>
              <div className="card" style={{ padding: 32, marginBottom: 32 }}>
                <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 28, paddingBottom: 28, borderBottom: "1px solid var(--line)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    <span style={{ fontSize: 13.5, fontWeight: 500 }}>Thursday, 28 August 2026</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    <span style={{ fontSize: 13.5, fontWeight: 500 }}>15:00 CET · 50 min</span>
                  </div>
                </div>
                <div style={{ marginBottom: 28 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 14 }}>What we'll cover</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                    {topics.map((t, i) => (
                      <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                        <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                        </span>
                        <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{t}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div style={{ padding: "24px 0" }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 20 }}>Time until the event</div>
                <WebinarCountdown />
              </div>
            </div>

            {/* Right: registration card */}
            <div style={{ position: "sticky", top: 88 }}>
              <div className="card" style={{ padding: 32 }}>
                <div style={{ marginBottom: 24 }}>
                  <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>Reserve your spot</div>
                  <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0 }}>Free to attend. You'll get a calendar invite and a reminder 24h before.</p>
                </div>
                <WebinarInlineForm />
              </div>
            </div>

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

      <FinalCTA />
    </div>
  );
}


// ====================================================================
// TEMPLATES
// ====================================================================
function TemplatesPage() {
  const [filter, setFilter] = React.useState("All");
  const [modal, setModal] = React.useState(null);
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
  const [focused, setFocused] = React.useState(null);
  const [done, setDone] = React.useState(false);

  const cats = ["All", "Sales", "Procurement", "HR", "Privacy", "Finance"];
  const templates = [
    { cat: "Sales", title: "Master Services Agreement (MSA)", lang: "EN · DE · SV", downloads: "12.4k", updated: "Apr 2026" },
    { cat: "Sales", title: "Order Form & Subscription Schedule", lang: "EN · DE", downloads: "8.1k", updated: "Mar 2026" },
    { cat: "Privacy", title: "Data Processing Agreement (GDPR)", lang: "EN · DE · FR · SV", downloads: "21.7k", updated: "Apr 2026" },
    { cat: "Privacy", title: "Sub-processor Notification Letter", lang: "EN", downloads: "3.2k", updated: "Feb 2026" },
    { cat: "Sales", title: "Mutual Non-Disclosure Agreement", lang: "EN · DE · SV", downloads: "34.6k", updated: "Apr 2026" },
    { cat: "Procurement", title: "Vendor Master Agreement", lang: "EN · SV", downloads: "5.4k", updated: "Mar 2026" },
    { cat: "Procurement", title: "Statement of Work (SOW)", lang: "EN", downloads: "9.0k", updated: "Mar 2026" },
    { cat: "HR", title: "Employment Agreement (EU)", lang: "EN · DE · SV", downloads: "6.7k", updated: "Apr 2026" },
    { cat: "HR", title: "Contractor / Freelancer Agreement", lang: "EN · DE", downloads: "4.9k", updated: "Mar 2026" },
    { cat: "Finance", title: "Investor Side Letter", lang: "EN", downloads: "1.4k", updated: "Feb 2026" },
    { cat: "Finance", title: "Convertible Loan Note", lang: "EN", downloads: "1.1k", updated: "Jan 2026" },
    { cat: "Procurement", title: "Software Reseller Agreement", lang: "EN · DE", downloads: "2.3k", updated: "Mar 2026" },
  ];
  const visible = filter === "All" ? templates : templates.filter((t) => t.cat === filter);

  const inputStyle = (k) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email && form.company) setDone(true);
  };
  const closeModal = () => { setModal(null); setDone(false); setForm({ firstName: "", lastName: "", email: "", company: "" }); };

  return (
    <div>
      <ResourceHero
        eyebrow="Contract templates"
        title={<>Free templates, <em>opinionated defaults</em>.</>}
        lede="Ready-to-use contract templates across sales, procurement, HR, privacy, and finance. Enter your details and download instantly."
        kicker={<>132 templates · CC-BY licensed</>}
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <FilterChips items={cats} active={filter} onPick={setFilter} />

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {visible.map((t, i) => (
              <div key={i} className="card" style={{ padding: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
                <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
                  <div style={{ width: 48, height: 60, background: "var(--surface-2)", borderRadius: 6, border: "1px solid var(--line)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.06em" }}>DOCX</div>
                  <div>
                    <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 6 }}>
                      <span className="badge">{t.cat}</span>
                      <span style={{ fontSize: 12, color: "var(--ink-3)" }}>Updated {t.updated}</span>
                    </div>
                    <div style={{ fontSize: 16, fontWeight: 500 }}>{t.title}</div>
                    <div style={{ marginTop: 4, fontSize: 13, color: "var(--ink-3)" }}>{t.lang}</div>
                  </div>
                </div>
                <button onClick={() => setModal(t.title)} className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 13, whiteSpace: "nowrap" }}>Download</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Download modal */}
      {modal && (
        <div onClick={closeModal} style={{ position: "fixed", inset: 0, background: "rgba(14,14,16,0.55)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          <div onClick={(e) => e.stopPropagation()} className="card" style={{ maxWidth: 480, width: "100%", padding: 40, borderRadius: 20, position: "relative" }}>
            <button onClick={closeModal} style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", cursor: "pointer", color: "var(--ink-3)", padding: 4 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            {done ? (
              <div style={{ textAlign: "center", padding: "16px 0" }}>
                <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 20px" }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 8px", letterSpacing: "-0.02em" }}>Check your inbox</h2>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>We've sent the download link to {form.email}. It should arrive within a minute.</p>
              </div>
            ) : (
              <>
                <div style={{ marginBottom: 28 }}>
                  <span className="eyebrow" style={{ marginBottom: 10, display: "block" }}>Free download</span>
                  <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.02em" }}>{modal}</h2>
                  <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0 }}>Enter your details and we'll send the template straight to your inbox.</p>
                </div>
                <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div>
                      <label style={labelStyle}>First name</label>
                      <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                        onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                    </div>
                    <div>
                      <label style={labelStyle}>Last name</label>
                      <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                        onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                    </div>
                  </div>
                  <div>
                    <label style={labelStyle}>Work email</label>
                    <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                      onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                  </div>
                  <div>
                    <label style={labelStyle}>Company</label>
                    <input type="text" required placeholder="Volantis AB" value={form.company} onChange={set("company")}
                      onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                  </div>
                  <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 4 }}>
                    Send me the template <Icon name="arrow" size={14} />
                  </button>
                </form>
              </>
            )}
          </div>
        </div>
      )}

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// RFP TOOLKIT
// ====================================================================
function RfpToolkitPage() {
  const [modal, setModal] = React.useState(null);
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
  const [focused, setFocused] = React.useState(null);
  const [done, setDone] = React.useState(false);

  const sheets = [
    { title: "RFP scoring model", desc: "A weighted scorecard for 64 vendor criteria across functionality, security, total cost, and roadmap.", fmt: "XLSX", size: "184 KB" },
    { title: "Vendor question bank", desc: "287 questions, version-controlled, organised by buying committee role. Copy-paste ready.", fmt: "DOCX", size: "92 KB" },
    { title: "Reference call script", desc: "What to ask current customers, and what their answers actually mean.", fmt: "PDF", size: "1.1 MB" },
    { title: "Total Cost of Ownership model", desc: "Three-year TCO including integration cost, change management, and switching cost.", fmt: "XLSX", size: "210 KB" },
    { title: "Security & DORA addendum", desc: "Compliance addendum for EU financial services, pre-vetted by external counsel.", fmt: "DOCX", size: "58 KB" },
    { title: "Pilot success criteria", desc: "Time-boxed pilot plan with go/no-go metrics. Ship the pilot in 30 days, not 90.", fmt: "PDF", size: "780 KB" },
  ];

  const inputStyle = (k) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const handleSubmit = (e) => { e.preventDefault(); if (form.firstName && form.lastName && form.email && form.company) setDone(true); };
  const closeModal = () => { setModal(null); setDone(false); setForm({ firstName: "", lastName: "", email: "", company: "" }); };

  return (
    <div>
      <ResourceHero
        eyebrow="CLM RFP toolkit"
        title={<>Run a <em>real</em> RFP, not a vibes-check.</>}
        lede="Six artifacts your buying committee will thank you for. Built from 200+ enterprise CLM evaluations. Yes, ours included, score us honestly."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {sheets.map((s, i) => (
              <div key={i} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="badge" style={{ fontWeight: 600 }}>{s.fmt}</span>
                  <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.size}</span>
                </div>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 500, lineHeight: 1.25 }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, flex: 1 }}>{s.desc}</p>
                <button onClick={() => setModal(s.title)} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", fontSize: 13, color: "var(--accent)", fontWeight: 500, textAlign: "left", display: "flex", alignItems: "center", gap: 4 }}>
                  Download <Icon name="arrow" size={12} />
                </button>
              </div>
            ))}
          </div>

          {/* Modal */}
          {modal && (
            <div onClick={closeModal} style={{ position: "fixed", inset: 0, background: "rgba(14,14,16,0.55)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
              <div onClick={(e) => e.stopPropagation()} className="card" style={{ maxWidth: 480, width: "100%", padding: 40, borderRadius: 20, position: "relative" }}>
                <button onClick={closeModal} style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", cursor: "pointer", color: "var(--ink-3)", padding: 4 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
                {done ? (
                  <div style={{ textAlign: "center", padding: "16px 0" }}>
                    <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 20px" }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 8px", letterSpacing: "-0.02em" }}>Check your inbox</h2>
                    <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>We've sent the download link to {form.email}. It should arrive within a minute.</p>
                  </div>
                ) : (
                  <>
                    <div style={{ marginBottom: 28 }}>
                      <span className="eyebrow" style={{ marginBottom: 10, display: "block" }}>Free download</span>
                      <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.02em" }}>{modal}</h2>
                      <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0 }}>Enter your details and we'll send the file straight to your inbox.</p>
                    </div>
                    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>First name</label>
                          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Last name</label>
                          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                        </div>
                      </div>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                      </div>
                      <div>
                        <label style={labelStyle}>Company</label>
                        <input type="text" required placeholder="Volantis AB" value={form.company} onChange={set("company")}
                          onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                      </div>
                      <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 4 }}>
                        Send me the file <Icon name="arrow" size={14} />
                      </button>
                    </form>
                  </>
                )}
              </div>
            </div>
          )}


          <div style={{
            marginTop: 56, padding: 48, borderRadius: 24,
            background: "var(--ink-1)", color: "white",
            display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center", overflow: "hidden", position: "relative"
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(ellipse at 90% 10%, oklch(58% 0.18 295 / 0.45), transparent 60%)"
            }} />
            <div style={{ position: "relative" }}>
              <span style={{ fontSize: 13, opacity: 0.7, letterSpacing: "0.08em", textTransform: "uppercase" }}>Bonus</span>
              <h3 style={{ marginTop: 12, fontSize: 32, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.15 }}>
                Bring your shortlist. We'll review it on a call.
              </h3>
              <p style={{ marginTop: 12, opacity: 0.85, fontSize: 16, lineHeight: 1.55 }}>
                30 minutes with a real CLM operator. We'll tell you what each vendor is actually good at, including where we lose.
              </p>
            </div>
            <div style={{ position: "relative" }}>
              <a className="btn btn-primary" style={{ background: "white", color: "var(--ink-1)" }}>Book a shortlist review <Icon name="arrow" size={14} /></a>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// GLOSSARY
// ====================================================================
function GlossaryPage() {
  const terms = [
    { letter: "A", term: "AES (Advanced Electronic Signature)", def: "The mid-tier e-signature level under eIDAS. Uniquely linked to the signatory and capable of detecting changes post-signing. Used for most B2B contracts." },
    { letter: "A", term: "Approval chain", def: "The ordered sequence of people who must review and authorise a contract before it can be sent for signature. Defined by rules, deal value, contract type, counterparty, not by memory." },
    { letter: "A", term: "Auto-renewal", def: "A contract clause that extends the agreement automatically at the end of the term unless notice is given. One of the leading causes of unplanned spend and missed exits." },
    { letter: "B", term: "BankID", def: "The dominant eID scheme in Sweden and Norway, used to authenticate signatories and issue legally binding electronic signatures. Required for many regulated and high-value contracts in the Nordics." },
    { letter: "C", term: "Clause library", def: "A version-controlled set of approved legal language. The single source of truth your drafts and AI both pull from." },
    { letter: "C", term: "CLM (Contract Lifecycle Management)", def: "The end-to-end process of requesting, drafting, negotiating, signing, storing, and tracking contracts." },
    { letter: "C", term: "Clickwrap agreement", def: "A contract formed when a user clicks 'I agree' on a digital interface. Widely used for SaaS terms of service and end-user licences. Legally binding in most jurisdictions when properly implemented." },
    { letter: "C", term: "Contract metadata", def: "The structured data extracted from a contract: parties, dates, values, term length, jurisdiction, key clauses. What turns a PDF into a searchable, reportable record." },
    { letter: "C", term: "Counterparty", def: "The other party in a contract. In sales contracts your customer; in procurement contracts your supplier." },
    { letter: "C", term: "Cycle time", def: "Calendar days from intake submitted to contract fully executed. The single best proxy for legal efficiency." },
    { letter: "D", term: "Dataroom", def: "A secure, audited, time-bound space to share documents with external parties, usually for due diligence or audits." },
    { letter: "D", term: "DORA", def: "EU Digital Operational Resilience Act. Effective Jan 2025. Sets contractual requirements for ICT third-party providers in financial services." },
    { letter: "D", term: "Drafting", def: "The process of generating a contract from a template or from scratch. In modern CLM this is AI-assisted: the system proposes a first draft based on intake data and your clause library." },
    { letter: "D", term: "Due diligence", def: "The process of reviewing a counterparty's contracts and obligations before a transaction, typically an acquisition or partnership. A well-maintained repository makes this dramatically faster." },
    { letter: "E", term: "eIDAS", def: "EU regulation on Electronic Identification, Authentication and Trust Services. Defines the legal framework for electronic signatures in Europe. Establishes SES, AES, and QES tiers." },
    { letter: "E", term: "eSignature", def: "Any electronic indication of agreement on a document. Ranges from a typed name (SES) to a cryptographically verified identity-linked signature (QES). Legal weight depends on the tier and jurisdiction." },
    { letter: "E", term: "Escalation", def: "Routing a contract decision to someone with higher authority, usually triggered when a clause deviates from the playbook, the deal size exceeds a threshold, or a risk flag is raised." },
    { letter: "E", term: "Executed contract", def: "A contract that has been signed by all required parties. The moment execution happens, obligations begin." },
    { letter: "F", term: "Fallback clause", def: "A pre-approved alternative wording your team can accept without escalating to legal. Used in playbooks to scale negotiation." },
    { letter: "G", term: "GDPR", def: "General Data Protection Regulation. EU law governing how personal data is handled. Contracts with processors and sub-processors must include compliant Data Processing Agreements (DPAs), which CLM systems are often used to manage." },
    { letter: "I", term: "Indemnity", def: "A contractual obligation for one party to compensate the other for specific losses or liabilities. One of the highest-risk clauses in any commercial contract." },
    { letter: "I", term: "Intake", def: "The structured request that starts a contract. Replaces email threads with a form that routes to the right template and reviewer." },
    { letter: "L", term: "Liability cap", def: "A contractual limit on the total damages one party can claim from the other. Typically set as a multiple of fees paid. A standard negotiation point in most B2B agreements." },
    { letter: "L", term: "Legal ops", def: "The function responsible for making legal teams run efficiently, process design, tooling, metrics, and vendor management. Often the owner of CLM implementation." },
    { letter: "M", term: "MSA (Master Services Agreement)", def: "The umbrella commercial agreement between two companies. Terms here govern every order form / SOW that hangs off it." },
    { letter: "N", term: "NDA (Non-Disclosure Agreement)", def: "A contract protecting confidential information shared between parties. Usually the first contract in any new relationship, and one of the highest-volume types in any CLM system." },
    { letter: "N", term: "Notice period", def: "The time a party must give before terminating or modifying a contract. Missing a notice window is one of the most common and costly contract management failures." },
    { letter: "O", term: "Obligation tracking", def: "Continuous monitoring of post-signature commitments, renewal dates, SLAs, deliverables, indemnities, surfaced as alerts and tasks." },
    { letter: "O", term: "Order form", def: "A commercial document that activates an MSA for a specific deal. Defines the product, price, term, and any deal-specific terms. Often the highest-volume contract type in a SaaS company." },
    { letter: "P", term: "Playbook", def: "A team's documented stance on every clause: what's acceptable, what triggers escalation, what's a hard no. The thing that lets juniors negotiate." },
    { letter: "P", term: "Post-signature management", def: "Everything that happens to a contract after it's signed: storing it, tracking obligations, managing renewals, monitoring compliance. The most neglected part of the contract lifecycle." },
    { letter: "Q", term: "QES (Qualified Electronic Signature)", def: "The strongest e-signature tier under eIDAS. Legally equivalent to a wet signature across the EU. Required for high-value or regulated contracts." },
    { letter: "R", term: "Redline", def: "A tracked-changes edit. The verb is to redline; the noun is a redlined draft." },
    { letter: "R", term: "Repository", def: "The searchable, structured home for executed contracts. Modern repositories extract metadata and clauses automatically." },
    { letter: "R", term: "Revenue leakage", def: "Value lost due to contract gaps, unbilled usage, missed price escalations, uninvoiced milestones, auto-renewals that slip past. Finance teams with CLM visibility can quantify and recover this." },
    { letter: "R", term: "Risk flag", def: "An automated or manual marker on a contract clause that deviates from policy, unusual liability caps, missing GDPR language, non-standard payment terms. The basis for review queues." },
    { letter: "S", term: "SES (Simple Electronic Signature)", def: "The basic tier of e-signature under eIDAS. A scanned signature or typed name. Low friction, low legal weight. Suitable for low-risk, low-value agreements." },
    { letter: "S", term: "SLA (Service Level Agreement)", def: "A contract section defining the performance standards a supplier must meet, uptime, response times, resolution windows, and the remedies if they don't." },
    { letter: "S", term: "SOW (Statement of Work)", def: "An attachment to an MSA that defines a specific engagement, scope, deliverables, timeline, price." },
    { letter: "T", term: "Template", def: "A pre-approved contract structure with standard clauses and placeholder fields. The starting point for most drafts. A good template library reduces first-draft time to minutes." },
    { letter: "T", term: "Term and termination", def: "The contract section defining how long the agreement runs and how either party can exit it. Auto-renewal, notice periods, and termination-for-convenience rights all live here." },
    { letter: "V", term: "Vendor risk", def: "The financial, operational, or compliance risk introduced by a supplier. CLM systems help quantify vendor risk by surfacing contract terms alongside spend and performance data." },
    { letter: "W", term: "Workflow", def: "An automated sequence of steps in the contract process, intake to template selection, draft to review, approval to signature. Reduces human coordination and accelerates cycle time." },
  ];

  const grouped = terms.reduce((acc, t) => {
    (acc[t.letter] = acc[t.letter] || []).push(t);
    return acc;
  }, {});

  return (
    <div>
      <ResourceHero
        eyebrow="CLM glossary"
        title={<>The vocabulary, <em>without the jargon</em>.</>}
        lede="Contract management has its own language. We translated the 60 most common terms, the way an operator would explain them, not the way Wikipedia does."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          {Object.entries(grouped).map(([letter, items]) => (
            <div key={letter} style={{ marginBottom: 48 }}>
              <div style={{
                fontSize: 64, fontWeight: 300, color: "var(--accent)", letterSpacing: "-0.04em",
                lineHeight: 1, marginBottom: 16, fontFamily: "var(--font-serif)", fontStyle: "italic"
              }}>{letter}</div>
              <div style={{ display: "grid", gap: 18 }}>
                {items.map((t, i) => (
                  <div key={i} style={{ borderTop: "1px solid var(--line)", paddingTop: 18, display: "grid", gridTemplateColumns: "1fr 2fr", gap: 32 }}>
                    <div style={{ fontSize: 17, fontWeight: 500, color: "var(--ink-1)" }}>{t.term}</div>
                    <div style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6 }}>{t.def}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// CHANGELOG
// ====================================================================
function ChangelogPage() {
  const releases = [
    {
      ver: "v4.12", date: "Apr 22, 2026",
      tag: "Major",
      sections: [
        { kind: "New", items: ["Sales Agent (private beta), autonomous AI that drafts, redlines, and routes sales contracts on your terms.", "Workspaces: regional data residency in Frankfurt, Stockholm, Dublin."] },
        { kind: "Improved", items: ["Repository search now ~3× faster on tenants with >100k contracts.", "AI Review: 38% fewer false positives on non-English drafts."] },
        { kind: "Fixed", items: ["DocuSign import preserved comment threads incorrectly in some edge cases.", "Workspace switcher kept stale tenant in keyboard nav after rename."] },
      ],
    },
    {
      ver: "v4.11", date: "Apr 8, 2026",
      tag: "Minor",
      sections: [
        { kind: "New", items: ["Viewer Seats, Unlimited free read-only seats for any stakeholder.", "Clause Library: bulk reorder & multi-locale alternates."] },
        { kind: "Improved", items: ["Obligation tracking now supports recurring payment milestones.", "Slack integration: thread routing on intake."] },
      ],
    },
    {
      ver: "v4.10", date: "Mar 25, 2026",
      tag: "Minor",
      sections: [
        { kind: "New", items: ["Advanced Permissions: ABAC rules with attribute inheritance."] },
        { kind: "Improved", items: ["eSignature: QES (Qualified) tier now generally available across EU."] },
        { kind: "Fixed", items: ["Repository: corrupted PDF previews when file > 50MB."] },
      ],
    },
  ];

  const kindColor = (k) => k === "New" ? "oklch(70% 0.16 145)" : k === "Improved" ? "oklch(58% 0.18 295)" : "oklch(72% 0.14 60)";

  return (
    <div>
      <ResourceHero
        eyebrow="Changelog"
        title={<>Shipped this <em>week</em>.</>}
        lede="Every release. New features, improvements, and fixes, usually weekly. RSS available."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          {releases.map((r) => (
            <article key={r.ver} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48, padding: "40px 0", borderTop: "1px solid var(--line)" }}>
              <div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 6 }}>{r.date}</div>
                <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--ink-1)" }}>{r.ver}</div>
                <span className="badge" style={{ marginTop: 8, display: "inline-block" }}>{r.tag}</span>
              </div>
              <div style={{ display: "grid", gap: 24 }}>
                {r.sections.map((s, i) => (
                  <div key={i}>
                    <div style={{
                      display: "inline-flex", alignItems: "center", gap: 8, padding: "4px 10px", borderRadius: 6,
                      background: kindColor(s.kind) + "22", color: kindColor(s.kind), fontSize: 12, fontWeight: 600,
                      letterSpacing: "0.04em", marginBottom: 12
                    }}>{s.kind.toUpperCase()}</div>
                    <ul style={{ margin: 0, paddingLeft: 20, display: "grid", gap: 10 }}>
                      {s.items.map((it, j) => (
                        <li key={j} style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)" }}>{it}</li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </article>
          ))}

          <div style={{ marginTop: 32, textAlign: "center" }}>
            <a className="btn btn-ghost" href="/changelog">Older releases</a>
            <a href="/changelog" style={{ marginLeft: 16, fontSize: 13, color: "var(--ink-3)" }}>Subscribe via RSS</a>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// HELP CENTER
// ====================================================================
function HelpPage() {
  const cats = [
    { title: "Getting started", count: 24, desc: "From signup to first contract sent. The 14-day rollout plan, in chunks." },
    { title: "Intake & requests", count: 18, desc: "Designing forms, routing rules, SLAs, and intake portals." },
    { title: "Drafting & templates", count: 31, desc: "Clause library, templates, fallback positions, AI drafting." },
    { title: "Negotiation", count: 16, desc: "Redlines, comments, version control, side-by-side comparison." },
    { title: "Signature", count: 12, desc: "AES, QES, signing order, witnesses, in-person flows." },
    { title: "Repository", count: 22, desc: "Search, AI metadata extraction, bulk actions, export." },
    { title: "Permissions & SSO", count: 14, desc: "Roles, ABAC, SCIM, SAML, audit logs." },
    { title: "API & integrations", count: 27, desc: "REST, webhooks, Salesforce, HubSpot, Slack, Teams, Drive." },
  ];

  return (
    <div>
      <ResourceHero
        eyebrow="Help center"
        title={<>Documentation that <em>respects your time</em>.</>}
        lede="No 'click here, then click there' screenshots. Real explanations for real problems. Most articles are under 300 words."
      />

      <section style={{ padding: "0 0 24px" }}>
        <div className="container" style={{ maxWidth: 720 }}>
          <div style={{ position: "relative", marginBottom: 56 }}>
            <input type="search" placeholder="Search 412 articles…" style={{
              width: "100%", padding: "16px 20px 16px 48px",
              fontSize: 16, fontFamily: "inherit", borderRadius: 14,
              border: "1px solid var(--line)", background: "white"
            }} />
            <svg style={{ position: "absolute", left: 18, top: 18 }} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></svg>
          </div>
        </div>
      </section>

      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {cats.map((c, i) => (
              <a key={i} href="/help" className="card" style={{
                padding: 28, textDecoration: "none", color: "inherit", minHeight: 200,
                display: "flex", flexDirection: "column", gap: 12
              }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <h3 style={{ margin: 0, fontSize: 17, fontWeight: 500, letterSpacing: "-0.005em" }}>{c.title}</h3>
                  <span style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 500 }}>{c.count}</span>
                </div>
                <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5, flex: 1 }}>{c.desc}</p>
                <div style={{ fontSize: 13, color: "var(--accent)", fontWeight: 500 }}>Browse →</div>
              </a>
            ))}
          </div>

          <div style={{ marginTop: 56, padding: 40, background: "var(--surface-2)", borderRadius: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            {[
              { title: "Status", desc: "All systems operational", color: "oklch(70% 0.16 145)", cta: "View status" },
              { title: "Submit a ticket", desc: "Median first response: 38 min", color: "var(--accent)", cta: "Open a ticket", href: "/help/submit-a-ticket" },
            ].map((b, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <div style={{ width: 10, height: 10, borderRadius: 999, background: b.color, marginTop: 8, flexShrink: 0 }} />
                <div>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>{b.title}</div>
                  <div style={{ marginTop: 4, color: "var(--ink-3)", fontSize: 13 }}>{b.desc}</div>
                  <a href={b.href || "/help"} style={{ marginTop: 10, display: "inline-block", color: "var(--accent)", fontSize: 13, fontWeight: 500 }}>{b.cta} →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ====================================================================
// DEVELOPERS
// ====================================================================
function DevelopersPage() {
  const code = `// Create a contract from a template
const draft = await cc.drafts.create({
  template: "msa.v3",
  workspace: "eu-prod",
  parties: [
    { role: "customer", name: "Volantis AB", country: "SE" },
    { role: "vendor",   name: "Acme GmbH",  country: "DE" }
  ],
  variables: {
    term_months: 24,
    currency: "EUR",
    payment_terms_days: 30
  }
});

await cc.workflows.start(draft.id, "standard-review");`;

  const features = [
    { title: "REST API", desc: "Full surface, drafts, contracts, workflows, signatures, repository, audit." },
    { title: "Webhooks", desc: "Sub-second delivery, signed payloads, replay, dead-letter queue." },
    { title: "TypeScript SDK", desc: "First-class types, retries, idempotency keys, telemetry baked in." },
    { title: "Embeddable signing", desc: "Drop our signing widget into your app. White-labelled. eIDAS AES & QES." },
    { title: "Salesforce + HubSpot", desc: "Two-way sync of contract metadata. Native managed packages." },
    { title: "MCP server", desc: "Connect any LLM agent to ContractControl. Read-write, scoped, audited." },
  ];

  return (
    <div>
      <ResourceHero
        eyebrow="API & developers"
        title={<>Build on <em>contracts</em> as a primitive.</>}
        lede="A REST API your engineers won't hate, real webhooks, and an SDK with first-class TypeScript. Sub-second latency, signed payloads, full audit trail."
      />

      <section style={{ padding: "0 0 56px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 32, alignItems: "stretch" }}>
            <div className="card" style={{
              padding: 0, overflow: "hidden", background: "var(--ink-1)",
              color: "white", fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)"
            }}>
              <div style={{ padding: "14px 18px", borderBottom: "1px solid rgba(255,255,255,0.1)", display: "flex", gap: 8, alignItems: "center" }}>
                <div style={{ display: "flex", gap: 6 }}>
                  <div style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(72% 0.14 30)" }} />
                  <div style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(78% 0.14 80)" }} />
                  <div style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(70% 0.16 145)" }} />
                </div>
                <span style={{ marginLeft: 12, fontSize: 12, opacity: 0.6 }}>example.ts</span>
              </div>
              <pre style={{ margin: 0, padding: 28, fontSize: 13, lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
                <code>{code}</code>
              </pre>
            </div>

            <div style={{ display: "grid", gap: 16, alignContent: "start" }}>
              {features.slice(0, 4).map((f, i) => (
                <div key={i} className="card" style={{ padding: 22 }}>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>{f.title}</div>
                  <div style={{ marginTop: 6, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>{f.desc}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {features.slice(4).map((f, i) => (
              <div key={i} className="card" style={{ padding: 22 }}>
                <div style={{ fontWeight: 500, fontSize: 15 }}>{f.title}</div>
                <div style={{ marginTop: 6, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 96px" }}>
        <div className="container">
          <div style={{
            padding: 40, borderRadius: 20,
            background: "linear-gradient(180deg, oklch(98% 0.02 295), oklch(96% 0.04 295))",
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32
          }}>
            {[
              { title: "API reference", desc: "OpenAPI 3.1, with try-it-now consoles." },
              { title: "Quickstarts", desc: "Auth, first request, webhooks in 10 min." },
              { title: "Status & SLOs", desc: "99.95% multi-region. Live status feed." },
            ].map((b, i) => (
              <div key={i}>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 500 }}>{b.title}</h3>
                <p style={{ marginTop: 6, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.55 }}>{b.desc}</p>
                <a href="/developers" style={{ marginTop: 10, display: "inline-block", color: "var(--accent)", fontSize: 13, fontWeight: 500 }}>Open →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

window.BlogPage = BlogPage;
window.BlogPostSimpleSignPage = BlogPostSimpleSignPage;
window.GuidesPage = GuidesPage;
window.WebinarsPage = WebinarsPage;
window.WebinarDetailSimpleSignPage = WebinarDetailSimpleSignPage;
window.TemplatesPage = TemplatesPage;
window.RfpToolkitPage = RfpToolkitPage;
window.GlossaryPage = GlossaryPage;
window.ChangelogPage = ChangelogPage;
window.HelpPage = HelpPage;
window.DevelopersPage = DevelopersPage;

// ====================================================================
// SUBMIT A TICKET
// ====================================================================
function SubmitTicketPage() {
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", category: "", subject: "", message: "" });
  const [focused, setFocused] = React.useState(null);
  const [done, setDone] = React.useState(false);

  const inputStyle = (name) => ({
    width: "100%", padding: "13px 16px", fontSize: 15, fontFamily: "inherit",
    borderRadius: 10, border: `1.5px solid ${focused === name ? "var(--accent)" : "var(--line)"}`,
    outline: "none", background: "white", boxSizing: "border-box",
    transition: "border-color 0.15s"
  });

  const labelStyle = { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 6, color: "var(--ink-2)" };

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email && form.subject && form.message) setDone(true);
  };

  const categories = ["Getting started", "Intake & requests", "Drafting & playbooks", "Negotiation", "Signature", "Repository", "Permissions & SSO", "API & integrations", "Billing", "Other"];

  return (
    <div>
      <ResourceHero
        eyebrow="Help center"
        title={<>Submit a support ticket</>}
        lede="Describe your issue and our team will get back to you. Median first response time is 38 minutes on business days."
      />

      <section style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 600 }}>
          {done ? (
            <div style={{ textAlign: "center", padding: "80px 0" }}>
              <div style={{ width: 56, height: 56, borderRadius: 999, background: "oklch(70% 0.16 145)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px" }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5"><polyline points="20 6 9 17 4 12" /></svg>
              </div>
              <h2 style={{ margin: "0 0 12px", fontSize: 24, fontWeight: 600 }}>Ticket submitted</h2>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 15 }}>We'll reply to <strong>{form.email}</strong> shortly. Check your inbox and spam folder.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <label style={labelStyle}>First name <span style={{ color: "var(--accent)" }}>*</span></label>
                  <input style={inputStyle("firstName")} value={form.firstName} onChange={set("firstName")} onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} required />
                </div>
                <div>
                  <label style={labelStyle}>Last name <span style={{ color: "var(--accent)" }}>*</span></label>
                  <input style={inputStyle("lastName")} value={form.lastName} onChange={set("lastName")} onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} required />
                </div>
              </div>

              <div>
                <label style={labelStyle}>Work email <span style={{ color: "var(--accent)" }}>*</span></label>
                <input type="email" style={inputStyle("email")} value={form.email} onChange={set("email")} onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} required />
              </div>

              <div>
                <label style={labelStyle}>Company</label>
                <input style={inputStyle("company")} value={form.company} onChange={set("company")} onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} />
              </div>

              <div>
                <label style={labelStyle}>Category</label>
                <select style={{ ...inputStyle("category"), appearance: "none", cursor: "pointer" }} value={form.category} onChange={set("category")} onFocus={() => setFocused("category")} onBlur={() => setFocused(null)}>
                  <option value="">Select a category</option>
                  {categories.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>

              <div>
                <label style={labelStyle}>Subject <span style={{ color: "var(--accent)" }}>*</span></label>
                <input style={inputStyle("subject")} placeholder="Brief summary of your issue" value={form.subject} onChange={set("subject")} onFocus={() => setFocused("subject")} onBlur={() => setFocused(null)} required />
              </div>

              <div>
                <label style={labelStyle}>Message <span style={{ color: "var(--accent)" }}>*</span></label>
                <textarea style={{ ...inputStyle("message"), resize: "vertical", minHeight: 140 }} placeholder="Describe the issue in detail, including steps to reproduce if relevant" value={form.message} onChange={set("message")} onFocus={() => setFocused("message")} onBlur={() => setFocused(null)} required />
              </div>

              <button type="submit" style={{
                padding: "14px 28px", background: "var(--accent)", color: "white", border: "none",
                borderRadius: 10, fontSize: 15, fontWeight: 600, cursor: "pointer", alignSelf: "flex-start"
              }}>Submit ticket →</button>
            </form>
          )}
        </div>
      </section>
    </div>
  );
}
window.SubmitTicketPage = SubmitTicketPage;

// ====================================================================
// HEALTH CHECK QUESTIONNAIRE
// ====================================================================

const HEALTH_QUESTIONS = [
  {
    q: "Where do you start drafting new contracts?",
    desc: "For example: customer agreements, NDAs, or employment contracts.",
    options: [
      { text: "Copy-pasting from old Word documents on local drives (high risk)", score: 1 },
      { text: "From standard templates in Google Drive or Word, but anyone can modify them", score: 2 },
      { text: "From pre-approved templates with locked fields that limit editing", score: 3 },
      { text: "Standardized library with dynamic parameters and automated guardrails", score: 4 }
    ]
  },
  {
    q: "How do you handle contract intake and requests?",
    desc: "How does sales or HR ask for a contract, and how does legal receive it?",
    options: [
      { text: "Endless emails, Slack messages, and phone calls without structured formats", score: 1 },
      { text: "A shared inbox or Slack channel, triaged manually by the legal team", score: 2 },
      { text: "A simple request form, but legal still handles routing and tracking manually", score: 3 },
      { text: "A dedicated request portal that automatically triages, drafts, and routes based on rules", score: 4 }
    ]
  },
  {
    q: "How are internal contract approvals gathered?",
    desc: "Ensuring legal, finance, and security sign off before a contract goes out.",
    options: [
      { text: "Email chains with back-and-forth threads, often bypassing key stakeholders", score: 1 },
      { text: "Manually tagging stakeholders in Slack or comments, prone to bottlenecks", score: 2 },
      { text: "Standard approval chains, but progress is invisible to the request team", score: 3 },
      { text: "Automated, sequential, and parallel approval workflows with SLA tracking", score: 4 }
    ]
  },
  {
    q: "How do you collaborate and negotiate with counterparties?",
    desc: "How redlines, version histories, and counterparty feedback are managed.",
    options: [
      { text: "Emailing Word attachments back and forth, leading to version confusion", score: 1 },
      { text: "Track changes in Word, but comparing versions is a manual headache", score: 2 },
      { text: "Google Docs or shared links, but internal comments can be accidentally shared", score: 3 },
      { text: "A secure shared portal with live semantic diffs and private internal comments", score: 4 }
    ]
  },
  {
    q: "How well does contracting connect to your other systems?",
    desc: "For example, your CRM, HR system, or e-signature tool.",
    options: [
      { text: "Contracts are completely separate and data is copied between systems manually", score: 1 },
      { text: "Some integrations exist but they're partial or unreliable", score: 2 },
      { text: "Key tools are connected, though not all contract data flows between systems", score: 3 },
      { text: "Contract data flows automatically between CRM, HR, e-sign and other core systems", score: 4 }
    ]
  },
  {
    q: "How visible is your contract process?",
    desc: "Can you quickly answer: where is this contract, who has seen it, and what changed?",
    options: [
      { text: "Very little. We often do not know where a contract is or what version is current", score: 1 },
      { text: "We can usually figure it out, but it takes time and asking around", score: 2 },
      { text: "Most contracts are stored centrally and can be searched or found", score: 3 },
      { text: "Full audit trail, searchable archive, and real-time status visibility across all contracts", score: 4 }
    ]
  },
  {
    q: "How do you handle contracts across departments or entities?",
    desc: "For example: sales, procurement, HR, or subsidiaries operating under different rules.",
    options: [
      { text: "Each team manages contracts their own way with no shared process", score: 1 },
      { text: "There's a shared approach, but it's inconsistently applied across teams", score: 2 },
      { text: "We have shared templates and rules, though cross-team coordination still requires manual effort", score: 3 },
      { text: "A central governance layer means all entities and departments operate within the same controlled framework", score: 4 }
    ]
  }
];

function HealthCheckPage() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState(Array(HEALTH_QUESTIONS.length).fill(null));
  const [form, setForm] = React.useState({ firstName: "", lastName: "", jobTitle: "", email: "" });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [focused, setFocused] = React.useState(null);

  // Scoring logic
  const totalPoints = answers.reduce((acc, score) => acc + (score || 0), 0);
  const scorePct = Math.round((totalPoints / (HEALTH_QUESTIONS.length * 4)) * 100);

  const getScoreCategory = (pct) => {
    if (pct < 55) return "Critical Risk";
    if (pct < 85) return "Operational Friction";
    return "Optimized Control";
  };

  const scoreCategory = getScoreCategory(scorePct);

  const handleStart = () => setStep(1);

  const handleSelectOption = (qIdx, score) => {
    const nextAnswers = [...answers];
    nextAnswers[qIdx] = score;
    setAnswers(nextAnswers);
  };

  const handleNext = () => {
    if (step < HEALTH_QUESTIONS.length) {
      setStep(step + 1);
    } else {
      setStep(HEALTH_QUESTIONS.length + 1); // Go to results/lead form
    }
  };

  const handleBack = () => {
    if (step === 1) {
      setStep(0);
    } else {
      setStep(step - 1);
    }
  };

  const handleDownload = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.jobTitle && form.email) {
      setSubmitting(true);
      
      try {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        const primaryColor = [123, 97, 255]; // Purple #7B61FF
        const secondaryColor = [24, 24, 27]; // Dark #18181b
        const lightBg = [245, 243, 251];
        const accentColor = scoreCategory === "Critical Risk" ? [180, 35, 24] : scoreCategory === "Operational Friction" ? [217, 119, 6] : [31, 138, 76];

        // 1. Dynamic Canvas Rendering of Logo Wordmark (white on dark header)
        const canvas = document.createElement("canvas");
        canvas.width = 282 * 2;
        canvas.height = 36 * 2;
        const ctx = canvas.getContext("2d");
        ctx.scale(2, 2);
        ctx.fillStyle = "#FFFFFF";
        const logoPaths = [
          "M18.7784 28.4696C17.2803 28.479 15.7969 28.1741 14.424 27.5745C13.098 26.9968 11.8955 26.1697 10.8817 25.1381C8.78184 22.974 7.60742 20.0771 7.60742 17.0617C7.60742 14.0463 8.78184 11.1494 10.8817 8.98531C11.8979 7.96109 13.1002 7.14006 14.424 6.56618C15.7969 5.96665 17.2803 5.66173 18.7784 5.67111C19.3577 5.67186 19.9358 5.72274 20.5063 5.82317C21.095 5.93032 21.6732 6.08874 22.2343 6.29662C22.8454 6.52761 23.4391 6.80249 24.0106 7.11913C24.2421 7.24699 24.4806 7.38177 24.719 7.52692C24.9404 7.66338 25.1323 7.84259 25.2836 8.05409C25.4348 8.26559 25.5424 8.50512 25.6 8.75869C25.6576 9.01225 25.6641 9.27475 25.619 9.53084C25.574 9.78693 25.4783 10.0315 25.3377 10.2502C25.1715 10.5102 24.9426 10.7244 24.6721 10.8729C24.4016 11.0215 24.098 11.0997 23.7894 11.1003C23.4402 11.0963 23.0995 10.9919 22.8079 10.7996C22.2746 10.4572 21.7071 10.1711 21.1146 9.94604C20.3553 9.66578 19.5531 9.51961 18.7438 9.51406C17.75 9.51045 16.7663 9.71285 15.8547 10.1085C14.9677 10.4878 14.1644 11.0387 13.4909 11.7293C12.8174 12.4316 12.2785 13.2515 11.9012 14.1484C11.513 15.0791 11.3131 16.0775 11.3131 17.0859C11.3131 18.0943 11.513 19.0927 11.9012 20.0234C12.2785 20.9203 12.8174 21.7403 13.4909 22.4425C14.1657 23.1316 14.9687 23.6822 15.8547 24.0633C16.7663 24.459 17.75 24.6614 18.7438 24.6578C19.1431 24.6564 19.5413 24.6159 19.9326 24.5368C20.3248 24.4568 20.7089 24.3411 21.08 24.1912C21.515 24.0162 21.9366 23.8094 22.3414 23.5726C22.4831 23.4931 22.6248 23.4067 22.7768 23.3169C23.0629 23.1382 23.3934 23.0436 23.7307 23.0439C24.0441 23.0441 24.3523 23.1242 24.6262 23.2766C24.9001 23.429 25.1307 23.6486 25.2962 23.9147C25.4351 24.134 25.5291 24.3786 25.5728 24.6344C25.6166 24.8903 25.6091 25.1522 25.551 25.4052C25.4928 25.6581 25.385 25.897 25.2339 26.108C25.0828 26.319 24.8914 26.498 24.6707 26.6345C24.4357 26.7762 24.2076 26.9075 23.9795 27.0285C23.4167 27.3406 22.8323 27.612 22.2308 27.8406C21.1267 28.258 19.9553 28.4689 18.7749 28.4627L18.7784 28.4696Z",
          "M104.845 28.6839C102.616 28.6839 100.48 27.7988 98.904 26.2232C97.3285 24.6477 96.4434 22.5108 96.4434 20.2826C96.4434 18.0545 97.3285 15.9176 98.904 14.342C100.48 12.7665 102.616 11.8814 104.845 11.8814C106.611 11.8767 108.333 12.4361 109.759 13.478C109.869 13.1009 110.111 12.7761 110.442 12.5631C110.772 12.3501 111.168 12.2631 111.557 12.3181C111.946 12.373 112.302 12.5663 112.56 12.8624C112.818 13.1586 112.961 13.5378 112.963 13.9307V26.6104C112.962 26.9332 112.866 27.2486 112.686 27.5169C112.506 27.7851 112.251 27.9941 111.953 28.1176C111.655 28.241 111.327 28.2734 111.01 28.2106C110.693 28.1478 110.402 27.9926 110.174 27.7646C109.985 27.57 109.845 27.333 109.766 27.0735C108.338 28.1191 106.614 28.6831 104.845 28.6839ZM104.845 15.244C104.202 15.2468 103.567 15.3895 102.985 15.6621C102.41 15.9283 101.89 16.2999 101.451 16.7576C101.014 17.2235 100.663 17.7629 100.414 18.3508C100.154 18.9542 100.021 19.6048 100.024 20.2619C100.018 20.9293 100.151 21.5906 100.414 22.2041C100.666 22.7968 101.017 23.3425 101.451 23.818C101.886 24.2807 102.406 24.656 102.982 24.9239C103.571 25.1927 104.211 25.3318 104.858 25.3318C105.506 25.3318 106.146 25.1927 106.735 24.9239C107.303 24.6601 107.819 24.2947 108.256 23.8457C108.692 23.3785 109.043 22.8381 109.292 22.249C109.551 21.6464 109.684 20.9972 109.683 20.3414C109.685 19.6687 109.552 19.0023 109.292 18.3819C109.046 17.7874 108.695 17.2419 108.256 16.7715C107.817 16.314 107.296 15.9425 106.721 15.6759C106.135 15.3995 105.496 15.2556 104.848 15.2543L104.845 15.244Z",
          "M126.195 28.684C125.05 28.6891 123.915 28.4609 122.861 28.0135C121.842 27.5854 120.912 26.9726 120.117 26.2061C119.328 25.4394 118.694 24.5276 118.25 23.5209C117.797 22.4646 117.562 21.3269 117.562 20.1773C117.562 19.0276 117.797 17.89 118.25 16.8337C118.925 15.29 120.038 13.978 121.45 13.0603C122.863 12.1426 124.514 11.6594 126.199 11.6706C126.9 11.6655 127.598 11.7585 128.272 11.9471C128.9 12.1325 129.504 12.3899 130.073 12.7143C130.644 13.0461 131.186 13.4253 131.694 13.8478C131.849 13.9757 132.005 14.107 132.157 14.2418C132.323 14.3878 132.457 14.5661 132.551 14.7658C132.646 14.9654 132.699 15.1822 132.706 15.403C132.713 15.6169 132.675 15.8298 132.595 16.0284C132.516 16.227 132.396 16.4071 132.243 16.5572L132.032 16.7715C131.715 17.0871 131.288 17.2674 130.841 17.2745C130.394 17.2816 129.961 17.1149 129.634 16.8095C129.314 16.5078 128.967 16.2359 128.597 15.9974C128.239 15.7688 127.855 15.5821 127.453 15.441C127.036 15.3016 126.598 15.2327 126.157 15.2371C125.495 15.2335 124.839 15.3652 124.229 15.6241C123.631 15.8735 123.086 16.2335 122.622 16.6851C122.161 17.1339 121.796 17.671 121.547 18.2644C121.285 18.8817 121.152 19.5463 121.157 20.217C121.153 20.8719 121.29 21.52 121.558 22.1178C121.82 22.7031 122.186 23.6902 122.639 23.6902C123.096 24.1419 123.636 24.501 124.229 24.7477C124.44 24.841 124.658 24.9162 124.882 24.9723C125.242 25.0692 125.612 25.118 125.985 25.1175C127.113 25.0964 128.204 24.7108 129.095 24.0185C129.244 23.9045 129.392 23.787 129.534 23.6729C129.893 23.3723 130.347 23.2072 130.816 23.2064C131.327 23.2058 131.818 23.407 132.181 23.7662C132.343 23.9231 132.47 24.112 132.555 24.3209C132.639 24.5298 132.679 24.754 132.672 24.9792C132.666 25.2077 132.613 25.4324 132.516 25.6394C132.419 25.8464 132.28 26.031 132.108 26.1819C131.977 26.2959 131.846 26.41 131.711 26.5275C131.197 26.9475 130.648 27.3221 130.069 27.6472C129.502 27.9731 128.897 28.2306 128.269 28.4144C127.594 28.6009 126.896 28.6916 126.195 28.684ZM126.195 28.684Z",
          "M273.624 28.4489C273.155 28.4582 272.702 28.2817 272.364 27.9579C272.025 27.6341 271.828 27.1894 271.816 26.721V7.36801C271.845 6.90797 272.048 6.47609 272.383 6.1604C272.719 5.8447 273.163 5.66895 273.624 5.66895C274.085 5.66895 274.528 5.8447 274.864 6.1604C275.2 6.47609 275.403 6.90797 275.431 7.36801V26.721C275.419 27.1894 275.223 27.6341 274.884 27.9579C274.545 28.2817 274.092 28.4582 273.624 28.4489Z",
          "M232.51 28.5872C231.751 28.604 230.997 28.4737 230.288 28.2036C229.632 27.9352 229.035 27.5396 228.533 27.0395C228.03 26.5395 227.632 25.945 227.36 25.2903C227.093 24.5941 226.969 23.8514 226.994 23.1061V15.3995H225.114C224.635 15.3995 224.175 15.2091 223.836 14.8701C223.497 14.5312 223.307 14.0714 223.307 13.5921C223.307 13.1127 223.497 12.653 223.836 12.314C224.175 11.9751 224.635 11.7847 225.114 11.7847H226.994V7.72398C227.014 7.25784 227.214 6.81756 227.551 6.49492C227.888 6.17228 228.337 5.99219 228.803 5.99219C229.27 5.99219 229.718 6.17228 230.055 6.49492C230.393 6.81756 230.592 7.25784 230.612 7.72398V11.7847H232.527C233.006 11.7847 233.466 11.9751 233.805 12.314C234.144 12.653 234.334 13.1127 234.334 13.5921C234.334 14.0714 234.144 14.5312 233.805 14.8701C233.466 15.2091 233.006 15.3995 232.527 15.3995H230.612V23.1061C230.6 23.3619 230.647 23.617 230.749 23.8518C230.85 24.0867 231.005 24.2951 231.2 24.4609C231.691 24.8158 232.288 24.9958 232.893 24.9723H233.045C234.473 25.0967 234.524 26.3927 234.486 26.88C234.417 27.7681 233.854 28.5146 232.928 28.5837L232.51 28.5872Z",
          "M145.462 28.5178C144.704 28.5335 143.949 28.4021 143.24 28.1307C142.585 27.8639 141.988 27.4701 141.485 26.9719C140.982 26.4737 140.583 25.8809 140.31 25.2278C140.051 24.5263 139.933 23.7805 139.964 23.0333V15.3267H138.063C137.584 15.3267 137.124 15.1362 136.785 14.7973C136.446 14.4583 136.256 13.9986 136.256 13.5192C136.256 13.0399 136.446 12.5802 136.785 12.2412C137.124 11.9022 137.584 11.7118 138.063 11.7118H139.964V7.6546C139.964 7.41724 140.011 7.18221 140.102 6.96292C140.192 6.74364 140.326 6.54439 140.493 6.37655C140.661 6.20872 140.861 6.07558 141.08 5.98475C141.299 5.89392 141.534 5.84717 141.771 5.84717C142.009 5.84717 142.244 5.89392 142.463 5.98475C142.682 6.07558 142.882 6.20872 143.05 6.37655C143.217 6.54439 143.35 6.74364 143.441 6.96292C143.532 7.18221 143.579 7.41724 143.579 7.6546V11.7118H145.493C145.731 11.7118 145.966 11.7586 146.185 11.8494C146.404 11.9402 146.604 12.0734 146.772 12.2412C146.939 12.409 147.072 12.6083 147.163 12.8276C147.254 13.0469 147.301 13.2819 147.301 13.5192C147.301 13.7566 147.254 13.9916 147.163 14.2109C147.072 14.4302 146.939 14.6295 146.772 14.7973C146.604 14.9651 146.404 15.0983 146.185 15.1891C145.966 15.2799 145.731 15.3267 145.493 15.3267H143.579V23.0333C143.567 23.2893 143.615 23.5445 143.717 23.7793C143.819 24.0142 143.974 24.2224 144.17 24.388C144.661 24.7444 145.257 24.9246 145.863 24.8995H146.029C147.446 25.131 147.394 26.3371 147.36 26.8244C147.284 27.7126 146.824 28.4349 145.898 28.504L145.462 28.5178Z",
          "M208.809 28.5422C208.571 28.5437 208.335 28.4976 208.116 28.4067C207.896 28.3158 207.696 28.1819 207.529 28.0129C207.362 27.8439 207.23 27.6432 207.141 27.4226C207.052 27.2019 207.008 26.9657 207.012 26.7279V13.6957C207.008 13.4578 207.051 13.2214 207.14 13.0005C207.229 12.7797 207.361 12.5788 207.528 12.4097C207.695 12.2406 207.895 12.1068 208.115 12.016C208.335 11.9253 208.571 11.8795 208.809 11.8814C209.146 11.8809 209.477 11.974 209.764 12.1503C210.052 12.3267 210.284 12.5793 210.437 12.8802C211.473 12.2308 212.67 11.8848 213.893 11.8814C214.801 11.8841 215.7 12.0658 216.538 12.4161C217.376 12.7664 218.136 13.2784 218.776 13.9229C219.416 14.5674 219.923 15.3317 220.268 16.1721C220.612 17.0125 220.787 17.9126 220.784 18.8208V26.7244C220.79 27.1986 220.608 27.656 220.278 27.9962C219.947 28.3364 219.495 28.5315 219.021 28.5388C218.547 28.5238 218.096 28.3272 217.762 27.9896C217.429 27.652 217.237 27.1991 217.228 26.7244V18.8208C217.222 18.386 217.131 17.9566 216.96 17.557C216.788 17.1574 216.54 16.7954 216.229 16.4919C215.917 16.1883 215.549 15.949 215.146 15.7876C214.742 15.6263 214.31 15.5461 213.875 15.5516C213.448 15.551 213.025 15.6358 212.631 15.8011C212.237 15.9664 211.88 16.2087 211.581 16.514C211.282 16.8192 211.046 17.1811 210.889 17.5784C210.732 17.9758 210.656 18.4005 210.665 18.8277V26.7244C210.672 26.8426 210.652 26.961 210.606 27.07C210.512 27.4796 210.284 27.8463 209.959 28.1126C209.634 28.379 209.229 28.5301 208.809 28.5422Z",
          "M52.5086 28.5731C52.2715 28.5745 52.0365 28.5286 51.8174 28.4381C51.5982 28.3476 51.3993 28.2143 51.2323 28.046C51.0653 27.8777 50.9335 27.6778 50.8447 27.4579C50.7559 27.2381 50.7118 27.0027 50.715 26.7657V13.7992C50.7118 13.5621 50.7559 13.3267 50.8447 13.1069C50.9335 12.8871 51.0653 12.6871 51.2323 12.5188C51.3993 12.3505 51.5982 12.2172 51.8174 12.1267C52.0365 12.0362 52.2715 11.9903 52.5086 11.9917C52.8454 11.9909 53.1759 12.0835 53.4632 12.2592C53.7506 12.4349 53.9836 12.6868 54.1363 12.987C55.1688 12.3444 56.3589 11.9999 57.575 11.9917C59.4081 11.9917 61.1661 12.7199 62.4623 14.0161C63.7585 15.3124 64.4867 17.0704 64.4867 18.9035V26.7622C64.4914 27.2352 64.3086 27.6908 63.9783 28.0295C63.6481 28.3682 63.1972 28.5623 62.7242 28.5696C62.2503 28.5564 61.7997 28.3613 61.4658 28.0248C61.1318 27.6883 60.9402 27.2362 60.9306 26.7622V18.9001C60.9197 18.025 60.562 17.1901 59.9361 16.5784C59.3103 15.9668 58.4673 15.6285 57.5922 15.6377C57.1662 15.6372 56.7444 15.7216 56.3515 15.886C55.9585 16.0505 55.6023 16.2917 55.3037 16.5954C55.005 16.8992 54.77 17.2595 54.6123 17.6552C54.4546 18.0509 54.3773 18.4741 54.3852 18.9001V26.7622C54.3928 26.8804 54.3726 26.9987 54.3264 27.1078C54.2296 27.5194 53.9983 27.8871 53.669 28.1525C53.3398 28.4178 52.9314 28.5659 52.5086 28.5731Z",
          "M180.742 15.9319C180.709 13.2521 179.625 10.6925 177.723 8.80428C175.821 6.91602 173.254 5.85012 170.574 5.83608C167.894 5.82203 165.316 6.86097 163.395 8.72918C161.473 10.5974 160.362 13.1455 160.301 15.8247V15.9492L160.318 18.0711V24.5025C160.319 24.9713 160.504 25.4208 160.834 25.7539C161.164 26.087 161.612 26.2768 162.081 26.2823H162.191C162.662 26.2795 163.112 26.0909 163.444 25.7575C163.776 25.4242 163.963 24.973 163.964 24.5025V17.0931L163.988 15.5655C164.065 13.8523 164.811 12.2378 166.067 11.0698C167.323 9.90188 168.987 9.27406 170.702 9.32165C172.416 9.36925 174.043 10.0884 175.232 11.3243C176.421 12.5601 177.077 14.2136 177.058 15.9284C177.058 15.9975 177.058 16.0597 177.058 16.1289V21.0051V25.2559V26.8076C177.062 27.0448 177.113 27.2788 177.208 27.4962C177.303 27.7136 177.44 27.9101 177.612 28.0742C177.783 28.2384 177.985 28.367 178.206 28.4527C178.427 28.5384 178.663 28.5795 178.9 28.5735C179.138 28.5818 179.375 28.5424 179.597 28.4576C179.82 28.3727 180.023 28.2442 180.194 28.0796C180.366 27.9149 180.503 27.7175 180.597 27.4991C180.691 27.2806 180.741 27.0454 180.742 26.8076V16.5608C180.739 16.4891 180.732 16.4176 180.722 16.3466C180.718 16.2083 180.742 16.0701 180.742 15.9319Z",
          "M170.593 14.1106H170.468C170.235 14.1115 170.003 14.1585 169.788 14.2488C169.573 14.3391 169.377 14.471 169.213 14.637C169.049 14.8029 168.919 14.9997 168.83 15.2159C168.742 15.4322 168.697 15.6637 168.699 15.8973V24.6303C168.62 26.3348 167.878 27.9409 166.63 29.1051C165.383 30.2693 163.729 30.8991 162.024 30.8598C160.318 30.8205 158.695 30.1153 157.502 28.8949C156.31 27.6745 155.642 26.036 155.642 24.3297V16.0977V13.9965C155.639 13.7595 155.588 13.5255 155.494 13.3082C155.399 13.0908 155.262 12.8943 155.091 12.7301C154.92 12.5659 154.719 12.4372 154.498 12.3514C154.277 12.2657 154.041 12.2246 153.804 12.2306C153.566 12.2222 153.33 12.2617 153.108 12.3466C152.886 12.4316 152.683 12.5602 152.512 12.7249C152.341 12.8897 152.205 13.0871 152.111 13.3056C152.018 13.524 151.97 13.759 151.969 13.9965V16.0977V24.5888C151.971 24.5888 C151.971 24.6734 151.979 24.7576 151.993 24.8411C152.104 27.4283 153.197 29.8759 155.049 31.6861C156.901 33.4962 159.373 34.5329 161.962 34.5853C164.551 34.6377 167.063 33.7018 168.986 31.9681C170.91 30.2344 172.101 27.833 172.317 25.2524C172.345 24.6372 172.365 23.3413 172.365 23.3413V15.8973C172.366 15.4255 172.18 14.9726 171.848 14.6378C171.516 14.3029 171.064 14.1133 170.593 14.1106Z",
          "M240.413 28.4939C240.173 28.4957 239.936 28.4498 239.715 28.3588C239.494 28.2678 239.293 28.1336 239.124 27.9639C238.956 27.7943 238.823 27.5927 238.733 27.371C238.643 27.1492 238.598 26.9118 238.602 26.6726V13.7027C238.598 13.4635 238.643 13.226 238.733 13.0043C238.823 12.7826 238.956 12.581 239.124 12.4113C239.293 12.2417 239.494 12.1074 239.715 12.0165C239.936 11.9255 240.173 11.8795 240.413 11.8814C240.749 11.8791 241.08 11.9698 241.369 12.1436C241.657 12.3174 241.892 12.5675 242.047 12.8663C243.081 12.2299 244.269 11.8892 245.482 11.8814C246.165 11.8882 246.842 12.0049 247.487 12.227C247.72 12.2922 247.936 12.4045 248.124 12.5569C248.312 12.7094 248.466 12.8987 248.577 13.1131C248.689 13.3276 248.755 13.5627 248.772 13.8038C248.789 14.0449 248.756 14.2869 248.676 14.5148L248.586 14.7394C248.444 15.0537 248.214 15.3195 247.922 15.5038C247.631 15.6881 247.292 15.7829 246.948 15.7762C246.781 15.7761 246.616 15.7516 246.457 15.7036C246.14 15.6067 245.81 15.5577 245.479 15.5585C244.62 15.5784 243.804 15.936 243.206 16.5538C242.609 17.1716 242.28 17.9997 242.289 18.8588V26.6692C242.289 26.6692 C242.294 26.7882 242.27 26.9067 242.22 27.0147C242.129 27.4284 242.22 27.7992 241.573 28.0675C241.245 28.3358 240.836 28.486 240.413 28.4939Z",
          "M85.3269 28.5283C85.0884 28.5288 84.8523 28.4818 84.6322 28.3899C84.4122 28.298 84.2126 28.1632 84.0453 27.9933C83.8779 27.8234 83.7462 27.6218 83.6577 27.4004C83.5692 27.1789 83.5257 26.9421 83.5299 26.7036V13.592C83.5239 13.3522 83.5659 13.1137 83.6535 12.8905C83.7412 12.6672 83.8726 12.4638 84.0401 12.2921C84.2075 12.1205 84.4077 11.9841 84.6287 11.891C84.8497 11.7979 85.0871 11.7499 85.3269 11.75C85.6682 11.7526 86.0019 11.8512 86.2897 12.0345C86.5776 12.2179 86.808 12.4786 86.9546 12.7868C87.9815 12.1268 89.1727 11.7677 90.3933 11.75C91.0983 11.7557 91.798 11.8723 92.4668 12.0956C92.6913 12.1591 92.8982 12.2731 93.0719 12.4288C93.2456 12.5845 93.3814 12.7779 93.469 12.9941C93.6434 13.4349 93.6665 13.9211 93.5347 14.3765L93.4414 14.6046C93.3104 14.9176 93.0901 15.1852 92.808 15.3739C92.5259 15.5626 92.1945 15.664 91.8551 15.6655C91.69 15.6656 91.5258 15.6412 91.3678 15.5929C91.0496 15.4965 90.7189 15.4476 90.3863 15.4478C89.518 15.4713 88.694 15.8367 88.0934 16.4644C87.4929 17.0921 87.1644 17.9314 87.1793 18.8V26.7002C87.1833 26.8195 87.1584 26.9381 87.1067 27.0458C87.0216 27.4578 86.7992 27.8288 86.4759 28.0981C86.1526 28.3674 85.7476 28.5191 85.3269 28.5283Z",
          "M258.732 28.494C257.614 28.4937 256.508 28.2582 255.487 27.8028C254.488 27.3663 253.581 26.7435 252.815 25.9677C252.052 25.1899 251.436 24.2801 250.998 23.2825C250.551 22.2674 250.32 21.1706 250.32 20.0616C250.32 18.9526 250.551 17.8557 250.998 16.8407C251.44 15.8462 252.062 14.9417 252.833 14.1727C253.605 13.3989 254.516 12.7765 255.518 12.3377C256.53 11.8906 257.624 11.6597 258.73 11.6597C259.836 11.6597 260.931 11.8906 261.942 12.3377C262.942 12.7795 263.852 13.4002 264.628 14.1693C265.397 14.9372 266.015 15.8436 266.449 16.8407C266.896 17.8581 267.126 18.9573 267.126 20.0685C267.126 21.1797 266.896 22.2788 266.449 23.2963C266.012 24.2949 265.396 25.205 264.631 25.9815C263.865 26.7573 262.959 27.3801 261.96 27.8166C260.943 28.265 259.843 28.4957 258.732 28.494ZM258.732 15.2061C258.095 15.2054 257.465 15.3385 256.883 15.5966C256.303 15.8517 255.777 16.214 255.331 16.6644C254.89 17.1178 254.532 17.6454 254.274 18.223C254.013 18.8092 253.88 19.4442 253.883 20.0858C253.882 20.716 254.015 21.3392 254.274 21.9139C254.531 22.4921 254.889 23.0199 255.331 23.4725C255.776 23.9233 256.302 24.2846 256.883 24.537C257.465 24.7961 258.095 24.9303 258.732 24.9309C259.367 24.9329 259.995 24.7986 260.574 24.537C261.149 24.2799 261.67 23.9177 262.112 23.4691C262.554 23.0164 262.912 22.4886 263.169 21.9105C263.429 21.336 263.563 20.7128 263.563 20.0823C263.566 19.4405 263.432 18.8054 263.169 18.2196C262.911 17.6419 262.553 17.1143 262.112 16.661C261.67 16.2136 261.148 15.8526 260.574 15.5966C259.995 15.336 259.367 15.2029 258.732 15.2061Z",
          "M37.5557 28.7014C36.4295 28.703 35.3156 28.4675 34.2865 28.0102C33.2806 27.5691 32.3671 26.9418 31.5943 26.1613C30.8244 25.3788 30.2047 24.4616 29.7662 23.4553C29.315 22.4329 29.082 21.3277 29.082 20.2102C29.082 19.0927 29.315 17.9875 29.7662 16.9652C30.667 14.9431 32.29 13.3299 34.3176 12.4414C35.3362 11.9944 36.4365 11.7637 37.5488 11.7637C38.6612 11.7637 39.7615 11.9944 40.7801 12.4414C41.7843 12.8833 42.7 13.504 43.4826 14.273C44.2631 15.0458 44.8904 15.9593 45.3315 16.9652C45.788 17.9946 46.0235 19.1083 46.0227 20.2344C46.0217 21.3492 45.7862 22.4513 45.3315 23.4691C44.8908 24.4752 44.2701 25.3922 43.4999 26.1751C42.7277 26.9547 41.8155 27.582 40.8112 28.024C39.785 28.474 38.6762 28.7047 37.5557 28.7014ZM37.5557 15.3098C36.9138 15.3102 36.2792 15.4456 35.693 15.7072C35.1075 15.9625 34.5761 16.3273 34.1275 16.782C33.6818 17.2385 33.3213 17.771 33.0631 18.3544C32.798 18.9443 32.6625 19.5842 32.6656 20.231C32.6659 20.8673 32.8014 21.4964 33.0631 22.0764C33.3235 22.6576 33.6837 23.1886 34.1275 23.6454C34.5755 24.1008 35.107 24.4657 35.693 24.7202C36.2792 24.9817 36.9138 25.1171 37.5557 25.1176C38.1906 25.1169 38.8181 24.9826 39.3977 24.7236C39.9765 24.4639 40.5016 24.0982 40.946 23.6454C41.3915 23.1893 41.753 22.6582 42.0138 22.0764C42.2749 21.4963 42.4092 20.8671 42.4078 20.231C42.4121 19.5845 42.2777 18.9446 42.0138 18.3544C41.7531 17.7716 41.3916 17.2393 40.946 16.782C40.5018 16.3299 39.9766 15.9653 39.3977 15.7072C38.8187 15.446 38.1909 15.3106 37.5557 15.3098Z",
          "M193.875 28.5424C192.75 28.5437 191.637 28.3082 190.609 27.8512C189.602 27.4126 188.688 26.785 187.917 26.0023C187.148 25.2198 186.527 24.3041 186.085 23.2998C185.636 22.2769 185.404 21.1719 185.404 20.0547C185.404 18.9376 185.636 17.8326 186.085 16.8097C186.983 14.7812 188.608 13.1624 190.64 12.2721C191.659 11.8209 192.762 11.5879 193.877 11.5879C194.991 11.5879 196.094 11.8209 197.113 12.2721C198.119 12.7131 199.036 13.3338 199.819 14.1037C200.6 14.8746 201.228 15.787 201.668 16.7924C202.117 17.8183 202.349 18.9262 202.349 20.0461C202.349 21.166 202.117 22.2738 201.668 23.2998C201.226 24.3041 200.605 25.2198 199.836 26.0023C199.065 26.785 198.151 27.4126 197.144 27.8512C196.115 28.3085 195.001 28.544 193.875 28.5424ZM193.875 15.1508C193.232 15.1522 192.596 15.2888 192.009 15.5517C191.425 15.8095 190.895 16.1753 190.447 16.6299C190.002 17.0837 189.642 17.6126 189.382 18.192C189.118 18.7822 188.982 19.4219 188.985 20.0686C188.984 20.705 189.12 21.3342 189.382 21.914C189.638 22.503 189.998 23.0405 190.447 23.5003C190.894 23.9556 191.424 24.5785C192.009 24.5785C192.597 24.8331 193.233 24.9614 193.875 24.9552C194.511 24.9574 195.14 24.823 195.72 24.5612C196.299 24.3087 196.824 23.9487 197.268 23.5003C197.714 23.0447 198.074 22.5134 198.333 21.9313C198.596 21.3516 198.73 20.7223 198.73 20.0858C198.733 19.4391 198.598 18.7993 198.333 18.2093C198.074 17.6272 197.714 17.0959 197.268 16.6403C196.824 16.1834 196.298 15.8142 195.717 15.5517C195.138 15.288 194.51 15.1513 193.875 15.1508Z",
          "M76.8717 28.4628C76.1116 28.4809 75.3554 28.3494 74.6461 28.0757C73.9906 27.8074 73.3946 27.4122 72.8922 26.9128C72.3899 26.4134 71.9912 25.8198 71.719 25.1659C71.4517 24.4697 71.3272 23.727 71.3526 22.9817V15.2751H69.4623C68.9961 15.2547 68.5558 15.0552 68.2332 14.7182C67.9106 14.3811 67.7305 13.9325 67.7305 13.4659C67.7305 12.9994 67.9106 12.5508 68.2332 12.2137C68.5558 11.8767 68.9961 11.6772 69.4623 11.6568H71.3423V7.60303C71.3423 7.11909 71.5345 6.65496 71.8767 6.31277C72.2189 5.97057 72.683 5.77832 73.167 5.77832C73.6509 5.77832 74.115 5.97057 74.4572 6.31277C74.7994 6.65496 74.9917 7.11909 74.9917 7.60303V11.6568H76.9062C77.3724 11.6772 77.8127 11.8767 78.1353 12.2137C78.458 12.5508 78.638 12.9994 78.638 13.4659C78.638 13.9325 78.458 14.3811 78.1353 14.7182C77.8127 15.0552 77.3724 15.2547 76.9062 15.2751H74.9917V22.9817C74.9802 23.2373 75.0271 23.4922 75.1289 23.727C75.2307 23.9617 75.3847 24.1702 75.5792 24.3364C76.0706 24.6913 76.6668 24.8714 77.2726 24.8479H77.4385C78.8554 25.0829 78.8208 26.289 78.769 26.7728C78.6964 27.661 78.2333 28.3833 77.3071 28.4524L76.8717 28.4628Z"
        ];
        logoPaths.forEach(p => {
          ctx.fill(new Path2D(p));
        });
        const logoData = canvas.toDataURL("image/png");

        // 2. Compute category scores based on the actual answers (1-4 score converted to %)
        const getPct = (score) => Math.round((score / 4) * 100);
        const categories = [
          { name: "Template & Drafting Control", score: answers[0], weight: 1, benchmark: 55 },
          { name: "Request Intake & Triage", score: answers[1], weight: 1, benchmark: 50 },
          { name: "Internal Approval Chains", score: answers[2], weight: 1, benchmark: 45 },
          { name: "Negotiation & Versioning", score: answers[3], weight: 1, benchmark: 55 },
          { name: "System Integrations", score: answers[4], weight: 1, benchmark: 30 },
          { name: "Lifecycle Audit Visibility", score: answers[5], weight: 1, benchmark: 40 },
          { name: "Cross-entity Governance", score: answers[6], weight: 1, benchmark: 35 }
        ];

        // Find the lowest scoring question for the bottleneck spotlight
        let lowestIdx = 0;
        let lowestScore = answers[0];
        for (let i = 1; i < answers.length; i++) {
          if (answers[i] < lowestScore) {
            lowestScore = answers[i];
            lowestIdx = i;
          }
        }

        const bottleneckNames = [
          "Template Control",
          "Request Intake",
          "Internal Approvals",
          "Collaboration & Negotiation",
          "System Integrations",
          "Audit Visibility",
          "Cross-entity Governance"
        ];

        const bottleneckDetails = [
          "Your main workflow bottleneck is Template Control. Drafting contracts by copy-pasting old files leads to inconsistent language, unauthorized edits, and elevated legal risk. Locking templates with standard parameter fields would prevent editing of core clauses.",
          "Your main workflow bottleneck is Request Intake. Managing requests via Slack, emails, and direct messages leads to missing details, constant follow-ups, and slower deal cycles. Implementing a single request portal would save legal 4-6 hours per contract.",
          "Your main workflow bottleneck is Internal Approvals. Gathering stakeholder sign-offs via manual tagging or email chains causes deal stalls and visibility issues. Setting up parallel, automated approval routing would keep deals moving.",
          "Your main workflow bottleneck is Collaboration & Negotiation. Emailing Word documents back and forth causes version confusion and slower negotiation cycles. Using a collaborative portal with track-changes and semantic diffs would accelerate signing.",
          "Your main workflow bottleneck is System Integrations. Manually copying contract data into CRMs, HR platforms, or ERPs leads to data entry errors and lack of contract visibility. Syncing contract metadata automatically would streamline operations.",
          "Your main workflow bottleneck is Audit Visibility. Storing contracts across scattered local drives and email folders makes it difficult to track renewals and check audit trails. A central repository with automated alerts is critical.",
          "Your main workflow bottleneck is Cross-entity Governance. Inconsistent workflows across departments or subsidiaries undermine compliance and reporting. A unified workspace model would unify control under a single corporate standard."
        ];

        // Define playbook items based on the bottleneck
        let playbook = [];
        if (lowestIdx === 0 || lowestIdx === 1) {
          playbook = [
            "Implement a unified intake form to capture deal terms in a single structured layout.",
            "Create standard templates with locked clauses to prevent unauthorized edits.",
            "Set up rule-based drafting automation to generate standard documents in seconds."
          ];
        } else if (lowestIdx === 2 || lowestIdx === 3) {
          playbook = [
            "Define conditional approval chains (e.g., Finance signs off if value > €25k).",
            "Utilize a shared negotiation portal for real-time collaboration with counterparties.",
            "Enable private internal comments within the contract workspace to align before replying."
          ];
        } else {
          playbook = [
            "Connect HubSpot/Salesforce to sync deal data directly to your contract workflows.",
            "Centralize all agreements in a searchable repository with automated renewal alerts.",
            "Set up metadata tagging to track key obligations, liability caps, and renewal terms."
          ];
        }

        // ==========================================
        // PAGE 1: Executive Summary & Category Benchmarks
        // ==========================================

        // Draw Header Banner
        doc.setFillColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.rect(0, 0, 210, 35, "F");

        // Add dynamically drawn white logo wordmark
        doc.addImage(logoData, "PNG", 20, 10.5, 282 * (14 / 36), 14);

        doc.setTextColor(255, 255, 255);
        doc.setFont("helvetica", "normal");
        doc.setFontSize(9);
        doc.text("MATURITY ASSESSMENT REPORT", 145, 20);

        // Details Panel (Left Column)
        doc.setTextColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.setFont("helvetica", "bold");
        doc.setFontSize(11);
        doc.text("Assessment Profile:", 20, 52);
        
        doc.setFont("helvetica", "normal");
        doc.setFontSize(9.5);
        doc.setTextColor(80, 80, 80);
        doc.text(`Contact: ${form.firstName} ${form.lastName}`, 20, 60);
        doc.text(`Job Title: ${form.jobTitle}`, 20, 67);
        doc.text(`Email: ${form.email}`, 20, 74);
        doc.text(`Date: ${new Date().toLocaleDateString()}`, 20, 81);

        // Centered Maturity Score Card (Right Column)
        doc.setFillColor(lightBg[0], lightBg[1], lightBg[2]);
        doc.roundedRect(120, 48, 70, 36, 4, 4, "F");
        
        doc.setTextColor(primaryColor[0], primaryColor[1], primaryColor[2]);
        doc.setFont("helvetica", "bold");
        doc.setFontSize(32);
        // Center the percentage text inside the box (center coordinate = 120 + 35 = 155)
        doc.text(`${scorePct}%`, 155, 66, { align: "center" });
        
        doc.setFontSize(9.5);
        doc.setFont("helvetica", "normal");
        doc.setTextColor(100, 100, 110);
        doc.text("Maturity Score", 155, 75, { align: "center" });

        // Divider
        doc.setDrawColor(228, 228, 231);
        doc.line(20, 93, 190, 93);

        // Section: Executive Summary & Overall Risk Profile
        doc.setFont("helvetica", "bold");
        doc.setFontSize(13);
        doc.setTextColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.text("Executive Summary", 20, 104);

        doc.setFontSize(10.5);
        doc.setTextColor(accentColor[0], accentColor[1], accentColor[2]);
        doc.text(`Maturity Bracket: ${scoreCategory}`, 20, 112);

        doc.setFont("helvetica", "normal");
        doc.setFontSize(9.5);
        doc.setTextColor(80, 80, 80);
        let statusDesc = "";
        if (scoreCategory === "Critical Risk") {
          statusDesc = "Your contract management process relies heavily on manual work, creating substantial operational risk. scattered files, lack of central visibility, and copy-pasting clauses without governance expose your business to compliance audits and inefficiencies. Cycle times typically drag out to 14+ days.";
        } else if (scoreCategory === "Operational Friction") {
          statusDesc = "Your process contains basic templates, but is plagued by operational friction. Chasing approvals, copy-pasting metadata between CRM/HR platforms manually, and version control issues create substantial bottlenecks. Cycle times average 7-10 days.";
        } else {
          statusDesc = "Excellent control. Your contract workflows are highly optimized with automated routing, robust guardrails, and full lifecycle visibility. Deals are closed rapidly, typically within 2-3 days, with minimal administrative overhead.";
        }
        const splitStatus = doc.splitTextToSize(statusDesc, 170);
        doc.text(splitStatus, 20, 120);

        // Section: Category-by-Category Maturity Table
        doc.setFont("helvetica", "bold");
        doc.setFontSize(13);
        doc.setTextColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.text("Maturity Category Benchmarks", 20, 142);

        // Draw Table Header
        doc.setFillColor(240, 238, 246);
        doc.rect(20, 149, 170, 8, "F");
        doc.setFont("helvetica", "bold");
        doc.setFontSize(8.5);
        doc.setTextColor(60, 60, 70);
        doc.text("CONTRACTING DIMENSION", 23, 154.5);
        doc.text("YOUR SCORE", 110, 154.5);
        doc.text("AVG BENCHMARK", 140, 154.5);
        doc.text("STATUS", 175, 154.5);

        let tableY = 163;
        doc.setFont("helvetica", "normal");
        doc.setFontSize(9);
        doc.setTextColor(80, 80, 80);

        categories.forEach((cat) => {
          const catScorePct = getPct(cat.score);
          const scoreStr = `${catScorePct}%`;
          const benchmarkStr = `${cat.benchmark}%`;
          
          let statusText = "On Track";
          let statusColor = [31, 138, 76]; // green
          if (catScorePct < cat.benchmark) {
            statusText = "Laggard";
            statusColor = [180, 35, 24]; // red
          } else if (catScorePct - cat.benchmark < 15) {
            statusText = "Moderate";
            statusColor = [217, 119, 6]; // amber
          }

          // Category name
          doc.setTextColor(80, 80, 80);
          doc.text(cat.name, 23, tableY + 0.5);

          // Your score
          doc.text(scoreStr, 110, tableY + 0.5);

          // Benchmark
          doc.text(benchmarkStr, 140, tableY + 0.5);

          // Status Badge Text
          doc.setFont("helvetica", "bold");
          doc.setTextColor(statusColor[0], statusColor[1], statusColor[2]);
          doc.text(statusText, 175, tableY + 0.5);
          
          doc.setFont("helvetica", "normal");

          // Draw table row line
          doc.setDrawColor(240, 240, 242);
          doc.line(20, tableY + 4, 190, tableY + 4);
          
          tableY += 9;
        });

        // Overall risk metrics box at page bottom
        doc.setFillColor(lightBg[0], lightBg[1], lightBg[2]);
        doc.roundedRect(20, tableY + 3, 170, 24, 3, 3, "F");

        doc.setFont("helvetica", "bold");
        doc.setFontSize(9);
        doc.setTextColor(primaryColor[0], primaryColor[1], primaryColor[2]);
        doc.text("Maturity Key Performance Indicators:", 25, tableY + 11);

        doc.setFont("helvetica", "normal");
        doc.setTextColor(80, 80, 80);
        let metricText = "";
        if (scorePct < 55) {
          metricText = "Estimated Revenue Leakage: 6% - 9% of contract value  |  Average Deal Cycle: 14+ business days";
        } else if (scorePct < 85) {
          metricText = "Estimated Revenue Leakage: 2% - 4% of contract value  |  Average Deal Cycle: 7-10 business days";
        } else {
          metricText = "Estimated Revenue Leakage: Under 1% of contract value  |  Average Deal Cycle: 2-3 business days";
        }
        doc.text(metricText, 25, tableY + 19);

        // Page Footer
        doc.setFontSize(8);
        doc.setTextColor(150, 150, 155);
        doc.text("Page 1 of 2", 180, 285);
        doc.text("© 2026 ContractControl. Confidential maturity assessment report.", 20, 285);

        // ==========================================
        // PAGE 2: Bottleneck Spotlight & Playbook
        // ==========================================
        doc.addPage();

        // Mini Header Banner
        doc.setFillColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.rect(0, 0, 210, 20, "F");
        
        // Add logo on second page header
        doc.addImage(logoData, "PNG", 20, 5, 282 * (10 / 36), 10);

        doc.setTextColor(255, 255, 255);
        doc.setFont("helvetica", "normal");
        doc.setFontSize(8.5);
        doc.text("Tailored Action Playbook", 152, 12);

        // Section: Bottleneck Spotlight
        doc.setTextColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.setFont("helvetica", "bold");
        doc.setFontSize(13);
        doc.text("Primary Bottleneck Spotlight", 20, 38);

        // Colored box callout for bottleneck
        doc.setFillColor(254, 242, 242); // very light red
        doc.setDrawColor(252, 165, 165); // light red border
        doc.roundedRect(20, 44, 170, 34, 4, 4, "FD");

        doc.setFont("helvetica", "bold");
        doc.setFontSize(10.5);
        doc.setTextColor(180, 35, 24); // Red
        doc.text(`Spotlight Area: ${bottleneckNames[lowestIdx]} (Lowest Category Score)`, 26, 52);

        doc.setFont("helvetica", "normal");
        doc.setFontSize(9.5);
        doc.setTextColor(80, 80, 80);
        const splitBottleneckText = doc.splitTextToSize(bottleneckDetails[lowestIdx], 158);
        doc.text(splitBottleneckText, 26, 61);

        // Section: Recommended Playbook
        doc.setFont("helvetica", "bold");
        doc.setFontSize(13);
        doc.setTextColor(secondaryColor[0], secondaryColor[1], secondaryColor[2]);
        doc.text("Tailored Action Playbook", 20, 96);
        
        doc.setFont("helvetica", "normal");
        doc.setFontSize(9.5);
        doc.setTextColor(100, 100, 100);
        doc.text("We recommend prioritizing the following tactical actions to optimize this dimension:", 20, 103);

        let playbookY = 115;
        playbook.forEach((item, index) => {
          // Draw a small bullet box
          doc.setFillColor(primaryColor[0], primaryColor[1], primaryColor[2]);
          doc.roundedRect(20, playbookY, 6, 6, 1.5, 1.5, "F");

          doc.setTextColor(255, 255, 255);
          doc.setFont("helvetica", "bold");
          doc.setFontSize(5.5);
          doc.text(`${index + 1}`, 22.3, playbookY + 4.5);

          // Recommendations text
          doc.setTextColor(60, 60, 70);
          doc.setFont("helvetica", "bold");
          doc.setFontSize(9.5);
          const title = item.split(":")[0];
          const desc = item.split(":")[1] || "";
          
          doc.text(title, 30, playbookY + 4.8);
          
          if (desc) {
            doc.setFont("helvetica", "normal");
            doc.setTextColor(90, 90, 100);
            const splitDesc = doc.splitTextToSize(desc, 155);
            doc.text(splitDesc, 30, playbookY + 10);
            playbookY += 18;
          } else {
            playbookY += 12;
          }
        });

        // Call to action box
        doc.setFillColor(lightBg[0], lightBg[1], lightBg[2]);
        doc.setDrawColor(primaryColor[0], primaryColor[1], primaryColor[2]);
        doc.roundedRect(20, 185, 170, 50, 4, 4, "F");

        doc.setFont("helvetica", "bold");
        doc.setFontSize(12);
        doc.setTextColor(primaryColor[0], primaryColor[1], primaryColor[2]);
        doc.text("Accelerate Your Contracting Maturity with ContractControl", 26, 196);

        doc.setFont("helvetica", "normal");
        doc.setFontSize(9.5);
        doc.setTextColor(80, 80, 80);
        const promoText = "ContractControl automates intakes, drafting, sequential approvals, secure counterparty negotiations, and e-signatures in a unified, compliance-ready workspace. By establishing templates and automating workflows, you can collapse deal cycles from weeks to days.";
        const splitPromo = doc.splitTextToSize(promoText, 158);
        doc.text(splitPromo, 26, 204);

        doc.setFont("helvetica", "bold");
        doc.setFontSize(9.5);
        doc.setTextColor(primaryColor[0], primaryColor[1], primaryColor[2]);
        doc.text("Schedule a live 30-minute benchmark review at www.contractcontrol.co/book-demo", 26, 226);

        // Page Footer
        doc.setFont("helvetica", "normal");
        doc.setFontSize(8);
        doc.setTextColor(150, 150, 155);
        doc.text("Page 2 of 2", 180, 285);
        doc.text("© 2026 ContractControl. Confidential maturity assessment report.", 20, 285);

        // Save PDF
        doc.save(`ContractControl_Maturity_Report_${form.firstName}.pdf`);
      } catch (err) {
        console.error("PDF generation failed:", err);
      }

      setSubmitting(false);
      setSubmitted(true);
    }
  };

  const inputStyle = (k) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)",
    fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };
  const setVal = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // Styles block
  const styling = (
    <style dangerouslySetInnerHTML={{ __html: `
      .hc-option {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px 20px;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: all 160ms ease;
        text-align: left;
        width: 100%;
        margin-bottom: 12px;
      }
      .hc-option:hover {
        border-color: var(--accent);
        background: rgba(110, 86, 207, 0.02);
      }
      .hc-option.selected {
        border-color: var(--accent);
        background: rgba(110, 86, 207, 0.04);
        box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.12);
      }
      .hc-bullet {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid var(--line-strong);
        display: grid;
        place-items: center;
        transition: all 150ms ease;
        flex-shrink: 0;
      }
      .hc-option.selected .hc-bullet {
        border-color: var(--accent);
        background: var(--accent);
      }
      .hc-option.selected .hc-bullet::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: white;
      }
      .hc-text {
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ink-2);
        line-height: 1.45;
      }
      .hc-option.selected .hc-text {
        color: var(--ink-1);
      }
    `}} />
  );

  // Landing page (step 0)
  if (step === 0) {
    return (
      <div style={{ background: "#DFD9F8" }}>
        {styling}
        <section className="section" style={{ minHeight: "82vh", display: "flex", alignItems: "center", padding: "80px 0" }}>
          <div className="container" style={{ maxWidth: 1256 }}>
            <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 80, alignItems: "center" }}>
              
              {/* Left Column */}
              <div>
                <h1 className="display" style={{ fontSize: "clamp(38px, 5.2vw, 62px)", margin: "0 0 24px", lineHeight: 1.05, fontWeight: 600, color: "#18181B" }}>
                  Is your contract process working, or <em>working against you?</em>
                </h1>
                <p style={{ fontSize: 18, color: "#2E2A4F", lineHeight: 1.5, margin: "0 0 44px", fontWeight: 500 }}>
                  Answer 7 questions to find out how healthy your contract management process is.
                </p>
                <div style={{ display: "flex", flexDirection: "column", gap: 16, marginBottom: 56 }}>
                  {[
                    "The questions cover automation, control, and how well your contracts connect to the rest of your business.",
                    "You'll see your maturity score, a breakdown of where the gaps are, and a benchmark of how you compare to other organisations."
                  ].map((text, i) => (
                    <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                      <span style={{
                        flexShrink: 0, width: 18, height: 18, borderRadius: 5, background: "rgba(110,86,207,0.12)", color: "var(--accent)",
                        display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, marginTop: 3
                      }}>✓</span>
                      <span style={{ fontSize: 15.5, color: "#3B375F", lineHeight: 1.5 }}>{text}</span>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 14.5, color: "#4A456E", fontWeight: 500 }}>
                  No sign-up, no preparation required.
                </div>
              </div>

              {/* Right Column (Start Card) */}
              <div>
                <div style={{ background: "white", padding: 48, borderRadius: 24, border: "1px solid rgba(14,14,16,0.08)", boxShadow: "0 30px 60px -15px rgba(0,0,0,0.1)", textAlign: "center" }}>
                  <span style={{
                    fontSize: 10.5, fontWeight: 600, color: "#3B2A9F", background: "#EEF0FC",
                    padding: "4px 12px", borderRadius: 99, textTransform: "uppercase", letterSpacing: "0.08em", display: "inline-block"
                  }}>Free Tool</span>
                  
                  <h2 style={{ fontSize: 24, fontWeight: 600, color: "var(--ink-1)", margin: "20px 0 12px", letterSpacing: "-0.015em" }}>
                    Contract management health check
                  </h2>
                  <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 32px" }}>
                    Take our free contract management health check and find out where your contract process creates risk, delay, and lost control and where the biggest opportunities lie.
                  </p>

                  <button onClick={handleStart} className="btn btn-primary btn-lg" style={{ width: "100%", height: 50, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    Get your score
                  </button>

                  <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 20, fontSize: 12, color: "var(--ink-4)" }}>
                    <span>7 questions</span>
                    <span>·</span>
                    <span>3 minutes</span>
                    <span>·</span>
                    <span>No sign-up required</span>
                  </div>
                </div>
              </div>

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

  // Questionnaire steps (steps 1 to 7)
  if (step <= HEALTH_QUESTIONS.length) {
    const qIdx = step - 1;
    const qData = HEALTH_QUESTIONS[qIdx];
    const selectedAnswer = answers[qIdx];

    return (
      <div style={{ background: "#F8F7FC", minHeight: "82vh", display: "flex", alignItems: "center", padding: "80px 0" }}>
        {styling}
        <div className="container" style={{ maxWidth: 700 }}>
          <div style={{ background: "white", padding: 48, borderRadius: 24, border: "1px solid var(--line)", boxShadow: "0 20px 40px -12px rgba(14,14,16,0.06)" }}>
            
            {/* Header */}
            <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--accent)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 16 }}>
              Question {step} of 7
            </div>
            
            <h2 style={{ fontSize: "clamp(20px, 3.2vw, 26px)", fontWeight: 600, color: "var(--ink-1)", lineHeight: 1.25, margin: "0 0 8px" }}>
              {qData.q}
            </h2>
            <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.5, margin: "0 0 32px" }}>
              {qData.desc}
            </p>

            {/* Options */}
            <div style={{ marginBottom: 40 }}>
              {qData.options.map((opt) => (
                <button
                  key={opt.text}
                  onClick={() => handleSelectOption(qIdx, opt.score)}
                  className={`hc-option ${selectedAnswer === opt.score ? "selected" : ""}`}
                >
                  <span className="hc-bullet" />
                  <span className="hc-text">{opt.text}</span>
                </button>
              ))}
            </div>

            {/* Buttons footer */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--line)", paddingTop: 28 }}>
              <button onClick={handleBack} className="btn btn-ghost" style={{ padding: "10px 24px", display: "inline-flex", alignItems: "center", gap: 6 }}>
                ← Back
              </button>
              <button
                onClick={handleNext}
                disabled={selectedAnswer === null}
                className="btn btn-primary"
                style={{
                  padding: "10px 28px",
                  opacity: selectedAnswer === null ? 0.5 : 1,
                  pointerEvents: selectedAnswer === null ? "none" : "auto",
                  display: "inline-flex",
                  alignItems: "center", gap: 6
                }}
              >
                {step === HEALTH_QUESTIONS.length ? "See my results →" : "Next →"}
              </button>
            </div>

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

  // Results & Lead Capture page (step 8)
  return (
    <div style={{ background: "#F8F7FC", minHeight: "82vh", display: "flex", alignItems: "center", padding: "80px 0" }}>
      {styling}
      <div className="container" style={{ maxWidth: 1256 }}>
        <div style={{ background: "white", padding: 48, borderRadius: 24, border: "1px solid var(--line)", boxShadow: "0 24px 60px -15px rgba(0,0,0,0.08)" }}>
          
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56 }}>
            
            {/* Left Column - Score Results details */}
            <div style={{ paddingRight: 12 }}>
              <span className="eyebrow" style={{ color: "var(--accent)" }}>Assessment Complete</span>
              
              <h2 style={{ fontSize: 32, fontWeight: 600, color: "var(--ink-1)", margin: "16px 0 24px", letterSpacing: "-0.02em" }}>
                Your contract maturity report
              </h2>

              {/* Score card */}
              <div style={{ background: "var(--bg-soft)", borderRadius: 16, padding: "28px 32px", border: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 28, marginBottom: 36 }}>
                
                {/* SVG circular progress */}
                <div style={{ position: "relative", width: 88, height: 88, flexShrink: 0 }}>
                  <svg width="88" height="88" viewBox="0 0 64 64">
                    <circle cx="32" cy="32" r="28" fill="none" stroke="rgba(14,14,16,0.05)" strokeWidth="6" />
                    <circle cx="32" cy="32" r="28" fill="none"
                            stroke={scoreCategory === "Critical Risk" ? "var(--danger)" : scoreCategory === "Operational Friction" ? "var(--warning)" : "var(--success)"}
                            strokeWidth="6"
                            strokeDasharray={`${(scorePct / 100) * 175.9} 175.9`}
                            strokeLinecap="round"
                            transform="rotate(-90 32 32)"
                            style={{ transition: "stroke-dasharray 1s ease" }} />
                  </svg>
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", fontSize: 20, fontWeight: 700, color: "var(--ink-1)" }}>
                    {scorePct}%
                  </div>
                </div>

                <div>
                  <div style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500 }}>Category</div>
                  <div style={{
                    fontSize: 20, fontWeight: 700, marginTop: 2,
                    color: scoreCategory === "Critical Risk" ? "var(--danger)" : scoreCategory === "Operational Friction" ? "#D97706" : "var(--success)"
                  }}>
                    {scoreCategory}
                  </div>
                </div>

              </div>

              {/* Status explanation */}
              <div style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.65, display: "flex", flexDirection: "column", gap: 16 }}>
                {scoreCategory === "Critical Risk" ? (
                  <>
                    <p>
                      <strong>Your contract process relies heavily on manual work, creating substantial risk.</strong>
                    </p>
                    <p>
                      Managing agreements in email threads, folders on local drives, and copy-pasting clauses without guardrails slows down your team and exposes your business to unintended liabilities and missed renewals.
                    </p>
                  </>
                ) : scoreCategory === "Operational Friction" ? (
                  <>
                    <p>
                      <strong>Your contract process has basic standardization, but is plagued by operational friction.</strong>
                    </p>
                    <p>
                      You are using basic templates and central storage, but chasing manual sign-offs, email redlines, and manual data copy-paste creates bottlenecks that delay deals and contract visibility.
                    </p>
                  </>
                ) : (
                  <>
                    <p>
                      <strong>Excellent control. Your contract workflows are highly optimized.</strong>
                    </p>
                    <p>
                      You benefit from central templates, automated routing, and full lifecycle visibility. Keep monitoring compliance and system integration to maintain this baseline.
                    </p>
                  </>
                )}
              </div>
            </div>

            {/* Right Column - Lead Capture Form / PDF download */}
            <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: 48 }} className="bento-chat-side">
              {submitted ? (
                <div style={{ textAlign: "center", padding: "32px 0" }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: "50%", background: "var(--success-soft)",
                    display: "grid", placeItems: "center", color: "var(--success)", margin: "0 auto 24px"
                  }}>
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </div>
                  <h3 style={{ fontSize: 22, fontWeight: 600, color: "var(--ink-1)", margin: "0 0 8px" }}>Report downloaded</h3>
                  <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 36px" }}>
                    Your custom Contract Maturity PDF report has been generated and downloaded.
                  </p>
                  
                  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                    <a href="/book-demo" className="btn btn-primary btn-lg" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                      Book a live demo
                    </a>
                    <button onClick={() => setSubmitted(false)} className="btn btn-ghost" style={{ fontSize: 13, color: "var(--ink-3)" }}>
                      Download report again
                    </button>
                  </div>
                </div>
              ) : (
                <>
                  <h3 style={{ fontSize: 20, fontWeight: 600, color: "var(--ink-1)", margin: "0 0 8px" }}>
                    Get your detailed report
                  </h3>
                  <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.5, margin: "0 0 28px" }}>
                    Enter your details to generate and download a custom maturity report, benchmarking scorecard, and recommended playbook.
                  </p>

                  <form onSubmit={handleDownload} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                      <div>
                        <label style={labelStyle}>First name</label>
                        <input type="text" required placeholder="Linnea" value={form.firstName} onChange={setVal("firstName")}
                          onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                      </div>
                      <div>
                        <label style={labelStyle}>Last name</label>
                        <input type="text" required placeholder="Andersson" value={form.lastName} onChange={setVal("lastName")}
                          onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                      </div>
                    </div>
                    <div>
                      <label style={labelStyle}>Job Title</label>
                      <input type="text" required placeholder="GC / Legal Operations" value={form.jobTitle} onChange={setVal("jobTitle")}
                        onFocus={() => setFocused("jobTitle")} onBlur={() => setFocused(null)} style={inputStyle("jobTitle")} />
                    </div>
                    <div>
                      <label style={labelStyle}>Work email</label>
                      <input type="email" required placeholder="linnea@company.com" value={form.email} onChange={setVal("email")}
                        onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                    </div>
                    
                    <button type="submit" disabled={submitting} className="btn btn-primary btn-lg" style={{ display: "flex", alignItems: "center", justifyContent: "center", marginTop: 12 }}>
                      {submitting ? "Generating report..." : "Download report (PDF)"}
                    </button>
                  </form>
                </>
              )}
            </div>

          </div>

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

// ====================================================================
// ALL ALTERNATIVES COMPARISON LANDING PAGE
// ====================================================================
function AllAlternativesPage() {
  const competitors = [
    {
      name: "Oneflow",
      slug: "oneflow",
      desc: "Nordic CLM platform from Sweden",
      tagline: "Full lifecycle CLM vs. workflow-first signing",
    },
    {
      name: "House of Control",
      slug: "house-of-control",
      desc: "Nordic contract management from Norway",
      tagline: "Modern CLM vs. legacy Nordic contract tools",
    },
    {
      name: "Scrive",
      slug: "scrive",
      desc: "Nordic eSignature & identity from Sweden",
      tagline: "Complete CLM platform vs. standalone eSignature",
    },
    {
      name: "Ironclad",
      slug: "ironclad",
      desc: "US enterprise CLM platform",
      tagline: "Nordic-first CLM vs. US-focused enterprise",
    },
    {
      name: "Spotdraft",
      slug: "spotdraft",
      desc: "Modern CLM for fast-moving teams",
      tagline: "Deep Nordic compliance vs. US-centric workflows",
    },
    {
      name: "Juro",
      slug: "juro",
      desc: "In-browser contract automation from the UK",
      tagline: "Full lifecycle control vs. browser-only contracts",
    },
    {
      name: "Tomorro",
      slug: "tomorro",
      desc: "European contract management from France",
      tagline: "Nordic eID depth vs. French-market focus",
    },
  ];

  const switchReasons = [
    {
      title: "Nordic-first compliance",
      desc: "Built for BankID, Freja, MitID, and EU eIDAS from day one — not bolted on after.",
    },
    {
      title: "Full lifecycle, one platform",
      desc: "Intake, drafting, negotiation, eSignature, repository, obligations, and analytics — no gaps.",
    },
    {
      title: "15 years of trust",
      desc: "Born from SimpleSign's proven eSignature platform, refined with 8+ years of customer co-creation.",
    },
    {
      title: "Fast time-to-value",
      desc: "Go live in weeks, not quarters. No army of consultants, no six-month implementation.",
    },
    {
      title: "EU data residency",
      desc: "Your contracts stay in the EU. Stockholm and Frankfurt data centres, ISO 27001 certified, GDPR by design.",
    },
    {
      title: "Transparent pricing",
      desc: "One plan, no per-seat surprises. You know what you pay before you sign — because that's how contracts should work.",
    },
  ];

  const [hoveredCard, setHoveredCard] = React.useState(null);

  return (
    <div>
      <ResourceHero
        eyebrow="Compare"
        title={<>ContractControl vs. the <span className="accent">alternatives</span>.</>}
        lede="See how ContractControl compares to other CLM and contract management platforms. Find the right fit for your team."
      />

      {/* Competitor Grid */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
            gap: 24,
          }}>
            {competitors.map((c, i) => (
              <div
                key={c.slug}
                className="fade-up"
                style={{
                  border: hoveredCard === i ? "1px solid var(--accent)" : "1px solid var(--line)",
                  borderRadius: 16,
                  padding: 32,
                  display: "flex",
                  flexDirection: "column",
                  gap: 16,
                  background: "var(--bg)",
                  transition: "all 0.2s ease",
                  transform: hoveredCard === i ? "translateY(-4px)" : "translateY(0)",
                  boxShadow: hoveredCard === i
                    ? "0 12px 32px rgba(0,0,0,0.08)"
                    : "0 2px 8px rgba(0,0,0,0.03)",
                  animationDelay: `${i * 0.04}s`,
                }}
                onMouseEnter={() => setHoveredCard(i)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                <div>
                  <h3 style={{
                    fontSize: 22,
                    fontWeight: 600,
                    margin: "0 0 6px",
                    letterSpacing: "-0.02em",
                    color: "var(--ink-1)",
                  }}>
                    ContractControl vs. {c.name}
                  </h3>
                  <p style={{
                    fontSize: 14,
                    color: "var(--ink-3)",
                    margin: 0,
                    lineHeight: 1.5,
                  }}>
                    {c.desc}
                  </p>
                </div>

                <p style={{
                  fontSize: 14,
                  color: "var(--ink-2)",
                  margin: 0,
                  lineHeight: 1.55,
                  flex: 1,
                }}>
                  {c.tagline}
                </p>

                <a
                  href={`/compare/${c.slug}`}
                  className="btn btn-ghost"
                  style={{
                    alignSelf: "flex-start",
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 6,
                    fontSize: 13,
                    fontWeight: 500,
                    marginTop: 4,
                  }}
                >
                  Compare <Icon name="arrow" size={12} />
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why teams switch */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 960 }}>
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <span className="eyebrow fade-up">Why teams switch</span>
            <h2
              className="fade-up"
              style={{
                fontSize: "clamp(28px, 3.6vw, 42px)",
                fontWeight: 600,
                letterSpacing: "-0.03em",
                marginTop: 16,
                color: "var(--ink-1)",
              }}
            >
              Why teams choose ContractControl
            </h2>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
            gap: 20,
          }}>
            {switchReasons.map((r, i) => (
              <div key={i} className="fade-up" style={{
                padding: "28px 24px",
                border: "1px solid var(--line)",
                borderRadius: 14,
                background: "var(--bg-elevated)",
                animationDelay: `${i * 0.05}s`,
              }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 18px", marginTop: 2, color: "var(--accent)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <div>
                    <h3 style={{
                      fontSize: 16,
                      fontWeight: 600,
                      margin: "0 0 6px",
                      color: "var(--ink-1)",
                      letterSpacing: "-0.01em",
                    }}>
                      {r.title}
                    </h3>
                    <p style={{
                      fontSize: 13.5,
                      color: "var(--ink-3)",
                      lineHeight: 1.6,
                      margin: 0,
                    }}>
                      {r.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

// ====================================================================
// ONEFLOW COMPARISON PAGE
// ====================================================================
function HubSpotForm({ portalId, formId, region }) {
  const idRef = React.useRef("hs-form-" + Math.random().toString(36).slice(2, 9));

  React.useEffect(() => {
    const containerId = idRef.current;

    const loadForm = () => {
      // Small delay to ensure hbspt is fully initialized
      setTimeout(() => {
        if (window.hbspt && document.getElementById(containerId)) {
          window.hbspt.forms.create({
            portalId,
            formId,
            region,
            target: "#" + containerId,
          });
        }
      }, 100);
    };

    // Check if already loaded
    if (window.hbspt) {
      loadForm();
      return;
    }

    // Load the HubSpot script
    const script = document.createElement("script");
    script.src = "//js-eu1.hsforms.net/forms/embed/v2.js";
    script.charset = "utf-8";
    script.async = true;
    script.onload = loadForm;
    document.head.appendChild(script);
  }, [portalId, formId, region]);

  return React.createElement("div", { id: idRef.current });
}

function CompareOneflowPage() {
  const features = [
    { category: "Contract Lifecycle", items: [
      { feature: "Intake workflows", desc: "Route contract requests from any department into a structured pipeline.", cc: true, competitor: false },
      { feature: "Template library", desc: "Pre-approved, reusable contract templates for every team.", cc: true, competitor: true },
      { feature: "Clause library", desc: "AI-powered clause bank with fallback and alternative suggestions.", cc: true, competitor: false },
      { feature: "AI-assisted drafting", desc: "Generate and refine contract language with built-in AI.", cc: true, competitor: true },
      { feature: "Conditional blocks", desc: "Rule-based content that adapts automatically to contract parameters.", cc: true, competitor: false },
      { feature: "Calculation engine", desc: "Auto-calculate pricing, penalties, and payment schedules inside contracts.", cc: true, competitor: false },
      { feature: "Product library", desc: "Centralised catalog of products, services, and pricing for contract use.", cc: true, competitor: false },
      { feature: "Clickwrap", desc: "One-click acceptance for terms, policies, and lightweight agreements.", cc: true, competitor: false },
      { feature: "Terms management", desc: "Manage and publish public policies like privacy policies, terms and conditions, and cookie notices.", cc: true, competitor: false },
      { feature: "Approval workflows", desc: "Multi-step internal approvals before contracts are sent.", cc: true, competitor: true },
      { feature: "Owner routing", desc: "Auto-assign contract owners based on metadata and business rules.", cc: true, competitor: false },
      { feature: "Collaborative negotiation", desc: "Real-time co-editing and commenting with counterparties.", cc: true, competitor: true },
      { feature: "Redline to review", desc: "Push negotiation changes back into the review stage seamlessly.", cc: true, competitor: false },
      { feature: "Electronic signatures", desc: "Legally binding eSignatures with full audit trail.", cc: true, competitor: true },
      { feature: "Analytics & reporting", desc: "Dashboards and reports on contract volume, cycle time, and bottlenecks.", cc: true, competitor: true },
      { feature: "Health scoring", desc: "Automated contract health scores based on risk, compliance, and deadlines.", cc: true, competitor: false },
      { feature: "Contract repository", desc: "Searchable, centralised storage for all executed contracts.", cc: true, competitor: true },
    ]},
    { category: "Obligations & Renewals", items: [
      { feature: "Obligation tracking", desc: "Monitor and alert on every contractual obligation and deadline.", cc: true, competitor: false },
      { feature: "AI obligation extraction", desc: "Automatically extract obligations and key dates from signed contracts.", cc: true, competitor: false },
      { feature: "Custom obligations", desc: "Define and configure obligation types specific to your business.", cc: true, competitor: false },
      { feature: "Renewal tracking", desc: "Smart alerts for upcoming renewals, auto-renewals, and termination windows.", cc: true, competitor: false },
      { feature: "Risk-specific setup", desc: "Configure obligation monitoring based on risk level and contract type.", cc: true, competitor: false },
      { feature: "Obligations API", desc: "Programmatic access to obligation data for external system integration.", cc: true, competitor: false },
      { feature: "Contract Card", desc: "Structured space for gathering and organising key contract data.", cc: true, competitor: false },
    ]},
    { category: "Company & Financial Intelligence", items: [
      { feature: "Company lookup", desc: "Verify counterparty details and company registration data instantly.", cc: true, competitor: false },
      { feature: "Financial data", desc: "Access credit ratings, revenue, and financial health of counterparties.", cc: true, competitor: false },
      { feature: "Revenue comparison", desc: "Compare invoiced amounts against contracted terms and expected revenue.", cc: true, competitor: false },
      { feature: "Invoice risk tracking", desc: "Flag invoices that deviate from contract terms or payment schedules.", cc: true, competitor: false },
      { feature: "ERP financial sync", desc: "Pull live financial data from your ERP into contract workflows.", cc: true, competitor: false },
    ]},
    { category: "Vendor Management", items: [
      { feature: "Vendor risk scoring", desc: "Automated risk scores based on compliance, financial health, and history.", cc: true, competitor: false },
      { feature: "Vendor assessments", desc: "Structured workflows for evaluating and onboarding vendors.", cc: true, competitor: false },
      { feature: "Vendor AI analytics", desc: "AI-driven insights across your vendor portfolio and contracts.", cc: true, competitor: false },
      { feature: "Compliant Hub", desc: "Centralised compliance management for vendor relationships.", cc: true, competitor: false },
    ]},
    { category: "Document Management", items: [
      { feature: "Document Hub", desc: "Consolidate internal policies into one branded hub for your organisation.", cc: true, competitor: false },
      { feature: "Advanced versioning", desc: "Track changes across documents, obligations, and contracts over time.", cc: true, competitor: false },
      { feature: "Native contract library", desc: "AI-searchable library of all contracts with smart categorisation.", cc: true, competitor: false },
      { feature: "Dataroom", desc: "Secure, permissioned space for sharing documents during due diligence.", cc: true, competitor: false },
    ]},
    { category: "Compliance & eID", items: [
      { feature: "30+ eID methods", desc: "Support for over 30 electronic identification methods globally.", cc: true, competitor: false },
      { feature: "BankID (SE, NO)", desc: "Native BankID integration for Swedish and Norwegian signers.", cc: true, competitor: true },
      { feature: "MitID (DK)", desc: "Danish MitID for secure identification and signing.", cc: true, competitor: false },
      { feature: "Freja eID", desc: "Freja eID+ support for Swedish and EU-wide identification.", cc: true, competitor: false },
      { feature: "eIDAS QES", desc: "Qualified Electronic Signatures meeting EU eIDAS regulation.", cc: true, competitor: false },
      { feature: "Advanced metadata", desc: "Custom metadata structures for GDPR, data classification, and tagging.", cc: true, competitor: false },
      { feature: "EU data residency", desc: "All data stored and processed within EU borders.", cc: true, competitor: true },
      { feature: "ISO 27001", desc: "Certified information security management system.", cc: true, competitor: true },
      { feature: "GDPR by design", desc: "Privacy and data protection built into the platform architecture.", cc: true, competitor: true },
    ]},
    { category: "Platform & Integrations", items: [
      { feature: "Power Modules", desc: "Extensible modules to add specialised functionality as you grow.", cc: true, competitor: false },
      { feature: "Unlimited viewers", desc: "Free viewer seats so your entire organisation can access contracts.", cc: true, competitor: false },
      { feature: "Salesforce", desc: "Native integration to sync contracts with Salesforce CRM.", cc: true, competitor: true },
      { feature: "HubSpot", desc: "Connect contract workflows directly to HubSpot deals and contacts.", cc: true, competitor: true },
      { feature: "ERP integrations", desc: "Pre-built connectors for major ERP systems.", cc: true, competitor: false },
      { feature: "Open API & webhooks", desc: "Full API access and real-time event webhooks for custom integrations.", cc: true, competitor: true },
      { feature: "Advanced permissions", desc: "Granular role-based access control for teams, documents, and workflows.", cc: true, competitor: false },
    ]},
  ];

  const differentiators = [
    {
      title: "Full lifecycle vs. workflow-first",
      desc: "Oneflow focuses on streamlining the signing workflow. ContractControl covers the full lifecycle — intake, drafting, clause libraries, negotiation, signing, obligations, renewals, analytics, and vendor management.",
    },
    {
      title: "Obligation intelligence, not just signing",
      desc: "Oneflow stops after the signature. ContractControl extracts obligations with AI, tracks renewals with smart period logic, and lets you build custom obligation setups with risk-specific rules.",
    },
    {
      title: "Built-in financial & company intelligence",
      desc: "Verify counterparties, pull financial data, compare invoices against contract terms, and track invoice risk — all natively, no third-party tools needed.",
    },
    {
      title: "Vendor management & risk scoring",
      desc: "Score vendor risk, run assessments, enforce compliant templates, and get AI-powered vendor analytics. Oneflow has no vendor management layer.",
    },
    {
      title: "30+ eID methods vs. limited signing",
      desc: "BankID, MitID, Freja, eIDAS QES, and 30+ more electronic identity methods. Oneflow supports a fraction of this, leaving gaps in cross-border Nordic deals.",
    },
    {
      title: "Extensible with Power Modules",
      desc: "Dataroom, Document Hub, Compliant Hub, Product Library, and Workspaces — modular capabilities you add when your team is ready, without switching platforms.",
    },
  ];

  const checkIcon = React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.5 },
    React.createElement("polyline", { points: "20 6 9 17 4 12" })
  );
  const dashIcon = React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "var(--ink-5)", strokeWidth: 2, strokeLinecap: "round" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
  );

  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", companySize: "" });
  const [focused, setFocused] = React.useState(null);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const inputStyle = (k) => ({
    width: "100%", height: 44, padding: "0 14px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 14, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12.5, fontWeight: 500, color: "var(--ink-3)", marginBottom: 6 };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName || !form.email) return;
    setSubmitting(true);

    // Submit to HubSpot Forms API
    fetch("https://api.hsforms.com/submissions/v3/integration/submit/144265445/cb831713-aef2-4599-a44a-8f383d8e8f7b", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email },
          { name: "company", value: form.company },
          { name: "company_size", value: form.companySize },
        ],
        context: { pageUri: window.location.href, pageName: "ContractControl vs Oneflow" },
      }),
    }).then(() => {
      setSubmitting(false);
      setSubmitted(true);
    }).catch(() => {
      setSubmitting(false);
      setSubmitted(true);
    });
  };

  const benefits = [
    { title: "Full lifecycle, not just signing", desc: "Intake, drafting, review, negotiation, eSignature, repository, and obligations in one platform." },
    { title: "Simple to set up, easy to use", desc: "Go live in days, not months. No complex configuration, no training sessions. Your team picks it up immediately." },
    { title: "Built for every department", desc: "Legal, Sales, HR, Procurement, and Finance each get the view they need. Not just a CLM tool." },
  ];

  return (
    <div>
      {/* Split hero: text + benefits left, form right */}
      <section className="hero" style={{ padding: "148px 0 72px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 64, alignItems: "start" }} className="mob-stack">

            {/* Left: text + benefits */}
            <div>
              <span className="eyebrow fade-up">ContractControl vs Oneflow</span>
              <h1 className="display fade-up" style={{ marginTop: 18, fontSize: "clamp(34px, 4.6vw, 56px)", animationDelay: "0.05s", lineHeight: 1.1 }}>
                From workflow signing to full <span className="accent">lifecycle control</span>.
              </h1>
              <p className="fade-up" style={{ marginTop: 20, animationDelay: "0.1s", maxWidth: 480, fontSize: 15, color: "var(--ink-3)", lineHeight: 1.65 }}>
                Oneflow streamlines the signing workflow. ContractControl is a full lifecycle platform that manages every contract from the first request to every obligation after signing.
              </p>

              <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 24 }}>
                {benefits.map((b, i) => (
                  <div key={i} className="fade-up" style={{ display: "flex", gap: 14, alignItems: "flex-start", animationDelay: `${0.12 + i * 0.04}s` }}>
                    <span style={{ flex: "0 0 22px", marginTop: 2, color: "var(--accent)" }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <div>
                      <strong style={{ fontSize: 15, color: "var(--ink-1)", display: "block", marginBottom: 3 }}>{b.title}</strong>
                      <span style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{b.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: form card */}
            <div className="fade-up" style={{ animationDelay: "0.08s" }}>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 16, padding: "36px 32px",
                background: "var(--bg-elevated)",
              }}>
                {submitted ? (
                  <div style={{ textAlign: "center", padding: "24px 0" }}>
                    <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 16px" }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Request received!</div>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
                      We'll confirm a 30-minute slot within one business day.
                    </p>
                  </div>
                ) : (
                  <>
                    <h2 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>See the difference live</h2>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: "0 0 24px", lineHeight: 1.5 }}>Book a 30-minute walkthrough tailored to your team.</p>

                    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>First name</label>
                          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Last name</label>
                          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                        </div>
                      </div>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>Company</label>
                          <input type="text" placeholder="Volantis AB" value={form.company} onChange={set("company")}
                            onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Company size</label>
                          <select value={form.companySize} onChange={set("companySize")}
                            onFocus={() => setFocused("companySize")} onBlur={() => setFocused(null)}
                            style={{ ...inputStyle("companySize"), appearance: "none", backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center", paddingRight: 32 }}>
                            <option value="">Select size...</option>
                            <option value="1-10">1-10</option>
                            <option value="11-50">11-50</option>
                            <option value="51-200">51-200</option>
                            <option value="201-500">201-500</option>
                            <option value="500+">500+</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" disabled={submitting}
                        className="btn btn-primary btn-lg"
                        style={{ width: "100%", marginTop: 4, fontSize: 15, height: 48, borderRadius: 24, justifyContent: "center" }}>
                        {submitting ? "Sending..." : <>Request demo <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginLeft: 6 }}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></>}
                      </button>
                    </form>

                    <p style={{ fontSize: 12, color: "var(--ink-4)", textAlign: "center", marginTop: 14, lineHeight: 1.5 }}>
                      No commitment. We'll confirm a 30-minute slot within one business day.
                    </p>
                  </>
                )}
              </div>

              {/* Trust badges */}
              <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
                {["GDPR compliant", "eIDAS certified", "EU data only"].map((badge, i) => (
                  <span key={i} style={{ fontSize: 11, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 5, letterSpacing: "0.01em" }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/></svg>
                    {badge}
                  </span>
                ))}
              </div>
            </div>

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

      {/* Feature spotlight */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 0 }}>
            <span className="eyebrow">Feature spotlight</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Three capabilities Oneflow <em>doesn't offer</em>
            </h2>
          </div>
        </div>
      </section>

      {/* 1. Obligations */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Obligation tracking</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Know every deadline before it becomes a <em>problem</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Oneflow stops after the signature. ContractControl extracts obligations with AI, tracks renewals, payment milestones, and price uplifts - and alerts the right person before a deadline slips.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["AI-powered obligation extraction from signed contracts", "Smart renewal tracking with opt-out window alerts", "Custom obligation types tailored to your business rules"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Obligation tracker</span>
                    </div>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "#991b1b", background: "rgba(220,38,38,0.08)", padding: "3px 8px", borderRadius: 99, fontWeight: 600 }}>1 overdue</span>
                  </div>
                  {[
                    { obligation: "Annual price review", contract: "Kvist Group MSA", due: "2026-03-01", days: "12d", status: "due-soon" },
                    { obligation: "Payment milestone", contract: "Northwind SLA", due: "2026-02-15", days: "3d", status: "overdue" },
                    { obligation: "Renewal notice period", contract: "Brevia Services", due: "2026-04-01", days: "43d", status: "on-track" },
                    { obligation: "Insurance cert update", contract: "Helix Advisory", due: "2026-05-01", days: "73d", status: "on-track" },
                    { obligation: "CPI price adjustment", contract: "Velora AB MSA", due: "2026-06-01", days: "104d", status: "on-track" },
                  ].map((row, i, arr) => {
                    const s = row.status === "overdue" ? { bg: "rgba(220,38,38,0.08)", color: "#991b1b", label: "Overdue" } :
                              row.status === "due-soon" ? { bg: "rgba(234,179,8,0.1)", color: "#854d0e", label: "Due soon" } :
                              { bg: "rgba(22,163,74,0.08)", color: "#166534", label: "On track" };
                    return (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "start", gap: 12, padding: "11px 16px", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none" }}>
                        <div>
                          <div style={{ fontWeight: 500, color: "var(--ink-1)", marginBottom: 2, fontSize: 12.5 }}>{row.obligation}</div>
                          <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{row.contract} · due {row.due}</div>
                        </div>
                        <div style={{ textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 3 }}>
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)", fontWeight: 500 }}>{row.days}</span>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color }}>{s.label}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Intake - flipped */}
      <section className="section">
        <div className="container">
          <div className="feat-grid feat-grid--flip">
            <div>
              <span className="eyebrow">Contract intake</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Route every request to the right workflow <em>automatically</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Oneflow has no intake layer. ContractControl lets business teams submit contract requests through structured forms that auto-route to the correct template, approval chain, and owner - no Slack messages, no email chains.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Self-service intake forms for Sales, HR, Procurement, and Finance", "Auto-routing based on contract type, value, and region", "Real-time status visibility for every stakeholder"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Contract request #REQ-118</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "var(--accent)", background: "var(--accent-soft)", padding: "3px 8px", borderRadius: 99 }}>In progress</span>
                  </div>
                  <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)" }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
                      <div>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Type</div>
                        <div style={{ fontSize: 12, color: "var(--ink-1)", fontWeight: 500, padding: "6px 10px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6 }}>NDA</div>
                      </div>
                      <div>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Counterparty</div>
                        <div style={{ fontSize: 12, color: "var(--ink-1)", fontWeight: 500, padding: "6px 10px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6 }}>Velora AB</div>
                      </div>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                      <div>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Value</div>
                        <div style={{ fontSize: 12, color: "var(--ink-1)", fontWeight: 500, padding: "6px 10px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6 }}>€84,000</div>
                      </div>
                      <div>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Department</div>
                        <div style={{ fontSize: 12, color: "var(--ink-1)", fontWeight: 500, padding: "6px 10px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6 }}>Sales</div>
                      </div>
                    </div>
                  </div>
                  <div style={{ padding: "14px 16px" }}>
                    <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12 }}>Routing workflow</div>
                    {[
                      { label: "Request submitted", time: "09:14", done: true },
                      { label: "Template auto-drafted", time: "09:15", done: true },
                      { label: "Legal review", time: "09:22", done: true },
                      { label: "Sent for signature", time: "", done: false, active: true },
                    ].map((step, i, arr) => (
                      <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%", flexShrink: 0, display: "grid", placeItems: "center", background: step.done ? "#10B981" : step.active ? "var(--accent)" : "var(--bg-soft)", border: !step.done && !step.active ? "1.5px solid var(--line-strong)" : "none" }}>
                            {step.done && <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>}
                            {step.active && <div style={{ width: 6, height: 6, borderRadius: "50%", background: "white" }} />}
                          </span>
                          {i < arr.length - 1 && <span style={{ width: 1.5, height: 14, background: step.done ? "#10B981" : "var(--line)", margin: "2px 0" }} />}
                        </div>
                        <div style={{ paddingBottom: i < arr.length - 1 ? 2 : 0, display: "flex", alignItems: "center", gap: 8 }}>
                          <span style={{ color: step.done ? "var(--ink-2)" : step.active ? "var(--accent)" : "var(--ink-4)", fontWeight: 500, fontSize: 12 }}>{step.label}</span>
                          {step.time && <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-5)" }}>{step.time}</span>}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Invoice vs Terms */}
      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Invoice vs. contract terms</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Catch invoice discrepancies before they become <em>revenue leakage</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                ContractControl compares what was invoiced against what was contracted. Spot pricing deviations, unexpected uplifts, and billing errors across your vendor portfolio - a capability Oneflow doesn't have.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Side-by-side comparison of invoiced amounts vs. agreed terms", "Automated flagging of pricing deviations and unexpected charges", "Financial variance reporting connected to your ERP"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Invoice vs. contract terms</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "#991b1b", background: "rgba(220,38,38,0.08)", padding: "3px 8px", borderRadius: 99 }}>2 variances</span>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 90px 90px 70px", padding: "8px 16px", borderBottom: "1px solid var(--line)", fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
                    <span>Line item</span>
                    <span style={{ textAlign: "right" }}>Contracted</span>
                    <span style={{ textAlign: "right" }}>Invoiced</span>
                    <span style={{ textAlign: "center" }}>Status</span>
                  </div>
                  {[
                    { item: "Software License", contracted: "€2,400/mo", invoiced: "€2,640/mo", variance: "+10%", match: false },
                    { item: "Support SLA", contracted: "€800/mo", invoiced: "€800/mo", variance: null, match: true },
                    { item: "Cloud Hosting", contracted: "€1,200/mo", invoiced: "€1,320/mo", variance: "+10%", match: false },
                    { item: "Training (On-site)", contracted: "€1,500", invoiced: "€1,500", variance: null, match: true },
                  ].map((row, i, arr) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 90px 90px 70px", padding: "10px 16px", alignItems: "center", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none", background: !row.match ? "rgba(220,38,38,0.02)" : "transparent" }}>
                      <span style={{ fontWeight: 500, color: "var(--ink-1)", fontSize: 12 }}>{row.item}</span>
                      <span style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{row.contracted}</span>
                      <span style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 11, color: row.match ? "var(--ink-3)" : "#991b1b", fontWeight: row.match ? 400 : 600 }}>{row.invoiced}</span>
                      <span style={{ textAlign: "center" }}>
                        {row.match ? (
                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(22,163,74,0.08)", color: "#166534" }}>Match</span>
                        ) : (
                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(220,38,38,0.08)", color: "#991b1b" }}>{row.variance}</span>
                        )}
                      </span>
                    </div>
                  ))}
                  <div style={{ padding: "10px 16px", background: "rgba(220,38,38,0.04)", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>2 discrepancies found</span>
                    <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", fontWeight: 600, color: "#991b1b" }}>+€2,880/yr variance</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature comparison tables */}
      <section id="compare-table" style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 960 }}>
          {features.map((group, gi) => (
            <div key={gi} className="fade-up" style={{ marginBottom: 48, animationDelay: `${gi * 0.06}s` }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
                color: "var(--accent)", marginBottom: 16, paddingLeft: 2,
              }}>
                {group.category}
              </div>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 14,
                background: "var(--bg-elevated)",
              }}>
                {/* Header */}
                <div style={{
                  display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "12px 24px",
                  borderBottom: "1px solid var(--line)", background: "var(--bg-soft)",
                  fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.04em", textTransform: "uppercase",
                }}>
                  <span>Feature</span>
                  <span style={{ textAlign: "center" }}>ContractControl</span>
                  <span style={{ textAlign: "center" }}>Oneflow</span>
                </div>
                {/* Rows */}
                {group.items.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "14px 24px",
                    borderBottom: ri < group.items.length - 1 ? "1px solid var(--line)" : "none",
                    alignItems: "center",
                  }}>
                    <span style={{ fontSize: 14, color: "var(--ink-2)", position: "relative", display: "inline-flex", alignItems: "center", gap: 6, cursor: row.desc ? "help" : "default" }}
                      className={row.desc ? "feature-tip" : undefined}>
                      {row.feature}
                      {row.desc && (
                        <>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2" style={{ flexShrink: 0, opacity: 0.6 }}>
                            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                          </svg>
                          <span className="feature-tip-text">{row.desc}</span>
                        </>
                      )}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.cc ? checkIcon : dashIcon}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.competitor ? checkIcon : dashIcon}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Key differentiators */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <span className="eyebrow fade-up">Key differences</span>
            <h2 className="fade-up" style={{
              fontSize: "clamp(28px, 3.6vw, 42px)", fontWeight: 600,
              letterSpacing: "-0.03em", marginTop: 16, color: "var(--ink-1)",
            }}>
              Where ContractControl goes further
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 20 }}>
            {differentiators.map((d, i) => (
              <div key={i} className="fade-up" style={{
                padding: "28px 24px", border: "1px solid var(--line)",
                borderRadius: 14, background: "var(--bg-elevated)",
                animationDelay: `${i * 0.05}s`,
              }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 18px", marginTop: 2, color: "var(--accent)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <div>
                    <h3 style={{ fontSize: 16, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>
                      {d.title}
                    </h3>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
                      {d.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

function CompareJuroPage() {
  const features = [
    { category: "Contract Lifecycle", items: [
      { feature: "Intake workflows", desc: "Route contract requests from any department into a structured pipeline.", cc: true, competitor: false },
      { feature: "Template library", desc: "Pre-approved, reusable contract templates for every team.", cc: true, competitor: true },
      { feature: "Clause library", desc: "AI-powered clause bank with fallback and alternative suggestions.", cc: true, competitor: true },
      { feature: "AI-assisted drafting", desc: "Generate and refine contract language with built-in AI.", cc: true, competitor: true },
      { feature: "Conditional blocks", desc: "Rule-based content that adapts automatically to contract parameters.", cc: true, competitor: true },
      { feature: "Calculation engine", desc: "Auto-calculate pricing, penalties, and payment schedules inside contracts.", cc: true, competitor: false },
      { feature: "Product library", desc: "Centralised catalog of products, services, and pricing for contract use.", cc: true, competitor: false },
      { feature: "Clickwrap", desc: "One-click acceptance for terms, policies, and lightweight agreements.", cc: true, competitor: false },
      { feature: "Terms management", desc: "Manage and publish public policies like privacy policies, terms and conditions, and cookie notices.", cc: true, competitor: false },
      { feature: "Approval workflows", desc: "Multi-step internal approvals before contracts are sent.", cc: true, competitor: true },
      { feature: "Owner routing", desc: "Auto-assign contract owners based on metadata and business rules.", cc: true, competitor: false },
      { feature: "Collaborative negotiation", desc: "Real-time co-editing and commenting with counterparties.", cc: true, competitor: true },
      { feature: "Redline to review", desc: "Push negotiation changes back into the review stage seamlessly.", cc: true, competitor: false },
      { feature: "Electronic signatures", desc: "Legally binding eSignatures with full audit trail.", cc: true, competitor: true },
      { feature: "Analytics & reporting", desc: "Dashboards and reports on contract volume, cycle time, and bottlenecks.", cc: true, competitor: true },
      { feature: "Health scoring", desc: "Automated contract health scores based on risk, compliance, and deadlines.", cc: true, competitor: false },
      { feature: "Contract repository", desc: "Searchable, centralised storage for all executed contracts.", cc: true, competitor: true },
    ]},
    { category: "Obligations & Renewals", items: [
      { feature: "Obligation tracking", desc: "Monitor and alert on every contractual obligation and deadline.", cc: true, competitor: false },
      { feature: "AI obligation extraction", desc: "Automatically extract obligations and key dates from signed contracts.", cc: true, competitor: false },
      { feature: "Custom obligations", desc: "Define and configure obligation types specific to your business.", cc: true, competitor: false },
      { feature: "Renewal tracking", desc: "Smart alerts for upcoming renewals, auto-renewals, and termination windows.", cc: true, competitor: true },
      { feature: "Risk-specific setup", desc: "Configure obligation monitoring based on risk level and contract type.", cc: true, competitor: false },
      { feature: "Obligations API", desc: "Programmatic access to obligation data for external system integration.", cc: true, competitor: false },
      { feature: "Contract Card", desc: "Structured space for gathering and organising key contract data.", cc: true, competitor: false },
    ]},
    { category: "Company & Financial Intelligence", items: [
      { feature: "Company lookup", desc: "Verify counterparty details and company registration data instantly.", cc: true, competitor: false },
      { feature: "Financial data", desc: "Access credit ratings, revenue, and financial health of counterparties.", cc: true, competitor: false },
      { feature: "Revenue comparison", desc: "Compare invoiced amounts against contracted terms and expected revenue.", cc: true, competitor: false },
      { feature: "Invoice risk tracking", desc: "Flag invoices that deviate from contract terms or payment schedules.", cc: true, competitor: false },
      { feature: "ERP financial sync", desc: "Pull live financial data from your ERP into contract workflows.", cc: true, competitor: false },
    ]},
    { category: "Vendor Management", items: [
      { feature: "Vendor risk scoring", desc: "Automated risk scores based on compliance, financial health, and history.", cc: true, competitor: false },
      { feature: "Vendor assessments", desc: "Structured workflows for evaluating and onboarding vendors.", cc: true, competitor: false },
      { feature: "Vendor AI analytics", desc: "AI-driven insights across your vendor portfolio and contracts.", cc: true, competitor: false },
      { feature: "Compliant Hub", desc: "Centralised compliance management for vendor relationships.", cc: true, competitor: false },
    ]},
    { category: "Document Management", items: [
      { feature: "Document Hub", desc: "Consolidate internal policies into one branded hub for your organisation.", cc: true, competitor: false },
      { feature: "Advanced versioning", desc: "Track changes across documents, obligations, and contracts over time.", cc: true, competitor: false },
      { feature: "Native contract library", desc: "AI-searchable library of all contracts with smart categorisation.", cc: true, competitor: false },
      { feature: "Dataroom", desc: "Secure, permissioned space for sharing documents during due diligence.", cc: true, competitor: false },
    ]},
    { category: "Compliance & eID", items: [
      { feature: "30+ eID methods", desc: "Support for over 30 electronic identification methods globally.", cc: true, competitor: false },
      { feature: "BankID (SE, NO)", desc: "Native BankID integration for Swedish and Norwegian signers.", cc: true, competitor: false },
      { feature: "MitID (DK)", desc: "Danish MitID for secure identification and signing.", cc: true, competitor: false },
      { feature: "Freja eID", desc: "Freja eID+ support for Swedish and EU-wide identification.", cc: true, competitor: false },
      { feature: "eIDAS QES", desc: "Qualified Electronic Signatures meeting EU eIDAS regulation.", cc: true, competitor: false },
      { feature: "Advanced metadata", desc: "Custom metadata structures for GDPR, data classification, and tagging.", cc: true, competitor: true },
      { feature: "EU data residency", desc: "All data stored and processed within EU borders.", cc: true, competitor: true },
      { feature: "ISO 27001", desc: "Certified information security management system.", cc: true, competitor: true },
      { feature: "GDPR by design", desc: "Privacy and data protection built into the platform architecture.", cc: true, competitor: true },
    ]},
    { category: "Platform & Integrations", items: [
      { feature: "Power Modules", desc: "Extensible modules to add specialised functionality as you grow.", cc: true, competitor: false },
      { feature: "Unlimited viewers", desc: "Free viewer seats so your entire organisation can access contracts.", cc: true, competitor: false },
      { feature: "Salesforce", desc: "Native integration to sync contracts with Salesforce CRM.", cc: true, competitor: true },
      { feature: "HubSpot", desc: "Connect contract workflows directly to HubSpot deals and contacts.", cc: true, competitor: true },
      { feature: "ERP integrations", desc: "Pre-built connectors for major ERP systems.", cc: true, competitor: false },
      { feature: "Open API & webhooks", desc: "Full API access and real-time event webhooks for custom integrations.", cc: true, competitor: true },
      { feature: "Advanced permissions", desc: "Granular role-based access control for teams, documents, and workflows.", cc: true, competitor: false },
    ]},
  ];

  const differentiators = [
    {
      title: "Full lifecycle vs. browser editing",
      desc: "Juro focuses on in-browser contract creation. ContractControl covers the full lifecycle from intake to obligations.",
    },
    {
      title: "Word compatibility",
      desc: "Import and negotiate in Word format. Juro is browser-only, which can create friction with counterparties who expect .docx files.",
    },
    {
      title: "Obligation intelligence",
      desc: "AI-extracted obligations, renewal tracking, and deadline alerts. Juro's job ends at the signature.",
    },
    {
      title: "Vendor management and risk scoring",
      desc: "Score vendors, run assessments, and get AI insights. Juro has no vendor management.",
    },
    {
      title: "Dataroom and Document Hub",
      desc: "Secure sharing for due diligence and internal policies. Juro manages contracts, not documents.",
    },
    {
      title: "30+ eID methods",
      desc: "BankID, MitID, Freja, and eIDAS QES for Nordic and EU compliance. Juro has limited identity verification.",
    },
  ];

  const checkIcon = React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.5 },
    React.createElement("polyline", { points: "20 6 9 17 4 12" })
  );
  const dashIcon = React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "var(--ink-5)", strokeWidth: 2, strokeLinecap: "round" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
  );

  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", companySize: "" });
  const [focused, setFocused] = React.useState(null);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const inputStyle = (k) => ({
    width: "100%", height: 44, padding: "0 14px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 14, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12.5, fontWeight: 500, color: "var(--ink-3)", marginBottom: 6 };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName || !form.email) return;
    setSubmitting(true);

    // Submit to HubSpot Forms API
    fetch("https://api.hsforms.com/submissions/v3/integration/submit/144265445/cb831713-aef2-4599-a44a-8f383d8e8f7b", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email },
          { name: "company", value: form.company },
          { name: "company_size", value: form.companySize },
        ],
        context: { pageUri: window.location.href, pageName: "ContractControl vs Juro" },
      }),
    }).then(() => {
      setSubmitting(false);
      setSubmitted(true);
    }).catch(() => {
      setSubmitting(false);
      setSubmitted(true);
    });
  };

  const benefits = [
    { title: "Full lifecycle, not just editing", desc: "Intake, drafting, review, negotiation, eSignature, repository, and obligations in one platform." },
    { title: "Word compatibility built in", desc: "Import existing templates and negotiate in the format your counterparties expect." },
    { title: "Nordic compliance from day one", desc: "BankID, MitID, eIDAS, and EU data residency included." },
  ];

  return (
    <div>
      {/* Split hero: text + benefits left, form right */}
      <section className="hero" style={{ padding: "148px 0 72px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 64, alignItems: "start" }} className="mob-stack">

            {/* Left: text + benefits */}
            <div>
              <span className="eyebrow fade-up">ContractControl vs Juro</span>
              <h1 className="display fade-up" style={{ marginTop: 18, fontSize: "clamp(34px, 4.6vw, 56px)", animationDelay: "0.05s", lineHeight: 1.1 }}>
                From browser-only contracts to full <span className="accent">platform control</span>.
              </h1>
              <p className="fade-up" style={{ marginTop: 20, animationDelay: "0.1s", maxWidth: 480, fontSize: 15, color: "var(--ink-3)", lineHeight: 1.65 }}>
                Juro keeps contracts in the browser. ContractControl gives you the same modern editing experience plus Word compatibility, obligation tracking, vendor management, and Nordic compliance - all in one platform.
              </p>

              <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 24 }}>
                {benefits.map((b, i) => (
                  <div key={i} className="fade-up" style={{ display: "flex", gap: 14, alignItems: "flex-start", animationDelay: `${0.12 + i * 0.04}s` }}>
                    <span style={{ flex: "0 0 22px", marginTop: 2, color: "var(--accent)" }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <div>
                      <strong style={{ fontSize: 15, color: "var(--ink-1)", display: "block", marginBottom: 3 }}>{b.title}</strong>
                      <span style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{b.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: form card */}
            <div className="fade-up" style={{ animationDelay: "0.08s" }}>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 16, padding: "36px 32px",
                background: "var(--bg-elevated)",
              }}>
                {submitted ? (
                  <div style={{ textAlign: "center", padding: "24px 0" }}>
                    <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 16px" }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Request received!</div>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
                      We'll confirm a 30-minute slot within one business day.
                    </p>
                  </div>
                ) : (
                  <>
                    <h2 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>See the difference live</h2>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: "0 0 24px", lineHeight: 1.5 }}>Book a 30-minute walkthrough tailored to your team.</p>

                    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>First name</label>
                          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Last name</label>
                          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                        </div>
                      </div>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>Company</label>
                          <input type="text" placeholder="Volantis AB" value={form.company} onChange={set("company")}
                            onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Company size</label>
                          <select value={form.companySize} onChange={set("companySize")}
                            onFocus={() => setFocused("companySize")} onBlur={() => setFocused(null)}
                            style={{ ...inputStyle("companySize"), appearance: "none", backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center", paddingRight: 32 }}>
                            <option value="">Select size...</option>
                            <option value="1-10">1-10</option>
                            <option value="11-50">11-50</option>
                            <option value="51-200">51-200</option>
                            <option value="201-500">201-500</option>
                            <option value="500+">500+</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" disabled={submitting}
                        className="btn btn-primary btn-lg"
                        style={{ width: "100%", marginTop: 4, fontSize: 15, height: 48, borderRadius: 24, justifyContent: "center" }}>
                        {submitting ? "Sending..." : <>Request demo <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginLeft: 6 }}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></>}
                      </button>
                    </form>

                    <p style={{ fontSize: 12, color: "var(--ink-4)", textAlign: "center", marginTop: 14, lineHeight: 1.5 }}>
                      No commitment. We'll confirm a 30-minute slot within one business day.
                    </p>
                  </>
                )}
              </div>

              {/* Trust badges */}
              <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
                {["GDPR compliant", "eIDAS certified", "EU data only"].map((badge, i) => (
                  <span key={i} style={{ fontSize: 11, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 5, letterSpacing: "0.01em" }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/></svg>
                    {badge}
                  </span>
                ))}
              </div>
            </div>

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

      {/* Feature spotlight */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 0 }}>
            <span className="eyebrow">Feature spotlight</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Three capabilities Juro <em>doesn't offer</em>
            </h2>
          </div>
        </div>
      </section>

      {/* 1. Obligation tracking */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Post-signature intelligence</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Track every obligation, not just the <em>signature</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Juro's job ends when the contract is signed. ContractControl extracts obligations with AI, monitors renewals and payment milestones, and alerts the right person before any deadline slips.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["AI-powered obligation extraction from signed contracts", "Renewal tracking with opt-out window alerts", "Custom obligation types tailored to your business rules"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Obligation tracker</span>
                    </div>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "#854d0e", background: "rgba(234,179,8,0.1)", padding: "3px 8px", borderRadius: 99, fontWeight: 600 }}>2 due soon</span>
                  </div>
                  {[
                    { obligation: "Annual price review", contract: "Kvist Group MSA", due: "2026-07-01", days: "19d", status: "due-soon" },
                    { obligation: "Data processing audit", contract: "Northwind SLA", due: "2026-07-08", days: "26d", status: "due-soon" },
                    { obligation: "Insurance cert renewal", contract: "Brevia Services", due: "2026-08-15", days: "64d", status: "on-track" },
                    { obligation: "SLA performance report", contract: "Helix Advisory", due: "2026-09-01", days: "81d", status: "on-track" },
                    { obligation: "Renewal opt-out window", contract: "Velora AB MSA", due: "2026-10-15", days: "125d", status: "on-track" },
                  ].map((row, i, arr) => {
                    const s = row.status === "overdue" ? { bg: "rgba(220,38,38,0.08)", color: "#991b1b", label: "Overdue" } :
                              row.status === "due-soon" ? { bg: "rgba(234,179,8,0.1)", color: "#854d0e", label: "Due soon" } :
                              { bg: "rgba(22,163,74,0.08)", color: "#166534", label: "On track" };
                    return (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "start", gap: 12, padding: "11px 16px", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none" }}>
                        <div>
                          <div style={{ fontWeight: 500, color: "var(--ink-1)", marginBottom: 2, fontSize: 12.5 }}>{row.obligation}</div>
                          <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{row.contract} · due {row.due}</div>
                        </div>
                        <div style={{ textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 3 }}>
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)", fontWeight: 500 }}>{row.days}</span>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color }}>{s.label}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Vendor management - flipped */}
      <section className="section">
        <div className="container">
          <div className="feat-grid feat-grid--flip">
            <div>
              <span className="eyebrow">Vendor intelligence</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Score, assess, and manage every vendor <em>relationship</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Juro focuses on commercial contracts but has no vendor management layer. ContractControl gives procurement teams automated risk scoring, structured assessments, and AI-powered insights across the entire vendor portfolio.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Automated vendor risk scores based on compliance and financial health", "Structured onboarding and assessment workflows", "AI-driven analytics across all vendor contracts"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Vendor portfolio</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", background: "var(--bg-soft)", padding: "3px 8px", borderRadius: 99, border: "1px solid var(--line)" }}>4 vendors</span>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 70px 90px 60px", padding: "8px 16px", borderBottom: "1px solid var(--line)", fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
                    <span>Vendor</span>
                    <span style={{ textAlign: "center" }}>Risk</span>
                    <span style={{ textAlign: "center" }}>Last assessed</span>
                    <span style={{ textAlign: "right" }}>Contracts</span>
                  </div>
                  {[
                    { name: "Brevia Services AB", risk: "Low", assessed: "2026-05-12", contracts: 8 },
                    { name: "Northwind Consulting", risk: "Medium", assessed: "2026-04-28", contracts: 3 },
                    { name: "Helix Advisory Ltd", risk: "Low", assessed: "2026-05-01", contracts: 5 },
                    { name: "Velora Logistics", risk: "High", assessed: "2026-03-15", contracts: 2 },
                  ].map((row, i, arr) => {
                    const r = row.risk === "High" ? { bg: "rgba(220,38,38,0.08)", color: "#991b1b" } :
                              row.risk === "Medium" ? { bg: "rgba(234,179,8,0.1)", color: "#854d0e" } :
                              { bg: "rgba(22,163,74,0.08)", color: "#166534" };
                    return (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 70px 90px 60px", padding: "11px 16px", alignItems: "center", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none" }}>
                        <span style={{ fontWeight: 500, color: "var(--ink-1)", fontSize: 12.5 }}>{row.name}</span>
                        <span style={{ textAlign: "center" }}>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: r.bg, color: r.color }}>{row.risk}</span>
                        </span>
                        <span style={{ textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{row.assessed}</span>
                        <span style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)", fontWeight: 500 }}>{row.contracts}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Dataroom and Document Hub */}
      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Secure document sharing</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Share documents securely, not just <em>contracts</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Juro manages contracts but has no secure document sharing. ContractControl includes a built-in Dataroom for due diligence and a Document Hub for publishing internal policies - all with granular access controls.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Permissioned Dataroom for due diligence and M&A processes", "Document Hub for internal policy management and distribution", "Granular access controls with audit trail"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Dataroom</span>
                    </div>
                    <button style={{ fontSize: 10.5, fontWeight: 600, color: "white", background: "var(--accent)", padding: "4px 12px", borderRadius: 99, border: "none", cursor: "pointer" }}>+ Invite</button>
                  </div>
                  {[
                    { folder: "Financial Statements", files: 12, permission: "Board only", icon: "lock" },
                    { folder: "Legal Due Diligence", files: 24, permission: "Advisors", icon: "users" },
                    { folder: "HR & Employment", files: 8, permission: "Internal", icon: "shield" },
                  ].map((row, i, arr) => (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none" }}>
                      <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", flexShrink: 0 }}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                      </span>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 500, color: "var(--ink-1)", fontSize: 12.5, marginBottom: 2 }}>{row.folder}</div>
                        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{row.files} files</div>
                      </div>
                      <span style={{ fontSize: 10, fontWeight: 600, padding: "3px 10px", borderRadius: 99, background: "var(--bg-soft)", color: "var(--ink-3)", border: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 4 }}>
                        {row.icon === "lock" && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>}
                        {row.icon === "users" && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>}
                        {row.icon === "shield" && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>}
                        {row.permission}
                      </span>
                    </div>
                  ))}
                  <div style={{ padding: "10px 16px", background: "var(--bg-soft)", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 11, color: "var(--ink-4)", fontWeight: 500 }}>3 folders · 44 files total</span>
                    <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--accent)", display: "flex", alignItems: "center", gap: 4 }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                      Audit trail active
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature comparison tables */}
      <section id="compare-table" style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 960 }}>
          {features.map((group, gi) => (
            <div key={gi} className="fade-up" style={{ marginBottom: 48, animationDelay: `${gi * 0.06}s` }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
                color: "var(--accent)", marginBottom: 16, paddingLeft: 2,
              }}>
                {group.category}
              </div>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 14,
                background: "var(--bg-elevated)",
              }}>
                {/* Header */}
                <div style={{
                  display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "12px 24px",
                  borderBottom: "1px solid var(--line)", background: "var(--bg-soft)",
                  fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.04em", textTransform: "uppercase",
                }}>
                  <span>Feature</span>
                  <span style={{ textAlign: "center" }}>ContractControl</span>
                  <span style={{ textAlign: "center" }}>Juro</span>
                </div>
                {/* Rows */}
                {group.items.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "14px 24px",
                    borderBottom: ri < group.items.length - 1 ? "1px solid var(--line)" : "none",
                    alignItems: "center",
                  }}>
                    <span style={{ fontSize: 14, color: "var(--ink-2)", position: "relative", display: "inline-flex", alignItems: "center", gap: 6, cursor: row.desc ? "help" : "default" }}
                      className={row.desc ? "feature-tip" : undefined}>
                      {row.feature}
                      {row.desc && (
                        <>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2" style={{ flexShrink: 0, opacity: 0.6 }}>
                            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                          </svg>
                          <span className="feature-tip-text">{row.desc}</span>
                        </>
                      )}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.cc ? checkIcon : dashIcon}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.competitor ? checkIcon : dashIcon}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Key differentiators */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <span className="eyebrow fade-up">Key differences</span>
            <h2 className="fade-up" style={{
              fontSize: "clamp(28px, 3.6vw, 42px)", fontWeight: 600,
              letterSpacing: "-0.03em", marginTop: 16, color: "var(--ink-1)",
            }}>
              Where ContractControl goes further
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 20 }}>
            {differentiators.map((d, i) => (
              <div key={i} className="fade-up" style={{
                padding: "28px 24px", border: "1px solid var(--line)",
                borderRadius: 14, background: "var(--bg-elevated)",
                animationDelay: `${i * 0.05}s`,
              }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 18px", marginTop: 2, color: "var(--accent)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <div>
                    <h3 style={{ fontSize: 16, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>
                      {d.title}
                    </h3>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
                      {d.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

function CompareIroncladPage() {
  const features = [
    { category: "Contract Lifecycle", items: [
      { feature: "Intake workflows", desc: "Route contract requests from any department into a structured pipeline.", cc: true, competitor: true },
      { feature: "Template library", desc: "Pre-approved, reusable contract templates for every team.", cc: true, competitor: true },
      { feature: "Clause library", desc: "AI-powered clause bank with fallback and alternative suggestions.", cc: true, competitor: true },
      { feature: "AI-assisted drafting", desc: "Generate and refine contract language with built-in AI.", cc: true, competitor: true },
      { feature: "Conditional blocks", desc: "Rule-based content that adapts automatically to contract parameters.", cc: true, competitor: true },
      { feature: "Calculation engine", desc: "Auto-calculate pricing, penalties, and payment schedules inside contracts.", cc: true, competitor: false },
      { feature: "Product library", desc: "Centralised catalog of products, services, and pricing for contract use.", cc: true, competitor: false },
      { feature: "Clickwrap", desc: "One-click acceptance for terms, policies, and lightweight agreements.", cc: true, competitor: true },
      { feature: "Terms management", desc: "Manage and publish public policies like privacy policies, terms and conditions, and cookie notices.", cc: true, competitor: false },
      { feature: "Approval workflows", desc: "Multi-step internal approvals before contracts are sent.", cc: true, competitor: true },
      { feature: "Owner routing", desc: "Auto-assign contract owners based on metadata and business rules.", cc: true, competitor: true },
      { feature: "Collaborative negotiation", desc: "Real-time co-editing and commenting with counterparties.", cc: true, competitor: true },
      { feature: "Redline to review", desc: "Push negotiation changes back into the review stage seamlessly.", cc: true, competitor: true },
      { feature: "Electronic signatures", desc: "Legally binding eSignatures with full audit trail.", cc: true, competitor: true },
      { feature: "Analytics & reporting", desc: "Dashboards and reports on contract volume, cycle time, and bottlenecks.", cc: true, competitor: true },
      { feature: "Health scoring", desc: "Automated contract health scores based on risk, compliance, and deadlines.", cc: true, competitor: false },
      { feature: "Contract repository", desc: "Searchable, centralised storage for all executed contracts.", cc: true, competitor: true },
    ]},
    { category: "Obligations & Renewals", items: [
      { feature: "Obligation tracking", desc: "Monitor and alert on every contractual obligation and deadline.", cc: true, competitor: false },
      { feature: "AI obligation extraction", desc: "Automatically extract obligations and key dates from signed contracts.", cc: true, competitor: false },
      { feature: "Custom obligations", desc: "Define and configure obligation types specific to your business.", cc: true, competitor: false },
      { feature: "Renewal tracking", desc: "Smart alerts for upcoming renewals, auto-renewals, and termination windows.", cc: true, competitor: true },
      { feature: "Risk-specific setup", desc: "Configure obligation monitoring based on risk level and contract type.", cc: true, competitor: false },
      { feature: "Obligations API", desc: "Programmatic access to obligation data for external system integration.", cc: true, competitor: false },
      { feature: "Contract Card", desc: "Structured space for gathering and organising key contract data.", cc: true, competitor: false },
    ]},
    { category: "Company & Financial Intelligence", items: [
      { feature: "Company lookup", desc: "Verify counterparty details and company registration data instantly.", cc: true, competitor: false },
      { feature: "Financial data", desc: "Access credit ratings, revenue, and financial health of counterparties.", cc: true, competitor: false },
      { feature: "Revenue comparison", desc: "Compare invoiced amounts against contracted terms and expected revenue.", cc: true, competitor: false },
      { feature: "Invoice risk tracking", desc: "Flag invoices that deviate from contract terms or payment schedules.", cc: true, competitor: false },
      { feature: "ERP financial sync", desc: "Pull live financial data from your ERP into contract workflows.", cc: true, competitor: false },
    ]},
    { category: "Vendor Management", items: [
      { feature: "Vendor risk scoring", desc: "Automated risk scores based on compliance, financial health, and history.", cc: true, competitor: false },
      { feature: "Vendor assessments", desc: "Structured workflows for evaluating and onboarding vendors.", cc: true, competitor: false },
      { feature: "Vendor AI analytics", desc: "AI-driven insights across your vendor portfolio and contracts.", cc: true, competitor: false },
      { feature: "Compliant Hub", desc: "Centralised compliance management for vendor relationships.", cc: true, competitor: false },
    ]},
    { category: "Document Management", items: [
      { feature: "Document Hub", desc: "Consolidate internal policies into one branded hub for your organisation.", cc: true, competitor: false },
      { feature: "Advanced versioning", desc: "Track changes across documents, obligations, and contracts over time.", cc: true, competitor: true },
      { feature: "Native contract library", desc: "AI-searchable library of all contracts with smart categorisation.", cc: true, competitor: true },
      { feature: "Dataroom", desc: "Secure, permissioned space for sharing documents during due diligence.", cc: true, competitor: false },
    ]},
    { category: "Compliance & eID", items: [
      { feature: "30+ eID methods", desc: "Support for over 30 electronic identification methods globally.", cc: true, competitor: false },
      { feature: "BankID (SE, NO)", desc: "Native BankID integration for Swedish and Norwegian signers.", cc: true, competitor: false },
      { feature: "MitID (DK)", desc: "Danish MitID for secure identification and signing.", cc: true, competitor: false },
      { feature: "Freja eID", desc: "Freja eID+ support for Swedish and EU-wide identification.", cc: true, competitor: false },
      { feature: "eIDAS QES", desc: "Qualified Electronic Signatures meeting EU eIDAS regulation.", cc: true, competitor: false },
      { feature: "Advanced metadata", desc: "Custom metadata structures for GDPR, data classification, and tagging.", cc: true, competitor: true },
      { feature: "EU data residency", desc: "All data stored and processed within EU borders.", cc: true, competitor: false },
      { feature: "ISO 27001", desc: "Certified information security management system.", cc: true, competitor: true },
      { feature: "GDPR by design", desc: "Privacy and data protection built into the platform architecture.", cc: true, competitor: false },
    ]},
    { category: "Platform & Integrations", items: [
      { feature: "Power Modules", desc: "Extensible modules to add specialised functionality as you grow.", cc: true, competitor: false },
      { feature: "Unlimited viewers", desc: "Free viewer seats so your entire organisation can access contracts.", cc: true, competitor: false },
      { feature: "Salesforce", desc: "Native integration to sync contracts with Salesforce CRM.", cc: true, competitor: true },
      { feature: "HubSpot", desc: "Connect contract workflows directly to HubSpot deals and contacts.", cc: true, competitor: true },
      { feature: "ERP integrations", desc: "Pre-built connectors for major ERP systems.", cc: true, competitor: false },
      { feature: "Open API & webhooks", desc: "Full API access and real-time event webhooks for custom integrations.", cc: true, competitor: true },
      { feature: "Advanced permissions", desc: "Granular role-based access control for teams, documents, and workflows.", cc: true, competitor: true },
    ]},
  ];

  const differentiators = [
    {
      title: "Nordic-first compliance",
      desc: "BankID, MitID, Freja, eIDAS QES, and EU data residency from day one. Ironclad is US-focused with limited European identity support.",
    },
    {
      title: "Financial and company intelligence",
      desc: "Verify counterparties, pull credit data, and compare invoices against terms natively. Ironclad requires third-party integrations.",
    },
    {
      title: "Weeks to value, not quarters",
      desc: "Configure and go live in weeks without dedicated implementation teams. Ironclad deployments often span 3-6 months.",
    },
    {
      title: "Transparent pricing at scale",
      desc: "One plan with unlimited viewer seats. Ironclad pricing scales steeply with enterprise features and seat counts.",
    },
    {
      title: "Obligation intelligence",
      desc: "AI-extracted obligations, custom obligation types, and risk-specific monitoring. Ironclad tracks renewals but not granular obligations.",
    },
    {
      title: "Vendor management built in",
      desc: "Risk scoring, assessments, and AI vendor analytics without add-ons. Ironclad has no native vendor management.",
    },
  ];

  const checkIcon = React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.5 },
    React.createElement("polyline", { points: "20 6 9 17 4 12" })
  );
  const dashIcon = React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "var(--ink-5)", strokeWidth: 2, strokeLinecap: "round" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
  );

  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", companySize: "" });
  const [focused, setFocused] = React.useState(null);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const inputStyle = (k) => ({
    width: "100%", height: 44, padding: "0 14px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 14, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12.5, fontWeight: 500, color: "var(--ink-3)", marginBottom: 6 };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName || !form.email) return;
    setSubmitting(true);

    fetch("https://api.hsforms.com/submissions/v3/integration/submit/144265445/cb831713-aef2-4599-a44a-8f383d8e8f7b", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email },
          { name: "company", value: form.company },
          { name: "company_size", value: form.companySize },
        ],
        context: { pageUri: window.location.href, pageName: "ContractControl vs Ironclad" },
      }),
    }).then(() => {
      setSubmitting(false);
      setSubmitted(true);
    }).catch(() => {
      setSubmitting(false);
      setSubmitted(true);
    });
  };

  const benefits = [
    { title: "Same power, faster time-to-value", desc: "Go live in days, not quarters. No army of consultants needed." },
    { title: "Nordic-first compliance", desc: "BankID, MitID, eIDAS, and EU data residency built in from day one." },
    { title: "Transparent, scalable pricing", desc: "One plan, no per-seat surprises. Unlimited viewer seats included." },
  ];

  return (
    <div>
      {/* Split hero: text + benefits left, form right */}
      <section className="hero" style={{ padding: "148px 0 72px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 64, alignItems: "start" }} className="mob-stack">

            {/* Left: text + benefits */}
            <div>
              <span className="eyebrow fade-up">ContractControl vs Ironclad</span>
              <h1 className="display fade-up" style={{ marginTop: 18, fontSize: "clamp(34px, 4.6vw, 56px)", animationDelay: "0.05s", lineHeight: 1.1 }}>
                From enterprise complexity to <span className="accent">effortless control</span>.
              </h1>
              <p className="fade-up" style={{ marginTop: 20, animationDelay: "0.1s", maxWidth: 480, fontSize: 15, color: "var(--ink-3)", lineHeight: 1.65 }}>
                Ironclad is built for large US enterprises with dedicated legal ops teams. ContractControl delivers the same power with faster setup, Nordic compliance, and pricing that scales with your team.
              </p>

              <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 24 }}>
                {benefits.map((b, i) => (
                  <div key={i} className="fade-up" style={{ display: "flex", gap: 14, alignItems: "flex-start", animationDelay: `${0.12 + i * 0.04}s` }}>
                    <span style={{ flex: "0 0 22px", marginTop: 2, color: "var(--accent)" }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <div>
                      <strong style={{ fontSize: 15, color: "var(--ink-1)", display: "block", marginBottom: 3 }}>{b.title}</strong>
                      <span style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{b.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: form card */}
            <div className="fade-up" style={{ animationDelay: "0.08s" }}>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 16, padding: "36px 32px",
                background: "var(--bg-elevated)",
              }}>
                {submitted ? (
                  <div style={{ textAlign: "center", padding: "24px 0" }}>
                    <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 16px" }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Request received!</div>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
                      We'll confirm a 30-minute slot within one business day.
                    </p>
                  </div>
                ) : (
                  <>
                    <h2 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>See the difference live</h2>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: "0 0 24px", lineHeight: 1.5 }}>Book a 30-minute walkthrough tailored to your team.</p>

                    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>First name</label>
                          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Last name</label>
                          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                        </div>
                      </div>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>Company</label>
                          <input type="text" placeholder="Volantis AB" value={form.company} onChange={set("company")}
                            onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Company size</label>
                          <select value={form.companySize} onChange={set("companySize")}
                            onFocus={() => setFocused("companySize")} onBlur={() => setFocused(null)}
                            style={{ ...inputStyle("companySize"), appearance: "none", backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center", paddingRight: 32 }}>
                            <option value="">Select size...</option>
                            <option value="1-10">1-10</option>
                            <option value="11-50">11-50</option>
                            <option value="51-200">51-200</option>
                            <option value="201-500">201-500</option>
                            <option value="500+">500+</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" disabled={submitting}
                        className="btn btn-primary btn-lg"
                        style={{ width: "100%", marginTop: 4, fontSize: 15, height: 48, borderRadius: 24, justifyContent: "center" }}>
                        {submitting ? "Sending..." : <>Request demo <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginLeft: 6 }}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></>}
                      </button>
                    </form>

                    <p style={{ fontSize: 12, color: "var(--ink-4)", textAlign: "center", marginTop: 14, lineHeight: 1.5 }}>
                      No commitment. We'll confirm a 30-minute slot within one business day.
                    </p>
                  </>
                )}
              </div>

              {/* Trust badges */}
              <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
                {["GDPR compliant", "eIDAS certified", "EU data only"].map((badge, i) => (
                  <span key={i} style={{ fontSize: 11, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 5, letterSpacing: "0.01em" }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/></svg>
                    {badge}
                  </span>
                ))}
              </div>
            </div>

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

      {/* Feature spotlight */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 0 }}>
            <span className="eyebrow">Feature spotlight</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Three capabilities Ironclad <em>doesn't offer</em>
            </h2>
          </div>
        </div>
      </section>

      {/* 1. Financial intelligence */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Financial intelligence</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Verify counterparties before you sign, not <em>after</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Ironclad doesn't include financial data. ContractControl lets you look up company details, pull credit ratings, and compare invoices against contract terms - all natively, without third-party tools.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Instant company lookup with registration and financial data", "Credit ratings and revenue data for counterparty verification", "Invoice-to-contract comparison to catch billing discrepancies"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M3 7V5a2 2 0 0 1 2-2h6.5L14 5.5H19a2 2 0 0 1 2 2V7"/><rect x="3" y="7" width="18" height="14" rx="2"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Company lookup</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "3px 8px", borderRadius: 99 }}>Verified</span>
                  </div>
                  {/* Company info card */}
                  <div style={{ padding: "16px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                      <div style={{ width: 40, height: 40, borderRadius: 10, background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 14, color: "var(--accent)" }}>N</div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink-1)" }}>Nordström & Partners AB</div>
                        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>Org.nr 556789-1234 · Stockholm, SE</div>
                      </div>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
                      <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Credit rating</div>
                        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                          <span style={{ fontSize: 18, fontWeight: 700, color: "#166534" }}>AAA</span>
                          <span style={{ fontSize: 10, fontWeight: 600, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "2px 6px", borderRadius: 99 }}>Excellent</span>
                        </div>
                      </div>
                      <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Revenue (FY25)</div>
                        <div style={{ fontSize: 18, fontWeight: 700, color: "var(--ink-1)" }}>€24.8M</div>
                      </div>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                      <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Employees</div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>142</div>
                      </div>
                      <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Active contracts</div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>7</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. eID methods - flipped */}
      <section className="section">
        <div className="container">
          <div className="feat-grid feat-grid--flip">
            <div>
              <span className="eyebrow">Nordic eID coverage</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Every signer verified, every market <em>covered</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Ironclad relies primarily on simple email-based signatures. ContractControl supports 30+ electronic identity methods including BankID, MitID, Freja, and eIDAS QES - critical for Nordic and EU cross-border deals.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["BankID (Sweden, Norway), MitID (Denmark), Freja eID support", "eIDAS-qualified electronic signatures for EU compliance", "30+ identity verification methods across global markets"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Signing verification</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "var(--accent)", background: "var(--accent-soft)", padding: "3px 8px", borderRadius: 99 }}>4 methods</span>
                  </div>
                  {/* Signer info */}
                  <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 12, color: "var(--accent)" }}>EA</div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 12.5, color: "var(--ink-1)" }}>Erik Andersen</div>
                        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>erik.andersen@nordkraft.dk</div>
                      </div>
                    </div>
                  </div>
                  {/* eID method options */}
                  <div style={{ padding: "14px 16px" }}>
                    <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12 }}>Select verification method</div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                      {[
                        { name: "BankID", flag: "🇸🇪", desc: "Sweden, Norway", selected: false },
                        { name: "MitID", flag: "🇩🇰", desc: "Denmark", selected: true },
                        { name: "Freja eID", flag: "🇪🇺", desc: "EU-wide", selected: false },
                        { name: "SMS OTP", flag: "🌐", desc: "Global fallback", selected: false },
                      ].map((m, i) => (
                        <div key={i} style={{
                          padding: "10px 12px", borderRadius: 8,
                          border: m.selected ? "2px solid var(--accent)" : "1px solid var(--line)",
                          background: m.selected ? "var(--accent-soft)" : "var(--bg-soft)",
                          cursor: "pointer",
                        }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                            <span style={{ fontSize: 14 }}>{m.flag}</span>
                            <span style={{ fontWeight: 600, fontSize: 12, color: m.selected ? "var(--accent)" : "var(--ink-1)" }}>{m.name}</span>
                          </div>
                          <div style={{ fontSize: 10, color: "var(--ink-4)" }}>{m.desc}</div>
                          {m.selected && (
                            <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 4 }}>
                              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                              <span style={{ fontSize: 10, fontWeight: 600, color: "var(--accent)" }}>Selected</span>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Implementation timeline */}
      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Implementation</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Live in weeks, not six-month <em>rollouts</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Ironclad implementations can stretch across quarters with dedicated project teams. ContractControl is designed for fast time-to-value - configure your workspace, import templates, and go live without an army of consultants.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["No-code workspace configuration for admins", "Template import and migration tools built in", "Dedicated onboarding without multi-month timelines"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
                <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
                  <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                      </span>
                      <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Implementation plan</span>
                    </div>
                    <span style={{ fontSize: 10, fontWeight: 600, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "3px 8px", borderRadius: 99 }}>On track</span>
                  </div>
                  {/* Timeline steps */}
                  <div style={{ padding: "16px" }}>
                    {/* Week 1 label */}
                    <div style={{ fontSize: 10, fontWeight: 700, color: "var(--accent)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12, padding: "4px 8px", background: "var(--accent-soft)", borderRadius: 4, display: "inline-block" }}>Week 1</div>
                    {[
                      { label: "Workspace setup", desc: "Users, roles, and permissions configured", done: true },
                      { label: "Template import", desc: "12 templates migrated and approved", done: true },
                    ].map((step, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: 4 }}>
                        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                          <span style={{ width: 18, height: 18, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: "#10B981" }}>
                            <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>
                          <span style={{ width: 1.5, height: 14, background: "#10B981", margin: "2px 0" }} />
                        </div>
                        <div style={{ paddingBottom: 2 }}>
                          <span style={{ color: "var(--ink-2)", fontWeight: 500, fontSize: 12 }}>{step.label}</span>
                          <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 1 }}>{step.desc}</div>
                        </div>
                      </div>
                    ))}
                    {/* Week 2 label */}
                    <div style={{ fontSize: 10, fontWeight: 700, color: "var(--accent)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 12, marginTop: 8, padding: "4px 8px", background: "var(--accent-soft)", borderRadius: 4, display: "inline-block" }}>Week 2</div>
                    {[
                      { label: "Workflow configuration", desc: "Approval chains and routing rules", done: true, active: false },
                      { label: "Go Live", desc: "Team onboarded and ready", done: false, active: true },
                    ].map((step, i, arr) => (
                      <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: i < arr.length - 1 ? 4 : 0 }}>
                        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                          <span style={{ width: 18, height: 18, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: step.done ? "#10B981" : step.active ? "var(--accent)" : "var(--bg-soft)", border: !step.done && !step.active ? "1.5px solid var(--line-strong)" : "none" }}>
                            {step.done && <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>}
                            {step.active && <div style={{ width: 6, height: 6, borderRadius: "50%", background: "white" }} />}
                          </span>
                          {i < arr.length - 1 && <span style={{ width: 1.5, height: 14, background: step.done ? "#10B981" : "var(--line)", margin: "2px 0" }} />}
                        </div>
                        <div>
                          <span style={{ color: step.done ? "var(--ink-2)" : step.active ? "var(--accent)" : "var(--ink-4)", fontWeight: 500, fontSize: 12 }}>{step.label}</span>
                          <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 1 }}>{step.desc}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                  {/* Footer summary */}
                  <div style={{ padding: "10px 16px", background: "rgba(22,163,74,0.04)", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>3 of 4 steps completed</span>
                    <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", fontWeight: 600, color: "#166534" }}>75% complete</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature comparison tables */}
      <section id="compare-table" style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 960 }}>
          {features.map((group, gi) => (
            <div key={gi} className="fade-up" style={{ marginBottom: 48, animationDelay: `${gi * 0.06}s` }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
                color: "var(--accent)", marginBottom: 16, paddingLeft: 2,
              }}>
                {group.category}
              </div>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 14,
                background: "var(--bg-elevated)",
              }}>
                {/* Header */}
                <div style={{
                  display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "12px 24px",
                  borderBottom: "1px solid var(--line)", background: "var(--bg-soft)",
                  fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.04em", textTransform: "uppercase",
                }}>
                  <span>Feature</span>
                  <span style={{ textAlign: "center" }}>ContractControl</span>
                  <span style={{ textAlign: "center" }}>Ironclad</span>
                </div>
                {/* Rows */}
                {group.items.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "14px 24px",
                    borderBottom: ri < group.items.length - 1 ? "1px solid var(--line)" : "none",
                    alignItems: "center",
                  }}>
                    <span style={{ fontSize: 14, color: "var(--ink-2)", position: "relative", display: "inline-flex", alignItems: "center", gap: 6, cursor: row.desc ? "help" : "default" }}
                      className={row.desc ? "feature-tip" : undefined}>
                      {row.feature}
                      {row.desc && (
                        <>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2" style={{ flexShrink: 0, opacity: 0.6 }}>
                            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                          </svg>
                          <span className="feature-tip-text">{row.desc}</span>
                        </>
                      )}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.cc ? checkIcon : dashIcon}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.competitor ? checkIcon : dashIcon}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Key differentiators */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <span className="eyebrow fade-up">Key differences</span>
            <h2 className="fade-up" style={{
              fontSize: "clamp(28px, 3.6vw, 42px)", fontWeight: 600,
              letterSpacing: "-0.03em", marginTop: 16, color: "var(--ink-1)",
            }}>
              Where ContractControl goes further
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 20 }}>
            {differentiators.map((d, i) => (
              <div key={i} className="fade-up" style={{
                padding: "28px 24px", border: "1px solid var(--line)",
                borderRadius: 14, background: "var(--bg-elevated)",
                animationDelay: `${i * 0.05}s`,
              }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 18px", marginTop: 2, color: "var(--accent)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <div>
                    <h3 style={{ fontSize: 16, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>
                      {d.title}
                    </h3>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
                      {d.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

function CompareSpotdraftPage() {
  const features = [
    { category: "Contract Lifecycle", items: [
      { feature: "Intake workflows", desc: "Route contract requests from any department into a structured pipeline.", cc: true, competitor: true },
      { feature: "Template library", desc: "Pre-approved, reusable contract templates for every team.", cc: true, competitor: true },
      { feature: "Clause library", desc: "AI-powered clause bank with fallback and alternative suggestions.", cc: true, competitor: true },
      { feature: "AI-assisted drafting", desc: "Generate and refine contract language with built-in AI.", cc: true, competitor: true },
      { feature: "Conditional blocks", desc: "Rule-based content that adapts automatically to contract parameters.", cc: true, competitor: true },
      { feature: "Calculation engine", desc: "Auto-calculate pricing, penalties, and payment schedules inside contracts.", cc: true, competitor: false },
      { feature: "Product library", desc: "Centralised catalog of products, services, and pricing for contract use.", cc: true, competitor: false },
      { feature: "Clickwrap", desc: "One-click acceptance for terms, policies, and lightweight agreements.", cc: true, competitor: true },
      { feature: "Terms management", desc: "Manage and publish public policies like privacy policies, terms and conditions, and cookie notices.", cc: true, competitor: false },
      { feature: "Approval workflows", desc: "Multi-step internal approvals before contracts are sent.", cc: true, competitor: true },
      { feature: "Owner routing", desc: "Auto-assign contract owners based on metadata and business rules.", cc: true, competitor: false },
      { feature: "Collaborative negotiation", desc: "Real-time co-editing and commenting with counterparties.", cc: true, competitor: true },
      { feature: "Redline to review", desc: "Push negotiation changes back into the review stage seamlessly.", cc: true, competitor: true },
      { feature: "Electronic signatures", desc: "Legally binding eSignatures with full audit trail.", cc: true, competitor: true },
      { feature: "Analytics & reporting", desc: "Dashboards and reports on contract volume, cycle time, and bottlenecks.", cc: true, competitor: true },
      { feature: "Health scoring", desc: "Automated contract health scores based on risk, compliance, and deadlines.", cc: true, competitor: false },
      { feature: "Contract repository", desc: "Searchable, centralised storage for all executed contracts.", cc: true, competitor: true },
    ]},
    { category: "Obligations & Renewals", items: [
      { feature: "Obligation tracking", desc: "Monitor and alert on every contractual obligation and deadline.", cc: true, competitor: true },
      { feature: "AI obligation extraction", desc: "Automatically extract obligations and key dates from signed contracts.", cc: true, competitor: false },
      { feature: "Custom obligations", desc: "Define and configure obligation types specific to your business.", cc: true, competitor: false },
      { feature: "Renewal tracking", desc: "Smart alerts for upcoming renewals, auto-renewals, and termination windows.", cc: true, competitor: true },
      { feature: "Risk-specific setup", desc: "Configure obligation monitoring based on risk level and contract type.", cc: true, competitor: false },
      { feature: "Obligations API", desc: "Programmatic access to obligation data for external system integration.", cc: true, competitor: false },
      { feature: "Contract Card", desc: "Structured space for gathering and organising key contract data.", cc: true, competitor: false },
    ]},
    { category: "Company & Financial Intelligence", items: [
      { feature: "Company lookup", desc: "Verify counterparty details and company registration data instantly.", cc: true, competitor: false },
      { feature: "Financial data", desc: "Access credit ratings, revenue, and financial health of counterparties.", cc: true, competitor: false },
      { feature: "Revenue comparison", desc: "Compare invoiced amounts against contracted terms and expected revenue.", cc: true, competitor: false },
      { feature: "Invoice risk tracking", desc: "Flag invoices that deviate from contract terms or payment schedules.", cc: true, competitor: false },
      { feature: "ERP financial sync", desc: "Pull live financial data from your ERP into contract workflows.", cc: true, competitor: false },
    ]},
    { category: "Vendor Management", items: [
      { feature: "Vendor risk scoring", desc: "Automated risk scores based on compliance, financial health, and history.", cc: true, competitor: false },
      { feature: "Vendor assessments", desc: "Structured workflows for evaluating and onboarding vendors.", cc: true, competitor: false },
      { feature: "Vendor AI analytics", desc: "AI-driven insights across your vendor portfolio and contracts.", cc: true, competitor: false },
      { feature: "Compliant Hub", desc: "Centralised compliance management for vendor relationships.", cc: true, competitor: false },
    ]},
    { category: "Document Management", items: [
      { feature: "Document Hub", desc: "Consolidate internal policies into one branded hub for your organisation.", cc: true, competitor: false },
      { feature: "Advanced versioning", desc: "Track changes across documents, obligations, and contracts over time.", cc: true, competitor: true },
      { feature: "Native contract library", desc: "AI-searchable library of all contracts with smart categorisation.", cc: true, competitor: true },
      { feature: "Dataroom", desc: "Secure, permissioned space for sharing documents during due diligence.", cc: true, competitor: false },
    ]},
    { category: "Compliance & eID", items: [
      { feature: "30+ eID methods", desc: "Support for over 30 electronic identification methods globally.", cc: true, competitor: false },
      { feature: "BankID (SE, NO)", desc: "Native BankID integration for Swedish and Norwegian signers.", cc: true, competitor: false },
      { feature: "MitID (DK)", desc: "Danish MitID for secure identification and signing.", cc: true, competitor: false },
      { feature: "Freja eID", desc: "Freja eID+ support for Swedish and EU-wide identification.", cc: true, competitor: false },
      { feature: "eIDAS QES", desc: "Qualified Electronic Signatures meeting EU eIDAS regulation.", cc: true, competitor: false },
      { feature: "Advanced metadata", desc: "Custom metadata structures for GDPR, data classification, and tagging.", cc: true, competitor: true },
      { feature: "EU data residency", desc: "All data stored and processed within EU borders.", cc: true, competitor: false },
      { feature: "ISO 27001", desc: "Certified information security management system.", cc: true, competitor: true },
      { feature: "GDPR by design", desc: "Privacy and data protection built into the platform architecture.", cc: true, competitor: true },
    ]},
    { category: "Platform & Integrations", items: [
      { feature: "Power Modules", desc: "Extensible modules to add specialised functionality as you grow.", cc: true, competitor: false },
      { feature: "Unlimited viewers", desc: "Free viewer seats so your entire organisation can access contracts.", cc: true, competitor: false },
      { feature: "Salesforce", desc: "Native integration to sync contracts with Salesforce CRM.", cc: true, competitor: true },
      { feature: "HubSpot", desc: "Connect contract workflows directly to HubSpot deals and contacts.", cc: true, competitor: true },
      { feature: "ERP integrations", desc: "Pre-built connectors for major ERP systems.", cc: true, competitor: false },
      { feature: "Open API & webhooks", desc: "Full API access and real-time event webhooks for custom integrations.", cc: true, competitor: true },
      { feature: "Advanced permissions", desc: "Granular role-based access control for teams, documents, and workflows.", cc: true, competitor: true },
    ]},
  ];

  const differentiators = [
    {
      title: "Nordic-first compliance",
      desc: "BankID, MitID, Freja, eIDAS QES, and EU data residency from day one. Spotdraft is US-centric with no Nordic identity support.",
    },
    {
      title: "Financial and company intelligence",
      desc: "Verify counterparties, pull credit data, and compare invoices against terms. Spotdraft requires third-party tools.",
    },
    {
      title: "Vendor management and risk scoring",
      desc: "Score vendors, run assessments, and get AI insights. Spotdraft has no vendor management layer.",
    },
    {
      title: "EU data residency",
      desc: "All data stored and processed within EU borders. Spotdraft hosts primarily in US infrastructure.",
    },
    {
      title: "AI obligation extraction",
      desc: "Automatically extract granular obligations from signed contracts. Spotdraft tracks renewals but not individual obligations.",
    },
    {
      title: "Extensible with Power Modules",
      desc: "Dataroom, Document Hub, Product Library, and Workspaces. Add capabilities as your team grows without switching platforms.",
    },
  ];

  const checkIcon = React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.5 },
    React.createElement("polyline", { points: "20 6 9 17 4 12" })
  );
  const dashIcon = React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "var(--ink-5)", strokeWidth: 2, strokeLinecap: "round" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
  );

  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", companySize: "" });
  const [focused, setFocused] = React.useState(null);
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const inputStyle = (k) => ({
    width: "100%", height: 44, padding: "0 14px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === k ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 14, color: "var(--ink-1)",
    outline: "none", boxSizing: "border-box",
    boxShadow: focused === k ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    transition: "border-color 150ms ease",
  });
  const labelStyle = { display: "block", fontSize: 12.5, fontWeight: 500, color: "var(--ink-3)", marginBottom: 6 };
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName || !form.email) return;
    setSubmitting(true);

    fetch("https://api.hsforms.com/submissions/v3/integration/submit/144265445/cb831713-aef2-4599-a44a-8f383d8e8f7b", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email },
          { name: "company", value: form.company },
          { name: "company_size", value: form.companySize },
        ],
        context: { pageUri: window.location.href, pageName: "ContractControl vs Spotdraft" },
      }),
    }).then(() => {
      setSubmitting(false);
      setSubmitted(true);
    }).catch(() => {
      setSubmitting(false);
      setSubmitted(true);
    });
  };

  const benefits = [
    { title: "Nordic compliance from day one", desc: "BankID, MitID, eIDAS, and EU data residency included natively." },
    { title: "Financial and company intelligence", desc: "Verify counterparties, pull credit data, and compare invoices against terms." },
    { title: "Vendor management built in", desc: "Risk scoring, assessments, and AI vendor analytics without add-ons." },
  ];

  // Mockup: Company verification card
  const CompanyVerificationMockup = () => (
    <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
      <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
        <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M9 8h10M9 12h10M9 16h10M5 8h.01M5 12h.01M5 16h.01"/></svg>
            </span>
            <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Company verification</span>
          </div>
          <span style={{ fontSize: 10, fontWeight: 600, color: "#166534", background: "rgba(22,163,74,0.08)", padding: "3px 8px", borderRadius: 99 }}>Verified</span>
        </div>
        <div style={{ padding: "16px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)", display: "grid", placeItems: "center", color: "var(--accent)", fontWeight: 700, fontSize: 14 }}>N</div>
            <div>
              <div style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 14 }}>Nordstr&ouml;m &amp; Partners AB</div>
              <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>Org. 559012-3456 &middot; Stockholm, SE</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 14 }}>
            <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, textAlign: "center" }}>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Credit</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "var(--accent)" }}>AA+</div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, textAlign: "center" }}>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Revenue</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink-1)" }}>&euro;18.5M</div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, textAlign: "center" }}>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>Employees</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink-1)" }}>142</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>Payment index</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: "#166534" }}>97/100</span>
              </div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>Risk level</span>
                <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(22,163,74,0.08)", color: "#166534" }}>Low</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // Mockup: Vendor assessment card
  const VendorAssessmentMockup = () => {
    const categories = [
      { label: "Compliance", score: 85, color: "#166534", bg: "rgba(22,163,74,0.08)" },
      { label: "Financial", score: 78, color: "#854d0e", bg: "rgba(234,179,8,0.1)" },
      { label: "Operational", score: 68, color: "#854d0e", bg: "rgba(234,179,8,0.1)" },
      { label: "Contractual", score: 58, color: "#991b1b", bg: "rgba(220,38,38,0.08)" },
    ];
    return (
      <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
        <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
          <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><path d="M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M20 8v6M23 11h-6"/></svg>
              </span>
              <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Vendor assessment</span>
            </div>
            <span style={{ fontSize: 10, fontWeight: 600, color: "#854d0e", background: "rgba(234,179,8,0.1)", padding: "3px 8px", borderRadius: 99 }}>Medium risk</span>
          </div>
          <div style={{ padding: "16px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)", display: "grid", placeItems: "center", color: "var(--accent)", fontWeight: 700, fontSize: 13 }}>A</div>
              <div>
                <div style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13.5 }}>Acme Cloud Services</div>
                <div style={{ fontSize: 11, color: "var(--ink-4)" }}>SaaS vendor &middot; Last assessed 14d ago</div>
              </div>
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)" }}>Overall risk score</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 700, color: "var(--ink-1)" }}>72<span style={{ fontSize: 10, color: "var(--ink-4)", fontWeight: 500 }}>/100</span></span>
              </div>
              <div style={{ width: "100%", height: 6, background: "var(--bg-soft)", borderRadius: 99, overflow: "hidden", border: "1px solid var(--line)" }}>
                <div style={{ width: "72%", height: "100%", background: "linear-gradient(90deg, var(--accent), #9B81F5)", borderRadius: 99 }} />
              </div>
            </div>
            {categories.map((cat, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 0", borderTop: "1px solid var(--line)" }}>
                <span style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>{cat.label}</span>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <div style={{ width: 60, height: 4, background: "var(--bg-soft)", borderRadius: 99, overflow: "hidden" }}>
                    <div style={{ width: `${cat.score}%`, height: "100%", background: cat.color === "#166534" ? "#22c55e" : cat.color === "#854d0e" ? "#eab308" : "#ef4444", borderRadius: 99 }} />
                  </div>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, color: cat.color, minWidth: 22 }}>{cat.score}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  // Mockup: Nordic eID signing flow
  const NordicEidMockup = () => {
    const eidMethods = [
      { label: "BankID SE", active: true },
      { label: "MitID", active: false },
      { label: "Freja", active: false },
      { label: "SMS", active: false },
    ];
    return (
      <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)" }}>
        <div style={{ width: "100%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", fontSize: 12, boxShadow: "0 20px 50px rgba(14,14,16,0.08), 0 4px 12px rgba(14,14,16,0.03)" }}>
          <div style={{ padding: "12px 16px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              </span>
              <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 12.5 }}>Signing ceremony</span>
            </div>
            <span style={{ fontSize: 10, fontWeight: 600, color: "var(--accent)", background: "var(--accent-soft)", padding: "3px 8px", borderRadius: 99 }}>Awaiting signature</span>
          </div>
          <div style={{ padding: "16px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, padding: "12px", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg, #F5F3FB 0%, #E8E6F0 100%)", display: "grid", placeItems: "center", color: "var(--accent)", fontWeight: 700, fontSize: 13 }}>EL</div>
              <div>
                <div style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>Erik Lindqvist</div>
                <div style={{ fontSize: 11, color: "var(--ink-4)" }}>erik@nordstrom-partners.se</div>
              </div>
            </div>
            <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10 }}>Select identity method</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 16 }}>
              {eidMethods.map((m, i) => (
                <span key={i} style={{
                  padding: "7px 14px", borderRadius: 99, fontSize: 12, fontWeight: 500, cursor: "pointer",
                  background: m.active ? "var(--accent)" : "var(--bg-soft)",
                  color: m.active ? "white" : "var(--ink-2)",
                  border: m.active ? "1px solid var(--accent)" : "1px solid var(--line)",
                }}>{m.label}</span>
              ))}
            </div>
            <button style={{
              width: "100%", padding: "11px 0", borderRadius: 10, border: "none",
              background: "var(--accent)", color: "white", fontSize: 13, fontWeight: 600,
              cursor: "pointer", marginBottom: 12,
            }}>Sign now with BankID SE</button>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "8px 0", borderTop: "1px solid var(--line)" }}>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              <span style={{ fontSize: 10.5, color: "var(--ink-4)", fontWeight: 500 }}>eIDAS compliant &middot; Qualified Electronic Signature</span>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      {/* Split hero: text + benefits left, form right */}
      <section className="hero" style={{ padding: "148px 0 72px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 64, alignItems: "start" }} className="mob-stack">

            {/* Left: text + benefits */}
            <div>
              <span className="eyebrow fade-up">ContractControl vs Spotdraft</span>
              <h1 className="display fade-up" style={{ marginTop: 18, fontSize: "clamp(34px, 4.6vw, 56px)", animationDelay: "0.05s", lineHeight: 1.1 }}>
                From US-centric CLM to <span className="accent">Nordic-ready platform</span>.
              </h1>
              <p className="fade-up" style={{ marginTop: 20, animationDelay: "0.1s", maxWidth: 480, fontSize: 15, color: "var(--ink-3)", lineHeight: 1.65 }}>
                Spotdraft is built for US legal teams at fast-growing companies. ContractControl matches its speed with Nordic compliance, vendor management, financial intelligence, and obligation tracking built in.
              </p>

              <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 24 }}>
                {benefits.map((b, i) => (
                  <div key={i} className="fade-up" style={{ display: "flex", gap: 14, alignItems: "flex-start", animationDelay: `${0.12 + i * 0.04}s` }}>
                    <span style={{ flex: "0 0 22px", marginTop: 2, color: "var(--accent)" }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <div>
                      <strong style={{ fontSize: 15, color: "var(--ink-1)", display: "block", marginBottom: 3 }}>{b.title}</strong>
                      <span style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{b.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: form card */}
            <div className="fade-up" style={{ animationDelay: "0.08s" }}>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 16, padding: "36px 32px",
                background: "var(--bg-elevated)",
              }}>
                {submitted ? (
                  <div style={{ textAlign: "center", padding: "24px 0" }}>
                    <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 16px" }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Request received!</div>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
                      We'll confirm a 30-minute slot within one business day.
                    </p>
                  </div>
                ) : (
                  <>
                    <h2 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>See the difference live</h2>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: "0 0 24px", lineHeight: 1.5 }}>Book a 30-minute walkthrough tailored to your team.</p>

                    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>First name</label>
                          <input type="text" required placeholder="Linnea" value={form.firstName} onChange={set("firstName")}
                            onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)} style={inputStyle("firstName")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Last name</label>
                          <input type="text" required placeholder="Andersson" value={form.lastName} onChange={set("lastName")}
                            onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)} style={inputStyle("lastName")} />
                        </div>
                      </div>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se" value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)} style={inputStyle("email")} />
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div>
                          <label style={labelStyle}>Company</label>
                          <input type="text" placeholder="Volantis AB" value={form.company} onChange={set("company")}
                            onFocus={() => setFocused("company")} onBlur={() => setFocused(null)} style={inputStyle("company")} />
                        </div>
                        <div>
                          <label style={labelStyle}>Company size</label>
                          <select value={form.companySize} onChange={set("companySize")}
                            onFocus={() => setFocused("companySize")} onBlur={() => setFocused(null)}
                            style={{ ...inputStyle("companySize"), appearance: "none", backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center", paddingRight: 32 }}>
                            <option value="">Select size...</option>
                            <option value="1-10">1-10</option>
                            <option value="11-50">11-50</option>
                            <option value="51-200">51-200</option>
                            <option value="201-500">201-500</option>
                            <option value="500+">500+</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" disabled={submitting}
                        className="btn btn-primary btn-lg"
                        style={{ width: "100%", marginTop: 4, fontSize: 15, height: 48, borderRadius: 24, justifyContent: "center" }}>
                        {submitting ? "Sending..." : <>Request demo <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginLeft: 6 }}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></>}
                      </button>
                    </form>

                    <p style={{ fontSize: 12, color: "var(--ink-4)", textAlign: "center", marginTop: 14, lineHeight: 1.5 }}>
                      No commitment. We'll confirm a 30-minute slot within one business day.
                    </p>
                  </>
                )}
              </div>

              {/* Trust badges */}
              <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
                {["GDPR compliant", "eIDAS certified", "EU data only"].map((badge, i) => (
                  <span key={i} style={{ fontSize: 11, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 5, letterSpacing: "0.01em" }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/></svg>
                    {badge}
                  </span>
                ))}
              </div>
            </div>

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

      {/* Feature spotlight */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 0 }}>
            <span className="eyebrow">Feature spotlight</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Three capabilities Spotdraft <em>doesn't offer</em>
            </h2>
          </div>
        </div>
      </section>

      {/* 1. Financial intelligence */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Financial intelligence</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Verify counterparties and catch billing errors <em>natively</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Spotdraft doesn't include financial data. ContractControl lets you look up company details, pull credit ratings, compare invoices against contract terms, and track invoice risk - all without third-party integrations.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Instant company lookup with registration and financial data", "Credit ratings and revenue data for counterparty verification", "Invoice-to-contract comparison to catch pricing discrepancies"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <CompanyVerificationMockup />
            </div>
          </div>
        </div>
      </section>

      {/* 2. Vendor risk management - flipped */}
      <section className="section">
        <div className="container">
          <div className="feat-grid feat-grid--flip">
            <div>
              <span className="eyebrow">Vendor management</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Score and manage vendor risk across your <em>portfolio</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Spotdraft focuses on contract workflows but has no vendor management. ContractControl gives procurement teams automated risk scoring, structured assessments, and AI-powered insights - so you know the risk before you sign.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["Automated risk scores based on compliance, financial health, and contract history", "Structured vendor onboarding and assessment workflows", "AI-driven analytics across your entire vendor portfolio"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <VendorAssessmentMockup />
            </div>
          </div>
        </div>
      </section>

      {/* 3. 30+ Nordic eID methods */}
      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div>
              <span className="eyebrow">Nordic eID coverage</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>Every Nordic signer verified, every regulation <em>met</em>.</h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                Spotdraft supports basic eSignature but has no Nordic identity verification. ContractControl includes BankID, MitID, Freja, and eIDAS QES natively - critical for contracts in Sweden, Norway, Denmark, and across the EU.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {["BankID (Sweden, Norway), MitID (Denmark), Freja eID support", "eIDAS-qualified electronic signatures for EU regulatory compliance", "30+ identity methods for global and cross-border signing"].map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <NordicEidMockup />
            </div>
          </div>
        </div>
      </section>

      {/* Feature comparison tables */}
      <section id="compare-table" style={{ padding: "0 0 96px" }}>
        <div className="container" style={{ maxWidth: 960 }}>
          {features.map((group, gi) => (
            <div key={gi} className="fade-up" style={{ marginBottom: 48, animationDelay: `${gi * 0.06}s` }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
                color: "var(--accent)", marginBottom: 16, paddingLeft: 2,
              }}>
                {group.category}
              </div>
              <div style={{
                border: "1px solid var(--line)", borderRadius: 14,
                background: "var(--bg-elevated)",
              }}>
                {/* Header */}
                <div style={{
                  display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "12px 24px",
                  borderBottom: "1px solid var(--line)", background: "var(--bg-soft)",
                  fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: "0.04em", textTransform: "uppercase",
                }}>
                  <span>Feature</span>
                  <span style={{ textAlign: "center" }}>ContractControl</span>
                  <span style={{ textAlign: "center" }}>Spotdraft</span>
                </div>
                {/* Rows */}
                {group.items.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: "1fr 140px 140px", padding: "14px 24px",
                    borderBottom: ri < group.items.length - 1 ? "1px solid var(--line)" : "none",
                    alignItems: "center",
                  }}>
                    <span style={{ fontSize: 14, color: "var(--ink-2)", position: "relative", display: "inline-flex", alignItems: "center", gap: 6, cursor: row.desc ? "help" : "default" }}
                      className={row.desc ? "feature-tip" : undefined}>
                      {row.feature}
                      {row.desc && (
                        <>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2" style={{ flexShrink: 0, opacity: 0.6 }}>
                            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                          </svg>
                          <span className="feature-tip-text">{row.desc}</span>
                        </>
                      )}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.cc ? checkIcon : dashIcon}
                    </span>
                    <span style={{ textAlign: "center", display: "flex", justifyContent: "center" }}>
                      {row.competitor ? checkIcon : dashIcon}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Key differentiators */}
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <span className="eyebrow fade-up">Key differences</span>
            <h2 className="fade-up" style={{
              fontSize: "clamp(28px, 3.6vw, 42px)", fontWeight: 600,
              letterSpacing: "-0.03em", marginTop: 16, color: "var(--ink-1)",
            }}>
              Where ContractControl goes further
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 20 }}>
            {differentiators.map((d, i) => (
              <div key={i} className="fade-up" style={{
                padding: "28px 24px", border: "1px solid var(--line)",
                borderRadius: 14, background: "var(--bg-elevated)",
                animationDelay: `${i * 0.05}s`,
              }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 18px", marginTop: 2, color: "var(--accent)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <div>
                    <h3 style={{ fontSize: 16, fontWeight: 600, margin: "0 0 6px", color: "var(--ink-1)", letterSpacing: "-0.01em" }}>
                      {d.title}
                    </h3>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
                      {d.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

window.AllAlternativesPage = AllAlternativesPage;
window.CompareOneflowPage = CompareOneflowPage;
window.CompareScrivePage = CompareScrivePage;
window.CompareJuroPage = CompareJuroPage;
window.CompareIroncladPage = CompareIroncladPage;
window.CompareHouseOfControlPage = CompareHouseOfControlPage;
window.CompareSpotdraftPage = CompareSpotdraftPage;
window.HealthCheckPage = HealthCheckPage;
