// ─── Geführte Tour durch die wesentlichen Funktionen ─────────

const TOUR_STEPS = [
  { view:'home',     ic:'home',       title:'Willkommen zur Tour', body:'In wenigen Schritten zeigen wir den kompletten Vertriebsablauf — vom Lead bis zum Dashboard. Mit „Weiter" geht es los; jeder Schritt öffnet den passenden Bereich.' },
  { view:'leads',    ic:'leads',      title:'1 · Lead anlegen', body:'Eingehende Anfragen landen hier. Über „Neuer Lead" erfassen Sie Firma, Kontakt, Quelle und Score. Leads aus Messe (snapADDY) oder Web-Tracking (Salesviewer) kommen automatisch herein.' },
  { view:'leads',    ic:'leads',      title:'2 · Qualifizieren & konvertieren', body:'Vielversprechende Leads markieren Sie als „Qualifiziert" und konvertieren sie per Klick in einen Account + Opportunity (+ Kontakt) — der Vorgang wandert in die Pipeline.' },
  { view:'accounts', ic:'accounts',   title:'3 · Accounts & Kontakte', body:'Kundenorganisationen mit Kontakten, Konzern-/Werkshierarchie (konsolidierte Pipeline) und eingebundenen SAP-Stammdaten (Debitor, Umsatz, Liefersperre). Eine Zeile öffnet die 360°-Ansicht.' },
  { view:'opps',     ic:'opps',       title:'4 · Opportunities & Pipeline', body:'Die Pipeline als Liste oder als Drag-&-Drop-Board. Stage direkt ändern, „Anfrage bewerten" ermittelt die Erfolgswahrscheinlichkeit, „Verloren melden" speist die Lose-Analyse.' },
  { view:'opps',     ic:'clip',       title:'5 · Mails & Dateien anhängen', body:'Ziehen Sie eine E-Mail aus Outlook oder eine Datei (z. B. eine Zeichnung) per Drag-&-Drop direkt auf eine Lead- oder Opportunity-Zeile. Ein Dialog bestätigt die Zuordnung — der Anhang erscheint chronologisch im Datensatz und in der Customer Journey.' },
  { view:'quotes',   ic:'quotes',     title:'6 · Angebote', body:'Angebote mit Positionen aus dem Produktkatalog, automatischer Margenberechnung und Freigabe-Workflow: niedrige Marge oder hoher Rabatt brauchen die Vertriebsleitung. Versand erzeugt automatisch eine Nachfass-Aufgabe.' },
  { view:'activities', ic:'activities', title:'7 · Aktivitäten & Kalender', body:'Anrufe, Termine, E-Mails und Aufgaben — als Liste oder im Outlook-artigen Wochenkalender mit Drag-&-Drop. Auch KVP-Fristen erscheinen hier.' },
  { view:'winloss',  ic:'target',     title:'8 · Win/Loss & Wettbewerb', body:'Warum gewinnen oder verlieren wir? Verlustgründe, Wettbewerber-Bilanz und abgeleitete KVP-Maßnahmen mit Frist — Ihre kontinuierliche Verbesserung.' },
  { view:'integrations', ic:'plug',   title:'9 · SAP-Integration', body:'Das CRM nutzt die SAP-Daten, ohne sie zu ersetzen: Connector-Status und der Durchstich Anfrage → HK-Schätzung → SAP. „Anfrage simulieren" legt einen SAP-Vorgang an.' },
  { view:'analytics', ic:'analytics', title:'10 · Eigenes Dashboard', body:'Reporting im Qlik-Stil: Widget (Balken, Donut, Zeitachse, Pivot-Tabelle) vom Rand ziehen, dann Quelle, Dimension und Kennzahl wählen — alles live aus den Daten.' },
  { view:'journey',  ic:'route',      title:'11 · Customer Journey', body:'Alle Aktivitäten, Meilensteine, Angebote, Anhänge und Kommentare auf einem Zeitstrahl — filterbar pro Kunde, Lead und Owner.' },
  { view:'journey',  ic:'comment',    title:'12 · kiki-Kommentare', body:'Rechtsklick auf eine beliebige Zeile oder einen Eintrag öffnet das kiki-Kommentarmenü — mit Kategorien und Spracheingabe. Die Kommentare erscheinen auch hier im Zeitstrahl.' },
  { view:'home',     ic:'home',       title:'13 · Rollen & Abschluss', body:'Oben schalten Sie die Ansicht zwischen Vertriebsleitung (sieht alles) und einzelnen Mitarbeitern um. Das war die Tour — viel Erfolg beim Ausprobieren!' }
];

function Tour({ open, onClose, go }) {
  const [i, setI] = useS(0);
  const [pos, setPos] = useS(null); // {x,y} once dragged
  const drag = React.useRef(null);
  useE(() => { if (open) { setI(0); setPos(null); } }, [open]);
  useE(() => { if (open && TOUR_STEPS[i]) go(TOUR_STEPS[i].view); }, [i, open]);
  useE(() => {
    const mv = (e) => { if (!drag.current) return; setPos({ x: e.clientX - drag.current.dx, y: e.clientY - drag.current.dy }); };
    const up = () => { drag.current = null; document.body.style.userSelect = ''; };
    window.addEventListener('mousemove', mv); window.addEventListener('mouseup', up);
    return () => { window.removeEventListener('mousemove', mv); window.removeEventListener('mouseup', up); };
  }, []);
  if (!open) return null;
  const s = TOUR_STEPS[i]; const last = TOUR_STEPS.length - 1;
  const startDrag = (e) => { const c = e.currentTarget.closest('.tour-card').getBoundingClientRect(); drag.current = { dx: e.clientX - c.left, dy: e.clientY - c.top }; if (pos == null) setPos({ x: c.left, y: c.top }); document.body.style.userSelect = 'none'; };
  const style = pos ? { position:'fixed', left: pos.x, top: pos.y, bottom:'auto' } : null;
  return (
    <div className={"tour-wrap" + (pos ? ' dragged' : '')}>
      <div className="tour-card" style={style}>
        <button className="tour-x" onClick={onClose} title="Tour beenden">✕</button>
        <div className="tour-hd" onMouseDown={startDrag} title="Zum Verschieben ziehen"><span className="tour-grip">☰</span><span className="tour-ic">{Icons[s.ic]}</span><span className="tour-step-n">Schritt {i + 1} / {TOUR_STEPS.length}</span></div>
        <h3>{s.title}</h3>
        <p>{s.body}</p>
        <div className="tour-progress"><span style={{ width: ((i + 1) / TOUR_STEPS.length * 100) + '%' }}></span></div>
        <div className="tour-actions">
          <button className="btn ghost" onClick={onClose}>Beenden</button>
          <span className="tour-right">
            {i > 0 && <button className="btn ghost" onClick={() => setI(i - 1)}>Zurück</button>}
            {i < last ? <button className="btn" onClick={() => setI(i + 1)}>Weiter</button> : <button className="btn" onClick={onClose}>Fertig ✓</button>}
          </span>
        </div>
      </div>
    </div>
  );
}