{q.question}

{q.placeholder &&

{q.placeholder}

}

{ setDraft(e.target.value); e.target.style.height='auto'; e.target.style.height = Math.min(e.target.scrollHeight, 280)+'px'; }}
          onKeyDown={handleKey}
          rows={3}
        />
        <div className="onb-helper">
          <div className="onb-helper-needs">
            <span style={{ color:'var(--text-tertiary)' }}>💡 Bunu</span>
            {q.needs.slice(0, 3).map(n => <span key={n} className="onb-need-pill">{AGENT_LBL[n] || n}</span>)}
            {q.needs.length > 3 && <span className="onb-need-pill">+{q.needs.length - 3}</span>}
            <span style={{ color:'var(--text-tertiary)' }}>bekliyor.</span>
          </div>
          <div className="onb-helper-tip">Bilmiyorsanız <kbd style={{fontFamily:'inherit',padding:'1px 5px',background:'var(--bg-elevated)',borderRadius:4,border:'1px solid var(--separator)',fontSize:11}}>.</kbd></div>
        </div>
      </div>
      <div className="onb-footer">
        <button className="onb-btn-ghost" onClick={onBack} disabled={idx === 0} style={{ opacity: idx === 0 ? 0.4 : 1 }}>
          <Icon name="chevron" size={14} style={{ transform:'rotate(180deg)' }}/> Geri
        </button>
        <div className="onb-counter">Soru {idx + 1}/{total}</div>
        <button className="onb-btn-primary" onClick={onSubmit} disabled={!canSubmit}>Devam <Icon name="chevron" size={14}/></button>
      </div>
      <div className="onb-kbd-hint" style={{ textAlign:'center' }}><kbd>⌘</kbd>+<kbd>Enter</kbd> ile gönder</div>
    </div>
  );
};

const Complete = ({ stats, onEnter }) => (
  <div className="onb-card">
    <div className="onb-particles">
      {Array.from({ length: 5 }).map((_, i) => (
        <span key={i} className="onb-particle" style={{ left: `${15 + i*18}%`, animationDelay: `${i * 0.8}s`, background: ['#C8102E','#FF9F0A','#FFD60A','#FF4D6D','#C8102E'][i] }}/>
      ))}
    </div>
    <ProgressBar answered={40}/>
    <div className="onb-stagger" style={{ textAlign:'center', position:'relative' }}>
      <div><span className="onb-phase-icon" style={{ fontSize: 56 }}>✨</span></div>
      <h1 className="onb-display" style={{ fontSize: 48 }}>Tebrikler, Neşet Bey.</h1>
      <p className="onb-lead" style={{ margin:'0 auto', fontSize: 19, maxWidth: 520, color:'var(--text-primary)' }}>Ekibiniz artık sizi tanıyor.</p>
      <div className="onb-stats">
        <div className="onb-stats-cell">
          <div className="onb-stats-num">{stats.answered}</div>
          <div className="onb-stats-lbl">Cevaplandı</div>
        </div>
        <div className="onb-stats-cell">
          <div className="onb-stats-num">{stats.unknown}</div>
          <div className="onb-stats-lbl">Araştırılacak</div>
        </div>
        <div className="onb-stats-cell">
          <div className="onb-stats-num">{stats.minutes}<span style={{ fontSize: 18, fontWeight: 500, color:'var(--text-secondary)', marginLeft: 2 }}>dk</span></div>
          <div className="onb-stats-lbl">Süre</div>
        </div>
        <div className="onb-stats-foot">Bundan sonraki tüm tavsiye sizin gerçeklerinize dayanıyor.</div>
      </div>
      <p className="onb-lead" style={{ margin:'0 auto', maxWidth: 520, fontSize: 14 }}>Şu an arka planda CEO + CSO + CFO sizin cevaplarınızdan İlk 90-Gün Plan Taslağı'nı hazırlıyor. Birkaç dakika içinde Ana Sayfa'da sizi bekliyor olacak.</p>
      <div>
        <button className="onb-btn-primary" onClick={onEnter}>Cockpit'e gir <Icon name="chevron" size={14}/></button>
      </div>
    </div>
  </div>
);

const OnboardingWizard = ({ onComplete }) => {
  const [phase, setPhase] = React.useState(ONB_PHASES.LOADING);
  const [questions, setQuestions] = React.useState([]);
  const [idx, setIdx] = React.useState(0);
  const [drafts, setDrafts] = React.useState({});
  const [answered, setAnswered] = React.useState(0);
  const [unknown, setUnknown] = React.useState(0);
  const [saveVisible, setSaveVisible] = React.useState(false);
  const [dir, setDir] = React.useState('forward');
  const [transFrom, setTransFrom] = React.useState(null);
  const [showReturning, setShowReturning] = React.useState(false);
  const startedAt = React.useRef(Date.now());

// Mount: gerçek backend state'inden initial values çek
  React.useEffect(() => {
    (async () => {
      try {
        const [qs, state] = await Promise.all([
          window.KW.getOnboardingQuestions(),
          window.KW.getOnboardingState(),
        ]);
        setQuestions(qs);
        setAnswered(state.answered || 0);
        setUnknown(state.unknown || 0);

// Pre-fill drafts from existing answers
        const initialDrafts = {};
        for (const q of qs) {
          if (q.answer && q.answer.trim()) initialDrafts[q.id] = q.answer;
        }
        setDrafts(initialDrafts);

if (state.isComplete) {
          // Onboarding zaten bitmiş — direkt cockpit'e
          if (onComplete) onComplete();
          return;
        }

// Returning user (önceden cevap vermiş ama bitirmemiş)
        const isReturning = (state.answered + state.unknown) > 0;
        if (isReturning) {
          // İlk pending soruya jump
          const firstPendingIdx = qs.findIndex(q => q.status === 'pending');
          setIdx(firstPendingIdx >= 0 ? firstPendingIdx : 0);
          setPhase(ONB_PHASES.QUESTIONS);
          setShowReturning(true);
          setTimeout(() => setShowReturning(false), 4000);
        } else {
          // Yeni kullanıcı → welcome
          setPhase(ONB_PHASES.WELCOME);
        }
      } catch (err) {
        console.error('[onboarding] mount error:', err);
        setPhase(ONB_PHASES.WELCOME);
      }
    })();
  }, []);

const flashSaved = () => {
    setSaveVisible(true);
    setTimeout(() => setSaveVisible(false), 1500);
  };

const submitAnswer = async () => {
    const q = questions[idx];
    const text = (drafts[q.id] || '').trim();
    if (!text) return;
    try {
      const r = await window.KW.answerOnboarding(q.id, text);
      // Backend'den gelen authoritative state ile sync (local counter'a güvenme)
      if (r.state) {
        setAnswered(r.state.answered);
        setUnknown(r.state.unknown);
      }
      // Local question status'ünü de update et (Welcome'a dönmemek için)
      setQuestions(qs => qs.map(qq => qq.id === q.id ? { ...qq, answer: text, status: r.status } : qq));
      flashSaved();

// Phase transitions on q10 → q11 and q25 → q26 (sadece daha önce gösterilmediyse)
      if (q.number === 10 && (r.state?.answered + r.state?.unknown) === 10) {
        setTransFrom('P0');
        setPhase(ONB_PHASES.PHASE_TRANS);
        return;
      }
      if (q.number === 25 && (r.state?.answered + r.state?.unknown) === 25) {
        setTransFrom('P1');
        setPhase(ONB_PHASES.PHASE_TRANS);
        return;
      }

// Complete (backend authoritative)
      if (r.state?.isComplete) {
        setPhase(ONB_PHASES.COMPLETE);
        return;
      }

// Sıradaki pending soruya git (eğer bu re-edit ise pending kalmamış olabilir → sıradaki indeks)
      const nextPendingIdx = questions.findIndex((qq, i) => i > idx && qq.status === 'pending');
      const nextIdx = nextPendingIdx >= 0 ? nextPendingIdx : Math.min(idx + 1, questions.length - 1);
      setDir('forward');
      setIdx(nextIdx);
    } catch (err) {
      console.error('[onboarding] submit error:', err);
      alert('Cevap kaydedilirken bir sorun oldu: ' + err.message);
    }
  };

const goBack = () => {
    if (idx === 0) return;
    setDir('back');
    setIdx(i => i - 1);
  };

const continueAfterTransition = () => {
    setDir('forward');
    setIdx(i => i + 1);
    setPhase(ONB_PHASES.QUESTIONS);
  };

// Global keyboard
  React.useEffect(() => {
    const onKey = (e) => {
      if (phase === ONB_PHASES.WELCOME && e.key === 'Enter') {
        e.preventDefault();
        setPhase(ONB_PHASES.QUESTIONS);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [phase]);

const totalDone = answered + unknown;
  const stats = {
    answered,
    unknown,
    minutes: Math.max(1, Math.round((Date.now() - startedAt.current) / 60000))
  };

const currentQ = questions[idx];

// Phase değiştiğinde overlay'i en üste scroll yap — uzun kart üstten kesilmesin
  const overlayRef = React.useRef(null);
  React.useLayoutEffect(() => {
    if (overlayRef.current) {
      overlayRef.current.scrollTop = 0;
    }
  }, [phase, idx]);

return (
    <div className="onb-overlay" ref={overlayRef}>
      {showReturning && <div className="onb-returning">Önceki oturumdan devam ediyorsunuz · Soru {idx + 1}</div>}
      <SaveIndicator visible={saveVisible}/>

{phase === ONB_PHASES.LOADING && (
        <div className="onb-card" style={{ padding: 64, textAlign: 'center', color: 'var(--text-secondary)' }}>
          Hazırlanıyor…
        </div>
      )}

{phase === ONB_PHASES.WELCOME && (
        <Welcome
          onStart={() => setPhase(ONB_PHASES.QUESTIONS)}
          onSkip={() => {
            try { (window.KW_STAGE || localStorage).setItem('kw_onboarding_skipped', 'true'); } catch {}
            if (onComplete) onComplete();
          }}
        />
      )}

{phase === ONB_PHASES.QUESTIONS && currentQ && (
        <Question
          key={currentQ.id}
          q={currentQ}
          idx={idx}
          total={questions.length}
          draft={drafts[currentQ.id] || ''}
          setDraft={(v) => setDrafts(d => ({ ...d, [currentQ.id]: v }))}
          answered={totalDone}
          onSubmit={submitAnswer}
          onBack={goBack}
          dir={dir}
        />
      )}

{phase === ONB_PHASES.QUESTIONS && !currentQ && (
        <div className="onb-card" style={{ padding: 48, textAlign: 'center' }}>
          <div style={{ fontSize: 36, marginBottom: 12 }}>⚠️</div>
          <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.015em' }}>
            Sorular yüklenemedi
          </h3>
          <p style={{ fontSize: 13.5, color: 'var(--text-secondary)', marginBottom: 20, lineHeight: 1.55 }}>
            Backend'le iletişim kurulamadı ya da sorular boş geldi. Sayfayı yenileyip tekrar deneyin.
          </p>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
            <button className="onb-btn-primary" onClick={() => window.location.reload()}>Sayfayı yenile</button>
            <button
              className="onb-btn-ghost"
              onClick={() => {
                try { (window.KW_STAGE || localStorage).setItem('kw_onboarding_skipped', 'true'); } catch {}
                if (onComplete) onComplete();
              }}
            >Şimdilik geç</button>
          </div>
        </div>
      )}

{phase === ONB_PHASES.PHASE_TRANS && (
        <PhaseTransition fromPhase={transFrom} answered={totalDone} onContinue={continueAfterTransition}/>
      )}

{phase === ONB_PHASES.COMPLETE && <Complete stats={stats} onEnter={onComplete || (() => {})}/>}

<OnboardingDevSkip onSkipAll={() => {
        try {
          const s = window.KW_STAGE || sessionStorage;
          s.setItem('kw_onboarding_skipped', 'true');
          s.setItem('kw_onboarding_done', 'true');
        } catch {}
        if (onComplete) onComplete();
      }}/>
    </div>
  );
};

// ─── DEV Skip — onboarding'i hızla geç (Fly preview testi için) ─────
// Sadece ?dev=1 ile gelen tab'da görünür. localStorage'a YAZMAZ — Babam'ın normal link'i temiz kalır.
const OnboardingDevSkip = ({ onSkipAll }) => {
  const isDev = (() => {
    try {
      // window.KW_IS_DEV global'i app.jsx'te set edildi
      if (window.KW_IS_DEV === true) return true;
      if (typeof location !== 'undefined' && new URLSearchParams(location.search).has('dev')) {
        sessionStorage.setItem('kw_dev_mode', '1');
        return true;
      }
    } catch {}
    return false;
  })();
  if (!isDev) return null;
  return (
    <div className="tutorial-dev-toolbar">
      <span className="label">DEV</span>
      <button className="tutorial-dev-btn danger" onClick={onSkipAll} title="Onboarding'i atla, direkt Cockpit'e">
        Onboarding atla ⤳
      </button>
    </div>
  );
};

window.OnboardingWizard = OnboardingWizard;

Ekibinizle ilk tanışma.

{q.question}