jde-operations-check

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JDE Operations Check | Suppora</title>
<meta name="description" content="JDE Operations Check — the maturity of your JD Edwards operation across six areas. 18 questions, results immediately, no signup.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Space+Grotesk:wght@500;600;700&amp;family=IBM+Plex+Mono:wght@500;600&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
.soc,.soc *,.soc *::before,.soc *::after{box-sizing:border-box;margin:0;padding:0}
body{margin:0;background:#f6f8f8}

.soc{
  --pri:#38a89d;--pri-d:#2d8a81;--pri-l:#4ecdc4;--pri-50:#e8f5f3;--pri-100:#d1ebe7;--pri-200:#a3d7cf;
  --sec:#0f3f34;--sec-l:#1a5c4a;
  --g100:#f1f5f4;--g200:#e4ebe9;--g300:#c9d5d1;--g400:#8a9b95;--g500:#5a6c66;--g600:#3d4d47;
  --amber:#c88a3b;--amber-l:#e8b871;--red:#c8553b;--red-l:#e08a72;
  --grad-dk:linear-gradient(135deg,#0f3f34,#1a5c4a);
  --grad-p:linear-gradient(135deg,#38a89d,#2d8a81);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--sec);line-height:1.6;max-width:760px;margin:0 auto;padding:32px 20px 64px;
}
.soc h1,.soc h2,.soc h3,.soc h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
.soc .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}
.soc-card{background:#fff;border:1px solid var(--g200);border-radius:22px;box-shadow:0 10px 40px rgba(15,63,52,.08);overflow:hidden}
.soc-hidden{display:none !important}

/* ---------- shared buttons ---------- */
.soc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;padding:15px 30px;border-radius:50px;border:0;cursor:pointer;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease}
.soc-btn-pri{background:var(--pri);color:#fff}
.soc-btn-pri:hover{background:var(--pri-l);color:var(--sec);transform:translateY(-2px)}
.soc-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.soc-btn-ghost:hover{border-color:var(--pri-l);transform:translateY(-2px)}
.soc-btn-dark{background:var(--sec);color:#fff}
.soc-btn-dark:hover{background:var(--sec-l);transform:translateY(-2px)}
.soc-btn:disabled{opacity:.45;pointer-events:none}
.soc-btn:focus-visible,.soc-opt:focus-visible,.soc-back:focus-visible,.soc input:focus-visible,.soc select:focus-visible,.soc-slot:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

/* ---------- intro ---------- */
.soc-intro{background:var(--grad-dk);color:#fff;padding:52px 44px;position:relative;overflow:hidden}
.soc-intro::before{content:'';position:absolute;top:-140px;right:-130px;width:380px;height:380px;background:radial-gradient(circle,rgba(56,168,157,.25),transparent 65%);border-radius:50%}
.soc-eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px;background:rgba(56,168,157,.18);border:1px solid rgba(56,168,157,.4);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pri-l);margin-bottom:22px}
.soc-intro h1{position:relative;font-size:clamp(27px,4.2vw,38px);font-weight:700;color:#fff;line-height:1.14;margin-bottom:16px;max-width:15ch}
.soc-intro>p{position:relative;font-size:16px;color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:30px}
.soc-dims{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:32px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.soc-dim-chip{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.82)}
.soc-dim-chip i{color:var(--pri-l);font-size:13px;width:16px;text-align:center}
.soc-meta{position:relative;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.58);display:flex;flex-wrap:wrap;gap:16px}
.soc-meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- questions ---------- */
.soc-q{padding:34px 44px 38px}
.soc-rail{display:flex;gap:5px;margin-bottom:26px}
.soc-rail-seg{flex:1;display:flex;flex-direction:column;gap:6px}
.soc-rail-bar{height:5px;border-radius:50px;background:var(--g200);overflow:hidden}
.soc-rail-bar i{display:block;height:100%;width:0;background:var(--grad-p);border-radius:50px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.soc-rail-lbl{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease}
.soc-rail-seg.on .soc-rail-lbl{color:var(--pri-d)}
.soc-qhead{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.soc-qhead i{width:34px;height:34px;border-radius:10px;background:var(--pri-50);color:var(--pri-d);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.soc-qhead-t{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pri-d)}
.soc-qhead-c{font-size:11.5px;color:var(--g400);font-weight:600}
.soc-q h2{font-size:clamp(20px,2.6vw,25px);font-weight:700;line-height:1.28;margin-bottom:6px}
.soc-qhint{font-size:14px;color:var(--g500);margin-bottom:22px}
.soc-opts{display:flex;flex-direction:column;gap:10px}
.soc-opt{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;border:1.5px solid var(--g200);border-radius:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease;font-size:15px;color:var(--g600);text-align:left;background:#fff;font-family:inherit;line-height:1.45}
.soc-opt:hover{border-color:var(--pri-200);background:var(--pri-50)}
.soc-opt.sel{border-color:var(--pri);background:var(--pri-50);color:var(--sec);font-weight:600}
.soc-opt .dot{width:19px;height:19px;flex-shrink:0;margin-top:2px;border-radius:50%;border:2px solid var(--g300);position:relative;transition:border-color .15s ease}
.soc-opt.sel .dot{border-color:var(--pri)}
.soc-opt.sel .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--pri)}
.soc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.soc-back{background:none;border:0;color:var(--g500);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 4px;border-radius:8px}
.soc-back:hover{color:var(--sec)}
.soc-back:disabled{opacity:0;pointer-events:none}
.soc-next{background:var(--sec);color:#fff;border:0;font-family:inherit;font-size:14px;font-weight:700;padding:13px 26px;border-radius:50px;cursor:pointer;transition:background .18s ease,transform .18s ease,opacity .18s ease}
.soc-next:hover{background:var(--sec-l);transform:translateY(-2px)}
.soc-next:disabled{opacity:.35;pointer-events:none}

/* ---------- result ---------- */
.soc-res-top{background:var(--grad-dk);color:#fff;padding:42px 44px;position:relative;overflow:hidden;text-align:center}
.soc-res-top::before{content:'';position:absolute;bottom:-150px;left:-130px;width:380px;height:380px;background:radial-gradient(circle,rgba(56,168,157,.2),transparent 65%);border-radius:50%}
.soc-stage-lbl{position:relative;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.soc-stage{position:relative;font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,5vw,42px);font-weight:700;line-height:1.1;color:#fff}
.soc-stage em{font-style:normal;color:var(--pri-l)}
.soc-ladder{position:relative;display:flex;gap:6px;max-width:400px;margin:22px auto 0}
.soc-rung{flex:1;height:6px;border-radius:50px;background:rgba(255,255,255,.16)}
.soc-rung.on{background:var(--pri-l)}
.soc-ladder-lbls{position:relative;display:flex;justify-content:space-between;max-width:400px;margin:9px auto 0;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.soc-res-top>p{position:relative;font-size:15.5px;color:rgba(255,255,255,.85);max-width:56ch;margin:20px auto 0}

.soc-res-body{padding:36px 44px 40px}
.soc-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.soc-res-body h3{font-size:18.5px;font-weight:700}
.soc-sub{font-size:14px;color:var(--g500);margin-bottom:22px}

/* profile — the signature element */
.soc-profile{display:flex;flex-direction:column;gap:2px;margin-bottom:34px}
.soc-prow{display:grid;grid-template-columns:1fr 200px 92px;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--g200)}
.soc-prow:first-child{border-top:1px solid var(--g200)}
.soc-pname{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--sec)}
.soc-pname i{width:26px;height:26px;border-radius:8px;background:var(--g100);color:var(--g500);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.soc-steps{display:flex;gap:4px}
.soc-step{flex:1;height:22px;border-radius:5px;background:var(--g100);border:1px solid var(--g200);transition:background .5s ease}
.soc-step.f-low{background:var(--red-l);border-color:var(--red-l)}
.soc-step.f-mid{background:var(--amber-l);border-color:var(--amber-l)}
.soc-step.f-high{background:var(--pri);border-color:var(--pri)}
.soc-pstage{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--g500);text-align:right;white-space:nowrap}
.soc-pstage b{color:var(--sec);font-size:14px}

/* findings */
.soc-find{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--g200)}
.soc-find:first-of-type{border-top:0;padding-top:4px}
.soc-find-i{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--pri-50);color:var(--pri-d);display:flex;align-items:center;justify-content:center;font-size:15px}
.soc-find h4{font-size:15px;font-weight:700;margin-bottom:4px}
.soc-find p{font-size:14.5px;color:var(--g600);line-height:1.55}
.soc-find .unknown{display:block;margin-top:9px;padding:11px 14px;background:var(--g100);border-left:2px solid var(--pri);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--g500)}
.soc-find .unknown b{color:var(--sec);font-weight:700}
.soc-strong{display:flex;gap:12px;align-items:center;padding:15px 18px;background:var(--pri-50);border:1px solid var(--pri-200);border-radius:12px;font-size:14.5px;color:var(--sec);margin-bottom:8px}
.soc-strong i{color:var(--pri-d);font-size:17px;flex-shrink:0}

/* CTA */
.soc-cta{margin-top:34px;padding:30px;background:var(--grad-dk);border-radius:18px;color:#fff;text-align:center}
.soc-cta h3{color:#fff;font-size:20px;margin-bottom:10px}
.soc-cta>p{font-size:14.5px;color:rgba(255,255,255,.84);max-width:50ch;margin:0 auto 22px}
.soc-cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.soc-cta-note{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.5)}
.soc-restart{display:block;margin:22px auto 0;background:none;border:0;color:var(--g500);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.soc-restart:hover{color:var(--sec)}

/* ---------- booking ---------- */
.soc-book{padding:38px 44px 40px}
.soc-book-head{margin-bottom:26px}
.soc-book-head h2{font-size:24px;margin-bottom:8px}
.soc-book-head p{font-size:15px;color:var(--g500);max-width:56ch}
.soc-recap{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;padding:14px 16px;background:var(--g100);border-radius:12px;font-size:13px;color:var(--g500)}
.soc-recap b{color:var(--sec);font-weight:700}
.soc-field{margin-bottom:16px}
.soc-field label{display:block;font-size:13px;font-weight:700;color:var(--g600);margin-bottom:6px}
.soc-field label .req{color:var(--red)}
.soc input,.soc select{width:100%;font-family:inherit;font-size:15px;color:var(--sec);padding:13px 15px;border:1.5px solid var(--g200);border-radius:12px;background:#fff;transition:border-color .15s ease}
.soc input:hover,.soc select:hover{border-color:var(--g300)}
.soc input:focus,.soc select:focus{border-color:var(--pri);outline:0}
.soc input.err,.soc select.err{border-color:var(--red)}
.soc-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.soc-slots-head{font-size:13px;font-weight:700;color:var(--g600);margin:26px 0 10px}
.soc-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;scrollbar-width:thin}
.soc-day{flex:0 0 auto;min-width:74px;padding:11px 12px;border:1.5px solid var(--g200);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .15s ease,background .15s ease}
.soc-day:hover{border-color:var(--pri-200);background:var(--pri-50)}
.soc-day.sel{border-color:var(--pri);background:var(--pri-50)}
.soc-day .dow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)}
.soc-day.sel .dow{color:var(--pri-d)}
.soc-day .dnum{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--sec);line-height:1.3}
.soc-day .dmon{display:block;font-size:10.5px;color:var(--g400);font-weight:600}
.soc-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.soc-slot{padding:12px 8px;border:1.5px solid var(--g200);border-radius:11px;background:#fff;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;color:var(--g600);transition:border-color .15s ease,background .15s ease}
.soc-slot:hover{border-color:var(--pri-200);background:var(--pri-50)}
.soc-slot.sel{border-color:var(--pri);background:var(--pri);color:#fff}
.soc-consent{display:flex;gap:11px;align-items:flex-start;margin:26px 0 8px;font-size:13px;color:var(--g500);line-height:1.5}
.soc-consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--pri)}
.soc-consent a{color:var(--pri-d)}
.soc-formerr{display:none;margin-top:14px;padding:12px 15px;background:#fdf0ed;border:1px solid var(--red-l);border-radius:10px;font-size:13.5px;color:var(--red)}
.soc-formerr.on{display:block}
.soc-book-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.soc-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:soc-spin .7s linear infinite}
@keyframes soc-spin{to{transform:rotate(360deg)}}

/* ---------- confirmation ---------- */
.soc-done{padding:56px 44px;text-align:center}
.soc-done-i{width:64px;height:64px;margin:0 auto 22px;border-radius:20px;background:var(--pri-50);color:var(--pri-d);display:flex;align-items:center;justify-content:center;font-size:27px}
.soc-done h2{font-size:26px;margin-bottom:12px}
.soc-done>p{font-size:15.5px;color:var(--g500);max-width:50ch;margin:0 auto 26px}
.soc-done-box{max-width:400px;margin:0 auto;padding:20px;border:1px solid var(--g200);border-radius:14px;text-align:left}
.soc-done-line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--g200)}
.soc-done-line:last-child{border-bottom:0}
.soc-done-line span{color:var(--g500)}
.soc-done-line b{color:var(--sec);font-weight:700;text-align:right}

@media (max-width:620px){
  .soc{padding:14px 12px 48px}
  .soc-intro,.soc-q,.soc-res-top,.soc-res-body,.soc-book,.soc-done{padding-left:22px;padding-right:22px}
  .soc-intro{padding-top:40px;padding-bottom:40px}
  .soc-prow{grid-template-columns:1fr;gap:9px;padding:15px 0}
  .soc-pstage{text-align:left}
  .soc-row2{grid-template-columns:1fr}
  .soc-rail-lbl{display:none}
  .soc-btn{width:100%}
  .soc-cta-row .soc-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .soc *,.soc *::before,.soc *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .soc-btn:hover,.soc-next:hover{transform:none}
}

/* ── zweiter Ausgang: Ergebnis per E-Mail ─────────────────────── */
.soc-alt{margin-top:20px;padding:24px 26px;border:1px solid var(--g200);border-radius:16px;background:var(--g100)}
.soc-alt h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--sec);margin-bottom:6px}
.soc-alt>p{font-size:14px;color:var(--g500);line-height:1.55;margin-bottom:16px;max-width:54ch}
.soc-alt-row{display:flex;gap:10px;flex-wrap:wrap}
.soc-alt-row input{flex:1;min-width:200px}
.soc-alt-row .soc-btn{padding:13px 24px;font-size:14px;white-space:nowrap}
.soc-alt-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--g500);line-height:1.5}
.soc-alt-consent input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--pri)}
.soc-alt-msg{display:none;margin-top:14px;padding:12px 15px;border-radius:10px;font-size:13.5px}
.soc-alt-msg.err{display:block;background:#fdf0ed;border:1px solid var(--red-l);color:var(--red)}
.soc-alt-msg.ok{display:block;background:var(--pri-50);border:1px solid var(--pri-200);color:var(--sec)}
.soc-alt.sent .soc-alt-row,.soc-alt.sent .soc-alt-consent{display:none}
</style>


<div class="soc">
  <div class="soc-card">

    <!-- ================= INTRO ================= -->
    <section id="socIntro" class="soc-intro">
      <span class="soc-eyebrow"><i class="fas fa-wave-square"></i> JDE Operations Check</span>
      <h1>How mature is your JD Edwards operation?</h1>
      <p>18 questions across six areas of your day-to-day JDE operation. You get a maturity profile across all of them — not just a score — and you see where you are strong and where you are not.</p>
      <div class="soc-dims" id="socDimChips"></div>
      <button class="soc-btn soc-btn-pri" onclick="socStart()">Start the check <i class="fas fa-arrow-right"></i></button>
      <div class="soc-meta">
        <span><i class="fas fa-clock"></i> about 5 minutes</span>
        <span><i class="fas fa-user-slash"></i> no signup</span>
        <span><i class="fas fa-bolt"></i> results immediately</span>
      </div>
    </section>

    <!-- ================= QUESTIONS ================= -->
    <section id="socQ" class="soc-q soc-hidden">
      <div class="soc-rail" id="socRail"></div>
      <div class="soc-qhead">
        <i id="socQIcon" class="fas fa-gauge-high"></i>
        <div>
          <div class="soc-qhead-t" id="socQDim">—</div>
          <div class="soc-qhead-c" id="socQCount">—</div>
        </div>
      </div>
      <h2 id="socQText">…</h2>
      <div class="soc-qhint" id="socQHint"></div>
      <div class="soc-opts" id="socOpts"></div>
      <div class="soc-nav">
        <button class="soc-back" id="socBack" onclick="socPrev()"><i class="fas fa-chevron-left"></i> Back</button>
        <button class="soc-next" id="socNext" onclick="socNext()" disabled="">Next <i class="fas fa-arrow-right"></i></button>
      </div>
    </section>

    <!-- ================= RESULT ================= -->
    <section id="socRes" class="soc-hidden">
      <div class="soc-res-top">
        <div class="soc-stage-lbl">Your overall maturity</div>
        <div class="soc-stage">Stage <em id="socStageNum">–</em> · <span id="socStageName">–</span></div>
        <div class="soc-ladder" id="socLadder"></div>
        <div class="soc-ladder-lbls"><span>Reactive</span><span>Optimised</span></div>
        <p id="socStageText">…</p>
      </div>
      <div class="soc-res-body">
        <div class="soc-sec-head"><h3>Your profile across six areas</h3></div>
        <div class="soc-sub">Each area is scored on its own. A strong area does not offset a weak one.</div>
        <div class="soc-profile" id="socProfile"></div>

        <div class="soc-sec-head"><h3 id="socFindHead">Where to focus first</h3></div>
        <div class="soc-sub" id="socFindSub">Your weakest areas — and what this check cannot answer about them.</div>
        <div id="socFindings"></div>

        <div class="soc-cta">
          <h3>You now know where it hurts. Not yet why.</h3>
          <p id="socCtaText">The deep dive tests your weakest areas against real data from your system — job runs, release levels, permissions, interfaces. After three to four weeks: an evidenced profile, prioritised actions, a business case.</p>
          <div class="soc-cta-row">
            <button class="soc-btn soc-btn-pri" onclick="socToBooking()">Discuss the deep dive <i class="fas fa-arrow-right"></i></button>
            <a class="soc-btn soc-btn-ghost" id="socInsiderLink" href="#" target="_blank" rel="noopener">Follow the JDE Insider</a>
          </div>
          <div class="soc-cta-note">30 minutes, no obligation. You pick a time next.</div>
        </div>
        <div class="soc-alt" id="socAlt">
          <h4>Rather take it away first?</h4>
          <p>We will email you your results profile, including the findings on your weakest areas.</p>
          <div class="soc-alt-row">
            <input type="email" id="socAltEmail" autocomplete="email" placeholder="name@company.com">
            <button class="soc-btn soc-btn-dark" onclick="socSendResult()">Send it to me</button>
          </div>
          <label class="soc-alt-consent"><input type="checkbox" id="socAltConsent"><span>Suppora may send me my results and occasional JD Edwards insights. Unsubscribe any time. <a id="socAltPrivacy" href="#" target="_blank" rel="noopener">Privacy notice</a></span></label>
          <div class="soc-alt-msg" id="socAltMsg"></div>
        </div>
        <form id="socMauticForm" method="post" target="socMauticSink" style="display:none"></form>
        <iframe name="socMauticSink" id="socMauticSink" style="display:none" title="" aria-hidden="true"></iframe>
        <button class="soc-restart" onclick="socStart()">Take the check again</button>
      </div>
    </section>

  </div>
</div>

<script>
(function(){
"use strict";

/* ==============================================================
   CONFIGURATION - set these, leave the rest alone
   ============================================================== */
const CONFIG = {
  // -- Cal ---------------------------------------------------------
  calBase:  "https://cal.eu/suppora",
  calEvent: "30min",          // "15min" for the short format
  // Cal handles availability, calendar invite, cancellation and
  // rescheduling. The result is passed along as a booking field.
  calResultField: "jdeResult",
  calFocusField:  "jdeFocus",

  // Anonymous result data for the later benchmark (no contact details).
  // Leave empty and nothing is sent.
  benchmarkWebhook: "",

  // Internal Suppora website events -> n8n -> Telegram.
  eventWebhook: "https://n8n.suppora.eu/webhook/it-worms-website-events",

  // Mautic tracking. Identifies returning contacts that are already known;
  // anonymous visitors are counted but not identified.
  // Leave empty for no tracking. URL of your Mautic instance's mtc.js.
  mauticTracking: "https://marketing.suppora.eu/mtc.js",

  // Second exit: results by email via a Mautic form.
  // No endpoint of our own - the POST goes straight to Mautic.
  // Double opt-in is configured on the Mautic form, not here.
  mauticBase:   "https://marketing.suppora.eu",          // e.g. "https://marketing.suppora.eu"
  mauticFormId: "",          // ID of the Mautic form
  mauticFields: { stage:"jde_check_stage", pct:"jde_check_pct", focus:"jde_check_focus" },

  privacyUrl: "/privacy/",
  insiderUrl: "https://t.me/supporaJDEInsider"
};

/* ==============================================================
   TRACKING - virtual page views sent to Mautic AND LinkedIn Insight
   ============================================================== */
if (CONFIG.mauticTracking) {
  (function(w,d,t,u,n,a,m){ w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)};
    a=d.createElement(t); m=d.getElementsByTagName(t)[0];
    a.async=1; a.src=u; m.parentNode.insertBefore(a,m);
  })(window, document, 'script', CONFIG.mauticTracking, 'mt');
}

function track(page, url, tags){
  // Write virtual URL to browser history. The LinkedIn Insight Tag
  // (loaded from the WordPress header) auto-detects this as a page
  // view and fires the corresponding conversion.
  try {
    if (window.history && window.history.pushState) {
      window.history.pushState({vpv: url}, page, url);
      document.title = page + ' | Suppora';
    }
  } catch(e){}

  // Mautic tracking as before
  if (!CONFIG.mauticTracking || !window.mt) return;
  const data = { page_title: page, page_url: window.location.origin + url };
  if (tags) data.tags = tags;
  try { window.mt('send', 'pageview', data); } catch(e){}
}


/* ==============================================================
   MODEL - 6 dimensions, 3 questions each, answers 0-3.
   Maturity stages 1-5 are identical for the check and the deep dive.
   ============================================================== */
const STAGES = [
  {n:1, name:"Reactive",   max:20},
  {n:2, name:"Repeatable", max:40},
  {n:3, name:"Defined",    max:60},
  {n:4, name:"Managed",    max:80},
  {n:5, name:"Optimised",  max:100}
];

const STAGE_TEXT = {
  1:"Your JDE operation runs on firefighting: problems find you before you find them. Most of this is fixable with proactive basics. What is missing is the groundwork, not the capability.",
  2:"Some things run smoothly, but much of it rests on people rather than process. When someone is away, the procedure goes with them. This is the point at which documentation and defined routines pay off most.",
  3:"Your processes are defined and traceable. What is missing is measurement: you know how the work gets done, but not consistently how well. That is the line between solid and steerable.",
  4:"Your operation is measured and resilient, well ahead of what we typically see in the mid-market. The next step is automation, so your specialists are no longer tied up in routine.",
  5:"Your JDE operation is proactive and measured throughout. The work here is not catching up but fine-tuning, and holding this level as your estate grows."
};

const DIMS = [
  {id:"ops",  name:"Operations & Monitoring", short:"Operations", icon:"fa-gauge-high"},
  {id:"rel",  name:"Release & CNC",           short:"Release",    icon:"fa-screwdriver-wrench"},
  {id:"proc", name:"Process & Standard Use",  short:"Process",    icon:"fa-diagram-project"},
  {id:"data", name:"Data & Integration",      short:"Data",       icon:"fa-plug"},
  {id:"know", name:"Knowledge & Service",     short:"Knowledge",  icon:"fa-brain"},
  {id:"sec",  name:"Security & Compliance",   short:"Security",   icon:"fa-shield-halved"}
];

const Q = [
  // -- Operations & Monitoring
  {d:"ops", q:"How do you find out that a UBE has failed or is running unusually long?",
   hint:"Batch and scheduler oversight in day-to-day operations.",
   o:["Users tell us","Manual checks, usually the next day","Alerts on selected critical jobs","Continuous monitoring with alerting and automated response"]},
  {d:"ops", q:"How well can you see the health of enterprise server, database and web instances?",
   hint:"Visibility across the whole stack, not single components.",
   o:["Barely, we notice when something stops","Occasional manual checks","Dashboards for the core areas","Continuous monitoring across the full stack"]},
  {d:"ops", q:"What happens when something breaks outside business hours?",
   hint:"Availability and escalation.",
   o:["It waits until the next morning","Someone improvises","A defined on-call rota","24/7 coverage with a clear escalation path"]},

  // -- Release & CNC
  {d:"rel", q:"How current are you on Tools Releases and patching?",
   hint:"Whether your installation stays supported and certified.",
   o:["Well behind, with no concrete plan","We update when something forces it","Planned, but irregular","A fixed, scheduled cadence"]},
  {d:"rel", q:"How do you test before updates and ESUs?",
   hint:"Test depth and repeatability.",
   o:["Spot checks, no defined scope","Manually, against a checklist","Structured, with a defined test scope","Largely automated and repeatable"]},
  {d:"rel", q:"How controlled is the path a change takes into production?",
   hint:"Environments, OMW, approvals, traceability.",
   o:["Changes effectively go straight into production","Environments exist but are not used consistently","A defined change process with approvals","Fully controlled and documented end to end"]},

  // -- Process & Standard Use
  {d:"proc", q:"How heavily modified is your JD Edwards?",
   hint:"Customisation grown over time is the most common cost driver in upgrades.",
   o:["Very heavily, grown over time, hard to survey","Heavily, only partly documented","Manageable and documented","Largely standard, extensions added deliberately"]},
  {d:"proc", q:"Do you know which programs and reports are actually used?",
   hint:"Usage transparency underpins clean-up and licensing decisions.",
   o:["No transparency","Gut feel from day-to-day work","Occasional analyses","Usage data reviewed regularly"]},
  {d:"proc", q:"What happens to custom objects you no longer need?",
   hint:"Retiring things, not only adding them.",
   o:["Nothing gets retired","Only when something actively breaks","Occasional clean-ups","Regular, planned retirement"]},

  // -- Data & Integration
  {d:"data", q:"How do you notice failures in interfaces or EDI?",
   hint:"End-to-end sight of your integrations.",
   o:["When a partner or user complains","Through manual checks","Alerts on the core interfaces","Monitored end to end with alerting"]},
  {d:"data", q:"How do you govern the quality of your master data?",
   hint:"Rules, ownership, verification.",
   o:["A known problem, with no measures in place","Occasional clean-up campaigns","Defined rules and named owners","Checked and monitored against rules"]},
  {d:"data", q:"How do you handle data growth in JDE?",
   hint:"Archiving and purge act directly on run times.",
   o:["No concept in place","Known issue, not addressed","A concept exists, partly implemented","Established and performed regularly"]},

  // -- Knowledge & Service
  {d:"know", q:"Where does your JD Edwards knowledge actually sit?",
   hint:"Person-dependency is the most common quiet risk in ERP operations.",
   o:["With one or two people","Partly documented, often out of date","Documented and maintained","Available in context, users help themselves"]},
  {d:"know", q:"How long before a new user is genuinely productive?",
   hint:"Time to productivity as a measure of accessibility.",
   o:["Months","Several weeks","A few weeks","A few days"]},
  {d:"know", q:"How do JDE support requests reach you?",
   hint:"From requests in passing to a measurable service.",
   o:["Informally, by email or in passing","Through a shared mailbox","Through a ticketing system","Ticketing with SLAs and regular reporting"]},

  // -- Security & Compliance
  {d:"sec", q:"How often do you review roles and permissions in JDE?",
   hint:"Permissions accumulate when nobody clears them out.",
   o:["Rarely or never","When something prompts it","On a fixed schedule","Continuously monitored"]},
  {d:"sec", q:"How ready are you for audit and NIS2 requirements around JDE?",
   hint:"Evidence, not just implementation.",
   o:["Not prepared","Partly, but undocumented","Documented controls in place","Audited and continuously maintained"]},
  {d:"sec", q:"When did you last test a full JDE recovery?",
   hint:"A backup that has never been restored is an assumption.",
   o:["Never tested","A long time ago","Tested regularly","Tested regularly, with documented recovery times"]}
];

/* What the check shows for each dimension, and what it leaves open. */
const FINDINGS = {
  ops:{  t:"Operations & Monitoring",
         p:"Incidents reach you through users rather than through your systems. That costs twice over: response time, and confidence in IT.",
         u:"The check shows <b>that</b> you are working reactively. It does not show which jobs and components actually fail. That needs your job and system history."},
  rel:{  t:"Release & CNC",
         p:"Your release and change process runs without a fixed cadence. Every month that passes adds to the effort of the next upgrade.",
         u:"The check shows <b>that</b> you are behind. How far, and what it costs, only emerges from comparing your Tools Release and ESU levels."},
  proc:{ t:"Process & Standard Use",
         p:"Your modifications are not fully surveyed. In our experience this is the largest single cost item in upgrades, and the least often measured.",
         u:"The check shows <b>that</b> transparency is missing. Which objects are affected, and which are dead, only an analysis of your object inventory will tell you."},
  data:{ t:"Data & Integration",
         p:"Interface failures get noticed after they have taken effect. In supply chains that lands directly on your partners.",
         u:"The check shows <b>that</b> monitoring is missing. Where it actually breaks emerges only from analysing your interface logs."},
  know:{ t:"Knowledge & Service",
         p:"Your JDE knowledge rests with a few people. That never shows in daily work, only during holidays, illness and resignations.",
         u:"The check shows <b>that</b> concentration risk exists. How large it is emerges only from mapping topics to actual named owners."},
  sec:{  t:"Security & Compliance",
         p:"Permissions and evidence are not reviewed on a schedule. This is exactly where auditors start.",
         u:"The check shows <b>that</b> gaps exist. Which role conflicts you actually have emerges only from analysing how access is granted."}
};

/* ==============================================================
   STATE
   ============================================================== */
let idx = 0;
const answers = new Array(Q.length).fill(null);
let result = null;
let selDay = null, selTime = null, days = [];
let sending = false;

const $ = id => document.getElementById(id);
const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const dimOf = id => DIMS.find(d => d.id === id);
const show = id => { ["socIntro","socQ","socRes"].forEach(s => $(s).classList.toggle("soc-hidden", s !== id)); };
const toTop = () => { if (window.scrollTo) window.scrollTo({top:0, behavior:"smooth"}); };

/* ==============================================================
   INIT
   ============================================================== */
$("socInsiderLink").href = CONFIG.insiderUrl;

// Der E-Mail-Ausgang wird nur gezeigt, wenn er auch funktioniert. Ein
// Formular anzubieten, das beim Absenden scheitert, ist schlechter als keins.
if (!CONFIG.mauticBase || !CONFIG.mauticFormId)
  document.getElementById("socAlt").style.display = "none";
document.getElementById("socAltPrivacy").href = CONFIG.privacyUrl;
$("socDimChips").innerHTML = DIMS.map(d =>
  '<div class="soc-dim-chip"><i class="fas ' + d.icon + '"></i>' + esc(d.name) + '</div>').join("");

$("socRail").innerHTML = DIMS.map(d =>
  '<div class="soc-rail-seg" data-d="' + d.id + '">' +
    '<div class="soc-rail-bar"><i></i></div>' +
    '<div class="soc-rail-lbl">' + esc(d.short) + '</div>' +
  '</div>').join("");

/* ==============================================================
   QUESTIONS
   ============================================================== */
window.socStart = function(){
  idx = 0;
  answers.fill(null);
  result = null; selDay = null; selTime = null;
  show("socQ");
  renderQ();
  toTop();
  track('JDE Check started', '/jde-check/started');
};

function renderQ(){
  const q = Q[idx], d = dimOf(q.d);
  $("socQIcon").className = "fas " + d.icon;
  $("socQDim").textContent = d.name;
  $("socQCount").textContent = "Question " + (idx + 1) + " of " + Q.length;
  $("socQText").textContent = q.q;
  $("socQHint").textContent = q.hint || "";

  document.querySelectorAll(".soc-rail-seg").forEach(seg => {
    const id = seg.dataset.d;
    const items = Q.map((qq, k) => ({qq, k})).filter(x => x.qq.d === id);
    const done = items.filter(x => answers[x.k] !== null).length;
    seg.querySelector(".soc-rail-bar i").style.width = (done / items.length * 100) + "%";
    seg.classList.toggle("on", id === q.d);
  });

  const wrap = $("socOpts");
  wrap.innerHTML = "";
  q.o.forEach((label, i) => {
    const b = document.createElement("button");
    b.type = "button";
    b.className = "soc-opt" + (answers[idx] === i ? " sel" : "");
    b.innerHTML = '<span class="dot"></span><span>' + esc(label) + '</span>';
    b.onclick = () => { answers[idx] = i; renderQ(); };
    wrap.appendChild(b);
  });

  $("socBack").disabled = idx === 0;
  const nx = $("socNext");
  nx.disabled = answers[idx] === null;
  nx.innerHTML = (idx === Q.length - 1)
    ? 'See my results <i class="fas fa-arrow-right"></i>'
    : 'Next <i class="fas fa-arrow-right"></i>';
}

window.socNext = function(){
  if (answers[idx] === null) return;
  if (idx < Q.length - 1){ idx++; renderQ(); }
  else { compute(); renderResult(); }
};
window.socPrev = function(){ if (idx > 0){ idx--; renderQ(); } };

/* ==============================================================
   SCORING
   ============================================================== */
function stageOf(pct){
  for (const s of STAGES) if (pct <= s.max) return s;
  return STAGES[STAGES.length - 1];
}

function compute(){
  const dims = DIMS.map(d => {
    const items = Q.map((q, k) => ({q, k})).filter(x => x.q.d === d.id);
    const raw = items.reduce((s, x) => s + (answers[x.k] || 0), 0);
    const pct = Math.round(raw / (items.length * 3) * 100);
    const st = stageOf(pct);
    return {id:d.id, name:d.name, icon:d.icon, raw:raw, max:items.length * 3, pct:pct, stage:st.n, stageName:st.name};
  });

  const raw = answers.reduce((s, v) => s + (v || 0), 0);
  const pct = Math.round(raw / (Q.length * 3) * 100);
  const st = stageOf(pct);

  const sorted = dims.slice().sort((a, b) => a.pct - b.pct || DIMS.findIndex(d => d.id === a.id) - DIMS.findIndex(d => d.id === b.id));
  const weak = sorted.filter(d => d.stage <= 3).slice(0, 3);
  const strong = sorted.slice().reverse().filter(d => d.stage >= 4);

  result = {raw:raw, max:Q.length * 3, pct:pct, stage:st.n, stageName:st.name, dims:dims, weak:weak, strong:strong};
}

function renderResult(){
  const r = result;
  $("socStageNum").textContent = r.stage;
  $("socStageName").textContent = r.stageName;
  $("socStageText").textContent = STAGE_TEXT[r.stage];
  $("socLadder").innerHTML = [1,2,3,4,5].map(n =>
    '<div class="soc-rung' + (n <= r.stage ? ' on' : '') + '"></div>').join("");

  $("socProfile").innerHTML = r.dims.map(d => {
    const steps = [1,2,3,4,5].map(n => {
      if (n > d.stage) return '<div class="soc-step"></div>';
      const cls = d.stage <= 2 ? "f-low" : (d.stage === 3 ? "f-mid" : "f-high");
      return '<div class="soc-step ' + cls + '"></div>';
    }).join("");
    return '<div class="soc-prow">' +
      '<div class="soc-pname"><i class="fas ' + d.icon + '"></i>' + esc(d.name) + '</div>' +
      '<div class="soc-steps">' + steps + '</div>' +
      '<div class="soc-pstage">Stage <b>' + d.stage + '</b> &middot; ' + esc(d.stageName) + '</div>' +
    '</div>';
  }).join("");

  const box = $("socFindings");
  box.innerHTML = "";

  if (r.weak.length === 0){
    $("socFindHead").textContent = "Consistently solid";
    $("socFindSub").textContent = "No area falls behind, which is rare.";
    box.innerHTML = '<div class="soc-strong"><i class="fas fa-circle-check"></i>' +
      '<span>All six areas are at Stage 4 or above. Your leverage is not in catching up but in automation, and in holding this level as your estate grows.</span></div>';
  } else {
    $("socFindHead").textContent = "Where to focus first";
    $("socFindSub").textContent = "Your weakest areas, and what this check cannot answer about them.";
    r.strong.slice(0, 2).forEach(d => {
      const el = document.createElement("div");
      el.className = "soc-strong";
      el.innerHTML = '<i class="fas fa-circle-check"></i><span><b>' + esc(d.name) +
        '</b> is in good shape (Stage ' + d.stage + '). No action needed here.</span>';
      box.appendChild(el);
    });
    r.weak.forEach(d => {
      const f = FINDINGS[d.id];
      const el = document.createElement("div");
      el.className = "soc-find";
      el.innerHTML = '<div class="soc-find-i"><i class="fas ' + d.icon + '"></i></div>' +
        '<div><h4>' + esc(f.t) + ' &mdash; Stage ' + d.stage + ', ' + esc(d.stageName) + '</h4>' +
        '<p>' + f.p + '<span class="unknown">' + f.u + '</span></p></div>';
      box.appendChild(el);
    });
    $("socCtaText").textContent = "The deep dive tests " +
      r.weak.map(d => d.name).join(", ") +
      " against real data from your system. After three to four weeks: an evidenced profile, prioritised actions, a business case.";
  }

  show("socRes");
  toTop();
  track('JDE Check result stage ' + r.stage, '/jde-check/result/stage-' + r.stage,
        'jde-check-abgeschlossen,jde-check-stufe-' + r.stage
        + (r.weak.length ? ',jde-schwach-' + r.weak[0].id : ''));
  sendBenchmark();
  sendTelegramResultEvent();
}

/* Internal notification when a visitor completes the JDE Operations Check.
   No personal data is available at this point, so the result is sent anonymously. */
function sendTelegramResultEvent(){
  if (!CONFIG.eventWebhook || !result) return;
  try{
    fetch(CONFIG.eventWebhook, {
      method:"POST",
      headers:{"Content-Type":"application/json"},
      keepalive:true,
      body:JSON.stringify({
        event:"jde_operations_check_completed",
        source:"suppora.eu",
        name:"",
        email:"",
        company:"",
        stage:result.stage,
        stage_name:result.stageName,
        score:result.pct,
        focus:result.weak.map(d => d.name).join(", ")
      })
    }).catch(()=>{});
  }catch(e){}
}

/* Anonymous aggregate data - no contact details, no identifier. */
function sendBenchmark(){
  if (!CONFIG.benchmarkWebhook || !result) return;
  const payload = {
    type:"jde_check_anonymous",
    ts:new Date().toISOString(),
    overallStage:result.stage,
    overallPct:result.pct,
    dims:result.dims.map(d => ({id:d.id, stage:d.stage, pct:d.pct})),
    answers:answers.slice()
  };
  try{
    fetch(CONFIG.benchmarkWebhook, {
      method:"POST", mode:"no-cors", keepalive:true,
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(payload)
    }).catch(()=>{});
  }catch(e){}
}

/* ==============================================================
   PICKING A TIME
   ============================================================== */
window.socToBooking = function(){
  const r = result;
  // Kompakter, PII-freier Code: Gesamtstufe, je Dimension die Stufe, Prozent.
  const code  = "S" + r.stage + "|" + r.dims.map(d => d.id + d.stage).join("|") + "|p" + r.pct;
  const focus = r.weak.map(d => d.id).join(",");
  const url = CONFIG.calBase + "/" + CONFIG.calEvent +
    "?" + encodeURIComponent(CONFIG.calResultField) + "=" + encodeURIComponent(code) +
    "&" + encodeURIComponent(CONFIG.calFocusField)  + "=" + encodeURIComponent(focus);
  track('Deep dive booking opened', '/jde-check/booking', 'deep-dive-termin-geklickt');
  setTimeout(function(){ window.location.href = url; }, 250);
};


window.socSendResult = function(){
  const box = document.getElementById("socAlt");
  const msg = document.getElementById("socAltMsg");
  const em  = document.getElementById("socAltEmail").value.trim();
  msg.className = "soc-alt-msg";

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(em)){
    msg.textContent = "Please enter a valid email address."; msg.className = "soc-alt-msg err"; return;
  }
  if (!document.getElementById("socAltConsent").checked){
    msg.textContent = "Please confirm consent."; msg.className = "soc-alt-msg err"; return;
  }
  if (!CONFIG.mauticBase || !CONFIG.mauticFormId){
    msg.textContent = "Sending is not configured yet."; msg.className = "soc-alt-msg err"; return;
  }

  const F = CONFIG.mauticFields;
  const vals = {
    "mauticform[email]": em,
    "mauticform[formId]": CONFIG.mauticFormId,
    "mauticform[messenger]": "1"
  };
  vals["mauticform[" + F.stage + "]"] = result.stage;
  vals["mauticform[" + F.pct + "]"]   = result.pct;
  vals["mauticform[" + F.focus + "]"] = result.weak.map(d => d.name).join(", ");

  const form = document.getElementById("socMauticForm");
  form.action = CONFIG.mauticBase.replace(/\/$/, "") + "/form/submit?formId=" + encodeURIComponent(CONFIG.mauticFormId);
  form.innerHTML = "";
  Object.keys(vals).forEach(k => {
    const i = document.createElement("input");
    i.type = "hidden"; i.name = k; i.value = vals[k];
    form.appendChild(i);
  });
  form.submit();

  /* The visitor has now explicitly supplied an email address. */
  if (CONFIG.eventWebhook) {
    try {
      fetch(CONFIG.eventWebhook, {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        keepalive:true,
        body:JSON.stringify({
          event:"jde_operations_check_email_requested",
          source:"suppora.eu",
          name:"",
          email:em,
          company:"",
          stage:result.stage,
          stage_name:result.stageName,
          score:result.pct,
          focus:result.weak.map(d => d.name).join(", ")
        })
      }).catch(()=>{});
    } catch(e) {}
  }

  track("JDE Check result requested", "/jde-check/result-by-email",
        "jde-check-ergebnis-angefordert,jde-check-stufe-" + result.stage);

  msg.textContent = "Almost there: we have sent you a confirmation email. Your results go out once you click the link in it.";
  msg.className = "soc-alt-msg ok";
  box.classList.add("sent");
};

})();
</script>