/* Sections.jsx — Novemcore Homepage V2 (Round-2 Optimization Review)
 * German default. Hybrid editorial Novemcore + immersive dark PULSE.
 * Round-2 rules applied:
 *   - Novemcore = master delivery brand. PULSE = warm product/evidence world.
 *   - Copper/Amber only on PULSE product moments + primary Scan-CTA.
 *   - Novemcore strengthens via Ink, Deep Navy, Cobalt, Teal in delivery,
 *     services, resources, footer.
 *   - No unvalidated numbers, IDs, confidence values, project names, report
 *     versions, or "in Tagen statt Wochen" promises.
 *   - PULSE scope capped: AI interviews, follow-ups, KB context, requirements
 *     checking, single/multi-interview analysis, HTML report + simple PDF.
 *     No integrations, no system-writeback, no Word export.
 *   - Bilingual-ready: all copy is live HTML, no baked text in raster.
 */

/* =========================================================
   LINK TARGETS — shared across sections
   ========================================================= */
const OPP_SCAN  = "PULSE Opportunity Scan/PULSE Opportunity Scan.html";
const PULSE_PAGE = "pulse.html";

/* =========================================================
   HEADER
   ========================================================= */
const NAV = [
  { label: 'PULSE', sub: [
    { label: 'Plattform',        href: PULSE_PAGE },
    { label: 'Opportunity Scan', href: OPP_SCAN },
  ]},
  { label: 'Leistungen', href: '#' },
  { label: 'Fallstudien', href: '#' },
  { label: 'Ressourcen', sub: [
    { label: 'Fallstudien',   href: '#' },
    { label: 'Automations',   href: '#' },
    { label: 'Tools',         href: '#' },
    { label: 'Podcast',       href: '#' },
    { label: 'Newsletter',    href: '#' },
    { label: 'Blog & Papers', href: '#' },
  ]},
  { label: 'Über uns', sub: [
    { label: 'Unternehmen', href: '#' },
    { label: 'Karriere',    href: '#' },
    { label: 'Kontakt',     href: '#' },
  ]},
];

/* =========================================================
   MOBILE MENU DRAWER
   ========================================================= */
function MobileMenu({ isOpen, onClose }) {
  React.useEffect(() => {
    document.body.style.overflow = isOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);
  return (
    <div className={'nc-mob-menu' + (isOpen ? ' is-open' : '')}>
      <div className="nc-mob-menu__backdrop" onClick={onClose} aria-hidden="true" />
      <nav className="nc-mob-menu__panel" role="navigation" aria-label="Mobile Navigation">
        <div className="nc-mob-menu__head">
          <img src="assets/logos/novemcore-black.svg" alt="Novemcore" className="nc-mob-menu__logo" />
          <button className="nc-mob-menu__close" onClick={onClose} aria-label="Menü schließen">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>
        <div className="nc-mob-menu__links">
          {NAV.map(n => (
            <div key={n.label} className="nc-mob-item">
              <a href={n.href || (n.sub && n.sub[0].href) || '#'}
                 className="nc-mob-item__link" onClick={onClose}>
                {n.label}
              </a>
              {n.sub && (
                <div className="nc-mob-item__sub">
                  {n.sub.map(s => (
                    <a key={s.label} href={s.href} className="nc-mob-item__sublink" onClick={onClose}>
                      {s.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="nc-mob-menu__cta">
          <a className="btn btn--pulse" href={OPP_SCAN}
             style={{width:'100%', justifyContent:'center'}} onClick={onClose}>
            Scan buchen <Ico.arrowSm />
          </a>
        </div>
      </nav>
    </div>
  );
}

function Header({ mobile }) {
  const [lang, setLang] = React.useState('DE');
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <>
      <header className="nc-header">
        <div className="nc-header__inner">
          <a href="#" className="nc-header__brand" aria-label="Novemcore">
            <img src="assets/logos/novemcore-black.svg" alt="Novemcore" />
          </a>
          {!mobile && (
            <nav className="nc-header__nav" aria-label="Primary">
              {NAV.map((n) => (
                <div key={n.label} className={'nc-nav-item' + (n.sub ? ' has-sub' : '')}>
                  <a href={n.href || (n.sub && n.sub[0].href) || '#'} className="nc-header__navlink">
                    {n.label}
                    {n.sub && <span className="nc-nav-caret" aria-hidden="true"><Ico.chev /></span>}
                  </a>
                  {n.sub && (
                    <div className="nc-dropdown" role="menu">
                      <div className="nc-dropdown__inner">
                        {n.sub.map((s) => (
                          <a key={s.label} href={s.href} className="nc-dropdown__link" role="menuitem">{s.label}</a>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </nav>
          )}
          <div className="nc-header__right">
            {!mobile && (
              <div className="nc-header__lang" role="group" aria-label="Sprache">
                {['DE','EN'].map((l) => (
                  <button key={l}
                    className={'nc-header__langBtn' + (lang === l ? ' is-on' : '')}
                    onClick={() => setLang(l)}
                    aria-pressed={lang === l}>{l}</button>
                ))}
              </div>
            )}
            <a className="btn btn--pulse" href={OPP_SCAN}>Scan buchen <Ico.arrowSm /></a>
            {mobile && (
              <button className="nc-header__menu" aria-label="Menu"
                      onClick={() => setMenuOpen(true)}><Ico.menu /></button>
            )}
          </div>
        </div>
      </header>
      {mobile && <MobileMenu isOpen={menuOpen} onClose={() => setMenuOpen(false)} />}
    </>
  );
}

/* =========================================================
   HERO  — Section 01
   ========================================================= */
function Hero({ mobile }) {
  const [heroOn, setHeroOn] = React.useState(false);
  React.useEffect(() => {
    const rm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const t = setTimeout(() => setHeroOn(true), rm ? 0 : 80);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className={'hero' + (heroOn ? ' hero--loaded' : '')} data-screen-label="01 Hero">
      <div className="wrap wrap--wide">
        <div className="hero__inner">
          <div className="hero__left">
            <div className="eyebrow eyebrow--pulse">DATEN · PROZESSE · UMSETZUNG</div>
            <h1 className="hero__h1">
              <span className="accent">PULSE</span> schafft Transparenz.<br/>
              <span className="accent--novemcore">Novemcore</span> hebt das Potenzial.
            </h1>
            <p className="hero__sub">
              <span className="hero__sub-em hero__sub-em--pulse">PULSE</span> zeigt, was in Prozessen und Anforderungen wirklich passiert.
              {' '}<span className="hero__sub-em hero__sub-em--novem">Novemcore</span> priorisiert daraus Automatisierung, Softwareentscheidungen
              und konkrete Umsetzungsschritte.
            </p>
            <div className="hero__ctas">
              <a className="btn btn--pulse btn--hero-cta" href={OPP_SCAN}>Scan buchen <Ico.arrow /></a>
              <a className="btn btn--secondary btn--hero-cta" href={PULSE_PAGE}>PULSE ansehen <Ico.arrowSm /></a>
            </div>
          </div>
          <div className="hero__right">
            <HeroInfographic />
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   HERO WORKFLOW  — compact 4-step panel
   01 Erfassen  · PULSE interview signals       (PULSE warm)
   02 Einordnen · PULSE context                 (PULSE warm)
   03 Erkennen  · PULSE analysis                (PULSE warm)
   04 Umsetzen  · Novemcore prioritization      (Navy / Cobalt / Teal)
   Auto-advances 5s, pause on hover/focus/click/touch, reduced-motion off.
   ========================================================= */
const WORKFLOW_STEPS = [
  {
    key: 'erfassen',
    num: '01',
    title: 'Erfassen',
    owner: 'pulse',
    ownerLabel: 'PULSE',
    sub: 'Interview-Signale',
    desc: 'KI-gestützte Interviews mit adaptiven Folgefragen. Verschiedene Fragetypen — Freitext, Auswahl, Ranking, Skala.',
    chips: ['Adaptive Folgefragen', 'Mehrere Fragetypen', 'Teilnahme ohne Login'],
  },
  {
    key: 'einordnen',
    num: '02',
    title: 'Einordnen',
    owner: 'pulse',
    ownerLabel: 'PULSE',
    sub: 'Knowledge-Base-Kontext',
    desc: 'Interne Dokumente und externe Referenzen liefern Bezugsrahmen. Stimmen werden gegen Kontext und Anforderungen geprüft.',
    chips: ['Interne Dokumente', 'Externe Referenzen', 'Requirements Checking'],
  },
  {
    key: 'erkennen',
    num: '03',
    title: 'Erkennen',
    owner: 'pulse',
    ownerLabel: 'PULSE',
    sub: 'Einzel- & Multi-Interview-Analyse',
    desc: 'Muster und Widersprüche entlang einer Stimme und über viele Interviews. Ergebnis als HTML-Bericht mit einfachem PDF-Export.',
    chips: ['Einzel-Analyse', 'Multi-Interview', 'HTML-Bericht · PDF'],
  },
  {
    key: 'umsetzen',
    num: '04',
    title: 'Umsetzen',
    owner: 'novemcore',
    ownerLabel: 'Novemcore',
    sub: 'Priorisierung & Umsetzung',
    desc: 'Novemcore priorisiert Befunde und führt mit Domänen-Methoden und Expert:innen-Netzwerk in die Umsetzung.',
    chips: ['Automation', 'BI · Dashboards', 'Software & Umsetzung'],
  },
];

function useWorkflowAutoplay({ stepCount, paused }) {
  const [active, setActive] = React.useState(0);
  const [reducedMotion, setReducedMotion] = React.useState(false);

  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReducedMotion(mq.matches);
    const onChange = () => setReducedMotion(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
    return () => {
      mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
    };
  }, []);

  React.useEffect(() => {
    if (reducedMotion || paused) return;
    const id = setInterval(() => setActive((a) => (a + 1) % stepCount), 5000);
    return () => clearInterval(id);
  }, [reducedMotion, paused, stepCount]);

  return { active, setActive, reducedMotion };
}

function HeroWorkflow({ mobile }) {
  const [paused, setPaused] = React.useState(false);
  const { active, setActive, reducedMotion } = useWorkflowAutoplay({
    stepCount: WORKFLOW_STEPS.length,
    paused,
  });

  const step = WORKFLOW_STEPS[active];
  const ownerClass = step.owner === 'pulse' ? 'wf--pulse' : 'wf--novem';

  return (
    <div
      className={'wf ' + ownerClass}
      role="region"
      aria-label="Vom Interview zur Umsetzung — 4 Stufen"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
      onTouchStart={() => setPaused(true)}
      onClick={() => setPaused(true)}>

      <div className="wf__head">
        <span className="wf__headLbl">Vom Interview zur Umsetzung</span>
        <span className="wf__headMeta">
          <span className={'wf__dot ' + (step.owner === 'pulse' ? 'wf__dot--pulse' : 'wf__dot--novem')} />
          {step.ownerLabel}
        </span>
      </div>

      <div className="wf__rail" role="tablist" aria-label="Schritte">
        {WORKFLOW_STEPS.map((s, i) => (
          <button
            key={s.key}
            role="tab"
            aria-selected={i === active}
            aria-controls={'wf-panel-' + s.key}
            className={
              'wf__step' +
              (i === active ? ' is-active' : '') +
              (s.owner === 'novemcore' ? ' wf__step--novem' : '')
            }
            onClick={() => setActive(i)}>
            <span className="wf__stepNum">{s.num}</span>
            <span className="wf__stepTitle">{s.title}</span>
          </button>
        ))}
        <span
          className="wf__progress"
          style={{
            left: `calc(${(active / WORKFLOW_STEPS.length) * 100}% + 4px)`,
            width: `calc(${100 / WORKFLOW_STEPS.length}% - 8px)`,
          }}
          aria-hidden="true"
        />
      </div>

      <div
        className="wf__panel"
        id={'wf-panel-' + step.key}
        role="tabpanel"
        aria-live="polite">
        <div className="wf__panelHead">
          <span className="wf__panelOwner">{step.ownerLabel} · {step.sub}</span>
          <span className="wf__panelNum">{step.num}</span>
        </div>
        <div className="wf__panelTitle">{step.title}.</div>
        <p className="wf__panelDesc">{step.desc}</p>
        <div className="wf__chips">
          {step.chips.map((c) => (
            <span key={c} className="wf__chip">
              <Ico.check />
              <span>{c}</span>
            </span>
          ))}
        </div>
      </div>

      <div className="wf__footer mono">
        <span>{paused || reducedMotion ? 'Pausiert' : 'Auto · 5s'}</span>
        <span>{step.num}/04</span>
      </div>
    </div>
  );
}

/* =========================================================
   HERO INFOGRAPHIC — 4-column flow
   INPUTS → PULSE PLATFORM → CONSULTING → OUTPUTS
   Hover interactions + staggered entrance. DS-konform.
   ========================================================= */
function InfgArrow({ color, on }) {
  const lit = color === 'copper' ? 'rgba(217,119,87,0.95)' : 'rgba(120,170,255,0.95)';
  const dim = color === 'copper' ? 'rgba(184,87,48,0.32)' : 'rgba(100,160,255,0.30)';
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="infg__arrowSvg">
      <path d="M5 12h14M13 6l6 6-6 6"
        stroke={on ? lit : dim} strokeWidth="1.8"
        strokeLinecap="round" strokeLinejoin="round"
        style={{ transition: 'stroke 300ms var(--ease-standard)' }}/>
    </svg>
  );
}

/* Animation step → caption content (Transparency to Impact flow) */
const INFG_CAPTIONS = {
  inputs:     { h: 'Relevantes Wissen bündeln',              t: 'Prozesssignale, Anforderungen, Daten und Erfahrungswissen werden strukturiert zusammengeführt.' },
  pulse:      { h: 'Die AI Plattform PULSE macht Wissen nutzbar', t: 'PULSE führt AI-gestützte Interviews und Analysen durch.' },
  consulting: { h: 'Potenziale konkret heben',              t: 'Novemcore setzt Lösungen für Automatisierungen, Steuerung und Optimierungen um.' },
  outputs:    { h: 'Greifbare Ergebnisse schaffen',         t: 'Aus Analysen entstehen bleibende Ergebnisse mit nachhaltigem Mehrwert.' },
  final:      { h: 'Die AI Plattform PULSE macht Wissen nutzbar', t: 'PULSE führt AI-gestützte Interviews und Analysen durch.' },
};
const INFG_ORDER = ['inputs', 'pulse', 'consulting', 'outputs'];

function HeroInfographic() {
  const [on, setOn] = React.useState(false);
  // active: null (entering) → 'inputs' → 'pulse' → 'consulting' → 'outputs' → 'final'
  const [active, setActive] = React.useState(null);
  const [hover, setHover] = React.useState(null);

  React.useEffect(() => {
    const enter = setTimeout(() => setOn(true), 80);
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (reduced) {
      setActive('final');
      return () => clearTimeout(enter);
    }

    // One-time intro sequence on each fresh load. Time-based (not scroll-based),
    // so it never restarts while scrolling and never loops.
    const ids = [
      setTimeout(() => setActive('inputs'),     560),
      setTimeout(() => setActive('pulse'),      1840),
      setTimeout(() => setActive('consulting'), 3120),
      setTimeout(() => setActive('outputs'),    4400),
      setTimeout(() => setActive('final'),      5680),
    ];
    return () => { clearTimeout(enter); ids.forEach(clearTimeout); };
  }, []);

  const done = active === 'final';
  // After the intro sequence, hover / keyboard-focus drives the highlight;
  // mouse-leave / blur returns to the final PULSE-focused state.
  const current = done ? (hover || 'final') : active;
  const stageIdx = current === 'final' ? 4 : (current === null ? -1 : INFG_ORDER.indexOf(current));

  // Per-column focus/dim state during the sequence + final hold.
  const colState = (group) => {
    if (current === null) return '';
    if (current === 'final') return group === 'pulse' ? ' is-focus' : ' is-dim';
    return group === current ? ' is-focus' : ' is-dim';
  };
  const lit = (group) => group === current || (current === 'final' && group === 'pulse');

  // Hover / focus only re-highlights once the intro sequence has finished.
  const enterGroup = (g) => { if (done) setHover(g); };
  const leaveGroup = () => setHover(null);
  const colProps = (g) => ({
    tabIndex: 0,
    role: 'button',
    onMouseEnter: () => enterGroup(g),
    onMouseLeave: leaveGroup,
    onFocus: () => enterGroup(g),
    onBlur: leaveGroup,
  });

  const inputs = ['Prozesse', 'Kundenfeedback', 'Unternehmensdaten', 'Expertenwissen', 'Marktstudien'];
  const pulseItems = ['AI Interviews', 'Knowledge Base', 'Analysis Engine'];
  const consulting = ['Validierung', 'Priorisierung', 'Umsetzung'];
  const outputs = [
    { label: 'Prozessdokumentation', full: true },
    { label: 'Automatisierungen',    full: true },
    { label: 'KPI-Analysen',         full: false },
    { label: 'Reports',              full: false },
    { label: 'Gap-Analysen',         full: false },
    { label: 'BI-Dashboards',        full: false },
    { label: 'Strategie',            full: true },
  ];

  const capGroup = current === null ? 'inputs' : (current === 'final' ? 'final' : current);
  const cap = INFG_CAPTIONS[capGroup];

  return (
    <div className={'infg' + (on ? ' infg--on' : '') + (done ? ' infg--final' : '')}>

      {/* Panel title */}
      <div className="infg__title">
        <img src="assets/logos/pulse-mark.png" alt="" className="infg__titleMark" />
        <span className="infg__titleText mono">KONKRETE ERGEBNISSE MIT PULSE</span>
      </div>

      <div className="infg__flow">
        {/* Column headers */}
        <div className="infg__heads">
          <div className="infg__headCell">
            <span className="infg__lbl mono">INPUTS</span>
          </div>
          <div className="infg__arrowCell" />
          <div className="infg__headCell infg__headCell--pulse">
            <img src="assets/logos/pulse-mark.png" alt="" className="infg__pulseMark" />
            <span className="infg__lbl infg__lbl--pulse mono">PULSE PLATFORM</span>
          </div>
          <div className="infg__arrowCell" />
          <div className="infg__headCell">
            <span className="infg__lbl infg__lbl--cobalt mono">CONSULTING</span>
          </div>
          <div className="infg__arrowCell" />
          <div className="infg__headCell">
            <span className="infg__lbl infg__lbl--teal mono">OUTPUTS</span>
          </div>
        </div>

        {/* Body grid */}
        <div className="infg__grid">

          {/* INPUTS */}
          <div className={'infg__col' + colState('inputs')} aria-label="Inputs" {...colProps('inputs')}>
            {inputs.map((label, i) => (
              <div key={label}
                className={'infg__card infg__card--input' + (lit('inputs') ? ' is-on' : '')}
                style={{ '--s': i }}>
                <span className="infg__dot infg__dot--cyan" />
                <span>{label}</span>
              </div>
            ))}
          </div>

          <div className="infg__arrowCol"><InfgArrow color="copper" on={stageIdx > 0} /></div>

          {/* PULSE PLATFORM */}
          <div className={'infg__col infg__col--pulse' + colState('pulse')} aria-label="PULSE Platform" {...colProps('pulse')}>
            {pulseItems.map((label, i) => (
              <div key={label}
                className={'infg__card infg__card--pulse' + (lit('pulse') ? ' is-on' : '')}
                style={{ '--s': i + 1 }}>
                <span>{label}</span>
              </div>
            ))}
          </div>

          <div className="infg__arrowCol"><InfgArrow color="cobalt" on={stageIdx > 1} /></div>

          {/* CONSULTING */}
          <div className={'infg__col infg__col--consulting' + colState('consulting')} aria-label="Consulting" {...colProps('consulting')}>
            {consulting.map((label, i) => (
              <div key={label}
                className={'infg__card infg__card--consult' + (lit('consulting') ? ' is-on' : '')}
                style={{ '--s': i + 2 }}>
                <span>{label}</span>
              </div>
            ))}
          </div>

          <div className="infg__arrowCol"><InfgArrow color="cobalt" on={stageIdx > 2} /></div>

          {/* OUTPUTS */}
          <div className={'infg__col infg__col--outputs' + colState('outputs')} aria-label="Outputs" {...colProps('outputs')}>
            <div className="infg__outputGrid">
              {outputs.map((item, i) => (
                <div key={item.label}
                  className={'infg__card infg__card--output' + (item.full ? ' infg__card--full' : '') + (lit('outputs') ? ' is-on' : '')}
                  style={{ '--s': i + 3 }}>
                  <span className="infg__dot infg__dot--teal" />
                  <span>{item.label}</span>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>

      {/* Caption bar — explains the active step */}
      <div className={'infg__caption infg__caption--' + capGroup} aria-live="polite">
        <span className="infg__capRule" aria-hidden="true" />
        <div className="infg__capBody" key={capGroup}>
          <div className="infg__capHead">{cap.h}</div>
          <div className="infg__capText">{cap.t}</div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   AUSGANGSSITUATION — Section 02 · Die Ausgangssituation
   Iceberg metaphor: 3 isometric plates (Sichtbar / Implizit /
   Verborgen). Cards on left highlight SVG layers on right.
   IntersectionObserver-triggered reveal (once, respects reduced-motion).
   ========================================================= */
function useRevealOnce(threshold = 0.25) {
  const ref = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setRevealed(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setRevealed(true);
          io.disconnect();
        }
      });
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, revealed];
}

/* --- Ausgangssituation: plate content sub-components (plate-space 0→380, 0→78) --- */
const AUSGST_NODES = [
  {x:22,y:12,r:2.8},{x:68,y:8,r:2.8},{x:118,y:14,r:2.8},{x:168,y:7,r:2.8},
  {x:218,y:12,r:2.8},{x:268,y:8,r:2.8},{x:318,y:14,r:2.8},{x:358,y:10,r:2.8},
  {x:45,y:38,r:3.2},{x:98,y:33,r:3.2},{x:152,y:42,r:3.2},
  {x:190,y:38,r:5.2},
  {x:230,y:44,r:3.2},{x:282,y:36,r:3.2},{x:335,y:42,r:3.2},
  {x:28,y:66,r:2.4},{x:88,y:70,r:2.4},{x:155,y:65,r:2.4},
  {x:228,y:69,r:2.4},{x:300,y:64,r:2.4},{x:360,y:68,r:2.4},
];
const AUSGST_EDGES = [
  [0,1],[1,2],[2,3],[3,4],[4,5],[5,6],[6,7],
  [0,8],[1,8],[2,9],[2,10],[3,10],[3,11],[4,11],[4,12],[5,12],[5,13],[6,13],[6,14],[7,14],
  [8,9],[9,10],[10,11],[11,12],[12,13],[13,14],
  [8,15],[9,16],[10,17],[11,17],[11,18],[12,18],[13,19],[14,19],[14,20],
  [15,16],[16,17],[17,18],[18,19],[19,20],
];

function PlateProcesses({ lit }) {
  const sC = lit ? 'rgba(100,160,255,0.72)' : 'rgba(100,160,255,0.28)';
  const fC = lit ? 'rgba(30,58,138,0.32)'   : 'rgba(30,58,138,0.12)';
  const tC = lit ? 'rgba(247,243,234,0.88)' : 'rgba(247,243,234,0.42)';
  const aC = lit ? 'rgba(100,160,255,0.62)' : 'rgba(100,160,255,0.18)';
  const boxes = [
    {x:18, y:26,w:58,h:26,l:'Antrag'},
    {x:106,y:21,w:58,h:26,l:'Prüfung'},
    {x:196,y:26,w:64,h:26,l:'Freigabe'},
    {x:292,y:21,w:66,h:26,l:'Abschluss'},
  ];
  return (
    <g>
      {boxes.map((b,i) => (
        <g key={i}>
          <rect x={b.x} y={b.y} width={b.w} height={b.h} rx="5" fill={fC} stroke={sC} strokeWidth="0.9"/>
          <text x={b.x+b.w/2} y={b.y+17} textAnchor="middle"
            style={{fontFamily:'var(--font-mono)',fontSize:'8.5px',letterSpacing:'0.04em'}}
            fill={tC}>{b.l}</text>
        </g>
      ))}
      {[0,1,2].map(i => {
        const a=boxes[i],b=boxes[i+1];
        const x1=a.x+a.w+1,y1=a.y+a.h/2+1.5,x2=b.x-1,y2=b.y+b.h/2+1.5;
        return (
          <g key={i}>
            <line x1={x1} y1={y1} x2={x2-5} y2={y2} stroke={aC} strokeWidth="1"/>
            <path d={`M${x2-6},${y2-3}L${x2},${y2}L${x2-6},${y2+3}`}
              fill="none" stroke={aC} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
          </g>
        );
      })}
    </g>
  );
}

function PlateNetwork({ lit }) {
  const nC = lit ? 'rgba(217,119,87,0.90)' : 'rgba(184,87,48,0.50)';
  const eC = lit ? 'rgba(217,119,87,0.30)' : 'rgba(184,87,48,0.16)';
  const hC = lit ? '#D97757' : 'rgba(184,87,48,0.65)';
  return (
    <g>
      {AUSGST_EDGES.map(([a,b],i) => (
        <line key={i}
          x1={AUSGST_NODES[a].x} y1={AUSGST_NODES[a].y}
          x2={AUSGST_NODES[b].x} y2={AUSGST_NODES[b].y}
          stroke={eC} strokeWidth="0.75"/>
      ))}
      {AUSGST_NODES.map((n,i) => (
        <circle key={i} cx={n.x} cy={n.y} r={n.r}
          fill={i===11 ? hC : nC}
          filter={i===11 && lit ? 'url(#ausgst-glow-sm)' : undefined}/>
      ))}
    </g>
  );
}

function PlateSignals({ lit }) {
  const rC = lit ? 'rgba(14,124,123,0.55)' : 'rgba(14,124,123,0.25)';
  const dC = lit ? 'rgba(0,194,209,0.78)'  : 'rgba(0,194,209,0.25)';
  const dots=[{x:38,y:18},{x:85,y:62},{x:140,y:10},{x:165,y:68},
              {x:260,y:14},{x:310,y:65},{x:350,y:22},{x:120,y:48}];
  return (
    <g>
      {[28,55,85,118].map((rx,i) => (
        <ellipse key={i} cx={190} cy={39} rx={rx} ry={rx*0.38}
          fill="none" stroke={rC} strokeWidth="0.8"
          strokeDasharray={i%2===0 ? '3 4' : undefined}
          opacity={1-i*0.14}/>
      ))}
      <circle cx={190} cy={39} r="4.5"
        fill={lit ? 'rgba(14,124,123,0.85)' : 'rgba(14,124,123,0.45)'}
        filter={lit ? 'url(#ausgst-glow-sm)' : undefined}/>
      {dots.map((d,i) => <circle key={i} cx={d.x} cy={d.y} r="1.8" fill={dC}/>)}
    </g>
  );
}

const AUSGST_PW=380, AUSGST_PH=78;
function ausgstPoly(e,f) {
  return [[0,0],[AUSGST_PW,0],[AUSGST_PW,AUSGST_PH],[0,AUSGST_PH]]
    .map(([x,y])=>`${0.9*x+e},${-0.1*x+y+f}`).join(' ');
}

function AusgangssituationGraphic({ active, onActivate }) {
  const pCfg = [
    {e:68,f:45, gi:'ausgst-pf0',sb:'rgba(100,160,255,',lbl:'GREIFBAR',  cnt:(l)=><PlateProcesses lit={l}/>},
    {e:68,f:143,gi:'ausgst-pf1',sb:'rgba(217,119,87,', lbl:'IMPLIZIT',  cnt:(l)=><PlateNetwork lit={l}/>},
    {e:68,f:241,gi:'ausgst-pf2',sb:'rgba(14,124,123,', lbl:'VERBORGEN', cnt:(l)=><PlateSignals lit={l}/>},
  ];
  // 1:1 card → plate mapping (card 0→top, 1→middle, 2→bottom)
  const plateLit = i => active !== null && active === i;
  // Content stays readable in the calm default state (nothing hovered);
  // hovering one layer keeps it lit and the others dim via opacity.
  const contentLit = i => active === null || active === i;
  const plateOp = i => {
    if (active === null) return 0.6;    // default: all layers visible but light
    if (active === i) return 1;
    return 0.32;                        // dimmed but not invisible
  };
  // Bidirectional hover/focus: hovering a layer highlights its matching left box.
  const plateProps = i => ({
    className: 'ausgst__plate',
    tabIndex: 0,
    role: 'button',
    'aria-label': pCfg[i].lbl,
    style: { cursor: 'pointer', outline: 'none', transition: 'opacity 0.22s ease' },
    onMouseEnter: () => onActivate && onActivate(i),
    onMouseLeave: () => onActivate && onActivate(null),
    onFocus: () => onActivate && onActivate(i),
    onBlur: () => onActivate && onActivate(null),
  });
  const BX=239, bright=active!==null;
  return (
    <svg viewBox="0 0 500 340" className="ausgst__svg" aria-label="Wissensebenen-Visualisierung">
      <defs>
        {pCfg.map((p,i)=>(
          <clipPath key={i} id={`ausgst-cp${i}`}><polygon points={ausgstPoly(p.e,p.f)}/></clipPath>
        ))}
        <filter id="ausgst-glow-sm" x="-60%" y="-60%" width="220%" height="220%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <linearGradient id="ausgst-beam-g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"   stopColor="rgba(184,87,48,0)"/>
          <stop offset="22%"  stopColor="rgba(184,87,48,0.55)"/>
          <stop offset="52%"  stopColor="rgba(217,119,87,0.88)"/>
          <stop offset="80%"  stopColor="rgba(184,87,48,0.55)"/>
          <stop offset="100%" stopColor="rgba(184,87,48,0)"/>
        </linearGradient>
        {['rgba(30,58,138,','rgba(184,87,48,','rgba(14,124,123,'].map((c,i)=>(
          <radialGradient key={i} id={`ausgst-pf${i}`} cx="50%" cy="50%" r="65%">
            <stop offset="0%"   stopColor={c+'0.28)'}/>
            <stop offset="100%" stopColor={c+'0.06)'}/>
          </radialGradient>
        ))}
      </defs>

      {/* Beam outer glow */}
      <line x1={BX} y1="8" x2={BX} y2="322"
        stroke="url(#ausgst-beam-g)" strokeWidth="14"
        opacity={bright ? 0.82 : 0.42}
        className="ausgst__beamGlow"
        style={{transition:'opacity 0.22s'}}/>
      {/* Beam core */}
      <line x1={BX} y1="8" x2={BX} y2="322"
        stroke="rgba(217,119,87,0.92)" strokeWidth="1.4"
        opacity={bright ? 1 : 0.52}
        style={{transition:'opacity 0.22s'}}/>

      {/* Plate intersection dots — y = p.f + 20 (center of plate at BX) */}
      {pCfg.map((p,i)=>(
        <circle key={i} cx={BX} cy={p.f+20} r={plateLit(i) ? 5.5 : 3.5}
          fill="#D97757" filter="url(#ausgst-glow-sm)"
          opacity={plateOp(i)}
          style={{transition:'all 0.22s ease'}}/>
      ))}

      {/* Plates */}
      {pCfg.map((p,i)=>{
        const lit=plateLit(i);
        const cLit=contentLit(i);
        return (
          <g key={i} opacity={plateOp(i)} {...plateProps(i)}>
            <polygon points={ausgstPoly(p.e,p.f)}
              fill={`url(#${p.gi})`} stroke={p.sb+(cLit ? '0.55)' : '0.22)')} strokeWidth="1"
              filter={lit ? 'url(#ausgst-glow-sm)' : undefined}
              style={{transition:'stroke 0.22s'}}/>
            {/* Subtle inner grid */}
            <g clipPath={`url(#ausgst-cp${i})`} opacity="0.13">
              <g transform={`matrix(0.9,-0.1,0,1,${p.e},${p.f})`}>
                {[95,190,285].map(x=>(
                  <line key={x} x1={x} y1="0" x2={x} y2={AUSGST_PH}
                    stroke="rgba(255,245,234,0.9)" strokeWidth="0.5"/>
                ))}
                {[26,52].map(y=>(
                  <line key={y} x1="0" y1={y} x2={AUSGST_PW} y2={y}
                    stroke="rgba(255,245,234,0.9)" strokeWidth="0.5"/>
                ))}
              </g>
            </g>
            {/* Plate content */}
            <g clipPath={`url(#ausgst-cp${i})`}>
              <g transform={`matrix(0.9,-0.1,0,1,${p.e},${p.f})`}>{p.cnt(cLit)}</g>
            </g>
            {/* Side label */}
            <text x={p.e+354} y={p.f+1}
              style={{fontFamily:'var(--font-mono)',fontSize:'8px',letterSpacing:'0.13em',transition:'fill 0.3s'}}
              fill={cLit ? p.sb+'0.88)' : p.sb+'0.40)'}>
              {p.lbl}
            </text>
          </g>
        );
      })}


    </svg>
  );
}

/* =========================================================
   TRUST BAND — compact stats strip between Hero and Problem
   ========================================================= */
function TrustBand() {
  const stats = [
    { value: 70,  suffix: '+', label: 'PROJEKTE',                    desc: 'In Prozessautomatisierung, Software, Finance und Transformation' },
    { value: 500, suffix: '+', label: 'EXPERT:INNEN IM NETZWERK',    desc: 'Spezialisierte Unterstützung für Analyse und Umsetzung' },
    { value: 11,  suffix: '+', label: 'PROPRIETÄRE KNOWLEDGE BASES', desc: 'Eigens aufgebaute Wissenbasen für konkreten Mehrwert' },
    { value: 8,   suffix: '',  label: 'ANWENDUNGSFAMILIEN',          desc: 'Von Prozessrealität bis Value Creation' },
  ];

  const [counts, setCounts] = React.useState([0, 0, 0, 0]);
  const bandRef  = React.useRef(null);
  const firedRef = React.useRef(false);

  React.useEffect(() => {
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const el = bandRef.current;
    if (!el) return;
    const observer = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting || firedRef.current) return;
      firedRef.current = true;
      observer.disconnect();
      if (prefersReduced) { setCounts(stats.map(s => s.value)); return; }
      stats.forEach((stat, idx) => {
        const delay = idx * 60, duration = 1100;
        let t0 = null;
        const tick = (ts) => {
          if (t0 === null) t0 = ts + delay;
          if (ts < t0) { requestAnimationFrame(tick); return; }
          const progress = Math.min((ts - t0) / duration, 1);
          const eased    = 1 - Math.pow(1 - progress, 3);
          setCounts(prev => { const n = [...prev]; n[idx] = Math.round(eased * stat.value); return n; });
          if (progress < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      });
    }, { threshold: 0.25 });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <div className="trust-band" ref={bandRef} aria-label="Novemcore in Zahlen">
      <div className="wrap wrap--wide">
        <div className="trust-stats">
          {stats.map((s, i) => (
            <div key={i} className="trust-stat">
              <div className="trust-stat__num">
                {counts[i]}<span className="trust-stat__sfx">{s.suffix}</span>
              </div>
              <div className="trust-stat__lbl">{s.label}</div>
              <div className="trust-stat__desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Problem() {
  const [ref, revealed] = useRevealOnce(0.15);
  const [active, setActive] = React.useState(null);

  const challenges = [
    {
      id: 0,
      title: 'Undokumentiertes Wissen',
      body: 'Wertvolle Erkenntnisse entstehen im Arbeitsalltag, werden aber nie dokumentiert. Sie können nicht für Entscheidungen und Optimierung genutzt werden.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="9" y1="13" x2="15" y2="13"/>
          <line x1="9" y1="17" x2="13" y2="17"/>
        </svg>
      ),
    },
    {
      id: 1,
      title: 'Implizites Wissen',
      body: 'Ein Großteil des Wissens zeigt sich in Routinen, Übergaben und Ausnahmen, die von Mitarbeitenden und Kunden täglich gelebt werden. Es bleibt unausgesprochen und implizit.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <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>
      ),
    },
    {
      id: 2,
      title: 'Verborgenes Wissen',
      body: 'Ein erheblicher Teil des Wissens verteilt sich über die gesamte Organisation. Es birgt unangetastetes Potenzial, das nur durch Muster-Analysen und Verknüpfungen nutzbar wird.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="18" cy="5" r="3"/>
          <circle cx="6" cy="12" r="3"/>
          <circle cx="18" cy="19" r="3"/>
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
        </svg>
      ),
    },
  ];

  return (
    <section className="section ausgst" data-screen-label="02 Die Ausgangssituation">
      <div className="wrap wrap--wide">
        <div className="ausgst__head">
          <div className="eyebrow eyebrow--pulse">DIE AUSGANGSSITUATION</div>
          <h2 className="section__h2">Relevantes Wissen liegt <span className="accent">unter der Oberfläche.</span></h2>
          <p className="section__lead">
            Ein Großteil des Wissens über Prozesse, Entscheidungswege und
            Optimierungspotenziale steckt in Mitarbeitern, Kunden und Interaktionen —
            nicht in Datenbanken. Es ist verteilt, implizit und schwer zu erheben.
          </p>
        </div>
        <div ref={ref} className={'ausgst__split' + (revealed ? ' is-revealed' : '')}>
          <div className="ausgst__cards">
            {challenges.map(ch => (
              <div key={ch.id}
                className={'ausgst__card' + (active === ch.id ? ' is-active' : '')}
                onMouseEnter={() => setActive(ch.id)}
                onMouseLeave={() => setActive(null)}>
                <div className="ausgst__icon">{ch.icon}</div>
                <div className="ausgst__cardBody">
                  <h3 className="ausgst__cardTitle">{ch.title}</h3>
                  <p className="ausgst__cardText">{ch.body}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="ausgst__vis">
            <AusgangssituationGraphic active={active} onActivate={setActive}/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PULSE EVIDENCE ENGINE — Section 03
   Capability-focused. Auto-advance 6s, pause on hover/focus/click/touch.
   Mobile = manual accordion. Reduced-motion → no autoplay.
   No fake IDs, no confidence values, no governance strip.
   ========================================================= */
const ENGINE_STATES = [
  {
    key: 'interview',
    num: '01',
    label: 'Interview Intelligence',
    title: 'Gezielte Folgefragen statt Standard-Abfragen.',
    bullets: [
      'Kontext berücksichtigen',
      'Antworten gegen Anforderungen prüfen',
      'Wissen als strukturierte Evidenz erfassen',
    ],
  },
  {
    key: 'knowledge',
    num: '02',
    label: 'Knowledge Context',
    title: 'Kontext, der Abweichungen sichtbar macht.',
    bullets: [
      'Interviews, Dokumente und Analysen verknüpfen',
      'Soll- und Ist-Realität vergleichen',
      'Nicht dokumentiertes Wissen nutzbar machen',
    ],
  },
  {
    key: 'analysis',
    num: '03',
    label: 'Analysis Engine',
    title: 'Muster erkennen und Prioritäten ableiten.',
    bullets: [
      'Muster und Widersprüche sichtbar machen',
      'Themen über Rollen hinweg bündeln',
      'Outputs für Entscheidungen vorbereiten',
    ],
  },
];

function useEngineAutoplay({ states, paused, intervalMs = 6000 }) {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [reducedMotion, setReducedMotion] = React.useState(false);

  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReducedMotion(mq.matches);
    const onChange = () => setReducedMotion(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
    return () => {
      mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
    };
  }, []);

  React.useEffect(() => {
    if (reducedMotion || paused) return;
    const id = setInterval(() => setActiveIdx((i) => (i + 1) % states.length), intervalMs);
    return () => clearInterval(id);
  }, [reducedMotion, paused, states.length, intervalMs]);

  return { activeIdx, setActiveIdx };
}

function EvidenceEngine({ mobile }) {
  const [paused, setPaused] = React.useState(false);
  const [engRef, engOn] = useRevealOnce(0.12);
  const { activeIdx, setActiveIdx } = useEngineAutoplay({
    states: ENGINE_STATES,
    paused: paused || mobile,
    intervalMs: 9500,
  });
  const [displayIdx, setDisplayIdx] = React.useState(0);
  const [exiting, setExiting] = React.useState(false);
  React.useEffect(() => {
    if (activeIdx === displayIdx) return;
    setExiting(true);
    const t = setTimeout(() => { setDisplayIdx(activeIdx); setExiting(false); }, 360);
    return () => clearTimeout(t);
  }, [activeIdx]);
  const setActive = (key) => {
    const idx = ENGINE_STATES.findIndex((s) => s.key === key);
    if (idx >= 0) setActiveIdx(idx);
  };
  const displayKey = ENGINE_STATES[displayIdx].key;

  return (
    <section className={'section engine' + (engOn ? ' engine--on' : '')} ref={engRef} data-screen-label="03 PULSE Evidence Engine">
      <div className="wrap wrap--wide">
        <div className="section__head section__head--engine engine__rv" style={{'--rv-d':'0ms'}}>
          <div className="eyebrow eyebrow--pulse">PULSE</div>
          <h2 className="section__h2">Unsere AI-Plattform PULSE <span className="accent">macht Wissen nutzbar.</span></h2>
          <p className="section__lead" style={{maxWidth:640}}>
            PULSE ist die AI Human Intelligence Platform für Unternehmen. Mit smarten Interviews,
            Kontext-Wissen und KI-Analysen macht PULSE erstmals verborgenes Wissen nutzbar.
          </p>
          <div className="eng-usecases">
            {['Prozesse','Automatisierung','Wikis','Kundenanalyse','Strategie'].map(u=>(
              <span key={u} className="eng-usecase-chip">{u}</span>
            ))}
          </div>
        </div>

        {mobile ? (
          <div className="accordion engine__rv" style={{'--rv-d':'120ms'}} role="tablist">
            {ENGINE_STATES.map((s) => (
              <div key={s.key} className={'accItem' + (displayKey === s.key ? ' is-open' : '')}>
                <button className="accHead" onClick={() => setActive(displayKey === s.key ? '' : s.key)} aria-expanded={displayKey === s.key}>
                  <span className="accHead__num mono">{s.num}</span>
                  <span className="accHead__title">{s.label}</span>
                  <span className="accHead__icon"><Ico.chev /></span>
                </button>
                <div className="accBody">
                  <EngineDetail s={s} />
                  <div className="engineStage__visual">
                    <EngineVisual which={s.key} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div
            className="engineHost engine__rv"
            style={{'--rv-d':'120ms'}}
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
            onFocus={() => setPaused(true)}
            onBlur={() => setPaused(false)}
            onTouchStart={() => setPaused(true)}>
            <div className="tabs" role="tablist" aria-label="PULSE Evidence Engine">
              {ENGINE_STATES.map((s, i) => (
                <button key={s.key}
                  role="tab" aria-selected={activeIdx === i}
                  className={'tab' + (activeIdx === i ? ' is-active' : '')}
                  onClick={() => setActive(s.key)}>
                  <span className="tab__num">{s.num}</span>
                  {s.label}
                </button>
              ))}
            </div>
            <div className="engineStage">
              <div>
                <EngineDetail s={ENGINE_STATES[displayIdx]} />
              </div>
              <div className={'engineStage__visual' + (exiting ? ' eng-vis-exit' : '')}>
                <EngineVisual which={displayKey} key={displayIdx} />
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function EngineDetail({ s }) {
  if (!s) return null;
  return (
    <div>
      <div className="eyebrow eyebrow--pulse" style={{marginBottom: 14}}>{s.num} · {s.label}</div>
      <h3 className="engineStage__title">{s.title}</h3>
      <div className="engineStage__bullets">
        {s.bullets.map((b, i) => (
          <div key={i} className="engineStage__bullet">
            <Ico.check />
            <span>{b}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function EngineVisual({ which }) {
  if (which === 'interview') return <EngineInterview />;
  if (which === 'knowledge') return <EngineKnowledge />;
  return <EngineAnalysis />;
}

/* Interview Intelligence — 5-Phase Animation */
function EngineInterview() {
  const [phase, setPhase] = React.useState(0);
  const [activeReason, setActiveReason] = React.useState(-1);
  const [allActive, setAllActive] = React.useState(false);
  React.useEffect(() => {
    const r = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (r) { setPhase(5); setActiveReason(3); setAllActive(true); return; }
    const ids = [
      setTimeout(() => setPhase(1), 80),
      setTimeout(() => setPhase(2), 850),
      setTimeout(() => { setPhase(3); setActiveReason(0); }, 1600),
      setTimeout(() => setActiveReason(1), 2250),
      setTimeout(() => setActiveReason(2), 2900),
      setTimeout(() => { setActiveReason(3); setPhase(4); }, 3550),
      setTimeout(() => { setPhase(5); setAllActive(true); }, 4800),
    ];
    return () => ids.forEach(clearTimeout);
  }, []);
  const reasons = [
    {cls:'copper', ico:<Ico.layers/>, lbl:'Vertikales Reasoning'},
    {cls:'cobalt', ico:<Ico.flow/>,   lbl:'Horizontales Reasoning'},
    {cls:'cobalt', ico:<Ico.users/>,  lbl:'Diagonales Reasoning'},
    {cls:'teal',   ico:<Ico.shield/>, lbl:'Kontext & Anforderungen'},
  ];
  return (
    <div className="eng-v2">
      <div className="eng-bar">
        <span className="eng-bar__lbl">INTERVIEW · LIVE</span>
      </div>
      <div className={'eng-msg eng-phase' + (phase >= 1 ? ' is-vis' : '')}>
        <div className="eng-msg__ava"><img src="assets/logos/pulse-mark.png" alt=""/></div>
        <div className="eng-msg__bub eng-msg__bub--ai">
          <div className="eng-msg__from">PULSE</div>
          Wie läuft der Schritt heute konkret ab — vom Eingang bis zur Freigabe?
        </div>
      </div>
      <div className={'eng-msg eng-msg--user eng-phase' + (phase >= 2 ? ' is-vis' : '')}>
        <div className="eng-msg__bub eng-msg__bub--usr">
          Der Standardweg ist klar. Bei Sonderfällen entscheidet die zuständige Person, ohne dass dies dokumentiert wird.
        </div>
      </div>
      <div className={'eng-reasoning eng-phase' + (phase >= 3 ? ' is-vis' : '')}>
        {reasons.map((r, i) => (
          <div key={i} className={
            'eng-reason eng-reason--' + r.cls +
            (allActive
              ? ' is-settled'
              : (activeReason > i ? ' is-seen' : '') + (activeReason === i ? ' is-active' : ''))
          }>
            <span className="eng-reason__ico">{r.ico}</span>
            <span className="eng-reason__lbl">{r.lbl}</span>
          </div>
        ))}
      </div>
      <div className={'eng-chips eng-phase' + (phase >= 4 ? ' is-vis' : '')}>
        <span className="eng-chip">Folgefrage</span>
        <span className="eng-chip">Kontext</span>
        <span className="eng-chip eng-chip--check"><Ico.check />Anforderung geprüft</span>
      </div>
      <div className={'eng-fup eng-phase' + (phase >= 5 ? ' is-vis' : '')}>
        <div className="eng-fup__head">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="12" height="12">
            <circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <span>ADAPTIVE FOLGEFRAGE</span>
        </div>
        <div className="eng-fup__text">Wie oft greift dieser Sonderfall — eher selten, regelmäßig oder bereits als Standard?</div>
      </div>
    </div>
  );
}

/* Knowledge Context — Animated Phases */
function EngineKnowledge() {
  const [activeSrc, setActiveSrc] = React.useState(-1);
  const [kbActive, setKbActive] = React.useState(false);
  const [activeKB, setActiveKB] = React.useState(-1);
  React.useEffect(() => {
    const r = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (r) { setActiveSrc(2); setKbActive(true); setActiveKB(2); return; }
    const ids = [
      setTimeout(() => setActiveSrc(0), 100),
      setTimeout(() => setActiveSrc(1), 800),
      setTimeout(() => setActiveSrc(2), 1500),
      setTimeout(() => { setKbActive(true); setActiveKB(0); }, 2200),
      setTimeout(() => setActiveKB(1), 2900),
      setTimeout(() => setActiveKB(2), 3600),
    ];
    return () => ids.forEach(clearTimeout);
  }, []);
  const sources = [
    {ico:<Ico.users/>,lbl:'Geführte Interviews'},
    {ico:<Ico.chart/>,lbl:'Bisherige Analysen'},
    {ico:<Ico.doc/>,  lbl:'Dokumente & Referenzen'},
  ];
  const kbItems = [
    {ico:<Ico.brain/>, lbl:'Umfassendes Kontextwissen'},
    {ico:<Ico.shield/>,lbl:'Konkrete Abgleiche & Validierung'},
    {ico:<Ico.flow/>,  lbl:'Nicht dokumentiertes Wissen nutzbar gemacht'},
  ];
  return (
    <div className="eng-v2">
      <div className="eng-bar"><span className="eng-bar__lbl">KNOWLEDGE CONTEXT · AKTIV</span></div>
      <div className="eng-kb2">
        <div className="eng-kb2__srcs">
          <div className="eng-kb2__srcsLbl">QUELLEN</div>
          {sources.map((s, i) => (
            <div key={i} className={'eng-kb2__src' + (activeSrc >= i ? ' is-active' : '')}>
              <span className="eng-kb2__srcIco">{s.ico}</span>
              <span className="eng-kb2__srcLbl">{s.lbl}</span>
            </div>
          ))}
        </div>
        <svg className="eng-kb2__conn" viewBox="0 0 48 100" preserveAspectRatio="none">
          {[33,54,74].map((y, i) => (
            <path key={i} d={`M0,${y} Q24,${y} 48,50`} className="eng-flow"
              stroke={activeSrc >= i ? 'rgba(100,160,255,0.65)' : 'rgba(100,160,255,0.20)'}
              strokeWidth="1.2" strokeDasharray="4 4" fill="none"
              style={{animationDelay: i*0.3+'s', transition:'stroke 500ms ease'}}/>
          ))}
          <circle cx="46" cy="50" r="3.5" fill="#D97757"
            opacity={kbActive ? 0.85 : 0.30} style={{transition:'opacity 500ms ease'}}/>
        </svg>
        <div className={'eng-kb2__panel' + (kbActive ? ' is-active' : '')}>
          <div className="eng-kb2__pHead">
            <img src="assets/logos/pulse-mark.png" alt="" className="eng-kb2__pMark"/>
            <div>
              <div className="eng-kb2__pSub">PULSE</div>
              <div className="eng-kb2__pTitle">Knowledge Base</div>
            </div>
          </div>
          <div className="eng-kb2__dbIco">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" width="32" height="32">
              <ellipse cx="12" cy="5" rx="9" ry="3"/>
              <path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/>
              <path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/>
            </svg>
          </div>
          <div className="eng-kb2__items">
            {kbItems.map((item, i) => (
              <div key={i} className={'eng-kb2__item' + (activeKB >= i ? ' is-active' : '')}>
                <span className="eng-kb2__itemIco">{item.ico}</span>
                <span>{item.lbl}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* Analysis Engine — Animated Phases */
function EngineAnalysis() {
  const [activeInp, setActiveInp] = React.useState(-1);
  const [engineGlow, setEngineGlow] = React.useState(false);
  const [activeCap, setActiveCap] = React.useState(-1);
  const [activeOut, setActiveOut] = React.useState(-1);
  React.useEffect(() => {
    const r = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (r) { setActiveInp(3); setEngineGlow(true); setActiveCap(2); setActiveOut(5); return; }
    const ids = [
      setTimeout(() => setActiveInp(0), 100),
      setTimeout(() => setActiveInp(1), 550),
      setTimeout(() => setActiveInp(2), 1000),
      setTimeout(() => { setActiveInp(3); setEngineGlow(true); }, 1450),
      setTimeout(() => setActiveCap(0), 2100),
      setTimeout(() => setActiveCap(1), 2700),
      setTimeout(() => setActiveCap(2), 3300),
      setTimeout(() => { setActiveOut(0); setEngineGlow(false); }, 3900),
      setTimeout(() => setActiveOut(1), 4250),
      setTimeout(() => setActiveOut(2), 4600),
      setTimeout(() => setActiveOut(3), 4950),
      setTimeout(() => setActiveOut(4), 5300),
      setTimeout(() => setActiveOut(5), 5650),
    ];
    return () => ids.forEach(clearTimeout);
  }, []);
  const inputs = [
    {ico:<Ico.msg/>,   lbl:'Interviews'},
    {ico:<Ico.chart/>, lbl:'Frühere Analysen'},
    {ico:<Ico.doc/>,   lbl:'Dokumente & SOPs'},
    {ico:<Ico.layers/>,lbl:'Metadaten & Referenzen'},
  ];
  const caps = [
    {ico:<Ico.flow/>, lbl:'Kombiniert Analyseansätze'},
    {ico:<Ico.book/>, lbl:'Nutzt Knowledge Spaces'},
    {ico:<Ico.spark/>,lbl:'Erzeugt umsetzbare Artefakte'},
  ];
  const outputs = [
    {ico:<Ico.map/>,   lbl:'Prozessmaps & Abweichungen'},
    {ico:<Ico.matrix/>,lbl:'Anforderungen & Fit-Gap-Matrizen'},
    {ico:<Ico.users/>, lbl:'Rollen & Verantwortlichkeiten'},
    {ico:<Ico.chart/>, lbl:'KPI-Analysen & Dashboards'},
    {ico:<Ico.zap/>,   lbl:'Maßnahmen & Prioritäten'},
    {ico:<Ico.doc/>,   lbl:'Management-Reports'},
  ];
  return (
    <div className="eng-v2">
      <div className="eng-bar"><span className="eng-bar__lbl">ANALYSIS ENGINE · AKTIV</span></div>
      <div className="eng-an3">
        <div className="eng-an3__col">
          <div className="eng-an3__colLbl">KNOWLEDGE SPACES</div>
          {inputs.map((inp, i) => (
            <div key={i} className={'eng-an3__card eng-an3__card--in' + (activeInp >= i ? ' is-active' : '')}>
              <span className="eng-an3__cIco eng-an3__cIco--blue">{inp.ico}</span>
              <span>{inp.lbl}</span>
            </div>
          ))}
        </div>
        <svg className="eng-an3__conn" viewBox="0 0 30 100" preserveAspectRatio="none">
          {[[27,'0s'],[45,'0.22s'],[63,'0.44s'],[80,'0.66s']].map(([y,d], i) => (
            <path key={i} d={`M0,${y} Q15,${y} 30,50`} className="eng-flow"
              stroke={activeInp >= i ? 'rgba(100,160,255,0.62)' : 'rgba(100,160,255,0.22)'}
              strokeWidth="1.1" strokeDasharray="3 4" fill="none"
              style={{animationDelay:d, transition:'stroke 350ms ease'}}/>
          ))}
          <circle cx="28" cy="50" r="2.8" fill="#D97757"
            opacity={engineGlow ? 0.88 : 0.40} style={{transition:'opacity 350ms ease'}}/>
        </svg>
        <div className={'eng-an3__engine' + (engineGlow ? ' is-glowing' : '')}>
          <div className="eng-an3__eHead">
            <img src="assets/logos/pulse-mark.png" alt="" className="eng-an3__eMark"/>
            <span className="eng-an3__eTitle">PULSE Analysefunktion</span>
          </div>
          {caps.map((c, i) => (
            <div key={i} className={'eng-an3__cap' + (activeCap >= i ? ' is-active' : '')}>
              <span className="eng-an3__capIco">{c.ico}</span>
              <span>{c.lbl}</span>
            </div>
          ))}
        </div>
        <svg className="eng-an3__conn" viewBox="0 0 30 100" preserveAspectRatio="none">
          {[[14,'0s'],[30,'0.18s'],[46,'0.36s'],[62,'0.54s'],[78,'0.72s'],[93,'0.90s']].map(([y,d], i) => (
            <path key={i} d={`M0,50 Q15,50 30,${y}`} className="eng-flow"
              stroke={activeOut >= i ? 'rgba(217,119,87,0.68)' : 'rgba(217,119,87,0.24)'}
              strokeWidth="1.1" strokeDasharray="3 4" fill="none"
              style={{animationDelay:d, transition:'stroke 350ms ease'}}/>
          ))}
          <circle cx="2" cy="50" r="2.8" fill="#D97757"
            opacity={activeCap >= 2 ? 0.88 : 0.38} style={{transition:'opacity 350ms ease'}}/>
        </svg>
        <div className="eng-an3__col">
          <div className="eng-an3__colLbl">OUTPUT-ARTEFAKTE</div>
          {outputs.map((out, i) => (
            <div key={i} className={'eng-an3__card eng-an3__card--out' + (activeOut >= i ? ' is-active' : '')}>
              <span className="eng-an3__cIco eng-an3__cIco--copper">{out.ico}</span>
              <span>{out.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   VON EVIDENZ ZU UMSETZUNG — Section 04
   Three-level bridge: PULSE erkennt → Novemcore priorisiert → Novemcore realisiert.
   Plus 4 short example paths.
   ========================================================= */
function TransparencyToImplementation() {
  return (
    <section className="section t2i" data-screen-label="04 Von Evidenz zu Umsetzung">
      <div className="wrap wrap--wide">
        <div className="t2i__head">
          <div>
            <div className="eyebrow eyebrow--cobalt">NOVEMCORE UMSETZUNG</div>
            <h2 className="section__h2">Transparenz wird wertvoll, wenn daraus <span className="accent--navy">Entscheidung und Umsetzung</span> werden.</h2>
          </div>
          <p className="t2i__principle">
            <b>PULSE</b> strukturiert die Evidenz. <b className="t2i__principleNovem">Novemcore</b> bewertet
            Chancen, priorisiert den nächsten Schritt und begleitet die Umsetzung.
          </p>
        </div>

        <div className="bridge" aria-label="Drei-Stufen-Brücke">
          <BridgeLevel
            owner="pulse"
            stepNum="01"
            lbl="PULSE erkennt"
            chips={['Prozessrealität', 'Engpässe', 'Anforderungen', 'Muster']}
          />
          <BridgeConnector />
          <BridgeLevel
            owner="cobalt"
            stepNum="02"
            lbl="Novemcore priorisiert"
            chips={['Relevanz', 'Machbarkeit', 'Umsetzungspfad']}
          />
          <BridgeConnector />
          <BridgeLevel
            owner="teal"
            stepNum="03"
            lbl="Novemcore realisiert"
            chips={['Automation', 'BI / Dashboards', 'Softwareauswahl', 'PMO']}
          />
        </div>

        <div className="bridge__paths">
          <div className="bridge__pathsHead">
            <div className="eyebrow eyebrow--cobalt">BEISPIELPFADE</div>
            <span className="bridge__pathsNote mono">ILLUSTRATIV · KEINE KUNDENERGEBNISSE</span>
          </div>
          <div className="bridge__pathList">
            <BridgePath from="manuelle Freigabe" via="Automatisierungsprüfung" to="Power Automate / n8n" />
            <BridgePath from="unklare KPI-Bedarfe" via="Priorisierung" to="BI-Dashboard-Konzept" />
            <BridgePath from="uneinheitliche Anforderungen" via="Fit-Gap" to="Softwareauswahl" />
            <BridgePath from="Umsetzungsbarriere" via="Maßnahmenplan" to="PMO-Unterstützung" status />
          </div>
        </div>
      </div>
    </section>
  );
}

function BridgeLevel({ owner, stepNum, lbl, chips }) {
  return (
    <div className={'brLvl brLvl--' + owner}>
      <div className="brLvl__stepNum mono">{stepNum}</div>
      <div className="brLvl__head">
        <span className="brLvl__lbl">{lbl}</span>
      </div>
      <div className="brLvl__chips">
        {chips.map((c) => (
          <span key={c} className="brLvl__chip">{c}</span>
        ))}
      </div>
    </div>
  );
}

function BridgeConnector() {
  return (
    <div className="brCon" aria-hidden="true">
      <svg viewBox="0 0 24 28" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2 V 22"/>
        <path d="M6 18 L 12 24 L 18 18"/>
      </svg>
    </div>
  );
}

function BridgePath({ from, via, to, status }) {
  return (
    <div className="brPath">
      <span className="brPath__cell brPath__cell--from">{from}</span>
      <span className="brPath__arrow" aria-hidden="true">
        <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M2 6h18M16 2l4 4-4 4"/></svg>
      </span>
      <span className="brPath__cell brPath__cell--via">{via}</span>
      <span className="brPath__arrow" aria-hidden="true">
        <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M2 6h18M16 2l4 4-4 4"/></svg>
      </span>
      <span className="brPath__cell brPath__cell--to">
        {to}
        {status && <span className="brPath__status" aria-label="Begleitet bis Umsetzung"><span className="brPath__statusDot" />Begleitet</span>}
      </span>
    </div>
  );
}

/* =========================================================
   NOVEMCORE CORE SERVICES — Section 05
   Light editorial 2×2 service card grid.
   ========================================================= */

function SvcIllus1({ drawn }) {
  const d = drawn ? ' is-drawn' : '';
  return (
    <svg className={'svc-illus' + d} width="88" height="52" viewBox="0 0 88 52" fill="none" aria-hidden="true">
      <line x1="10" y1="26" x2="78" y2="26" stroke="#0B1B33" strokeWidth="0.8" opacity="0.10" />
      <g className="svc-illus__w svc-illus__w--1">
        <circle cx="16" cy="26" r="3.5" fill="#1E3A8A" opacity="0.72" />
      </g>
      <g className="svc-illus__w svc-illus__w--2">
        <circle cx="37" cy="26" r="4.5" fill="none" stroke="#B85730" strokeWidth="1.2" />
        <line x1="34.5" y1="23.5" x2="39.5" y2="28.5" stroke="#B85730" strokeWidth="1.1" />
        <line x1="20" y1="26" x2="32" y2="26" stroke="#1E3A8A" strokeWidth="0.8" opacity="0.35" />
      </g>
      <g className="svc-illus__w svc-illus__w--3">
        <line x1="42" y1="26" x2="55" y2="26" stroke="#0B1B33" strokeWidth="0.8" opacity="0.22" />
        <circle cx="60" cy="26" r="3.5" fill="#0E7C7B" opacity="0.68" />
      </g>
      <g className="svc-illus__w svc-illus__w--4">
        <line x1="64" y1="26" x2="70" y2="26" stroke="#0E7C7B" strokeWidth="0.8" opacity="0.38" />
        <circle cx="75" cy="26" r="4" fill="#0E7C7B" opacity="0.88" />
        <path d="M72.5 26 L75 23.5 L77.5 26" stroke="white" strokeWidth="1.1" fill="none" strokeLinecap="round" />
        <circle cx="37" cy="26" r="2" fill="#B85730" opacity="0.55" />
      </g>
    </svg>
  );
}

function SvcIllus2({ drawn }) {
  const d = drawn ? ' is-drawn' : '';
  return (
    <svg className={'svc-illus' + d} width="88" height="52" viewBox="0 0 88 52" fill="none" aria-hidden="true">
      <rect x="8" y="6" width="72" height="40" rx="3" stroke="#1E3A8A" strokeWidth="0.8" opacity="0.14" />
      <g className="svc-illus__w svc-illus__w--1">
        <line x1="16" y1="18" x2="60" y2="18" stroke="#1E3A8A" strokeWidth="1" opacity="0.55" />
      </g>
      <g className="svc-illus__w svc-illus__w--2">
        <line x1="16" y1="28" x2="62" y2="28" stroke="#1E3A8A" strokeWidth="1" opacity="0.50" />
        <circle cx="68" cy="18" r="3.5" fill="#0E7C7B" opacity="0.82" />
      </g>
      <g className="svc-illus__w svc-illus__w--3">
        <line x1="16" y1="38" x2="48" y2="38" stroke="#1E3A8A" strokeWidth="1" opacity="0.42" />
        <circle cx="68" cy="28" r="3.5" fill="#0E7C7B" opacity="0.82" />
      </g>
      <g className="svc-illus__w svc-illus__w--4">
        <circle cx="52" cy="38" r="3.5" fill="none" stroke="#B89048" strokeWidth="1.2" opacity="0.78" />
      </g>
    </svg>
  );
}

function SvcIllus3({ drawn }) {
  const d = drawn ? ' is-drawn' : '';
  return (
    <svg className={'svc-illus' + d} width="88" height="52" viewBox="0 0 88 52" fill="none" aria-hidden="true">
      <g className="svc-illus__w svc-illus__w--1">
        <rect x="6" y="8" width="34" height="22" rx="3" fill="rgba(30,58,138,0.07)" stroke="#1E3A8A" strokeWidth="0.8" />
        <rect x="48" y="8" width="34" height="22" rx="3" fill="rgba(0,194,209,0.06)" stroke="#00C2D1" strokeWidth="0.8" opacity="0.7" />
      </g>
      <g className="svc-illus__w svc-illus__w--2">
        <line x1="10" y1="22" x2="36" y2="14" stroke="#1E3A8A" strokeWidth="1" opacity="0.48" strokeLinecap="round" />
        <line x1="52" y1="20" x2="78" y2="15" stroke="#00C2D1" strokeWidth="1" opacity="0.58" strokeLinecap="round" />
      </g>
      <g className="svc-illus__w svc-illus__w--3">
        <polyline points="6,44 18,41 30,43 44,38 58,36 72,38 82,34" stroke="#1E3A8A" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.60" />
      </g>
      <g className="svc-illus__w svc-illus__w--4">
        <circle cx="82" cy="34" r="2.8" fill="#00C2D1" opacity="0.88" />
      </g>
    </svg>
  );
}

function SvcIllus4({ drawn }) {
  const d = drawn ? ' is-drawn' : '';
  return (
    <svg className={'svc-illus' + d} width="88" height="52" viewBox="0 0 88 52" fill="none" aria-hidden="true">
      <line x1="14" y1="24" x2="74" y2="24" stroke="#0B1B33" strokeWidth="0.8" strokeDasharray="3 2" opacity="0.16" />
      <g className="svc-illus__w svc-illus__w--1">
        <circle cx="14" cy="24" r="4.5" fill="rgba(11,27,51,0.08)" stroke="#0B1B33" strokeWidth="1.1" opacity="0.55" />
      </g>
      <g className="svc-illus__w svc-illus__w--2">
        <line x1="19" y1="24" x2="39" y2="24" stroke="#1E3A8A" strokeWidth="0.8" opacity="0.28" />
        <circle cx="44" cy="24" r="4.5" fill="rgba(30,58,138,0.10)" stroke="#1E3A8A" strokeWidth="1.1" opacity="0.65" />
      </g>
      <g className="svc-illus__w svc-illus__w--3">
        <line x1="49" y1="24" x2="68" y2="24" stroke="#0E7C7B" strokeWidth="0.8" opacity="0.33" />
        <circle cx="74" cy="24" r="5" fill="rgba(14,124,123,0.12)" stroke="#0E7C7B" strokeWidth="1.4" />
        <path d="M71.5 24 L74 21.5 L76.5 24" stroke="#0E7C7B" strokeWidth="1.2" fill="none" strokeLinecap="round" />
      </g>
    </svg>
  );
}

function ProcessAutomation() {
  const ref = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);
  const [drawn, setDrawn] = React.useState([false, false, false, false]);

  React.useEffect(() => {
    const rm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (rm) { setRevealed(true); setDrawn([true, true, true, true]); return; }
    const obs = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      setRevealed(true);
      obs.disconnect();
      [0, 1, 2, 3].forEach(i => {
        setTimeout(() => setDrawn(prev => {
          const n = [...prev]; n[i] = true; return n;
        }), 820 + i * 80);
      });
    }, { threshold: 0.12 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const cards = [
    {
      title: ['Prozesse &', 'Automation'],
      desc: 'Prozessrealität, Engpässe und Automatisierungspotenziale sichtbar machen, priorisieren und in Umsetzung überführen.',
      pills: ['Prozessrealität', 'Automatisierung', 'Dokumentation'],
      cta: 'Process & Automation ansehen',
      href: 'leistungen/de/Leistungen.html#prozesse-automation',
      illus: <SvcIllus1 drawn={drawn[0]} />,
    },
    {
      title: ['Software &', 'Requirements'],
      desc: 'Anforderungen, Prozesskontext und System-Fit strukturiert klären — als Grundlage für Auswahl und Implementierung.',
      pills: ['Anforderungen', 'Softwareauswahl', 'Einführung'],
      cta: 'Leistung ansehen',
      href: 'leistungen/de/Leistungen.html#software-requirements',
      illus: <SvcIllus2 drawn={drawn[1]} />,
    },
    {
      title: ['Finance &', 'Business Intelligence'],
      desc: 'KPI-Logik, Reporting und Dashboards in entscheidungsfähige Performance-Steuerung überführen.',
      pills: ['KPI-Logik', 'Dashboards', 'Steuerung'],
      cta: 'Leistung ansehen',
      href: 'leistungen/de/Leistungen.html#finance-bi',
      illus: <SvcIllus3 drawn={drawn[2]} />,
    },
    {
      title: ['Transformation &', 'Value Creation'],
      desc: 'Risiken, Barrieren und Werthebel strukturieren — für Prioritäten, PMO und Umsetzung.',
      pills: ['Potenziale', 'Roadmap', 'Wirkungsmessung'],
      cta: 'Leistung ansehen',
      href: 'leistungen/de/Leistungen.html#transformation-value-creation',
      illus: <SvcIllus4 drawn={drawn[3]} />,
    },
  ];

  return (
    <section className={'section svc' + (revealed ? ' is-revealed' : '')}
             data-screen-label="05 Novemcore Core Services"
             ref={ref}>
      <div className="wrap wrap--wide">
        <div className="svc__intro">
          <div className="svc__introLeft">
            <div className="eyebrow eyebrow--cobalt svc__rv" style={{'--rv-d': '0ms'}}>
              NOVEMCORE EXPERTISE
            </div>
            <h2 className="section__h2 svc__h2 svc__rv" style={{'--rv-d': '80ms'}}>
              Novemcore bringt Wissen zur Wirkung.
            </h2>
            <p className="section__lead svc__rv" style={{'--rv-d': '200ms', maxWidth: 600}}>
              <span className="svc__copper">PULSE</span> macht Wissen und Daten nutzbar.{' '}
              <span className="svc__cobalt">Novemcore</span> hebt das Potenzial und setzt konkret um.
            </p>
          </div>
        </div>

        <div className="svc__grid">
          {cards.map((c, i) => (
            <div key={i}
                 className="svc-card svc__rv"
                 style={{'--rv-d': (320 + i * 80) + 'ms'}}>
              <div className="svc-card__top">
                <div className="svc-card__illus">{c.illus}</div>
              </div>
              <h3 className="svc-card__title">
                {c.title[0]}<br />{c.title[1]}
              </h3>
              <p className="svc-card__desc">{c.desc}</p>
              <div className="svc-card__pills">
                {c.pills.map(p => <span key={p} className="svc-pill">{p}</span>)}
              </div>
              {c.pulse && (
                <div className="svc-pulse-badge">
                  <span className="svc-pulse-badge__dot"></span>
                  {c.pulse}
                </div>
              )}
              <a href={c.href} className="svc-card__cta">
                {c.cta} <span className="svc-arrow">→</span>
              </a>
            </div>
          ))}
        </div>

        <div className="svc__footer svc__rv" style={{'--rv-d': '640ms'}}>
          <a href="leistungen/de/Leistungen.html" className="svc__footerCta">
            Alle Leistungen ansehen <span className="svc-arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PROCESS & AUTOMATION INTELLIGENCE — Section 06
   PULSE Opportunity Scan: 4-step animated discovery flow.
   Left: editorial Novemcore offer → Scan buchen CTA.
   Right: dark PULSE panel with animated scan sequence.
   ========================================================= */

/* Animation hook — one-shot 16-phase scan, ~8.7s total, holds final state.
   Pause/resume via hover or focus. Reduced-motion → instant final state. */
function usePAAnimation({ active, paused }) {
  const [phase, setPhase] = React.useState(0);
  const [rm, setRm] = React.useState(false);
  /* Persistent mutable state — not part of render cycle */
  const sRef = React.useRef({ done: false, elapsed: 0, startAt: null, ids: [], cur: 0 });

  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setRm(mq.matches);
    const h = () => setRm(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
    return () => mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h);
  }, []);

  /* Absolute timings from animation start (ms):
     1=step1 on  2=conn1  3=step2+q  4=ans  5=chips  6=fup
     7=step3+conn2  8=transparenz-label  9=engpass  10=manual  11=autopot
     12=step4+conn3  13=out1  14=out2  15=out3  16=footer → HOLD FOREVER */
  const TIMES = [400,900,1300,2000,2600,3300,4200,4700,5100,5600,6100,6800,7200,7700,8200,8700];

  React.useEffect(() => {
    const s = sRef.current;
    if (rm)  { setPhase(16); return; }
    if (!active || s.done) return;

    s.ids.forEach(clearTimeout); s.ids = [];

    if (paused) {
      /* Snapshot elapsed time so we can resume from the same point */
      if (s.startAt !== null) { s.elapsed += Date.now() - s.startAt; s.startAt = null; }
      return;
    }

    /* Start or resume */
    s.startAt = Date.now();
    const elapsed = s.elapsed;
    let catchUp = s.cur;

    TIMES.forEach((t, i) => {
      const p = i + 1;
      const delay = t - elapsed;
      if (delay <= 0) { catchUp = Math.max(catchUp, p); return; }
      if (p <= s.cur)  return;
      s.ids.push(setTimeout(() => {
        s.cur = p; setPhase(p); if (p === 16) s.done = true;
      }, delay));
    });

    /* Instantly catch up phases we blew past while paused */
    if (catchUp > s.cur) {
      s.cur = catchUp; setPhase(catchUp); if (catchUp >= 16) s.done = true;
    }
  }, [active, paused, rm]);

  /* Cancel all pending timeouts on unmount */
  React.useEffect(() => () => { sRef.current.ids.forEach(clearTimeout); }, []);

  return phase;
}

/* 4-step PULSE Opportunity Scan flow — inside the dark panel */
function PAScanFlow({ phase: p }) {
  const v  = (n) => p >= n ? ' is-vis' : '';
  const on = (n) => p >= n ? ' is-on'  : '';

  return (
    <div className="pasf">

      {/* ── 01 Ziel und Fokus definieren ── */}
      <div className={'pasf-scope' + on(1)}>
        <div className="pasf__sh">
          <span className="pasf__num">01</span>
          <span className="pasf__title">Ziel und Fokus definieren</span>
        </div>
        <div className="pasf-scope__body">
          <span className="pasf-scope__q">
            Wo verliert ein Prozess heute Zeit oder manuelle Arbeit?
          </span>
          <span className="pasf-scope__chip">Konkreter Prozessbereich</span>
        </div>
      </div>

      <div className={'pasf-conn' + on(2)} aria-hidden="true" />

      {/* ── 02 AI PULSE Interview ── */}
      <div className={'pasf-int' + on(3)}>
        <div className="pasf__sh">
          <img src="assets/logos/pulse-mark.png" alt="" className="pasf-int__mark" aria-hidden="true" />
          <span className="pasf__num">02</span>
          <span className="pasf__title">AI PULSE Interview</span>
        </div>
        <div className="pasf-int__body">
          <div className={'pasf-int__q' + v(3)}>
            Wo entstehen im Ablauf wiederkehrende manuelle Schritte?
          </div>
          <div className={'pasf-int__a' + v(4)}>
            Freigaben und Übergaben benötigen häufig Rückfragen.
          </div>
          <div className={'pasf-int__chips' + v(5)}>
            <span className="pasf-chip">Prozesskontext</span>
            <span className="pasf-chip">Teilnehmerperspektive</span>
          </div>
          <div className={'pasf-int__fup' + v(6)}>
            <span className="pasf-int__fup-lbl">AI-Folgefrage</span>
            <span className="pasf-int__fup-q">Welche Aufgabe kostet dabei besonders Zeit?</span>
          </div>
        </div>
      </div>

      <div className={'pasf-conn' + on(7)} aria-hidden="true" />

      {/* ── 03 Verständnis der Prozessrealität ── */}
      <div className={'pasf-preal' + on(7)}>
        <div className="pasf__sh">
          <img src="assets/logos/pulse-mark.png" alt="" className="pasf-int__mark" aria-hidden="true" />
          <span className="pasf__num">03</span>
          <span className="pasf__title">Verständnis der Prozessrealität</span>
          <span className={'pasf-preal__aiChip' + on(7)}>PULSE AI Analyse</span>
        </div>
        <div className={'pasf-transpar' + v(8)}>Konkrete Transparenz →</div>
        <div className="pasf-fields">
          <div className={'pasf-field' + v(9)}>Engpässe</div>
          <div className={'pasf-field' + v(10)}>Manuelle Aufwände</div>
          <div className={'pasf-field pasf-field--accent' + v(11)}>Automatisierungspotenziale</div>
        </div>
      </div>

      <div className={'pasf-conn' + on(12)} aria-hidden="true" />

      {/* ── 04 Sichtbare Potenziale & Priorisierung ── */}
      <div className={'pasf-out' + on(12)}>
        <div className="pasf__sh">
          <span className="pasf__num">04</span>
          <span className="pasf__title">Sichtbare Potenziale &amp; Priorisierung</span>
        </div>
        <div className="pasf-out__outputs">
          <div className={'pasf-out__output pasf-out__output--accent' + v(13)}>
            Konkrete Automatisierungspotenziale
          </div>
          <div className={'pasf-out__output' + v(14)}>
            Umsetzbare Optimierungshebel
          </div>
          <div className={'pasf-out__output' + v(15)}>
            Geeignete nächste Schritte
          </div>
        </div>
      </div>

    </div>
  );
}

function PAIntelligenceSection() {
  const [ref, revealed] = useRevealOnce(0.10);
  const [paused, setPaused] = React.useState(false);
  const phase = usePAAnimation({ active: revealed, paused });

  /* Progress segment classes:
     is-now  = currently active (amber glow)
     is-done = completed (dimmed copper fill)             */
  const segCls = (s) => {
    const starts = [1, 3, 7, 12];
    const ends   = [3, 7, 12, 17];
    if (phase >= ends[s - 1])   return ' is-done';
    if (phase >= starts[s - 1]) return ' is-now';
    return '';
  };

  return (
    <section
      className={'section pai' + (revealed ? ' pai--on' : '')}
      ref={ref}
      data-screen-label="06 PULSE Opportunity Scan"
    >
      <div className="wrap wrap--wide">
        <div className="pai__inner">

          {/* ── LEFT: Editorial offer ── */}
          <div className="pai__left">
            <div className="eyebrow eyebrow--pulse" style={{marginBottom: 22}}>
              PULSE OPPORTUNITY SCAN
            </div>
            <h2 className="pai__h2">
              Machen Sie mit dem<br />
              <span className="pai__pulse-accent">PULSE</span>{' '}Scan{' '}
              <span className="pai__hl">Potenziale<br />schnell sichtbar.</span>
            </h2>
            <p className="pai__body" style={{marginBottom: 28}}>
              Mit dem unverbindlichen{' '}
              <span className="pai__pulse">PULSE Opportunity Scan</span>{' '}
              prüfen Sie an einem konkreten Prozess, wo Automatisierungs-,
              AI- und Optimierungspotenziale liegen – und erleben PULSE direkt
              im Einsatz.
            </p>
            <div className="pai__ctas">
              <a className="btn btn--pulse btn--hero-cta" href={OPP_SCAN}>
                Scan buchen <Ico.arrow />
              </a>
              <a className="btn btn--secondary btn--hero-cta" href={PULSE_PAGE}>
                PULSE ansehen <Ico.arrowSm />
              </a>
            </div>
          </div>

          {/* ── RIGHT: Animated PULSE scan panel ── */}
          <div className="pai__right">
            <div
              className="pai-panel"
              onMouseEnter={() => setPaused(true)}
              onMouseLeave={() => setPaused(false)}
              onFocus={() => setPaused(true)}
              onBlur={() => setPaused(false)}
            >
              {/* Panel header */}
              <div className="pai-panel__top">
                <div className="pai-panel__topLeft">
                  <img src="assets/logos/pulse-mark.png" alt="PULSE" className="pai-panel__logo" />
                  <div>
                    <div className="pai-panel__product">PULSE OPPORTUNITY SCAN</div>
                    <div className="pai-panel__sub">
                      PROCESS &amp; AUTOMATION · AI ANALYSIS FLOW
                    </div>
                  </div>
                </div>
                <span className="pai-panel__status">READY</span>
              </div>

              {/* 4-segment progress bar */}
              <div className="pai-prog" aria-hidden="true">
                {[1, 2, 3, 4].map(s => (
                  <span key={s} className={'pai-prog__dot' + segCls(s)} />
                ))}
              </div>

              <PAScanFlow phase={phase} />
            </div>
          </div>

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


/* =========================================================
   PRAXIS UND RESSOURCEN — Section 06
   Case studies (prominent) + resource cards (secondary).
   KPI strip removed — metrics live in TrustBand above Hero.
   ========================================================= */

function CsPreviewPA() {
  return (
    <svg viewBox="0 0 600 338" fill="none" xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',display:'block'}}>
      <defs>
        <linearGradient id="cspabg" x1="0" y1="0" x2="600" y2="338" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FAF6EF"/><stop offset="1" stopColor="#EFE6D8"/>
        </linearGradient>
      </defs>
      <rect width="600" height="338" fill="url(#cspabg)"/>
      <text x="28" y="30" fontFamily="'JetBrains Mono',monospace" fontSize="8.5" fill="#0B0F17" fillOpacity=".34" letterSpacing="1.5">PROZESS-ANALYSE · EINKAUF</text>

      {/* Node 1 */}
      <rect x="28" y="42" width="96" height="46" rx="6" fill="white" stroke="rgba(11,15,23,.12)" strokeWidth="1"/>
      <text x="76" y="61" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">Anforderung</text>
      <text x="76" y="76" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0B0F17" fillOpacity=".42">Erfassung</text>
      <line x1="124" y1="65" x2="142" y2="65" stroke="rgba(11,15,23,.18)" strokeWidth="1"/>
      <path d="M139 61.5L143 65l-4 3.5" stroke="rgba(11,15,23,.18)" strokeWidth="1" fill="none"/>

      {/* Node 2 – bottleneck */}
      <rect x="143" y="42" width="96" height="46" rx="6" fill="white" stroke="rgba(184,87,48,.55)" strokeWidth="1.5"/>
      <rect x="143" y="42" width="96" height="4" rx="3" fill="#B85730" fillOpacity=".72"/>
      <circle cx="232" cy="46" r="6" fill="#D97757"/>
      <text x="232" y="50" textAnchor="middle" fontFamily="sans-serif" fontSize="8" fill="white" fontWeight="700">!</text>
      <text x="191" y="62" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">Prüfung</text>
      <text x="191" y="76" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#B85730">Manuell · Engpass</text>
      <line x1="239" y1="65" x2="257" y2="65" stroke="rgba(11,15,23,.18)" strokeWidth="1"/>
      <path d="M254 61.5L258 65l-4 3.5" stroke="rgba(11,15,23,.18)" strokeWidth="1" fill="none"/>

      {/* Node 3 */}
      <rect x="258" y="42" width="96" height="46" rx="6" fill="white" stroke="rgba(11,15,23,.12)" strokeWidth="1"/>
      <text x="306" y="61" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">Freigabe</text>
      <text x="306" y="76" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0B0F17" fillOpacity=".42">Loop erkannt</text>
      <line x1="354" y1="65" x2="372" y2="65" stroke="rgba(11,15,23,.18)" strokeWidth="1"/>
      <path d="M369 61.5L373 65l-4 3.5" stroke="rgba(11,15,23,.18)" strokeWidth="1" fill="none"/>

      {/* Node 4 – teal */}
      <rect x="373" y="42" width="96" height="46" rx="6" fill="white" stroke="rgba(14,124,123,.42)" strokeWidth="1.5"/>
      <rect x="373" y="42" width="96" height="4" rx="3" fill="#0E7C7B" fillOpacity=".6"/>
      <text x="421" y="62" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">Zahlung</text>
      <text x="421" y="76" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0E7C7B">Automatisierbar</text>

      <line x1="28" y1="106" x2="572" y2="106" stroke="rgba(11,15,23,.07)"/>

      {/* Left: potential bars */}
      <text x="28" y="122" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0B0F17" fillOpacity=".30" letterSpacing="1.3">AUTOMATISIERUNGSPOTENZIAL</text>
      <rect x="28" y="131" width="200" height="6" rx="3" fill="rgba(11,15,23,.07)"/>
      <rect x="28" y="131" width="170" height="6" rx="3" fill="#0E7C7B" fillOpacity=".65"/>
      <text x="236" y="137" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" fillOpacity=".8">85%</text>
      <text x="28" y="151" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0B0F17" fillOpacity=".40">Zahlungsabwicklung</text>
      <rect x="28" y="161" width="200" height="6" rx="3" fill="rgba(11,15,23,.07)"/>
      <rect x="28" y="161" width="120" height="6" rx="3" fill="#D97757" fillOpacity=".65"/>
      <text x="236" y="167" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#D97757" fillOpacity=".8">60%</text>
      <text x="28" y="181" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0B0F17" fillOpacity=".40">Belegprüfung</text>
      <rect x="28" y="191" width="200" height="6" rx="3" fill="rgba(11,15,23,.07)"/>
      <rect x="28" y="191" width="70" height="6" rx="3" fill="#1E3A8A" fillOpacity=".55"/>
      <text x="236" y="197" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#1E3A8A" fillOpacity=".8">35%</text>
      <text x="28" y="211" fontFamily="'General Sans',sans-serif" fontSize="9" fill="#0B0F17" fillOpacity=".40">Lieferantenabgleich</text>

      {/* Right: PULSE analysis panel */}
      <rect x="294" y="114" width="278" height="208" rx="10" fill="#1E1009" stroke="rgba(184,87,48,.20)" strokeWidth="1"/>
      <rect x="294" y="114" width="278" height="34" rx="10" fill="#2A160E"/>
      <rect x="294" y="134" width="278" height="14" fill="#2A160E"/>
      <circle cx="313" cy="131" r="5" fill="#B85730" fillOpacity=".85"/>
      <text x="324" y="135" fontFamily="'JetBrains Mono',monospace" fontSize="8.5" fill="rgba(255,245,234,.88)" letterSpacing="1">PULSE ANALYSE</text>
      <line x1="294" y1="148" x2="572" y2="148" stroke="rgba(255,245,234,.07)"/>
      <text x="310" y="164" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="rgba(255,245,234,.30)" letterSpacing="1.2">3 HEBEL IDENTIFIZIERT</text>
      <circle cx="314" cy="182" r="3.5" fill="#D97757"/>
      <text x="324" y="186" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="rgba(255,245,234,.88)">Manuelle Prüfung</text>
      <text x="324" y="199" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#D97757" fillOpacity=".82">Automatisierbar · 78%</text>
      <circle cx="314" cy="215" r="3.5" fill="#D97757"/>
      <text x="324" y="219" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="rgba(255,245,234,.88)">Freigabe-Loop</text>
      <text x="324" y="232" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#D97757" fillOpacity=".82">Engpass · Redesign empfohlen</text>
      <circle cx="314" cy="248" r="3.5" fill="#0E7C7B"/>
      <text x="324" y="252" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="rgba(255,245,234,.88)">Stammdaten-Abgleich</text>
      <text x="324" y="265" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" fillOpacity=".82">Optimierbar · Quick Win</text>
      <line x1="294" y1="281" x2="572" y2="281" stroke="rgba(255,245,234,.07)"/>
      <text x="310" y="304" fontFamily="'JetBrains Mono',monospace" fontSize="7" fill="rgba(255,245,234,.20)" letterSpacing=".5">Basierend auf 14 Interviews · Confidence 0.82</text>
    </svg>
  );
}

function CsPreviewSW() {
  return (
    <svg viewBox="0 0 600 338" fill="none" xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',display:'block'}}>
      <rect width="600" height="338" fill="#EEF2F4"/>
      <text x="28" y="30" fontFamily="'JetBrains Mono',monospace" fontSize="8.5" fill="#0B0F17" fillOpacity=".32" letterSpacing="1.5">REQUIREMENTS · FIT-GAP-ANALYSE</text>

      {/* Table header */}
      <rect x="28" y="40" width="544" height="28" rx="4" fill="rgba(11,15,23,.06)"/>
      <text x="44"  y="58" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#0B0F17" fillOpacity=".44" letterSpacing="1">ANFORDERUNG</text>
      <text x="282" y="58" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#0B0F17" fillOpacity=".44" letterSpacing="1">STAKEHOLDER</text>
      <text x="406" y="58" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#0B0F17" fillOpacity=".44" letterSpacing="1">PRIO</text>
      <text x="470" y="58" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#0B0F17" fillOpacity=".44" letterSpacing="1">FIT-GAP</text>

      {/* Row 1 */}
      <rect x="28" y="70" width="544" height="38" fill="rgba(255,255,255,.7)"/>
      <line x1="28" y1="108" x2="572" y2="108" stroke="rgba(11,15,23,.06)"/>
      <text x="44"  y="85"  fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="#0B0F17">Datenintegration ERP</text>
      <text x="44"  y="100" fontFamily="'General Sans',sans-serif" fontSize="9"  fill="#0B0F17" fillOpacity=".40">Echtzeit-Abgleich mit Bestandssystemen</text>
      <text x="282" y="91"  fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".55">IT · Finance</text>
      <text x="406" y="92"  fontFamily="sans-serif" fontSize="11" fill="#1E3A8A" fillOpacity=".7">★★★</text>
      <rect x="470" y="79" width="46" height="18" rx="9" fill="rgba(14,124,123,.12)"/>
      <text x="493" y="92" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" letterSpacing=".5">JA</text>

      {/* Row 2 */}
      <rect x="28" y="109" width="544" height="38" fill="rgba(11,15,23,.015)"/>
      <line x1="28" y1="147" x2="572" y2="147" stroke="rgba(11,15,23,.06)"/>
      <text x="44"  y="124" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="#0B0F17">Reporting-Layer</text>
      <text x="44"  y="139" fontFamily="'General Sans',sans-serif" fontSize="9"  fill="#0B0F17" fillOpacity=".40">Dashboards für Finance und Operations</text>
      <text x="282" y="130" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".55">Finance</text>
      <text x="406" y="131" fontFamily="sans-serif" fontSize="11" fill="#1E3A8A" fillOpacity=".7">★★★</text>
      <rect x="458" y="118" width="68" height="18" rx="9" fill="rgba(217,119,87,.12)"/>
      <text x="492" y="131" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#D97757" letterSpacing=".5">TEILWEISE</text>

      {/* Row 3 – cobalt accent */}
      <rect x="28" y="148" width="544" height="38" fill="rgba(255,255,255,.7)"/>
      <rect x="28" y="148" width="4"   height="38" fill="#1E3A8A" fillOpacity=".55"/>
      <line x1="28" y1="186" x2="572" y2="186" stroke="rgba(11,15,23,.06)"/>
      <text x="44"  y="163" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="#0B0F17">Approval Workflow</text>
      <text x="44"  y="178" fontFamily="'General Sans',sans-serif" fontSize="9"  fill="#0B0F17" fillOpacity=".40">Mehrstufige Genehmigungsprozesse</text>
      <text x="282" y="169" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".55">Operations</text>
      <text x="406" y="170" fontFamily="sans-serif" fontSize="11" fill="#1E3A8A" fillOpacity=".7">★★☆</text>
      <rect x="470" y="157" width="46" height="18" rx="9" fill="rgba(30,58,138,.10)"/>
      <text x="493" y="170" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#1E3A8A" fillOpacity=".8" letterSpacing=".5">GAP</text>

      {/* Row 4 */}
      <rect x="28" y="187" width="544" height="38" fill="rgba(11,15,23,.015)"/>
      <line x1="28" y1="225" x2="572" y2="225" stroke="rgba(11,15,23,.06)"/>
      <text x="44"  y="202" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="#0B0F17">API-Schnittstellen</text>
      <text x="44"  y="217" fontFamily="'General Sans',sans-serif" fontSize="9"  fill="#0B0F17" fillOpacity=".40">Anbindung externer Systeme</text>
      <text x="282" y="208" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".55">IT</text>
      <text x="406" y="209" fontFamily="sans-serif" fontSize="11" fill="#1E3A8A" fillOpacity=".7">★★☆</text>
      <rect x="470" y="196" width="46" height="18" rx="9" fill="rgba(14,124,123,.12)"/>
      <text x="493" y="209" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" letterSpacing=".5">JA</text>

      {/* Row 5 */}
      <rect x="28" y="226" width="544" height="38" fill="rgba(255,255,255,.7)"/>
      <line x1="28" y1="264" x2="572" y2="264" stroke="rgba(11,15,23,.06)"/>
      <text x="44"  y="241" fontFamily="'General Sans',sans-serif" fontSize="11" fontWeight="500" fill="#0B0F17">Berechtigungskonzept</text>
      <text x="44"  y="256" fontFamily="'General Sans',sans-serif" fontSize="9"  fill="#0B0F17" fillOpacity=".40">Rollenbasierter Datenzugriff</text>
      <text x="282" y="247" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".55">IT · HR</text>
      <text x="406" y="248" fontFamily="sans-serif" fontSize="11" fill="#1E3A8A" fillOpacity=".7">★☆☆</text>
      <rect x="458" y="235" width="68" height="18" rx="9" fill="rgba(217,119,87,.12)"/>
      <text x="492" y="248" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="#D97757" letterSpacing=".5">TEILWEISE</text>

      {/* Summary bar */}
      <rect x="28" y="276" width="544" height="42" rx="6" fill="rgba(30,58,138,.07)" stroke="rgba(30,58,138,.12)" strokeWidth="1"/>
      <text x="44" y="292" fontFamily="'JetBrains Mono',monospace" fontSize="8.5" fill="#1E3A8A" fillOpacity=".8" letterSpacing=".5">ZUSAMMENFASSUNG</text>
      <text x="44" y="308" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".58">18 Anforderungen · 7 Stakeholder-Gruppen · 3 kritische Gaps identifiziert</text>
      <circle cx="550" cy="292" r="15" fill="#2A160E"/>
      <text x="550" y="297.5" textAnchor="middle" fontFamily="'General Sans',sans-serif" fontSize="13" fontWeight="600" fill="#D97757">P</text>
    </svg>
  );
}

function ResPreviewGuide() {
  return (
    <svg viewBox="0 0 600 375" fill="none" xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',display:'block'}}>
      <rect width="600" height="375" fill="#0B1B33"/>
      {[90,152,214,276,338].map((y,i) => (
        <line key={'gy'+i} x1="0" y1={y} x2="600" y2={y} stroke="rgba(255,245,234,.032)"/>
      ))}
      {[100,200,300,400,500].map((x,i) => (
        <line key={'gx'+i} x1={x} y1="0" x2={x} y2="375" stroke="rgba(255,245,234,.032)"/>
      ))}
      <line x1="60" y1="214" x2="540" y2="214" stroke="rgba(255,245,234,.06)"/>
      <circle cx="120" cy="214" r="11" fill="none" stroke="rgba(30,58,138,.55)"  strokeWidth="1.5"/>
      <circle cx="120" cy="214" r="5.5" fill="#1E3A8A" fillOpacity=".7"/>
      <line x1="131" y1="214" x2="213" y2="214" stroke="rgba(30,58,138,.22)"/>
      <circle cx="225" cy="214" r="11" fill="none" stroke="rgba(184,87,48,.55)"  strokeWidth="1.5"/>
      <circle cx="225" cy="214" r="5.5" fill="#B85730" fillOpacity=".7"/>
      <line x1="236" y1="214" x2="344" y2="214" stroke="rgba(184,87,48,.18)"/>
      <circle cx="358" cy="214" r="14" fill="none" stroke="rgba(217,119,87,.8)"  strokeWidth="2"/>
      <circle cx="358" cy="214" r="7"  fill="#D97757" fillOpacity=".85"/>
      <line x1="372" y1="214" x2="456" y2="214" stroke="rgba(14,124,123,.22)"/>
      <circle cx="468" cy="214" r="11" fill="none" stroke="rgba(14,124,123,.55)" strokeWidth="1.5"/>
      <circle cx="468" cy="214" r="5.5" fill="#0E7C7B" fillOpacity=".7"/>
      <text x="120" y="237" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="rgba(247,243,234,.26)" letterSpacing=".5">ERFASSEN</text>
      <text x="225" y="237" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="rgba(247,243,234,.26)" letterSpacing=".5">EINORDNEN</text>
      <text x="358" y="240" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="rgba(217,119,87,.55)" letterSpacing=".5">ERKENNEN</text>
      <text x="468" y="237" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="7.5" fill="rgba(247,243,234,.26)" letterSpacing=".5">UMSETZEN</text>
      <rect x="40" y="50" width="52" height="18" rx="4" fill="rgba(30,58,138,.28)" stroke="rgba(30,58,138,.45)" strokeWidth="1"/>
      <text x="66" y="63" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="rgba(247,243,234,.7)" letterSpacing="1">GUIDE</text>
      <text x="40" y="310" fontFamily="'Clash Display','General Sans',sans-serif" fontSize="20" fontWeight="500" fill="rgba(247,243,234,.88)">Von Prozessrealität</text>
      <text x="40" y="335" fontFamily="'Clash Display','General Sans',sans-serif" fontSize="20" fontWeight="500" fill="rgba(247,243,234,.88)">zu Automatisierungspotenzial</text>
      <text x="40" y="358" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="rgba(247,243,234,.22)" letterSpacing=".5">NOVEMCORE · 2025</text>
    </svg>
  );
}

function ResPreviewTool() {
  const dims = [
    {x:28,  label:'Manuelle Aufwände',  bar:128, bc:'#0E7C7B', bo:.6, rat:'HOCH',      rc:'#0E7C7B'},
    {x:210, label:'Wiederholbarkeit',   bar:144, bc:'#0E7C7B', bo:.6, rat:'SEHR HOCH', rc:'#0E7C7B'},
    {x:392, label:'Datenverfügbarkeit', bar:86,  bc:'#D97757', bo:.6, rat:'MITTEL',    rc:'#D97757'},
  ];
  const hebel = [
    {x:28,  label:'RPA-Potenzial',     bar:115, bc:'#1E3A8A', bo:.5, rat:'HOCH',       rc:'#1E3A8A'},
    {x:210, label:'AI-Integration',    bar:77,  bc:'#1E3A8A', bo:.4, rat:'MITTEL',     rc:'#1E3A8A'},
    {x:392, label:'Prozess-Redesign',  bar:90,  bc:'#0E7C7B', bo:.5, rat:'EMPFOHLEN',  rc:'#0E7C7B'},
  ];
  return (
    <svg viewBox="0 0 600 375" fill="none" xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',display:'block'}}>
      <defs>
        <linearGradient id="rtoolbg" x1="0" y1="0" x2="600" y2="375" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EEF2F4"/><stop offset="1" stopColor="#E0ECEC"/>
        </linearGradient>
      </defs>
      <rect width="600" height="375" fill="url(#rtoolbg)"/>
      <rect x="28" y="28" width="46" height="18" rx="4" fill="rgba(14,124,123,.14)" stroke="rgba(14,124,123,.28)" strokeWidth="1"/>
      <text x="51" y="41" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" letterSpacing="1">TOOL</text>
      <text x="28" y="78" fontFamily="'Clash Display','General Sans',sans-serif" fontSize="15" fontWeight="500" fill="#0B0F17" fillOpacity=".72">Automatisierungspotenzial einschätzen</text>
      <text x="28" y="112" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0B0F17" fillOpacity=".28" letterSpacing="1.2">PROZESSDIMENSION</text>
      {dims.map((d,i) => (
        <g key={i}>
          <rect x={d.x} y="120" width="164" height="54" rx="8" fill="rgba(255,255,255,.68)" stroke="rgba(11,15,23,.09)" strokeWidth="1"/>
          <text x={d.x+16} y="138" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">{d.label}</text>
          <rect x={d.x+16} y="144" width="132" height="5" rx="2.5" fill="rgba(11,15,23,.07)"/>
          <rect x={d.x+16} y="144" width={d.bar} height="5" rx="2.5" fill={d.bc} fillOpacity={d.bo}/>
          <text x={d.x+16} y="163" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill={d.rc} fillOpacity=".7">{d.rat}</text>
        </g>
      ))}
      <text x="28" y="200" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0B0F17" fillOpacity=".28" letterSpacing="1.2">OPTIMIERUNGSHEBEL</text>
      {hebel.map((d,i) => (
        <g key={i}>
          <rect x={d.x} y="208" width="164" height="54" rx="8" fill="rgba(255,255,255,.68)" stroke="rgba(11,15,23,.09)" strokeWidth="1"/>
          <text x={d.x+16} y="226" fontFamily="'General Sans',sans-serif" fontSize="10" fontWeight="500" fill="#0B0F17">{d.label}</text>
          <rect x={d.x+16} y="232" width="132" height="5" rx="2.5" fill="rgba(11,15,23,.07)"/>
          <rect x={d.x+16} y="232" width={d.bar} height="5" rx="2.5" fill={d.bc} fillOpacity={d.bo}/>
          <text x={d.x+16} y="251" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill={d.rc} fillOpacity=".7">{d.rat}</text>
        </g>
      ))}
      <rect x="28" y="292" width="544" height="46" rx="8" fill="rgba(14,124,123,.09)" stroke="rgba(14,124,123,.18)" strokeWidth="1"/>
      <text x="44" y="309" fontFamily="'JetBrains Mono',monospace" fontSize="8" fill="#0E7C7B" fillOpacity=".8" letterSpacing="1">EINSCHÄTZUNG</text>
      <text x="44" y="327" fontFamily="'General Sans',sans-serif" fontSize="10" fill="#0B0F17" fillOpacity=".62">Hohes Automatisierungspotenzial — strukturierte Analyse empfohlen</text>
    </svg>
  );
}

function Proof() {
  const [proofRef, proofOn] = useRevealOnce(0.08);
  return (
    <section className={'section proof' + (proofOn ? ' proof--on' : '')} ref={proofRef} data-screen-label="06 Praxis und Ressourcen">
      <div className="wrap wrap--wide">

        <div className="section__head proof__rv" style={{'--rv-d':'0ms'}}>
          <div className="eyebrow eyebrow--cobalt">PRAXIS UND RESSOURCEN</div>
          <h2 className="section__h2">Konkrete Einblicke für bessere Entscheidungen.</h2>
          <p className="section__lead">
            Ausgewählte Anwendungsbeispiele und Insights zu Daten, Prozessen und
            Automatisierung.
          </p>
        </div>

        {/* Case Studies */}
        <div className="csSubHead proof__rv" style={{'--rv-d':'80ms'}}>
          <a className="csSubHead__link" href="fallstudien/de/Fallstudien.html">Alle Case Studies ansehen →</a>
        </div>
        <div className="csGrid">
          <article className="csCard proof__rv" style={{'--rv-d':'160ms'}}>
            <div className="csCard__preview">
              <CsPreviewPA />
            </div>
            <div className="csCard__body">
              <div className="csCard__type">CASE STUDY · PROCESS &amp; AUTOMATION</div>
              <h3 className="csCard__title">Einkaufsprozesse auf Automatisierungs- und AI-Potenziale prüfen</h3>
              <p className="csCard__desc">Wie strukturierte Interviews Prozessrealität, Engpässe und priorisierbare Hebel sichtbar machen.</p>
              <div className="csCard__chips">
                <span className="csCard__chip csCard__chip--pulse">PULSE</span>
                <span className="csCard__chip">Prozessrealität</span>
                <span className="csCard__chip">Automatisierungspotenziale</span>
              </div>
              <a className="csCard__cta" href="fallstudien/de/Fallstudien.html">Case Study ansehen <span className="cs-arrow">→</span></a>
            </div>
          </article>
          <article className="csCard proof__rv" style={{'--rv-d':'260ms'}}>
            <div className="csCard__preview">
              <CsPreviewSW />
            </div>
            <div className="csCard__body">
              <div className="csCard__type">CASE STUDY · SOFTWARE &amp; REQUIREMENTS</div>
              <h3 className="csCard__title">Stakeholder-Anforderungen für eine Softwareentscheidung strukturieren</h3>
              <p className="csCard__desc">Wie Anforderungen konsolidiert und Fit-Gap-Fragen entscheidungsfähig gemacht werden.</p>
              <div className="csCard__chips">
                <span className="csCard__chip csCard__chip--pulse">PULSE</span>
                <span className="csCard__chip">Requirements</span>
                <span className="csCard__chip">Softwareauswahl</span>
              </div>
              <a className="csCard__cta" href="fallstudien/de/Fallstudien.html">Case Study ansehen <span className="cs-arrow">→</span></a>
            </div>
          </article>
        </div>

        {/* Resources */}
        <div className="resSubHead proof__rv" style={{'--rv-d':'200ms'}}>
          <div className="resSubHead__title">Ausgewählte Ressourcen</div>
          <a className="resSubHead__link" href="blog-papers/de/Blog & Papers.html">Alle Ressourcen ansehen →</a>
        </div>
        <div className="resGrid resGrid--2">
          <article className="resCard proof__rv" style={{'--rv-d':'280ms'}}>
            <div className="resCard__img resCard__img--1">
              <ResPreviewGuide />
            </div>
            <div className="resCard__body">
              <div className="resCard__type">GUIDE</div>
              <h4 className="resCard__title">Von Prozessrealität zu Automatisierungspotenzial</h4>
              <p className="resCard__desc">Wie Unternehmen Engpässe und manuelle Arbeit strukturiert sichtbar machen.</p>
              <a className="resCard__link" href="blog-papers/de/Blog & Papers.html">Guide lesen <Ico.arrowSm /></a>
            </div>
          </article>
          <article className="resCard proof__rv" style={{'--rv-d':'380ms'}}>
            <div className="resCard__img resCard__img--3">
              <ResPreviewTool />
            </div>
            <div className="resCard__body">
              <div className="resCard__type">TOOL</div>
              <h4 className="resCard__title">Automatisierungspotenzial einschätzen</h4>
              <p className="resCard__desc">Erste Orientierung zu manuellen Aufwänden, Wiederholbarkeit und Optimierungshebeln.</p>
              <a className="resCard__link" href="blog-papers/de/Blog & Papers.html">Tool öffnen <Ico.arrowSm /></a>
            </div>
          </article>
        </div>

      </div>
    </section>
  );
}

/* =========================================================
   FINAL CTA + NEWSLETTER — Section 08
   ========================================================= */
function FinalCTA() {
  const [ctaRef, ctaOn] = useRevealOnce(0.12);
  return (
    <section className={'section finalcta' + (ctaOn ? ' finalcta--on' : '')} ref={ctaRef} data-screen-label="08 Abschluss-CTA & Newsletter">
      <div className="wrap wrap--wide">
        <div className="finalcta__inner">
          <div className="finalcta__rv" style={{'--rv-d':'0ms'}}>
            <div className="eyebrow eyebrow--pulse" style={{color: 'var(--pulse-amber)'}}>PULSE OPPORTUNITY SCAN</div>
            <h2>Aus Wissen wird Entscheidung. Aus Entscheidung wird Umsetzung.</h2>
            <p className="finalcta__lead">
              Ein klar umrissener Scope, ein scharf strukturiertes Discovery-Programm —
              und ein priorisierter Pfad in Richtung Umsetzung.
            </p>
            <div className="finalcta__ctas">
              <a className="btn btn--pulse btn--pulse-lg btn--hero-cta" href={OPP_SCAN}>Scan buchen <Ico.arrow /></a>
              <a className="btn btn--secondary-dark btn--hero-cta" href={PULSE_PAGE}>PULSE ansehen <Ico.arrowSm /></a>
            </div>
          </div>
          <div className="finalcta__news finalcta__rv" style={{'--rv-d':'160ms'}}>
            <div className="finalcta__newsLbl">NOVEMCORE NEWSLETTER</div>
            <div className="finalcta__newsTitle">Impulse für bessere Entscheidungen.</div>
            <div className="finalcta__newsDesc">
              Praktische Impulse zu AI, Automation, Business Intelligence und
              Transformation — kompakt für Entscheider:innen.
            </div>
            <form className="newsletterForm" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="ihre@firma.com" aria-label="E-Mail" />
              <button type="submit">Abonnieren</button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   FOOTER
   ========================================================= */
function Footer() {
  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>
        <FooterCol title="PULSE" items={['Plattform', 'Opportunity Scan']}/>
        <FooterCol title="Services" items={['Prozesse & Automation', 'Software & Requirements', 'Finance & Business Intelligence', 'Transformation & Value Creation']}/>
        <FooterCol title="Ressourcen" items={['Fallstudien', 'Automations', 'Tools', 'Podcast', 'Newsletter', 'Blog & Papers']}/>
        <FooterCol title="Novemcore" items={['Über uns', 'Karriere', 'Kontakt', 'Datenschutz', 'Impressum']}/>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div className="ftr__col">
      <div className="ftr__colTitle">{title}</div>
      <ul>{items.map((i) => <li key={i}><a href="#">{i}</a></li>)}</ul>
    </div>
  );
}