/* PulseSections3.jsx — Workflow, Results, Differentiation, Bridge,
 * Boundaries, Final CTA, Footer */

/* =========================================================
   EXAMPLE WORKFLOW — Section 06 · dark PULSE product walkthrough
   Horizontal step timeline that auto-progresses once, plus a
   changing product preview (real PULSE screenshots + artifacts).
   ========================================================= */
const WF_STEPS = [
{ n: '01', label: 'Fokus', title: 'Fokus definieren',
  text: 'Welche Prozess-, Anforderungs-, Risiko- oder Transformationsfrage soll geklärt werden?',
  frame: 'PULSE · Use Case', viz: 'scope' },
{ n: '02', label: 'Setup', title: 'Interviewprogramm konfigurieren',
  text: 'Fragen, Teilnehmergruppen, Kontext und Analyseziel werden für den Use Case vorbereitet.',
  frame: 'PULSE Admin · Interviews', viz: 'shot', shot: 'assets/screenshots/pulse-admin-interviews.png' },
{ n: '03', label: 'Interview', title: 'AI Interviews durchführen',
  text: 'Teilnehmende antworten ohne Login. PULSE stellt kontextbezogene Folgefragen.',
  frame: 'PULSE Interview · Teilnehmer', viz: 'shot', shot: 'assets/screenshots/pulse-interview-single.png', fit: 'contain' },
{ n: '04', label: 'Kontext', title: 'Kontext einbeziehen',
  text: 'Projektwissen, Dokumente, Anforderungen und Wissensbasen dienen als Referenzrahmen.',
  frame: 'PULSE · Kontext', viz: 'context' },
{ n: '05', label: 'Analyse', title: 'Analyse verdichten',
  text: 'PULSE erkennt Muster, Widersprüche, Prioritäten, Risiken und Potenziale.',
  frame: 'PULSE Admin · Analyse', viz: 'shot', shot: 'assets/screenshots/pulse-admin-analysis.png' },
{ n: '06', label: 'Review', title: 'Ergebnisse prüfen',
  text: 'Novemcore reviewt die Analyse und überführt sie in eine entscheidungsfähige Einordnung.',
  frame: 'PULSE · Review', viz: 'review' },
{ n: '07', label: 'Nächster Schritt', title: 'Nächsten Schritt ableiten',
  text: 'Je nach Use Case folgt Umsetzung, weitere Validierung oder eine gezielte nächste Erhebung.',
  frame: 'PULSE · Empfehlung', viz: 'next' }];

const WF_LAST = WF_STEPS.length - 1;

function WfVisual({ step }) {
  if (step.viz === 'shot') {
    return (
      <div className={'wf-shot' + (step.fit === 'contain' ? ' wf-shot--contain' : '')}>
        <img src={step.shot} alt="" loading="lazy" />
      </div>);

  }
  if (step.viz === 'scope') {
    return (
      <div className="wf-art wf-art--scope">
        <span className="wf-art__lbl">Wissensfrage</span>
        <p className="wf-art__q">„Wo verliert der Prozess Zeit — und was lässt sich automatisieren?“</p>
        <div className="wf-art__chips">
          {['Prozess', 'Anforderungen', 'Risiko', 'Transformation'].map((c, i) =>
          <span key={c} className={i === 0 ? 'is-on' : ''}>{c}</span>
          )}
        </div>
        <div className="wf-art__meta">{Ico.users()} Teilnehmerkreis · 4 Rollen</div>
      </div>);

  }
  if (step.viz === 'context') {
    const rows = [
    { i: 'doc', t: 'Dokumente', m: '12' },
    { i: 'matrix', t: 'Anforderungen', m: 'Fit-Gap' },
    { i: 'book', t: 'Projektwissen', m: 'Referenz' },
    { i: 'layers', t: 'Wissensbasis', m: 'aktiv' }];

    return (
      <div className="wf-art wf-art--context">
        <span className="wf-art__lbl">Referenzrahmen</span>
        <ul className="wf-ctx">
          {rows.map((r) =>
          <li key={r.t}><span className="wf-ctx__ico">{Ico[r.i]()}</span>{r.t}<em>{r.m}</em></li>
          )}
        </ul>
        <div className="wf-ctx__feed">{Ico.arrowSm()} dient der Analyse als Kontext</div>
      </div>);

  }
  if (step.viz === 'review') {
    return (
      <div className="wf-art wf-art--review">
        <div className="wf-rev__finding">
          <span className="wf-rev__bar" />
          <div><strong>Manuelle Übergaben dominieren</strong><span>Verdichteter Befund · mehrere Stimmen</span></div>
        </div>
        <div className="wf-rev__note">
          <span className="wf-rev__who">NC</span>
          <div className="wf-rev__body">
            <strong>Novemcore Review</strong>
            <p>Befund bestätigt und in eine entscheidungsfähige Einordnung überführt.</p>
          </div>
          <span className="wf-rev__badge">{Ico.check()} geprüft</span>
        </div>
      </div>);

  }
  // next
  const opts = [
  { t: 'Umsetzung', d: 'Novemcore priorisiert und setzt um.' },
  { t: 'Weitere Validierung', d: 'Annahmen mit einer neuen Welle prüfen.' },
  { t: 'Nächste Erhebung', d: 'Fokus schärfen und erneut messen.' }];

  return (
    <div className="wf-art wf-art--next">
      <span className="wf-art__lbl">Mögliche nächste Schritte</span>
      <div className="wf-next">
        {opts.map((o) =>
        <div key={o.t} className="wf-next__card">
            <strong>{o.t}</strong><p>{o.d}</p>
          </div>
        )}
      </div>
    </div>);

}

function WfWindow({ step, panes }) {
  return (
    <div className="wf-window">
      <div className="wf-window__bar">
        <span className="wf-window__dots"><i /><i /><i /></span>
        <span className="wf-window__label">{step.frame}</span>
        <span className="wf-window__live">live</span>
      </div>
      <div className="wf-window__body">
        {panes ?
        WF_STEPS.map((s, i) =>
        <div key={i} className={'wf-pane' + (s === step ? ' is-on' : '')}><WfVisual step={s} /></div>
        ) :
        <div className="wf-pane is-on"><WfVisual step={step} /></div>}
      </div>
    </div>);

}

function PulseWorkflow() {
  const [ref, shown] = usePulseReveal(0.2);
  const [current, setCurrent] = React.useState(0);
  const [selected, setSelected] = React.useState(null);
  const [hover, setHover] = React.useState(null);
  const pausedRef = React.useRef(false);

  React.useEffect(() => {pausedRef.current = hover !== null || selected !== null;}, [hover, selected]);

  React.useEffect(() => {
    if (!shown) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {setCurrent(WF_LAST);return;}
    // On mobile the steps render as an accordion — don't auto-open/shift them.
    if (document.body.classList.contains('is-mobile')) return;
    setCurrent(0);
    const id = setInterval(() => {
      if (pausedRef.current) return;
      setCurrent((c) => c >= WF_LAST ? c : c + 1);
    }, 1180);
    return () => clearInterval(id);
  }, [shown]);

  const view = hover !== null ? hover : selected !== null ? selected : current;
  const step = WF_STEPS[view];

  return (
    <section className="psec psec--pulse pulse-flow" data-screen-label="06 Example Workflow">
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--pulse">PULSE WORKFLOW</div>
          <h2 className="psec__h2">Wie ein <span className="acc-pulse">PULSE Use Case</span> abläuft.</h2>
          <p className="psec__lead">
            Ein PULSE Use Case beginnt mit einer klaren Wissensfrage und entwickelt
            sich über Interviews, Kontext und Analyse zu einer belastbaren
            Entscheidungsbasis.
          </p>
        </div>

        <div ref={ref} className={'wf' + (shown ? ' is-shown' : '')}>
          {/* DESKTOP / TABLET — timeline rail + product stage */}
          <div className="wf-desktop">
            <div className="wf-rail">
              <div className="wf-rail__track" aria-hidden="true" />
              <div className="wf-rail__fill" aria-hidden="true" style={{ transform: `scaleX(${view / WF_LAST})` }} />
              <div className="wf-rail__nodes">
                {WF_STEPS.map((s, i) =>
                <button key={s.n} type="button"
                className={'wf-node' + (i < view ? ' is-past' : '') + (i === view ? ' is-active' : '')}
                aria-pressed={i === view}
                onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
                onFocus={() => setHover(i)} onBlur={() => setHover(null)}
                onClick={() => setSelected(i)}>
                    <span className="wf-node__dot">{i < view ? Ico.check() : s.n}</span>
                    <span className="wf-node__lbl">{s.label}</span>
                  </button>
                )}
              </div>
            </div>

            <div className="wf-stage">
              <WfWindow step={step} panes />
              <div className="wf-note">
                <div className="wf-note__in" key={view}>
                  <span className="wf-note__step">Schritt {step.n} <i>/ 07</i></span>
                  <h3 className="wf-note__title">{step.title}</h3>
                  <p className="wf-note__text">{step.text}</p>
                </div>
                <div className="wf-note__hint"></div>
              </div>
            </div>
          </div>

          {/* MOBILE — vertical accordion stepper */}
          <div className="wf-mobile">
            {WF_STEPS.map((s, i) =>
            <div key={s.n} className={'wf-acc' + (i === view ? ' is-open' : '') + (i < view ? ' is-past' : '')}>
                <button type="button" className="wf-acc__hd" onClick={() => setSelected(i === selected ? null : i)}>
                  <span className="wf-acc__dot">{i < view ? Ico.check() : s.n}</span>
                  <span className="wf-acc__t">{s.title}</span>
                  <span className="wf-acc__chev">{Ico.chev()}</span>
                </button>
                <div className="wf-acc__body">
                  <div className="wf-acc__inner">
                    <p className="wf-acc__text">{s.text}</p>
                    <WfWindow step={s} />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   RESULTS — Section 07 · light editorial cards w/ dark evidence previews
   Six results, 3×2 on desktop. Each card carries a concise dark
   embedded report/evidence preview. Hover reveals "Typischer Einsatz".
   ========================================================= */
const PULSE_RESULTS = [
{ viz: 'themes', tag: 'MUSTER',
  t: 'Muster- und Themenanalysen',
  d: 'Wiederkehrende Aussagen, Widersprüche und Cluster werden über Interviews hinweg sichtbar.',
  use: 'Verständnis über viele Interviews hinweg verdichten.' },
{ viz: 'priority', tag: 'POTENZIALE',
  t: 'Priorisierte Potenziale',
  d: 'Prozess-, Automatisierungs-, Risiko- oder Transformationshebel werden vergleichbar eingeordnet.',
  use: 'Diskussionen auf die wichtigsten Hebel fokussieren.' },
{ viz: 'reqs', tag: 'FIT-GAP',
  t: 'Requirements- und Fit-Gap-Strukturen',
  d: 'Anforderungen, offene Fragen und Entscheidungsbedarfe werden klarer strukturierbar.',
  use: 'Anforderungen für Auswahl- und Umsetzungsentscheidungen ordnen.' },
{ viz: 'knowledge', tag: 'WISSEN',
  t: 'Prozess- und Wissensdokumentation',
  d: 'Gelebte Abläufe und Erfahrungswissen werden als wiederverwendbare Grundlage gesichert.',
  use: 'Erfahrungswissen für Folgeprojekte sichern.' },
{ viz: 'roadmap', tag: 'IMPULSE',
  t: 'Transformations- und Umsetzungsimpulse',
  d: 'Barrieren, Verantwortlichkeiten und nächste Schritte werden für Umsetzung greifbarer.',
  use: 'Nächste Schritte und Verantwortlichkeiten klären.' },
{ viz: 'readout', tag: 'READOUT',
  t: 'Management Readouts',
  d: 'Analysen können in Review- und Entscheidungsformate für Führungsteams überführt werden.',
  use: 'Ergebnisse für Führungsentscheidungen aufbereiten.' }];


function ResEvidence({ viz }) {
  if (viz === 'themes') {
    const rows = [
    { t: 'Manuelle Übergaben', cov: 4 },
    { t: 'Tool-Brüche', cov: 3 },
    { t: 'Freigabe-Schleifen', cov: 2 }];

    return (
      <ul className="rv-themes">
        {rows.map((r) =>
        <li key={r.t}>
            <span className="rv-themes__name">{r.t}</span>
            <span className="rv-themes__cov" aria-hidden="true">
              {[0, 1, 2, 3, 4].map((i) => <i key={i} className={i < r.cov ? 'on' : ''} />)}
            </span>
          </li>
        )}
      </ul>);

  }
  if (viz === 'priority') {
    const dots = [
    { x: 74, y: 24, hot: true }, { x: 40, y: 46 },
    { x: 26, y: 70 }, { x: 60, y: 62 }, { x: 82, y: 80 }];

    return (
      <div className="rv-mx">
        <span className="rv-mx__ax rv-mx__ax--y">Wirkung</span>
        <div className="rv-mx__plot">
          <span className="rv-mx__line rv-mx__line--v" />
          <span className="rv-mx__line rv-mx__line--h" />
          {dots.map((d, i) =>
          <span key={i} className={'rv-mx__dot' + (d.hot ? ' is-hot' : '')}
          style={{ left: d.x + '%', top: d.y + '%' }} />
          )}
        </div>
        <span className="rv-mx__ax rv-mx__ax--x">Aufwand</span>
      </div>);

  }
  if (viz === 'reqs') {
    const rows = [
    { t: 'Rollenkonzept', s: 'Fit', k: 'fit' },
    { t: 'Schnittstelle ERP', s: 'Gap', k: 'gap' },
    { t: 'Audit-Trail', s: 'Offen', k: 'open' }];

    return (
      <ul className="rv-tbl">
        {rows.map((r) =>
        <li key={r.t}>
            <span className="rv-tbl__name">{r.t}</span>
            <span className={'rv-tbl__tag rv-tbl__tag--' + r.k}>{r.s}</span>
          </li>
        )}
      </ul>);

  }
  if (viz === 'knowledge') {
    const docs = [
    { ico: 'flow', t: 'Prozess · Auftragsannahme' },
    { ico: 'book', t: 'Wissensbasis · Freigaben' }];

    return (
      <div className="rv-docs">
        {docs.map((d) =>
        <div key={d.t} className="rv-doc">
            <span className="rv-doc__ico">{Ico[d.ico]()}</span>
            <div className="rv-doc__body">
              <b>{d.t}</b>
              <span className="rv-doc__lines"><i /><i /></span>
            </div>
          </div>
        )}
      </div>);

  }
  if (viz === 'roadmap') {
    const phases = ['Sofort', 'Mittelfristig', 'Strategisch'];
    return (
      <div className="rv-road">
        <div className="rv-road__rail" aria-hidden="true">
          <span className="rv-road__track" />
          {phases.map((_, i) => <span key={i} className={'rv-road__node' + (i === 0 ? ' is-on' : '')} />)}
        </div>
        <div className="rv-road__labels">
          {phases.map((p) => <span key={p}>{p}</span>)}
        </div>
        <div className="rv-road__ws" aria-hidden="true">
          <span style={{ left: '2%', width: '46%' }} />
          <span style={{ left: '34%', width: '52%' }} className="alt" />
        </div>
      </div>);

  }
  // readout — executive summary preview
  return (
    <div className="rv-rd">
      <span className="rv-rd__h" />
      <span className="rv-rd__line" />
      <span className="rv-rd__line" style={{ width: '78%' }} />
      <div className="rv-rd__call">
        <span className="rv-rd__k">Empfehlung</span>
        <span className="rv-rd__bars"><i /><i /><i /></span>
      </div>
    </div>);

}

function ResultCard({ r, i }) {
  return (
    <article className="res-card" style={{ '--i': i }}>
      <div className="res-card__preview" aria-hidden="true">
        <div className="res-card__bar">
          <span className="res-card__tag">{r.tag}</span>
          <span className="res-card__brand">
            <span className="res-card__brandTxt">PULSE</span>
            <span className="res-card__mark" />
          </span>
        </div>
        <div className="res-card__viz"><ResEvidence viz={r.viz} /></div>
      </div>
      <div className="res-card__body">
        <h3 className="res-card__title">{r.t}</h3>
        <p className="res-card__text">{r.d}</p>
        <div className="res-card__use">
          <div className="res-card__useIn">
            <span className="res-card__useLbl">Typischer Einsatz</span>
            <span className="res-card__useTxt">{r.use}</span>
          </div>
        </div>
      </div>
    </article>);

}

function PulseResults() {
  const [ref, shown] = usePulseReveal(0.12);
  return (
    <section className="psec psec--mist pulse-results" data-screen-label="07 Results">
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--cobalt">ERGEBNISSE</div>
          <h2 className="psec__h2">Aus Interviews werden <span className="acc-cool">nutzbare Ergebnisse.</span></h2>
          <p className="psec__lead">PULSE verdichtet Interviewwissen und Kontext zu Analysen, die Novemcore prüft, einordnen und in nächste Schritte übersetzen kann.


          </p>
        </div>

        <div ref={ref} className={'results-grid' + (shown ? ' is-shown' : '')}>
          {PULSE_RESULTS.map((r, i) => <ResultCard key={r.t} r={r} i={i} />)}
        </div>
      </div>
    </section>);

}

/* =========================================================
   DIFFERENTIATION — Section 08 · comparison matrix
   Complementary, not dismissive. One markup → table / cards / accordion.
   ========================================================= */
const PULSE_DIFF = [
{
  alt: 'Umfragen', altIco: 'doc', viz: 'msg',
  limit: 'Statisch, wenig Kontext, keine echte Nachfrage.',
  pulse: 'PULSE stellt kontextbezogene Folgefragen und sammelt tiefere Evidenz.'
},
{
  alt: 'Workshops', altIco: 'users', viz: 'flow',
  limit: 'Gruppendynamik, Hierarchie und Zeitdruck verzerren Perspektiven.',
  pulse: 'PULSE erreicht mehr Stimmen einzeln, strukturierter und vergleichbarer.'
},
{
  alt: 'Manuelle Interviews', altIco: 'msg', viz: 'grid',
  limit: 'Aufwendig, uneinheitlich und schwer über viele Gespräche hinweg auszuwerten.',
  pulse: 'PULSE erhöht Konsistenz, Skalierbarkeit und Analysegeschwindigkeit.'
},
{
  alt: 'Process Mining', altIco: 'chart', viz: 'brain',
  limit: 'Zeigt vor allem, was in Systemdaten sichtbar und verfügbar ist.',
  pulse: 'PULSE erschließt, was Menschen wissen, erleben, entscheiden und begründen.'
},
{
  alt: 'Generische AI Chatbots', altIco: 'spark2', viz: 'cog',
  limit: 'Oft ohne klares Interviewziel, Kontextmodell oder Analyseauftrag.',
  pulse: 'PULSE arbeitet mit konfiguriertem Use Case, Kontext und Analyseziel.'
},
{
  alt: 'Wikis & Prozessbeschreibungen', altIco: 'book', viz: 'zap',
  limit: 'Warten darauf, dass Wissen manuell dokumentiert und aktuell gehalten wird.',
  pulse: 'PULSE kann Wissen aktiv erheben und zu wiederverwendbarer Evidenz strukturieren.'
}];


function DiffRow({ row, i, open, onToggle }) {
  const AltIco = Ico[row.altIco];
  const VizIco = Ico[row.viz];
  return (
    <div className={'diff__row' + (open ? ' is-open' : '')} style={{ '--i': i }}>
      <button
        type="button"
        className="diff__cell diff__cell--app"
        aria-expanded={open}
        onClick={onToggle}>
        
        <span className="diff__appIco" aria-hidden="true"><AltIco /></span>
        <span className="diff__appText">
          <span className="diff__fieldLbl diff__fieldLbl--app">Klassischer Ansatz</span>
          <span className="diff__appName">{row.alt}</span>
        </span>
        <span className="diff__chev" aria-hidden="true"><Ico.chev /></span>
      </button>

      <div className="diff__cell diff__cell--limit">
        <span className="diff__fieldLbl">Typische Grenze</span>
        <span className="diff__limitText">{row.limit}</span>
      </div>

      <div className="diff__cell diff__cell--pulse">
        <span className="diff__fieldLbl diff__fieldLbl--pulse">Was PULSE ergänzt</span>
        <span className="diff__pulseText">{row.pulse}</span>
        <span className="diff__viz" aria-hidden="true"><VizIco /></span>
      </div>
    </div>);

}

function PulseDifferentiation() {
  const [ref, shown] = usePulseReveal(0.12);
  const [open, setOpen] = React.useState(0);
  return (
    <section className="psec psec--paper pulse-diff" data-screen-label="08 Differentiation">
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--cobalt">WARUM PULSE ANDERS ARBEITET</div>
          <h2 className="psec__h2">Wo klassische Methoden enden beginnt echte <span className="acc-cool">PULSE-Erkenntnis.</span></h2>
          <p className="psec__lead">Umfragen, Workshops, Process Mining und Wikis liefern wichtige Ausschnitte. PULSE geht den entscheidenden Schritt weiter und ergänzt sie um strukturierte, kontextbezogene Erkenntnisse von den Menschen, die Prozesse täglich erleben, entscheiden und begründen.



          </p>
        </div>

        <div ref={ref} className={'diff' + (shown ? ' is-shown' : '')}>
          <div className="diff__head" aria-hidden="true">
            <span className="diff__hCell diff__hCell--app">Klassischer Ansatz</span>
            <span className="diff__hCell diff__hCell--limit">Typische Grenze</span>
            <span className="diff__hCell diff__hCell--pulse">
              <img src="assets/logos/pulse-mark.png" alt="" />Was PULSE ergänzt
            </span>
          </div>
          {PULSE_DIFF.map((row, i) =>
          <DiffRow
            key={row.alt}
            row={row}
            i={i}
            open={open === i}
            onToggle={() => setOpen(open === i ? -1 : i)} />

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

}

/* =========================================================
   PULSE + NOVEMCORE — Section 09 · light Novemcore bridge
   ========================================================= */
const PNX_PULSE_FEAT = [
{ ico: 'msg', t: 'AI-gestützte Interviews' },
{ ico: 'layers', t: 'Kontext und Wissensbasen' },
{ ico: 'matrix', t: 'Single- und Multi-Interview-Analysen' },
{ ico: 'doc', t: 'Reports und Insights' }];

const PNX_NOVEM_FEAT = [
{ ico: 'filter', t: 'Use Case und Scope definieren' },
{ ico: 'flow', t: 'Interviewlogik und Kontext vorbereiten' },
{ ico: 'search', t: 'Ergebnisse reviewen und einordnen' },
{ ico: 'road', t: 'Maßnahmen konkret umsetzen' }];

const PNX_CHIPS = [
'Power Automate', 'n8n', 'Custom Automation',
'Power BI', 'Tableau', 'Looker',
'Softwareauswahl', 'PMO'];

const PNX_FLOW = [
{ owner: 'PULSE', ico: 'spark', t: 'Evidenz', d: 'Wissen erheben, prüfen und strukturieren', kind: 'pulse' },
{ owner: 'NOVEMCORE', ico: 'search', t: 'Review', d: 'Ergebnisse einordnen und priorisieren', kind: 'review' },
{ owner: 'NOVEMCORE', ico: 'build', t: 'Umsetzungspfad', d: 'Automation · BI · Software · PMO', kind: 'deliver' }];


function PulseBridge() {
  return (
    <section className="psec psec--mist pn-bridge" data-screen-label="09 PULSE + Novemcore">
      <div className="wrap wrap--wide">
        <div className="psec__head psec__head--center">
          <div className="eyebrow eyebrow--cobalt">PULSE &amp; NOVEMCORE</div>
          <h2 className="psec__h2">PULSE schafft Evidenz.<br /><span className="acc-cool">Novemcore hebt das Potenzial.</span></h2>
          <p className="psec__lead">PULSE erhebt und analysiert Wissen. Novemcore hilft, die richtigen Fragen zu stellen, Ergebnisse zu prüfen, Prioritäten abzuleiten und in die konkrete Umsetzung zu gehen.



          </p>
        </div>

        {/* ── Two-column role split with central bridge ── */}
        <div className="pnx">
          {/* PULSE — embedded dark product artifact */}
          <article className="pnx-role pnx-role--pulse">
            <div className="pnx-role__bar">
              <img src="assets/logos/pulse-mark.png" alt="" className="pnx-role__mark" />
              <div className="pnx-role__id">
                <div className="pnx-role__name">PULSE</div>
                <div className="pnx-role__sub">Software für Human Knowledge Intelligence</div>
              </div>
              <span className="pnx-role__tag">EVIDENZ</span>
            </div>
            <ul className="pnx-feat">
              {PNX_PULSE_FEAT.map((f) =>
              <li key={f.t}><span className="pnx-feat__ico">{Ico[f.ico]()}</span>{f.t}</li>
              )}
            </ul>
          </article>

          {/* central handoff connector */}
          <div className="pnx-link" aria-hidden="true">
            <span className="pnx-link__line" />
            <span className="pnx-link__node">{Ico.arrow()}</span>
          </div>

          {/* NOVEMCORE — light editorial card */}
          <article className="pnx-role pnx-role--novem">
            <div className="pnx-role__bar">
              <span className="pnx-role__nmark"><img src="assets/logos/novemcore-symbol.svg" alt="" /></span>
              <div className="pnx-role__id">
                <div className="pnx-role__name">Novemcore</div>
                <div className="pnx-role__sub">Expertise für Priorisierung und Umsetzung</div>
              </div>
              <span className="pnx-role__tag pnx-role__tag--novem">UMSETZUNG</span>
            </div>
            <ul className="pnx-feat pnx-feat--novem">
              {PNX_NOVEM_FEAT.map((f) =>
              <li key={f.t}><span className="pnx-feat__ico">{Ico[f.ico]()}</span>{f.t}</li>
              )}
            </ul>
          </article>
        </div>

        {/* ── Implementation capability chips ── */}
        <div className="pnx-cap">
          <div className="pnx-cap__lbl">AUSWAHL AN UMSETZUNGSKOMPETENZEN · NOVEMCORE</div>
          <div className="pnx-cap__chips">
            {PNX_CHIPS.map((c) =>
            <span key={c} className="pnx-chip">{c}</span>
            )}
          </div>
        </div>

        {/* ── Bridge visual: Evidenz → Review → Umsetzungspfad ── */}
        <div className="pnx-flow">
          {PNX_FLOW.map((s, i) =>
          <React.Fragment key={s.t}>
              <div className={'pnx-stage pnx-stage--' + s.kind}>
                <span className="pnx-stage__ico">{Ico[s.ico]()}</span>
                <div className="pnx-stage__owner">{s.owner}</div>
                <div className="pnx-stage__title">{s.t}</div>
                <div className="pnx-stage__desc">{s.d}</div>
              </div>
              {i < PNX_FLOW.length - 1 &&
            <span className="pnx-flow__arr" aria-hidden="true">{Ico.arrow()}</span>
            }
            </React.Fragment>
          )}
        </div>

        {/* ── CTAs ── */}
        <div className="pnx-ctas">
          <a className="btn btn--pulse" href="/de/pulse-opportunity-scan">Scan buchen <Ico.arrow /></a>
          <a className="btn btn--secondary" href="/de/leistungen">Leistungen ansehen</a>
        </div>
      </div>
    </section>);

}

/* =========================================================
   PRODUCT BOUNDARIES — Section 10 · quiet factual trust block
   Three calm columns: what PULSE does · what Novemcore adds ·
   what PULSE does not promise (muted, never alarmist).
   ========================================================= */
const BOUND_COLS = [
{
  kind: 'does', lbl: 'WAS PULSE HEUTE KANN',
  items: [
  'AI-gestützte Interviews mit Folgefragen',
  'Wissensbasen und Projektkontext nutzen',
  'Einzel- und Multi-Interview-Analysen',
  'HTML Reports und einfacher PDF Export']

},
{
  kind: 'adds', lbl: 'WAS NOVEMCORE ERGÄNZT',
  items: [
  'Scope und Interviewlogik',
  'Qualitätsprüfung und Einordnung',
  'Priorisierung und Management Readout',
  'Umsetzungspfade und Projektunterstützung']

},
{
  kind: 'limits', lbl: 'WAS PULSE NICHT VERSPRICHT',
  items: [
  'keine Live-Integrationen in Kundensysteme',
  'kein automatisches CRM-, ERP-, BI- oder HR-Writeback',
  'kein breites Self-Service-SaaS',
  'keine autonome Umsetzung von Maßnahmen']

}];


function PulseBoundaries() {
  return (
    <section className="psec psec--paper pulse-bounds" data-screen-label="10 Product Boundaries">
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--cobalt">PRODUKTREALITÄT</div>
          <h2 className="psec__h2">Klarer Produktfokus. <span className="acc-cool">Ehrliche Erwartung.</span></h2>
          <p className="psec__lead">
            PULSE ist heute eine Novemcore-backed Plattform für AI-gestützte Interviews,
            Kontext und Analyse. Der produktive Einsatz erfolgt in klar gescopten Use Cases
            mit menschlichem Review.
          </p>
        </div>

        <div className="bounds">
          {BOUND_COLS.map((col) =>
          <div key={col.kind} className={'bcol bcol--' + col.kind}>
              <div className="bcol__lbl">{col.lbl}</div>
              <ul className="bcol__list">
                {col.items.map((t) =>
              <li key={t} className="bcol__item">
                    <span className={'bcol__mark bcol__mark--' + col.kind} aria-hidden="true">
                      {col.kind === 'does' ? Ico.check() : null}
                    </span>
                    <span className="bcol__txt">{t}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* =========================================================
   FINAL CTA — Section 11 · dark PULSE / Novemcore CTA
   Drives to the PULSE Opportunity Scan. Right-side scan preview
   reveals its steps once on scroll; newsletter is a quiet fallback.
   ========================================================= */
const SCAN_STEPS = [
{ ico: 'filter', t: 'Fokus definieren' },
{ ico: 'msg', t: 'AI Interview' },
{ ico: 'layers', t: 'Kontext nutzen' },
{ ico: 'search', t: 'Analyse prüfen' },
{ ico: 'arrow', t: 'Nächster Schritt' }];


function PulseScanPreview({ shown }) {
  return (
    <div className={'scanp' + (shown ? ' is-shown' : '')} aria-hidden="true">
      <div className="scanp__bar">
        <img src="assets/logos/pulse-mark.png" alt="" className="scanp__mark" />
        <span className="scanp__name">PULSE OPPORTUNITY SCAN</span>
        <span className="scanp__live">SCOPED</span>
      </div>
      <ol className="scanp__steps">
        {SCAN_STEPS.map((s, i) =>
        <li key={s.t} className="scanp__step" style={{ '--i': i }}>
            <span className="scanp__node">{Ico[s.ico]()}</span>
            <span className="scanp__lbl">{s.t}</span>
          </li>
        )}
      </ol>
    </div>);

}

function PulseFinalCTA() {
  const [ref, shown] = usePulseReveal(0.2);
  return (
    <section className="psec pulse-cta" data-screen-label="11 Final CTA">
      <div className="wrap wrap--wide">
        <div className="cta-box" ref={ref}>
          <div className="cta-box__main">
            <div className="eyebrow eyebrow--pulse" style={{ color: 'var(--pulse-amber)' }}>PULSE OPPORTUNITY SCAN</div>
            <h2 className="cta-box__h2">Erleben Sie PULSE an einer <span className="acc-pulse">konkreten Frage.</span></h2>
            <p className="cta-box__lead">Mit dem PULSE Opportunity Scan prüfen Sie an einem konkreten Prozess-, Anforderungs- oder Transformationskontext, wie PULSE Wissen erhebt und Hebel sichtbar macht.



            </p>
            <div className="cta-box__ctas">
              <a className="btn btn--pulse btn--pulse-lg" href="/de/pulse-opportunity-scan">Scan buchen <Ico.arrow /></a>
              <a className="btn btn--secondary-dark" href="/de/leistungen">Unsere Expertise <Ico.arrowSm /></a>
            </div>
            <div className="cta-news">
              <span className="cta-news__lbl">NEWSLETTER</span>
              <span className="cta-news__txt">
                Impulse zu PULSE, Automation, Requirements, BI und Transformation erhalten.
              </span>
              <button className="cta-news__link">Anmelden <Ico.arrowSm /></button>
            </div>
          </div>
          <PulseScanPreview shown={shown} />
        </div>
      </div>
    </section>);

}

/* =========================================================
   FOOTER
   ========================================================= */
function PulseFooter() {
  const cols = [
  { title: 'PULSE', items: ['Plattform', 'Opportunity Scan'] },
  { title: 'Services', items: ['Prozesse & Automation', 'Software & Requirements', 'Finance & Business Intelligence', 'Transformation & Value Creation'] },
  { title: 'Ressourcen', items: ['Fallstudien', 'Automations', 'Tools', 'Podcast', 'Newsletter', 'Blog & Papers'] },
  { title: 'Novemcore', items: ['Über uns', 'Karriere', 'Kontakt', 'Datenschutz', 'Impressum'] }];

  return (
    <footer className="ftr">
      <div className="ftr__inner">
        <div className="ftr__brand">
          <img src="assets/logos/novemcore-white.svg" alt="Novemcore" />
          <div className="ftr__principle mono">PULSE schafft Transparenz.<br />Novemcore hebt das Potenzial.</div>
          <div className="ftr__lang">
            <button className="is-on">Deutsch</button>
            <span>·</span>
            <button>English</button>
          </div>
        </div>
        {cols.map((c) =>
        <div key={c.title} className="ftr__col">
            <div className="ftr__colTitle">{c.title}</div>
            <ul>{c.items.map((i) => <li key={i}><a href="#">{i}</a></li>)}</ul>
          </div>
        )}
      </div>
    </footer>);

}