// devonNEXT — Extra Sections (Reality-Check, Artefakte, KI-Haltung, Newsletter, Zukunftsbild-Generator, Devon-Narrativ)
(function(){
  const {useState,useEffect,useRef} = React;
  const C = window.dnContent;

  // ──────────────── REALITY-CHECK — Horizontaler Before/After Comparison-Slider
  // Links: Herausforderungen (Pains, "Alltag"). Rechts: NEXT-Akronym (devonNEXT-Modus).
  // Drag-Handle in der Mitte. Beim Wischen nach rechts wird der NEXT-Bereich freigelegt;
  // ganz rechts vollständig sichtbar, ganz links wieder die Herausforderungen.
  window.DevonRealityCheck = function RealityCheck(){
    const R = C.reality;
    const pains = C.pains || [];
    const wrapRef = useRef(null);
    const [pos,setPos] = useState(5); // Startposition: Handle ganz links, Alltag voll sichtbar
    const dragging = useRef(false);

    const setFromClientX = (clientX)=>{
      const el = wrapRef.current; if(!el) return;
      const r = el.getBoundingClientRect();
      const p = ((clientX - r.left) / r.width) * 100;
      setPos(Math.max(0, Math.min(100, p)));
    };
    const touchStart = useRef(null); // {x,y} bis Richtung feststeht
    const onDown = (e)=>{
      if(e.touches){
        // Touch: Richtung erst bei erster Bewegung entscheiden (vertikales Scrollen zulassen)
        touchStart.current = {x:e.touches[0].clientX, y:e.touches[0].clientY};
        return;
      }
      dragging.current = true; e.preventDefault(); setFromClientX(e.clientX);
    };
    const onMove = (e)=>{
      if(e.touches){
        if(!dragging.current){
          if(!touchStart.current) return;
          const dx = e.touches[0].clientX - touchStart.current.x;
          const dy = e.touches[0].clientY - touchStart.current.y;
          if(Math.abs(dx) < 8 && Math.abs(dy) < 8) return; // noch unklar
          if(Math.abs(dx) > Math.abs(dy)){ dragging.current = true; } // horizontal → Slider
          else { touchStart.current = null; return; }               // vertikal → Seite scrollen
        }
        e.preventDefault();
        setFromClientX(e.touches[0].clientX);
        return;
      }
      if(!dragging.current) return;
      setFromClientX(e.clientX);
    };
    const onUp = ()=>{ dragging.current = false; touchStart.current = null; };
    useEffect(()=>{
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
      window.addEventListener('touchmove', onMove, {passive:false});
      window.addEventListener('touchend', onUp);
      return ()=>{
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
        window.removeEventListener('touchmove', onMove);
        window.removeEventListener('touchend', onUp);
      };
    },[]);
    const onKey = (e)=>{
      if(e.key==='ArrowLeft') setPos(p=>Math.max(0,p-5));
      if(e.key==='ArrowRight') setPos(p=>Math.min(100,p+5));
      if(e.key==='Home') setPos(0);
      if(e.key==='End') setPos(100);
    };

    return (
      <section id="reality" className="section ba-section">
        <div className="wrap">
          <div className="section-head rv">
            <div className="eye">{R.eyebrow}</div>
            <h2 className="h-lg">{R.title}</h2>
            <p style={{maxWidth:'66ch', margin:'14px auto 0'}}>{R.sub.split('Nachher:').map((part,i)=> i===0 ? part.trim() : <React.Fragment key={i}><br/>Nachher:{part}</React.Fragment>)}</p>
          </div>

          <div className="ba-stage" style={{'--ba-pos': pos+'%'}}>
          <div
            ref={wrapRef}
            className="ba-wrap rv"
            onMouseDown={onDown}
            onTouchStart={onDown}
            style={{'--ba-pos': pos+'%'}}
          >
            {/* Basisebene: Alltag (immer da, vollflächig) */}
            <div className="ba-side ba-before" aria-hidden={pos>=98}>
              <div className="ba-corner-tag ba-tag-l">Herausforderungen</div>
              <div className="ba-grid">
                {pains.slice(0,4).map((p,i)=>(
                  <div key={i} className="ba-card ba-card-before">
                    <div className="ba-num"><svg className="ba-num-slash" viewBox="0 0 30 40" aria-hidden="true"><polygon points="4,37 8,37 11,20 7,20"></polygon><polygon points="12,37 16,37 21,4 17,4"></polygon></svg></div>
                    <h3>{p.t}</h3>
                    <p>{p.p}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Overlay: devonNEXT — wird per clip-path von links eingeblendet.
                Wisch nach rechts → pos steigt → devonNEXT bedeckt mehr Fläche von links. */}
            <div className="ba-side ba-after" style={{clipPath:`inset(0 ${100-pos}% 0 0)`}} aria-hidden={pos<=2}>
              <img src="shared/logo-devonnext-header.png?v=2" alt="devonNEXT" className="ba-corner-logo"/>
              <div className="ba-grid">
                {(R.axes||[]).slice(0,4).map((a,i)=>(
                  <div key={i} className="ba-card ba-card-after">
                    <div className="ba-letter-row">
                      <span className="ba-letter">{a.letter}</span>
                      <span className="ba-ax-label">{a.label}</span>
                    </div>
                    <h3>{a.on.t}</h3>
                    <p dangerouslySetInnerHTML={{__html:a.on.p}}></p>
                  </div>
                ))}
              </div>
            </div>

            {/* Trennlinie + Handle */}
            <div className="ba-divider" style={{left:`calc(${pos}% - 1px)`}}>
              <button
                className="ba-handle"
                role="slider"
                aria-label="Vergleich: Alltag vs. devonNEXT"
                aria-valuemin="0" aria-valuemax="100" aria-valuenow={Math.round(pos)}
                tabIndex={0}
                onKeyDown={onKey}
                onMouseDown={onDown}
                onTouchStart={onDown}
              >
                <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style={{overflow:'visible',display:'block'}}>
                  <path d="M9 6l-5 6 5 6M15 6l5 6-5 6" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>

            <div className="ba-hint" aria-hidden="true" style={{color: pos>50 ? 'var(--navy)' : 'rgba(255,255,255,.9)'}}>← ziehen →</div>

          </div>
          {/* Handschriftliche Anleitung links neben dem Handle */}
          <div className={"ba-cue"+(pos>20?" off":"")} aria-hidden="true">
            <span className="ba-cue-txt">Zieh den Regler</span>
            <svg className="ba-cue-arrow" viewBox="0 0 60 50" fill="none" aria-hidden="true"><path d="M4 6 C 22 4, 44 12, 51 38" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/><path d="M40 33 L51 40 L53 27" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          </div>
        </div>
      </section>
    );
  };

  // ──────────────── ARTEFAKTE — 4 neue Kacheln
  function BackForecastAnim(){
    const ref = React.useRef(null);
    React.useEffect(()=>{
      const el = ref.current; if(!el) return;
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if(reduce) return; // bleibt im sichtbaren Endzustand
      el.classList.add('arm'); // Startzustand verbergen
      const io = new IntersectionObserver((es)=>es.forEach(e=>{
        if(e.isIntersecting){ el.classList.add('play'); io.disconnect(); }
      }), {threshold:0.32});
      io.observe(el);
      return ()=>io.disconnect();
    },[]);
    return (
      <svg ref={ref} className="bf-anim" viewBox="0 0 540 360" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Backcasting plant vom Ziel rückwärts und erreicht es; Forecasting plant vom Heute aus und bleibt unsicher darunter.">
        <rect width="540" height="360" fill="#FFFFFF"/>
        <g className="bf-axes">
          <path d="M55,305 L55,45" pathLength="1"/>
          <path d="M55,305 L510,305" pathLength="1"/>
        </g>
        <polygon className="bf-arrow" points="49,58 55,44 61,58"/>
        <polygon className="bf-arrow" points="500,299 511,305 500,311"/>
        <path className="bf-fore" pathLength="1" fill="none"
          d="M55,305 L70,295 L82,299 L96,283 L110,288 L124,271 L138,278 L152,262 L166,269 L180,252 L194,260 L208,243 L222,252 L236,236 L250,244 L264,228 L278,236 L292,222 L306,230 L320,216 L334,224 L348,210 L362,217 L376,205 L390,205 L402,196"/>
        <path className="bf-back" pathLength="1" fill="none"
          d="M402,100 Q382,106 348,114 Q310,125 262,142 Q215,167 150,207 Q100,253 55,305"/>
        <path className="bf-steps" pathLength="1" fill="none"
          d="M348,114 V142 H262 V207 H150 V262 H105"/>
        <g className="bf-wp bf-wp1"><circle cx="150" cy="207" r="7" fill="#FFFFFF" stroke="#13233F" strokeWidth="2.5"/><circle cx="150" cy="207" r="1.8" fill="#1E9E57"/></g>
        <g className="bf-wp bf-wp2"><circle cx="262" cy="142" r="7" fill="#FFFFFF" stroke="#13233F" strokeWidth="2.5"/><circle cx="262" cy="142" r="1.8" fill="#1E9E57"/></g>
        <g className="bf-wp bf-wp3"><circle cx="348" cy="114" r="7" fill="#FFFFFF" stroke="#13233F" strokeWidth="2.5"/><circle cx="348" cy="114" r="1.8" fill="#1E9E57"/></g>
        <g className="bf-ziel">
          <g className="bf-rays" stroke="#1E9E57" strokeWidth="2.5" strokeLinecap="round">
            <line x1="402" y1="74" x2="402" y2="64"/><line x1="402" y1="126" x2="402" y2="136"/>
            <line x1="376" y1="100" x2="366" y2="100"/><line x1="428" y1="100" x2="438" y2="100"/>
            <line x1="384" y1="82" x2="377" y2="75"/><line x1="420" y1="118" x2="427" y2="125"/>
            <line x1="420" y1="82" x2="427" y2="75"/><line x1="384" y1="118" x2="377" y2="125"/>
          </g>
          <circle cx="402" cy="100" r="11" fill="#FFFFFF" stroke="#13233F" strokeWidth="2.5"/>
          <circle cx="402" cy="100" r="3.6" fill="#13233F"/>
        </g>
        <g className="bf-label bf-label-back" transform="rotate(-2 95 132)">
          <text className="bf-h" x="92" y="138">BACKCASTING</text>
          <path className="bf-ul" d="M93,147 L214,150" stroke="#1E9E57" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <text className="bf-s" x="93" y="167">Vom Ziel zurück.</text>
          <text className="bf-s" x="93" y="183">Strategisch geplant.</text>
        </g>
        <g className="bf-label bf-label-ziel">
          <text className="bf-h" x="420" y="92">ZIEL</text>
          <path className="bf-ul" d="M421,101 L470,103" stroke="#1E9E57" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <text className="bf-s" x="421" y="120">Klar definiert.</text>
          <text className="bf-s" x="421" y="136">Erfolgreich erreicht.</text>
        </g>
        <g className="bf-label bf-label-fore">
          <text className="bf-h" x="392" y="252">FORECASTING</text>
          <path className="bf-ul" d="M393,261 L512,263" stroke="#E0322E" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <text className="bf-s" x="393" y="281">Von heute aus.</text>
          <text className="bf-s" x="393" y="297">Unsicher und variabel.</text>
        </g>
      </svg>
    );
  }

  function ArtefaktSlider({imgs,name,leadAnim,labels,nextTabs}){
    const [i,setI] = useState(0);
    const ref = React.useRef(null);
    const hasLead = leadAnim==='backforecast';
    const n = imgs.length + (hasLead?1:0);
    const goTo = (k)=>{ setI((k+n)%n); };
    const imgIdx = hasLead ? i-1 : i;
    const useTabs = labels && labels.length===n;
    const touch = React.useRef({x:0,active:false});
    const onTouchStart = (e)=>{ touch.current={x:e.touches[0].clientX, active:true}; };
    const onTouchEnd = (e)=>{
      if(!touch.current.active) return;
      const dx = e.changedTouches[0].clientX - touch.current.x;
      if(Math.abs(dx)>40){ goTo(i + (dx<0?1:-1)); }
      touch.current.active=false;
    };
    // Dezenter Tinten-Wisch beim ersten Reinscrollen (nicht bei der Phase-2-Animation)
    React.useEffect(()=>{
      if(hasLead) return;
      const el = ref.current; if(!el) return;
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if(reduce) return;
      el.classList.add('wipe-arm');
      const io = new IntersectionObserver((es)=>es.forEach(e=>{
        if(e.isIntersecting){ el.classList.add('wipe-go'); io.disconnect(); }
      }), {threshold:0.4});
      io.observe(el);
      return ()=>io.disconnect();
    },[]);
    return (
      <div className={'art-slider'+((useTabs||nextTabs)?' art-slider--tabs':'')} ref={ref}>
        <div className="art-slider-viewport" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
          <div className="art-slider-counter">{i+1} / {n}</div>
          {hasLead && i===0
            ? <div key="lead" className="art-slider-lead"><BackForecastAnim/></div>
            : <img key={i} src={imgs[imgIdx]} alt={name+' '+(i+1)} className="art-slider-img" decoding="async"/>}
          <button type="button" className="art-slider-arrow prev" onClick={()=>goTo(i-1)} aria-label="Vorheriges Bild">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button type="button" className="art-slider-arrow next" onClick={()=>goTo(i+1)} aria-label="Nächstes Bild">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
          {!useTabs && !nextTabs && (
            <div className="art-slider-dots">
              {Array.from({length:n}).map((_,k)=>(
                <button key={k} type="button" className={'art-slider-dot'+(k===i?' on':'')} onClick={()=>goTo(k)} aria-label={'Bild '+(k+1)}/>
              ))}
            </div>
          )}
        </div>
        {nextTabs ? (
          <div className="art-slider-tabs" role="tablist">
            {['N','E','X','T'].map((lab,k)=>(
              <button key={k} type="button" className={'art-slider-tab'+((i-1)===k?' on':'')} onClick={()=>goTo(k+1)} aria-label={'Slide '+(k+2)+': '+lab}>{lab}</button>
            ))}
          </div>
        ) : useTabs && (
          <div className="art-slider-tabs" role="tablist">
            {labels.map((lab,k)=>(
              <button key={k} type="button" className={'art-slider-tab'+(k===i?' on':'')} onClick={()=>goTo(k)} aria-label={'Slide '+(k+1)+': '+lab}>{lab}</button>
            ))}
          </div>
        )}
      </div>
    );
  }

  function ArtefaktVisual({kind,img,imgs,anim,name,labels,nextTabs}){
    if(imgs && imgs.length) return <ArtefaktSlider imgs={imgs} name={name} leadAnim={anim} labels={labels} nextTabs={nextTabs}/>;
    if(anim==='backforecast') return <BackForecastAnim/>;
    if(img) return <img src={img} alt="" className="art-img" loading="lazy" decoding="async"/>;
    if(kind==='dashboard') return (
      <svg viewBox="0 0 240 160" className="art-svg">
        <rect width="240" height="160" fill="#0A1830"/>
        <rect x="16" y="16" width="208" height="22" rx="3" fill="rgba(0,166,160,.12)"/>
        <rect x="22" y="22" width="36" height="10" rx="2" fill="#00A6A0"/>
        <rect x="64" y="24" width="50" height="3" rx="1" fill="rgba(255,255,255,.6)"/>
        <rect x="16" y="48" width="66" height="50" rx="4" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.1)"/>
        <rect x="88" y="48" width="66" height="50" rx="4" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.1)"/>
        <rect x="160" y="48" width="66" height="50" rx="4" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.1)"/>
        <text x="22" y="66" fontFamily="Sora" fontSize="9" fill="#00A6A0" fontWeight="700">OKR 01</text>
        <text x="22" y="86" fontFamily="Sora" fontSize="14" fill="#fff" fontWeight="800">72%</text>
        <text x="94" y="66" fontFamily="Sora" fontSize="9" fill="#FFD166" fontWeight="700">OKR 02</text>
        <text x="94" y="86" fontFamily="Sora" fontSize="14" fill="#fff" fontWeight="800">48%</text>
        <text x="166" y="66" fontFamily="Sora" fontSize="9" fill="#00A6A0" fontWeight="700">OKR 03</text>
        <text x="166" y="86" fontFamily="Sora" fontSize="14" fill="#fff" fontWeight="800">91%</text>
        <polyline points="16,140 40,128 64,132 88,118 112,120 136,104 160,108 184,92 208,94 224,84" fill="none" stroke="#00A6A0" strokeWidth="2"/>
        <polyline points="16,140 40,128 64,132 88,118 112,120 136,104 160,108 184,92 208,94 224,84" fill="none" stroke="#00A6A0" strokeWidth="2" opacity="0.3"/>
      </svg>
    );
    if(kind==='wertemap') return (
      <svg viewBox="0 0 240 160" className="art-svg">
        <rect width="240" height="160" fill="#F6F5F2"/>
        <circle cx="120" cy="80" r="30" fill="#00A6A0" opacity="0.14"/>
        <circle cx="120" cy="80" r="18" fill="#00A6A0"/>
        <text x="120" y="84" textAnchor="middle" fontFamily="Sora" fontSize="9" fontWeight="800" fill="#fff">WERTE</text>
        <g fontFamily="Sora" fontSize="7.5" fontWeight="700" fill="#0C1C36">
          <circle cx="50" cy="40" r="17" fill="#fff" stroke="#00A6A0" strokeWidth="1.5"/>
          <text x="50" y="43" textAnchor="middle">Mut</text>
          <circle cx="190" cy="40" r="17" fill="#fff" stroke="#00A6A0" strokeWidth="1.5"/>
          <text x="190" y="43" textAnchor="middle">Fokus</text>
          <circle cx="40" cy="120" r="17" fill="#fff" stroke="#00A6A0" strokeWidth="1.5"/>
          <text x="40" y="123" textAnchor="middle">Wirkung</text>
          <circle cx="200" cy="120" r="17" fill="#fff" stroke="#00A6A0" strokeWidth="1.5"/>
          <text x="200" y="123" textAnchor="middle">Respekt</text>
        </g>
        <line x1="65" y1="46" x2="102" y2="70" stroke="#00A6A0" strokeWidth="1" opacity="0.4"/>
        <line x1="175" y1="46" x2="138" y2="70" stroke="#00A6A0" strokeWidth="1" opacity="0.4"/>
        <line x1="55" y1="114" x2="102" y2="90" stroke="#00A6A0" strokeWidth="1" opacity="0.4"/>
        <line x1="185" y1="114" x2="138" y2="90" stroke="#00A6A0" strokeWidth="1" opacity="0.4"/>
      </svg>
    );
    if(kind==='canvas') return (
      <svg viewBox="0 0 240 160" className="art-svg">
        <rect width="240" height="160" fill="#0C1C36"/>
        <text x="20" y="32" fontFamily="Sora" fontSize="16" fontWeight="800" fill="#00A6A0">2031</text>
        <rect x="20" y="44" width="120" height="2" fill="#00A6A0"/>
        <rect x="20" y="56" width="80" height="3" rx="1" fill="rgba(255,255,255,.55)"/>
        <rect x="20" y="64" width="110" height="3" rx="1" fill="rgba(255,255,255,.35)"/>
        <rect x="20" y="72" width="90" height="3" rx="1" fill="rgba(255,255,255,.35)"/>
        <rect x="20" y="88" width="40" height="2" fill="#FFD166"/>
        <rect x="20" y="96" width="70" height="2" fill="rgba(255,255,255,.25)"/>
        <rect x="20" y="102" width="60" height="2" fill="rgba(255,255,255,.25)"/>
        <circle cx="184" cy="92" r="36" fill="none" stroke="#00A6A0" strokeWidth="1.5" strokeDasharray="3 4"/>
        <circle cx="184" cy="92" r="22" fill="#00A6A0" opacity=".22"/>
        <circle cx="184" cy="92" r="8" fill="#00A6A0"/>
        <rect x="20" y="122" width="60" height="2" fill="rgba(255,255,255,.25)"/>
        <rect x="20" y="130" width="90" height="2" fill="rgba(255,255,255,.25)"/>
      </svg>
    );
    return null;
  }

  window.DevonArtefakte = function Artefakte(){
    const items = C.artefakte || [];
    return (
      <section id="lieferung" className="section">
        <div className="wrap">
          <div className="section-head rv">
            <div className="eye">Eure Werkzeuge</div>
            <h2 className="h-lg">Was wir mitbringen.<br/>Was bei euch bleibt.</h2>
            <p>Vier Schlüssel-Ergebnisse, die auf eurer Reise entstehen, vom Zukunftsbild bis zur gelebten Zusammenarbeit. Sie bilden wichtige Stationen unseres Ansatzes ab.</p>
          </div>
          <div className="art-grid" data-swipe>
            {items.map((a,i)=>(
              <div key={i} className={'art-card rv rv-d'+((i%3)+1)}>
                <div className={'art-visual'+(a.labels||a.nextTabs?' art-visual--tabs':'')}><ArtefaktVisual kind={a.kind} img={a.img} imgs={a.imgs} anim={a.anim} name={a.t} labels={a.labels} nextTabs={a.nextTabs}/></div>
                <div className="art-body">
                  <div className="art-label">{a.tag}</div>
                  <h3>{a.t}</h3>
                  <p>{a.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  // ──────────────── KI-HALTUNG
  window.DevonKIHaltung = function KIHaltung(){
    const K = C.kiHaltung;
    if(!K) return null;
    return (
      <section className="section ki-haltung-section">
        <div className="wrap-narrow">
          <div className="kih rv">
            <div className="eye">Unsere Haltung</div>
            <h2 className="h-md">{K.title}</h2>
            <p className="kih-body">{K.body}</p>
          </div>
        </div>
      </section>
    );
  };

  // ──────────────── NEWSLETTER
  window.DevonNewsletter = function Newsletter(){
    const [email,setEmail] = useState('');
    const [consent,setConsent] = useState(false);
    const [done,setDone] = useState(false);
    const N = C.newsletter || {};
    const submit = (e)=>{
      e.preventDefault();
      if(!email||!consent) return;
      try { localStorage.setItem('dn_newsletter_v1', JSON.stringify({email, ts:Date.now()})); } catch(e){}
      setDone(true);
    };
    return (
      <section className="section nl-section">
        <div className="wrap">
          <div className="nl-card rv">
            <div className="nl-left">
              <div className="eye" style={{color:'var(--or)'}}>{N.eyebrow || 'Mini-Kurs · 5 Mails'}</div>
              <h2 className="h-lg">{N.title || 'In fünf Mails zur eigenen Zukunft.'}</h2>
              <p>{N.sub}</p>
              <ul className="nl-list">
                <li><span className="nl-num">01</span><span className="nl-txt">Warum Menschen ein Bild brauchen, um wirklich zu wollen</span></li>
                <li><span className="nl-num">02</span><span className="nl-txt">Die Fragen, die eure nächsten fünf Jahre entscheiden</span></li>
                <li><span className="nl-num">03</span><span className="nl-txt">Euer Tag in der Zukunft, in euren eigenen Worten</span></li>
                <li><span className="nl-num">04</span><span className="nl-txt">Wie ihr euer Team wirklich mitnehmt</span></li>
                <li><span className="nl-num">05</span><span className="nl-txt">Vom Zukunftsbild zum ersten Matchplan</span></li>
              </ul>
            </div>
            <div className="nl-right">
              {!done ? (
                <form onSubmit={submit}>
                  <label className="nl-label">E-Mail</label>
                  <input type="email" aria-label="E-Mail-Adresse für Newsletter" required placeholder="name@unternehmen.de" value={email} onChange={(e)=>setEmail(e.target.value)} className="nl-input"/>
                  <label className="nl-consent">
                    <input type="checkbox" required checked={consent} onChange={(e)=>setConsent(e.target.checked)}/>
                    <span>Ich möchte den Mini-Kurs erhalten und stimme der Verarbeitung meiner E-Mail-Adresse für diesen Zweck zu. Abmeldung jederzeit per Klick. <a href="datenschutz.html" onClick={(e)=>{e.preventDefault();const w=window.open('datenschutz.html','_blank','noopener');if(!w)window.location.href='datenschutz.html';}}>Datenschutz</a> <span className="ds-hint">(neuer Tab)</span></span>
                  </label>
                  <button type="submit" className="btn btn-primary" disabled={!email||!consent} style={{opacity:(!email||!consent)?.4:1,width:'100%',justifyContent:'center'}}>Mini-Kurs anfordern<span className="arr">→</span></button>
                  <div className="nl-meta">{N.meta || 'Double-Opt-In · hoher Mehrwert · jederzeit abbestellbar'}</div>
                </form>
              ) : (
                <div className="nl-done">
                  <div className="nl-check">
                    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <h3>Bestätigungs-Mail unterwegs.</h3>
                  <p>Wir haben dir eine Bestätigung an <strong>{email}</strong> geschickt. Klick den Link in der Mail, um zu starten.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    );
  };

  // ──────────────── ZUKUNFTSBILD-GENERATOR (4 Fragen, max 150 Wörter, Du-Form)
  window.DevonFutureVision = function FutureVision({onBook}){
    const [form,setForm] = useState({
      company:'',    // Ausgangspunkt: Wo steht ihr heute?
      friend:'',     // Was ist im vergangenen Jahr passiert?
      media:'',      // Worüber berichten die Medien?
      feeling:'',    // Wie fühlt sich dieser Moment an?
      email:'',      // Kontakt: E-Mail (Pflicht)
      name:'',       // Kontakt: Name (optional)
      org:'',        // Kontakt: Unternehmen (optional)
      topics:[],     // Schwerpunkte (Segment-Chips unter Frage 1)
    });
    const [sent,setSent] = useState(false);
    const [busy,setBusy] = useState(false);
    const [err,setErr] = useState('');
    const outRef = useRef(null);
    const btnRef = useRef(null);
    const stepRef = useRef(null);
    const firstRef = useRef(true);
    const [step,setStep] = useState(0);

    const monthsDE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    const _now = new Date();
    const nowYear = _now.getFullYear();
    const futureYear = _now.getFullYear() + 3;
    const futureLabel = monthsDE[_now.getMonth()] + ' ' + futureYear;

    const questions = [
      {key:'company', n:1, label:'Wer seid ihr, und wo steht ihr heute?',          hint:'Was euer Unternehmen ausmacht und was euch gerade beschäftigt.',           ph:'z. B. Wir sind ein Familienunternehmen, wachsen stabil, aber das nächste Kapitel ist noch unklar.'},
      {key:'friend',  n:2, label:'Was könnt ihr jetzt, was '+nowYear+' noch undenkbar war?', hint:'Woran zeigt sich, dass ihr ein anderes Unternehmen geworden seid.', ph:'z. B. Wir beliefern zwei neue Märkte, treffen Entscheidungen in Tagen statt Monaten, und Bewerber kommen von selbst.'},
      {key:'media',   n:3, label:'Worauf seid ihr besonders stolz?', hint:'Der Moment, die Entscheidung, der Schritt, der alles bewegt hat.',           ph:'z. B. Dass wir den Schritt gewagt haben, als alle zur Vorsicht rieten.'},
      {key:'feeling', n:4, label:'Wie fühlt sich ein ganz normaler Tag '+futureYear+' an?',        hint:'Ihr, euer Team, mitten in dieser Zukunft.',              ph:'z. B. Morgens Klarheit statt Hektik, ein Team, das weiß, wohin es will, und Stolz auf das, was wir gebaut haben.'},
    ];
    const flow = [
      {type:'q', qi:0},
      {type:'jump'},
      {type:'q', qi:1},
      {type:'q', qi:2},
      {type:'q', qi:3},
      {type:'contact'},
    ];
    const autoGrow = (el)=>{ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,220)+'px'; };

    const TOPICS = ['Wachstum','Nachfolge','KI','Team','Vertrieb'];
    const toggleTopic = (t)=> setForm(f=>({...f, topics: f.topics.includes(t) ? f.topics.filter(x=>x!==t) : [...f.topics, t]}));

    const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
    const canSubmit = form.company.trim() && form.friend.trim() && form.media.trim() && form.feeling.trim() && emailOk;

    // Fokussiere das Feld bei Schrittwechsel – aber nicht beim ersten Render (kein Auto-Scroll beim Laden)
    useEffect(()=>{
      if(firstRef.current){ firstRef.current=false; return; }
      const el = stepRef.current && stepRef.current.querySelector('textarea, input');
      if(el){ el.focus({preventScroll:true}); if(el.tagName==='TEXTAREA') autoGrow(el); }
    },[step]);

    // ── Direktversand-Konfiguration ──────────────────────────────────────────
    // Trage hier euren kostenlosen Web3Forms Access-Key ein (https://web3forms.com,
    // „Create Access Key" mit zukunft@devon-next.de). Sobald ein Key hinterlegt ist,
    // wird das Formular im Hintergrund direkt an euch gesendet – ohne dass sich das
    // Mailprogramm des Nutzers öffnet. Solange der Key leer ist, greift automatisch
    // die mailto-Lösung als Fallback.
    const WEB3FORMS_KEY = '';

    const buildSubject = (f)=>'Anfrage Zukunftsbild · '+(f.org.trim()||f.name.trim()||f.email.trim());
    const buildPlainBody = (f)=>
`Neue Zukunftsbild-Anfrage über die Website

1) WO STEHEN WIR HEUTE?
${f.company.trim()}

2) WAS HAT SICH VERÄNDERT? (Rückblick aus ${futureLabel})
${f.friend.trim()}

3) WORAUF SIND WIR BESONDERS STOLZ?
${f.media.trim()}

4) WIE FÜHLT SICH DAS AN?
${f.feeling.trim()}

— — — — — — — — — — — — — — — — — — — —
Kontakt
E-Mail: ${f.email.trim()}${f.name.trim()?`\nName: ${f.name.trim()}`:''}${f.org.trim()?`\nUnternehmen: ${f.org.trim()}`:''}${f.topics&&f.topics.length?`\nSchwerpunkte: ${f.topics.join(', ')}`:''}`;

    const mailtoFallback = (f)=>{
      const subj = encodeURIComponent(buildSubject(f));
      const body = encodeURIComponent(buildPlainBody(f));
      window.location.href = `mailto:zukunft@devon-next.de?subject=${subj}&body=${body}`;
    };

    const finishSent = ()=>{
      setSent(true);
      setTimeout(()=>btnRef.current?.scrollIntoView({behavior:'smooth',block:'center'}),200);
    };

    const submit = async ()=>{
      if(!canSubmit || busy) return;
      const f = form;
      setErr('');
      // Kein Key hinterlegt → mailto-Fallback (öffnet das Mailprogramm)
      if(!WEB3FORMS_KEY){
        mailtoFallback(f);
        finishSent();
        return;
      }
      // Direktversand im Hintergrund via Web3Forms
      setBusy(true);
      try {
        const res = await fetch('https://api.web3forms.com/submit', {
          method:'POST',
          headers:{'Content-Type':'application/json', Accept:'application/json'},
          body: JSON.stringify({
            access_key: WEB3FORMS_KEY,
            subject: buildSubject(f),
            from_name: f.name.trim() || f.email.trim(),
            replyto: f.email.trim(),
            'E-Mail': f.email.trim(),
            'Name': f.name.trim() || '—',
            'Unternehmen': f.org.trim() || '—',
            '1 · Wo steht ihr heute': f.company.trim(),
            '2 · Was hat sich verändert': f.friend.trim(),
            '3 · Worauf besonders stolz': f.media.trim(),
            '4 · Wie fühlt sich das an': f.feeling.trim(),
            'Schwerpunkte': (f.topics && f.topics.length) ? f.topics.join(', ') : '—',
          }),
        });
        const data = await res.json().catch(()=>({}));
        if(res.ok && data.success){
          finishSent();
        } else {
          throw new Error(data.message || 'Senden fehlgeschlagen.');
        }
      } catch(e){
        console.error('Zukunftsbild-Versand:', e);
        setErr('Das Senden hat gerade nicht geklappt. Bitte versuch es noch einmal — oder schreib uns direkt an zukunft@devon-next.de.');
      } finally {
        setBusy(false);
      }
    };

    const cur = flow[step];
    const total = flow.length;
    const pct = Math.round((step/(total-1))*100);
    const plabel = cur.type==='q' ? ('Frage '+questions[cur.qi].n+' von 4') : (cur.type==='jump' ? 'Perspektivwechsel' : 'Fast geschafft');
    const canAdv = cur.type==='q' ? !!form[questions[cur.qi].key].trim() : (cur.type==='jump' ? true : emailOk);

    return (
      <section id="zukunftsbild" className="section fv-section">
        <div className="wrap">
          <div className="fv-grid">
            <div className="fv-left rv">
              <div className="eye">Zukunftsbild-Demo · Kostenfrei</div>
              <h2 className="h-lg">Euer Zukunftsbild.<br/><span className="em">Von uns für euch gezeichnet.</span></h2>
              <p>Vier Fragen genügen. Wir erstellen daraus eine erste, emotionale Skizze eurer Zukunft und schicken sie euch innerhalb von 24 Stunden persönlich zu.</p>
              <div className="fv-sub-box"><p>Denkt größer, als ihr es im Alltag zulasst. Was wäre möglich, wenn nichts scheitern könnte?</p></div>
              <div className="fv-meta">
                <div className="fv-meta-i"><span className="d"/>Persönlich geprüft, bevor es euch erreicht</div>
                <div className="fv-meta-i"><span className="d"/>Werktags Antwort in 24 Stunden</div>
              </div>
            </div>
            <div className="fv-right rv rv-d2">
              <div className="fv-wizard">
                <div className="fv-prog">
                  <div className="fv-prog-top">
                    <span className="fv-prog-label">{plabel}</span>
                    {cur.type==='q' && <span className="fv-prog-count">{questions[cur.qi].n} / 4</span>}
                  </div>
                  <div className="fv-prog-track"><div className="fv-prog-fill" style={{width:pct+'%'}}/></div>
                </div>

                <div className="fv-stepwrap" key={step} ref={stepRef}>
                  {cur.type==='q' && (
                    <div className="fv-step fv-qstep">
                      <label><span className="fv-qn">{questions[cur.qi].n}</span>{questions[cur.qi].label}</label>
                      <div className="fv-hint">{questions[cur.qi].hint}</div>
                      <textarea rows={3} className="fv-auto" placeholder={questions[cur.qi].ph}
                        value={form[questions[cur.qi].key]}
                        onChange={(e)=>{autoGrow(e.target);setForm({...form,[questions[cur.qi].key]:e.target.value});}}
                        onKeyDown={(e)=>{ if((e.metaKey||e.ctrlKey)&&e.key==='Enter'&&canAdv){ e.preventDefault(); setStep(step+1); } }}/>
                      <div className="fv-microhint">Tipp: ein, zwei Sätze genügen.</div>
                      {cur.qi===0 && (
                        <div className="fv-topics">
                          <div className="fv-topics-label">Was beschäftigt euch gerade? <span>(optional, Mehrfachauswahl)</span></div>
                          <div className="fv-topics-chips">
                            {TOPICS.map(tp=>(
                              <button key={tp} type="button" className={'fv-chip'+(form.topics.includes(tp)?' on':'')} onClick={()=>toggleTopic(tp)} aria-pressed={form.topics.includes(tp)}>{tp}</button>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                  {cur.type==='jump' && (
                    <div className="fv-jumpstep">
                      <div className="fv-jumpstep-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h13"/><path d="M12 5l7 7-7 7"/></svg>
                      </div>
                      <p className="fv-jumpstep-text">Jetzt springt drei Jahre nach vorn. Es ist <strong>{futureLabel}</strong>. Vieles ist gelungen, mehr, als ihr heute für möglich haltet. Von hier blickt ihr zurück.</p>
                    </div>
                  )}
                  {cur.type==='contact' && (
                    <div className="fv-contactstep">
                      <div className="fv-step">
                        <label>Wohin sollen wir euer Zukunftsbild schicken?</label>
                        <input type="email" placeholder="E-Mail (Pflichtfeld)" autoComplete="email"
                          value={form.email} onChange={(e)=>setForm({...form,email:e.target.value})}/>
                      </div>
                      <div className="fv-contact-row">
                        <input type="text" placeholder="Name (optional)" autoComplete="name"
                          value={form.name} onChange={(e)=>setForm({...form,name:e.target.value})}/>
                        <input type="text" placeholder="Unternehmen (optional)" autoComplete="organization"
                          value={form.org} onChange={(e)=>setForm({...form,org:e.target.value})}/>
                      </div>
                      <div className="fv-contact-reassure">Wir schicken euch euer persönliches Zukunftsbild, werktags innerhalb von 24 Stunden.</div>
                    </div>
                  )}
                </div>

                {!sent && (
                  <div className="fv-nav">
                    {step>0 && <button type="button" className="fv-back" onClick={()=>setStep(step-1)}><span className="arr-l" aria-hidden="true">←</span>Zurück</button>}
                    <div className="fv-nav-spacer"/>
                    {cur.type!=='contact' ? (
                      <button type="button" className="btn btn-primary" disabled={!canAdv} style={{opacity:canAdv?1:.4}} onClick={()=>setStep(step+1)}>
                        {cur.type==='jump' ? 'Los geht\u2019s' : 'Weiter'}<span className="arr">→</span>
                      </button>
                    ) : (
                      <button ref={btnRef} type="button" className="btn btn-primary" disabled={!canSubmit||busy} style={{opacity:(!canSubmit||busy)?.5:1}} onClick={submit}>
                        {busy ? <><span className="fv-spin"/>Wird gesendet …</> : <>Mein Zukunftsbild anfordern<span className="arr">→</span></>}
                      </button>
                    )}
                  </div>
                )}

                {err && <div className="fv-err">{err}</div>}

                {sent && (
                  <div className="fv-confirm" role="status">
                    <span className="fv-confirm-icon" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                    </span>
                    <span>{WEB3FORMS_KEY
                      ? 'Danke! Eure Anfrage ist bei uns eingegangen, wir melden uns innerhalb von 24 Stunden persönlich bei euch.'
                      : 'Danke! Eure Anfrage ist vorbereitet. Schickt die geöffnete E-Mail einfach ab, wir melden uns innerhalb von 24 Stunden persönlich bei euch.'}</span>
                  </div>
                )}

                {cur.type==='contact' && (
                  <div className="fv-disclaimer">Mit dem Absenden stimmt ihr zu, dass wir eure Angaben zur Erstellung eures Zukunftsbildes verarbeiten und euch dazu kontaktieren. Mehr dazu in der <a href="datenschutz.html" onClick={(e)=>{e.preventDefault();const w=window.open('datenschutz.html','_blank','noopener');if(!w)window.location.href='datenschutz.html';}}>Datenschutzerklärung</a> <span className="ds-hint">(neuer Tab)</span>.</div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };

  // ──────────────── DEVON-NARRATIV (aufklappbare Box)
  window.DevonNarrative = function DevonNarrative(props){
    const [open, setOpen] = useState(false);
    return (
      <section id="warum" className={"section devon-section"+(open?' is-open':'')}>
        <div className="wrap-narrow">
          <div className="devon-block rv">
            <button
              className={'devon-toggle'+(open?' open':'')}
              onClick={()=>setOpen(o=>{const n=!o; if(n && props && props.onOpen) props.onOpen(); return n;})}
              aria-expanded={open}
            >
              <div className="devon-toggle-text">
                <div className="eye">Warum devon?</div>
                <h2 className="h-md">Der Landgang des Unternehmens.</h2>
              </div>
              <div className="devon-toggle-icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M5 8 L11 14 L17 8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            </button>
            <div className={'devon-content'+(open?' open':'')} aria-hidden={!open}>
              <div className="devon-content-inner">
                <p>Im Devon, vor 360 bis 420 Millionen Jahren, kamen die ersten Lebewesen aus dem Wasser an Land. Sie passten sich an, veränderten sich und brachten die Energie auf, aus kargem Terrain ein ganzes Ökosystem entstehen zu lassen. Flora und Fauna, wie wir sie heute kennen.</p>
                <p>Genau das machen wir. Wir finden einen Status quo, verändern ihn und hinterlassen eine bessere Zukunft, die sich aus eigener Kraft weiterentwickelt. Und dann ziehen wir uns zurück, so wie das Leben sich damals seinen eigenen Weg gebahnt hat.</p>
                <p className="devon-verbund">devon steht für diesen Aufbruch: im Sport mit <strong>devonSPORT</strong> und in der Wirtschaft mit <strong>devonNEXT</strong>.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };

})();
