// VOELKER.AI — Part 2: Use Case, Stats, Marquee, Process, Keynotes

const { useState: useState2 } = React;

/* ---------- USE CASE SPOTLIGHT ---------- */
function UseCase() {
  return (
    <section className="section container" id="usecase">
      <div className="section-head">
        <span className="eyebrow">Case Study</span>
        <h2 className="h2">
          Wie ein Reisebüro <span className="italic pink">3,5h pro Tag</span> zurückbekommen hat.
        </h2>
      </div>

      <div className="usecase">
        <div>
          <div className="label">// WhatsApp + Superchat-Bot</div>
          <h3>Vom überlasteten Posteingang zum 24/7-Service-Channel.</h3>
          <p>
            Ein DACH-Reisebüro hat 200+ WhatsApp-Anfragen pro Tag. Wiederkehrend:
            Buchungsstatus, Stornofristen, "wann fliegt mein Flug?".
            Wir haben einen Bot gebaut, der 78% davon autonom klärt —
            und den Rest sauber ans Team übergibt.
          </p>
          <p>
            Live in 21 Tagen. Drei Mitarbeiter haben jetzt Zeit für das,
            wofür Kunden eigentlich zahlen: persönliche Beratung.
          </p>

          <div className="kpis">
            <div className="kpi">
              <div className="val"><span className="pink">78</span><sup>%</sup></div>
              <div className="lbl">Auto-Beantwortet</div>
            </div>
            <div className="kpi">
              <div className="val">3,5<span className="pink mono">h</span></div>
              <div className="lbl">Zeit pro Tag</div>
            </div>
            <div className="kpi">
              <div className="val">21<span className="pink mono">d</span></div>
              <div className="lbl">Bis Go-Live</div>
            </div>
          </div>
        </div>

        <div className="phone">
          <div className="screen">
            <div className="status">
              <span>9:41</span>
              <span>WhatsApp Business</span>
              <span>●●●</span>
            </div>
            <div className="head">
              <div className="av">T</div>
              <div style={{flex: 1}}>
                <div className="who">Travel Concierge</div>
                <div className="stat">● online · KI antwortet sofort</div>
              </div>
            </div>
            <div className="bubble them">Hallo, wann startet mein Flug nach Lissabon am 24.06.?</div>
            <div className="bubble us">
              Hallo Frau Krüger 👋 Ihr Flug TP577 startet am 24.06. um 07:55 in MUC.
              Check-in ist bereits offen. Soll ich Ihnen die Bordkarte schicken?
            </div>
            <div className="bubble them">Ja gern. Und Gepäck?</div>
            <div className="bubble us">
              23kg sind inklusive. Hier Ihre Bordkarte als PDF →
            </div>
            <div className="typing">— Antwort generiert in 0,8s</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- STATS ---------- */
function Stats() {
  return (
    <section className="section container">
      <div className="stats-grid">
        <div className="stat">
          <div className="val">30<sup>+</sup></div>
          <div className="lbl">Keynotes & Vorträge</div>
          <div className="desc">Auf Bühnen in DACH und international — vor Beratern, Vorständen und Branchenpublikum.</div>
        </div>
        <div className="stat">
          <div className="val">1.000<sup>+</sup></div>
          <div className="lbl">Geschulte Teilnehmer</div>
          <div className="desc">Berater, Makler, Führungskräfte und ganze Teams im KI-Werkzeugkasten trainiert.</div>
        </div>
        <div className="stat">
          <div className="val">25<sup>J</sup></div>
          <div className="lbl">Finanzdienstleistung</div>
          <div className="desc">Branchenerfahrung als Berater und Führungskraft — KI trifft auf echtes Verständnis fürs Geschäft.</div>
        </div>
        <div className="stat">
          <div className="val">21<sup>d</sup></div>
          <div className="lbl">Time-to-Production</div>
          <div className="desc">Vom Erstgespräch bis zum laufenden System. Schnelle Schleife, sichtbare Wirkung.</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- MARQUEE ---------- */
function Marquee() {
  const words = [
    "KI-CHATBOTS",
    "PROZESSE",
    "AUTOMATISIERUNG",
    "TRAININGS",
    "KEYNOTES",
    "WHATSAPP",
    "TELEFONIE",
    "DSGVO",
    "FINANZ-KI",
  ];
  const loop = [...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

/* ---------- PROCESS ---------- */
function Process() {
  const steps = [
    {
      num: "01",
      title: "Erstgespräch",
      desc: "20 Minuten. Wir schauen, wo Ihr Tag heute verloren geht. Nichts vorbereiten — einfach mitbringen, was nervt.",
      detail: "Sie bekommen am Ende eine ehrliche Einschätzung: 'KI lohnt sich hier' oder 'lieber nicht'. Kostenfrei, ohne Pitch.",
      timing: "20 MIN · KOSTENFREI",
    },
    {
      num: "02",
      title: "KI-Audit",
      desc: "Wir analysieren 1-2 Wochen lang die Kommunikations- und Prozesslandschaft. Konkret, nicht abstrakt.",
      detail: "Sie erhalten eine priorisierte Use-Case-Roadmap mit ROI-Schätzung pro Idee. Keine PowerPoint-Schinken.",
      timing: "1-2 WOCHEN",
    },
    {
      num: "03",
      title: "Pilot bauen",
      desc: "Wir starten mit dem Use-Case, der am schnellsten weh tut — und am schnellsten Erfolge zeigt.",
      detail: "Iterativ, sichtbar, in Ihrer Umgebung. Sie sehen jeden Freitag, was funktioniert und was nicht.",
      timing: "21-45 TAGE",
    },
    {
      num: "04",
      title: "Rollout & Training",
      desc: "TÜV-zertifiziertes Training für Ihr Team. Damit das System nicht in der Schublade verschwindet.",
      detail: "Inkl. Prompt-Bibliothek, Compliance-Leitfaden und einer 90-Tage-Begleitung nach Go-Live.",
      timing: "FORTLAUFEND",
    },
  ];

  return (
    <section className="section container" id="prozess">
      <div className="section-head">
        <span className="eyebrow">Prozess</span>
        <h2 className="h2">
          Vier Schritte. <span className="italic">Keine</span> <span className="pink">Strategiefolien.</span>
        </h2>
      </div>

      <div className="process-list">
        {steps.map((s) => (
          <div className="step" key={s.num}>
            <div className="num">{s.num}</div>
            <h3>{s.title}</h3>
            <div>
              <p>{s.desc}</p>
              <p style={{marginTop: 12, fontSize: 14, color: 'var(--fg-dim)'}}>{s.detail}</p>
            </div>
            <div><span className="timing">{s.timing}</span></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- KEYNOTES ---------- */
function Keynotes() {
  const [open, setOpen] = useState2(0);
  const talks = [
    {
      title: "KI ist kein Werkzeug. Sie ist ein Kollege.",
      duration: "45 MIN · KEYNOTE",
      body: "Warum die größten Sprünge nicht in der Tech-Abteilung passieren — sondern dort, wo der Berater morgens den Schreibtisch ausräumt. Mit Live-Demos und 5 Use-Cases, die Sie nächste Woche umsetzen können.",
    },
    {
      title: "KI im Unternehmen: 5 Use-Cases, die sofort wirken.",
      duration: "60 MIN · FACHVORTRAG",
      body: "Von der ersten Idee zum laufenden System: konkrete Anwendungsfälle aus Vertrieb, Service und Backoffice — mit Live-Demos und einem Fahrplan, den Sie nächste Woche umsetzen können. Ideal für Geschäftsführer und Teams, die KI nicht nur verstehen, sondern nutzen wollen.",
    },
    {
      title: "Vom Lead zum Abschluss — automatisiert.",
      duration: "30 MIN · WORKSHOP",
      body: "Live-Aufbau einer kompletten Kunden-Pipeline: WhatsApp-Bot → CRM → Termin → Abschluss. Teilnehmer:innen gehen mit einer lauffähigen Demo nach Hause.",
    },
    {
      title: "KI-Training für Ihr Team — online oder inhouse.",
      duration: "AB ½ TAG",
      body: "Hands-on. Prompt-Bibliothek aufbauen, ChatGPT/Claude für Beratung scharf machen, kritisches Hinterfragen einüben. Flexibel ab einem halben Tag — online oder bei Ihnen vor Ort. Mit TÜV-Zertifikat für jeden Teilnehmer.",
    },
  ];

  return (
    <section className="section container" id="keynote">
      <div className="section-head">
        <span className="eyebrow">Auf der Bühne</span>
        <h2 className="h2">
          Vorträge, die <span className="italic pink">hängenbleiben.</span>
        </h2>
      </div>

      <div className="keynote-wrap">
        <div className="stage">
          <img className="stage-photo" src="assets/stage-close.png" alt="Thomas Völker live auf der Bühne" />
          <div className="wash"></div>
          <div className="veil"></div>
          <div className="lines"></div>
          <div className="spot"></div>
          <div className="caption">LIVE · 1.000+ TEILNEHMER</div>
        </div>

        <div className="keynote-list">
          {talks.map((t, i) => (
            <div key={i} className={"keynote-item " + (i === open ? "open" : "")} onClick={() => setOpen(i)}>
              <div className="top">
                <h4>{t.title}</h4>
                <span className="dur">{t.duration}</span>
              </div>
              {i === open && <div className="body">{t.body}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SHOWCASE (KI-VIDEO EYECATCHER) ---------- */
function Showcase() {
  const ref = React.useRef(null);
  const [muted, setMuted] = useState2(true);
  function toggleSound() {
    const v = ref.current;
    if (!v) return;
    v.muted = !v.muted;
    if (!v.muted && v.paused) v.play();
    setMuted(v.muted);
  }
  return (
    <section className="section container" id="showcase">
      <div className="section-head">
        <span className="eyebrow">Spielerei mit Substanz</span>
        <h2 className="h2">
          Das hier ist <span className="italic pink">komplett KI-generiert.</span>
        </h2>
      </div>

      <div className="showcase">
        <div className="showcase-video">
          <video
            ref={ref}
            src="assets/ki-video.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="metadata"
          ></video>
          <button className="sound-btn" onClick={toggleSound} aria-label={muted ? "Ton an" : "Ton aus"}>
            {muted ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 6 9H2v6h4l5 4V5Z"></path><line x1="22" y1="9" x2="16" y2="15"></line><line x1="16" y1="9" x2="22" y2="15"></line></svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 6 9H2v6h4l5 4V5Z"></path><path d="M15.5 8.5a5 5 0 0 1 0 7"></path><path d="M18.5 5.5a9 9 0 0 1 0 13"></path></svg>
            )}
            <span>{muted ? "Ton an" : "Ton aus"}</span>
          </button>
          <span className="showcase-badge">// KI-Video · 100% synthetisch</span>
        </div>

        <div className="showcase-side">
          <p>
            Kein Filmteam, keine Kamera, kein Schnittplatz — nur ein Prompt.
            Was vor zwei Jahren ein Werbebudget gekostet hätte, entsteht heute
            in Minuten.
          </p>
          <p>
            Genau diese Technologie zeige ich in Keynotes und Trainings:
            <strong> nicht als Zauberei, sondern als Werkzeug</strong>, das Sie
            für Social-Content, Erklärvideos und Kampagnen einsetzen können.
          </p>
          <a href="#kontakt" className="btn btn-ghost" style={{marginTop: 8}}>
            Mehr dazu im Gespräch <Icon.Arrow />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UseCase, Stats, Marquee, Process, Keynotes, Showcase });