// VOELKER.AI — Reusable Components
// Exported via window.* at the bottom so other Babel scripts can use them.

const { useState, useEffect, useRef } = React;

/* ---------- ICONS ---------- */
const Icon = {
  Arrow: () => (
    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M7 17 17 7" />
      <path d="M9 7h8v8" />
    </svg>
  ),
  Check: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M5 13l4 4L19 7" />
    </svg>
  ),
  Mail: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 7 9-7" />
    </svg>
  ),
  Phone: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12 12 0 0 0 .66 2.81 2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12 12 0 0 0 2.81.66A2 2 0 0 1 22 16.92Z" />
    </svg>
  ),
  Map: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  Cal: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <path d="M16 2v4M8 2v4M3 10h18" />
    </svg>
  ),
  Bot: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="8" width="18" height="12" rx="2" />
      <path d="M12 4v4M8 14h.01M16 14h.01M9 18h6" />
    </svg>
  ),
  Flow: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <circle cx="6" cy="6" r="3" />
      <circle cx="18" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <circle cx="18" cy="18" r="3" />
      <path d="M9 6h6M6 9v6M18 9v6M9 18h6" />
    </svg>
  ),
  Cert: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <circle cx="12" cy="9" r="6" />
      <path d="m8 14-2 7 6-3 6 3-2-7" />
    </svg>
  ),
  Send: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="m22 2-11 11" />
      <path d="m22 2-7 20-4-9-9-4 20-7Z" />
    </svg>
  ),
  Tuv: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="m9 12 2 2 4-4" />
      <path d="M21 12c-.55 0-1 .45-1 1 0 4.41-3.59 8-8 8s-8-3.59-8-8 3.59-8 8-8c1.31 0 2.55.32 3.65.89.45.24 1.01.07 1.25-.38.23-.45.06-1.01-.39-1.25C15.18 3.41 13.64 3 12 3 7.03 3 3 7.03 3 12s4.03 9 9 9 9-4.03 9-9c0-.55-.45-1-1-1Z" />
    </svg>
  ),
};

/* ---------- NAV ---------- */
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-brand" aria-label="Thomas Völker">
          <img src="assets/logo.png" alt="" />
          <span>Thomas<span className="last"> Völker</span></span>
        </a>
        <div className="nav-links">
          <a href="#expertise">Expertise</a>
          <a href="#leistungen">Leistungen</a>
          <a href="#usecase">Cases</a>
          <a href="#keynote">Keynotes</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#kontakt" className="btn btn-primary btn-sm">
          Erstgespräch buchen <Icon.Arrow />
        </a>
      </div>
    </nav>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="hero container" id="top">
      <div className="hero-grid">
        <div className="hero-text">
          <span className="tag"><span className="dot"></span> TÜV-geprüfter KI-Trainer · Q3/26 buchbar</span>
          <h1 className="display" style={{ marginTop: 24 }}>
            KI ist keine<br/>
            Zukunft mehr.<br/>
            Sie ist <span className="italic pink">Ihr Vorsprung.</span>
          </h1>
          <p className="lede" style={{ marginTop: 28 }}>
            Während andere noch über KI reden, baue ich sie in Ihr Unternehmen ein.
            Chatbots, die nachts arbeiten. Telefonie, die nie auflegt. Teams,
            die endlich verstehen, wofür sie eingestellt wurden.
          </p>

          <div className="hero-cta">
            <a href="#kontakt" className="btn btn-primary">
              Kostenloses Erstgespräch <Icon.Arrow />
            </a>
            <a href="#leistungen" className="btn btn-ghost">
              Was ist möglich?
            </a>
          </div>

          <div className="hero-stats">
            <div className="mini-stat">
              <div className="v">30<span className="pink">+</span></div>
              <div className="l">Keynotes &amp; Vorträge</div>
            </div>
            <div className="mini-stat">
              <div className="v">1.000<span className="pink">+</span></div>
              <div className="l">Geschulte Teilnehmer</div>
            </div>
            <div className="mini-stat">
              <div className="v">25<span className="pink">J</span></div>
              <div className="l">Finanzbranche</div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="frame">
            <img className="portrait-img" src="assets/thomas.png" alt="Thomas Völker — KI-Trainer" />
            <div className="frame-glow"></div>
            <div className="name-card">
              <div>
                <div className="who">Thomas Völker</div>
                <div className="role">KI-Trainer · Speaker · Berater</div>
              </div>
              <span className="live">LIVE</span>
            </div>
          </div>
          <div className="orbit-tag tag-1">
            <span className="dot"></span> TÜV-geprüft
          </div>
          <div className="orbit-tag tag-2">
            // 25 Jahre Finanzbranche
          </div>
          <div className="orbit-tag tag-3">
            Superchat &amp; Fonio Partner
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- TRUST BAR ---------- */
function TrustBar() {
  return (
    <div className="trust-bar">
      <div className="container trust-row">
        <span className="trust-label">Vertraut von · Partner</span>
        <div className="trust-logos">
          <span className="item"><span className="badge">TÜV</span> Zertifizierter Trainer</span>
          <span className="item">Superchat</span>
          <span className="item">Fonio</span>
          <span className="item">DSGVO · EU-Hosting</span>
          <span className="item">DACH-weit aktiv</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- ABOUT ---------- */
function About() {
  return (
    <section className="section container" id="expertise">
      <div className="section-head">
        <span className="eyebrow">Über mich</span>
        <h2 className="h2">
          25 Jahre Finanzdienstleistung.<br/>
          Heute zeige ich der Branche, <span className="italic pink">was wirklich möglich ist.</span>
        </h2>
      </div>

      <div className="about-grid">
        <div className="portrait">
          <img className="portrait-photo" src="assets/portrait.jpg" alt="Thomas Völker" />
          <div className="portrait-grid"></div>
          <div className="portrait-caption">
            <div className="who">Thomas Völker</div>
            <div className="meta">KI-TRAINER · DACH</div>
          </div>
        </div>

        <div className="about-content">
          <p>
            Ich kenne den Maklerschreibtisch. Die endlosen WhatsApp-Anfragen,
            die Anrufe, die niemand zurückrufen kann, die Tabellen, die niemand
            führen will. <strong>Genau dort beginnt die Revolution — wenn man weiß, wo man hinschauen muss.</strong>
          </p>
          <p>
            Als Deutschlands erster TÜV-geprüfter KI-Trainer in der Finanzdienstleistung
            verbinde ich 25 Jahre Branchenwissen mit konkreter Umsetzung. Keine Buzzwords,
            keine Strategiefolien — wir bauen Dinge, die ab Tag eins messbar Zeit und
            Geld sparen.
          </p>
          <p>
            KI wird die Branche nicht ersetzen. Sie wird die ersetzen,
            <strong> die KI nicht nutzen.</strong> Mein Job: Sie sind nicht dabei.
          </p>

          <div className="signature-row">
            <div className="sig">Thomas Völker</div>
            <div className="meta">
              <span className="name">KI-Trainer &amp; Transformation Manager</span>
              <span className="role">VOELKER.AI · DACH</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SERVICES ---------- */
function Services() {
  const items = [
    {
      num: "01 / KOMMUNIKATION",
      icon: <Icon.Bot />,
      title: "KI-Chatbots & Telefonie",
      desc: "Intelligente Systeme, die Anfragen 24/7 menschlich beantworten — auf WhatsApp, Webseite, am Telefon.",
      bullets: [
        "Superchat- & Fonio-Integration",
        "DSGVO-konform, auf Deutsch trainiert",
        "Echte Übergabe ans Team statt Sackgasse",
      ],
    },
    {
      num: "02 / AUTOMATISIERUNG",
      icon: <Icon.Flow />,
      title: "Prozess-Automatisierung",
      desc: "Wir digitalisieren die komplette Kundenreise mit maßgeschneiderten KI-Workflows.",
      bullets: [
        "Lead → CRM → Termin in einem Fluss",
        "Dokumente automatisch klassifiziert",
        "Wiederkehrende Anfragen vorqualifiziert",
      ],
    },
    {
      num: "03 / BEFÄHIGUNG",
      icon: <Icon.Cert />,
      title: "TÜV-zertifiziertes Training",
      desc: "Fundiertes Expertenwissen für rechtssicheren KI-Einsatz — speziell für Finanzberatung.",
      bullets: [
        "Inhouse-Workshops & Keynotes",
        "Prompt-Bibliothek für Ihre Beratung",
        "Compliance-Leitfaden & Use-Case-Plan",
      ],
    },
  ];
  return (
    <section className="section container" id="leistungen">
      <div className="section-head">
        <span className="eyebrow">Leistungen</span>
        <h2 className="h2">Drei Hebel, die <span className="italic pink">sofort</span> Wirkung zeigen.</h2>
      </div>
      <div className="services-grid">
        {items.map((it) => (
          <div className="service" key={it.title}>
            <span className="num">{it.num}</span>
            <div className="icon">{it.icon}</div>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
            <ul>
              {it.bullets.map((b) => <li key={b}>{b}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Icon, Nav, Hero, TrustBar, About, Services });