/* Workshop-Landingpage (Kaltverkehr) — „Intelligente digitale Produkte sind die Zukunft"
   CorpScale-Tokens + warmer Akzent (#C2511F), gleiches System wie die Opt-in-Seite.
   Exportiert: window.WorkshopApp */

const { useState } = React;
const DS = window.CorpScaleDesignSystem_49aa81 || {};

/* ====================================================================
   ANMELDUNG (Brevo)  —  EINZIGER INTEGRATIONSPUNKT
   --------------------------------------------------------------------
   Frontend kennt KEINEN Brevo-API-Key. Es postet an einen eigenen
   Endpoint (Serverless-Function), der den geheimen Key serverseitig
   nutzt und den Kontakt in Brevo anlegt (Double-Opt-in, Workshop-Liste).

   → In Claude Code:
     1. Serverless-Function unter LEAD_ENDPOINT bauen (siehe HANDOFF.md).
     2. DEMO_MODE auf false setzen.
   ==================================================================== */
const LEAD_ENDPOINT = '/api/subscribe';   // Ziel der Anmeldung (eigene Function)
const DEMO_MODE = false;                   // true = simuliert (Design-Vorschau); in Produktion: false

async function registerWorkshop({ email, vorname, company, elapsedMs }) {
  if (DEMO_MODE) {
    await new Promise((r) => setTimeout(r, 700));
    return { ok: true };
  }
  // company = Honeypot (für Menschen unsichtbar), elapsedMs = Zeit seit Formular-Render.
  const res = await fetch(LEAD_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, vorname, interest: 'workshop', company, elapsedMs }),
  });
  if (!res.ok) {
    const data = await res.json().catch(() => ({}));
    throw new Error(data.message || 'Anmeldung fehlgeschlagen.');
  }
  return res.json().catch(() => ({ ok: true }));
}

/* ---------------- Inhalte ---------------- */

const OUTCOMES = [
  'Klarheit, welcher Teil deines Wissens sich am besten für ein intelligentes Produkt eignet',
  'Eine konkrete, formulierte Produktidee – zugeschnitten auf deine Zielgruppe',
  'Den Weg, deine Idee kostenlos am Markt zu testen, bevor du irgendetwas baust',
  'Den Beweis, wie einfach die Umsetzung heute ist – ganz ohne Programmierkenntnisse',
];

const AGENDA = [
  {
    time: '00:00', dur: '15 Min',
    h: 'Ankommen & warum gerade jetzt',
    p: 'Kurzer Recap – und eine Live-Demo: ein intelligentes Produkt in Aktion. Sehen schlägt erklären.',
  },
  {
    time: '00:15', dur: '60 Min', core: true,
    h: 'Dein Produkt finden',
    p: 'Geführte Übung: von deiner Expertise zur konkreten Produktidee – in einem Satz formuliert.',
  },
  {
    time: '01:15', dur: '25 Min',
    h: 'So testest du sie – kostenlos',
    p: 'Der Profi-Weg ist umgekehrt: erst testen, dann bauen. Wie du mit wenigen Testkunden startest – ohne Risiko und kostenlos.',
  },
  {
    time: '01:40', dur: '20 Min',
    h: 'Fragen & dein nächster Schritt',
    p: 'Offene Runde. Du gehst raus mit einer Idee in der Hand – und weißt, wie es für dich weitergeht.',
  },
];

const MINI_OBJ = [
  { q: '„Ich kann nicht programmieren."', a: 'Musst du nicht. Wenn du erklären kannst, wie du arbeitest, reicht das völlig.' },
  { q: '„Das dauert doch ewig."', a: 'Was früher Wochen Agentur-Arbeit war, entsteht heute an einem Nachmittag.' },
  { q: '„Das ist sicher teuer."', a: 'Die Werkzeuge kosten nur wenige Euro im Monat. Das Testen ist nahezu gratis.' },
];

const FAQ = [
  {
    q: 'Brauche ich Technik- oder KI-Vorkenntnisse?',
    a: 'Nein. Der Workshop ist bewusst für Einsteiger gebaut. Wenn du beschreiben kannst, wie du arbeitest, reicht das völlig.',
  },
  {
    q: 'Was, wenn ich noch gar kein digitales Produkt habe?',
    a: 'Umso besser. Dann startest du direkt richtig, statt später ein klassisches Produkt umzubauen.',
  },
  {
    q: 'Gibt es eine Aufzeichnung?',
    a: 'Nein. Der Workshop findet nur live statt – damit du wirklich mitarbeitest und ich auf deine konkrete Idee eingehen kann. Plane dir die zwei Stunden also fest ein.',
  },
  {
    q: 'Wirklich kostenlos – wo ist der Haken?',
    a: 'Keiner. Der Workshop ist kostenlos, weil er der natürliche erste Schritt ist. Wer danach mit mir weiterbauen will, kann das tun – muss aber nicht. Kein Druck, kein versteckter Verkauf.',
  },
];

const ABOUT = 'Ich bin Tristan Bestle – Diplom-Physiker, früher Fachredakteur für Internet-Business, seit über 20 Jahren selbstständiger Coach, Trainer und Ausbilder für Coaches und Trainer – unter anderem für Führungskräfte in DAX-Unternehmen. Die Grenzen des klassischen 1:1-Geschäfts kenne ich aus eigener Erfahrung: Man kann sich nicht teilen. Im kostenlosen Workshop zeige ich dir den Weg heraus – live und ohne Vorkenntnisse.';

/* ---------------- Icons (Lucide-Stil, inline) ---------------- */

const svgProps = (s) => ({
  width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
  strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': 'true',
});

function Check({ s = 20 }) {
  return (<svg {...svgProps(s)}><path d="M20 6 9 17l-5-5"></path></svg>);
}
function ArrowRight({ s = 18 }) {
  return (<svg {...svgProps(s)}><path d="M5 12h14M13 6l6 6-6 6"></path></svg>);
}
function Calendar({ s = 18 }) {
  return (<svg {...svgProps(s)}><rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M16 2v4M8 2v4M3 10h18"></path></svg>);
}
function Clock({ s = 18 }) {
  return (<svg {...svgProps(s)}><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>);
}
function Monitor({ s = 18 }) {
  return (<svg {...svgProps(s)}><rect x="2" y="3" width="20" height="14" rx="2"></rect><path d="M8 21h8M12 17v4"></path></svg>);
}
function Users({ s = 18 }) {
  return (<svg {...svgProps(s)}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path></svg>);
}

/* ---------------- Rahmendaten-Zeile ---------------- */

function MetaRow() {
  return (
    <ul className="meta-row">
      <li className="meta-chip"><Calendar s={15} /> Montag, 22. Juni</li>
      <li className="meta-chip"><Clock s={15} /> 10:00 Uhr · ca. 2 Std</li>
      <li className="meta-chip"><Monitor s={15} /> Live online</li>
      <li className="meta-chip is-free"><Check s={15} /> Kostenlos</li>
      <li className="meta-chip"><Users s={15} /> Begrenzte Plätze</li>
    </ul>
  );
}

/* ---------------- Anmeldeformular ---------------- */

function WorkshopForm({ variant = 'light' }) {
  const [v, setV] = useState({ vorname: '', email: '', company: '' });
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  // Zeitpunkt, zu dem das Formular gerendert wurde (Zeit-Falle gegen Bots).
  const [mountedAt] = useState(() => Date.now());
  const dark = variant === 'dark';

  async function submit(e) {
    e.preventDefault();
    if (busy) return;
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email.trim());
    if (!ok) { setErr('Bitte gib eine gültige E-Mail-Adresse ein.'); return; }
    setErr(''); setBusy(true);
    try {
      await registerWorkshop({
        email: v.email.trim(),
        vorname: v.vorname.trim(),
        company: v.company,
        elapsedMs: Date.now() - mountedAt,
      });
      setDone(true);
    } catch (ex) {
      setErr(ex.message || 'Es ist etwas schiefgelaufen. Bitte versuche es erneut.');
    } finally {
      setBusy(false);
    }
  }

  if (done) {
    return (
      <div className={'form-success ' + (dark ? 'on-dark' : '')}>
        <span className="fs-check"><Check s={22} /></span>
        <div>
          <strong>Dein Platz ist reserviert{v.vorname ? ', ' + v.vorname.trim() : ''}.</strong>
          <span>Wir haben dir eine E-Mail geschickt – bestätige kurz den Link. Den Zugang zum Workshop am 22. Juni bekommst du rechtzeitig per E-Mail.</span>
        </div>
      </div>
    );
  }

  return (
    <form className={'lead-form has-vorname ' + (dark ? 'on-dark' : '')} onSubmit={submit} noValidate>
      {/* Honeypot: für Menschen unsichtbar; nur Bots füllen es aus -> Server verwirft still. */}
      <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>
        <label>Bitte dieses Feld leer lassen
          <input type="text" name="company" tabIndex={-1} autoComplete="off"
            value={v.company} onChange={(e) => setV({ ...v, company: e.target.value })} />
        </label>
      </div>
      <div className="lf-fields">
        <input className="lf-input lf-vorname" type="text" name="VORNAME" autoComplete="given-name" placeholder="Vorname"
          value={v.vorname} onChange={(e) => setV({ ...v, vorname: e.target.value })} aria-label="Vorname" disabled={busy} />
        <input className={'lf-input lf-email' + (err ? ' has-error' : '')} type="email" name="EMAIL" autoComplete="email" required placeholder="Deine E-Mail-Adresse"
          value={v.email} onChange={(e) => setV({ ...v, email: e.target.value })} aria-label="E-Mail-Adresse" disabled={busy} />
        <button type="submit" className="btn-cta" disabled={busy}>
          {busy ? 'Wird gesendet…' : <React.Fragment>Jetzt kostenlosen Workshop-Platz sichern <ArrowRight /></React.Fragment>}
        </button>
      </div>
      {err && <div className="lf-error">{err}</div>}
      <p className="lf-note">
        Komplett kostenlos. Keine Kreditkarte, kein versteckter Verkauf. Mit dem Eintragen stimmst du der{' '}
        <a href="Datenschutz.html">Datenschutzerklärung</a> zu.
      </p>
    </form>
  );
}

/* ---------------- Workshop-Infokarte (Hero-Visual, nur Desktop) ---------------- */

function WorkshopCard() {
  return (
    <div className="wcard" aria-hidden="false">
      <div className="wcard-top">
        <span className="wcard-live"><span className="dot"></span> Live-Workshop</span>
        <span className="wcard-eyebrow">Online</span>
      </div>
      <h3 className="wcard-title">Vom Wissen zum intelligenten digitalen Produkt</h3>
      <div className="wcard-rows">
        <div className="wcard-row">
          <span className="wc-ico"><Calendar /></span>
          <span><span className="wc-label">Termin</span><span className="wc-val">Montag, 22. Juni · 10:00 Uhr</span></span>
        </div>
        <div className="wcard-row">
          <span className="wc-ico"><Clock /></span>
          <span><span className="wc-label">Dauer</span><span className="wc-val">ca. 2 Stunden, live mit Tristan</span></span>
        </div>
        <div className="wcard-row">
          <span className="wc-ico"><Monitor /></span>
          <span><span className="wc-label">Ort</span><span className="wc-val">Online (Zoom) · Zugang per E-Mail</span></span>
        </div>
      </div>
      <div className="wcard-price">
        <span className="wp-amount">Kostenlos</span>
        <span className="wp-note">Keine Kreditkarte.<br />Begrenzte Plätze.</span>
      </div>
    </div>
  );
}

/* ---------------- Sektionen ---------------- */

function Header() {
  return (
    <header className="site-header">
      <div className="wrap header-inner">
        <a className="brand" href="#top">
          <img className="brand-mark" src="assets/logo-mark.png" alt="Online Business Schmiede" width="32" height="32" />
          <span className="brand-name">Online Business Schmiede</span>
        </a>
        <a className="header-cta" href="#anmelden">Platz sichern <ArrowRight s={15} /></a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="accent-rule"></span>
          <p className="overline">Kostenloser Live-Workshop für Coaches, Trainer &amp; Experten</p>
          <h1 className="hero-h1">Intelligente Digitale Produkte sind die größte Chance für Experten seit Jahren.</h1>
          <p className="hero-sub">
            Klassische Kurse und PDFs verlieren gerade rasant an Wert. Zur gleichen Zeit wird zum ersten Mal etwas
            möglich, das es nie gab: ein Produkt, das sich für jeden Kunden anfühlt wie ein <strong>1:1-Coaching</strong> –
            und trotzdem skaliert. Im kostenlosen Live-Workshop verstehst du, warum das <strong>genau jetzt</strong> passiert –
            und machst den ersten konkreten Schritt zu deinem eigenen.
          </p>
          <MetaRow />
          <div id="anmelden" className="hero-form-wrap">
            <WorkshopForm />
          </div>
        </div>
        <div className="hero-visual">
          <WorkshopCard />
        </div>
      </div>
    </section>
  );
}

function TurningPoint() {
  return (
    <section className="section turn">
      <div className="wrap">
        <div className="section-head">
          <p className="overline">Warum gerade jetzt</p>
          <h2>Der Boden unter der Kursbranche verschiebt sich.</h2>
        </div>
        <div className="turn-grid">
          <div className="turn-lead">
            <p>
              Jahrzehntelang galt ein ungeschriebenes Gesetz: Du kannst <strong>viele Menschen erreichen</strong> oder
              <strong> jedem Einzelnen wirklich helfen</strong>. Nie beides. Kurse hatten Reichweite, kannten ihre
              Kunden aber nicht. Coaching kennt den Kunden – frisst aber deine Zeit.
            </p>
            <p>
              Genau dieses Gesetz ist gerade gefallen. KI kann heute verstehen, was ein Kunde eingibt, und ihm nach
              <strong> deiner Methode</strong> eine maßgeschneiderte Antwort geben. <strong>Wer das jetzt versteht, ist
              der Erste in seiner Nische.</strong>
            </p>
          </div>
          <aside className="proof-box">
            <p className="pb-quote">„Ich ziehe mich aus dem Kurs-Geschäft zurück."</p>
            <p>
              Ryan Deiss baute mit DigitalMarketer ein 100-Millionen-Dollar-Kursunternehmen auf. 2025 brachen seine
              Kursverkäufe um <strong>80 %</strong> ein – und er verkündete öffentlich seinen Rückzug. Seine Begründung:
              Information ist im Überfluss da. Knapp sind Klarheit und Umsetzung.
            </p>
            <span className="pb-src">Quelle: öffentliche Aussagen von Ryan Deiss, 2025</span>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Outcomes() {
  return (
    <section className="section outcomes">
      <div className="wrap">
        <div className="section-head center">
          <p className="overline">Das nimmst du mit</p>
          <h2>Am Ende dieser 2 Stunden hast du …</h2>
        </div>
        <div className="outcomes-grid">
          {OUTCOMES.map((o, i) => (
            <article className="outcome" key={i}>
              <span className="bl-check"><Check s={18} /></span>
              <p>{o}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Agenda() {
  return (
    <section className="section agenda">
      <div className="wrap">
        <div className="section-head center">
          <p className="overline">Der Ablauf</p>
          <h2>2 Stunden, 4 Blöcke – live mit mir</h2>
        </div>
        <div className="agenda-wrap">
          <div className="timeline">
            {AGENDA.map((b, i) => (
              <div className="tl-item" key={i}>
                <div className="tl-time">{b.time}</div>
                <div className="tl-main">
                  <span className="tl-dot"></span>
                  <h3 className={'tl-h' + (b.core ? ' is-core' : '')}>
                    {b.h} <span className="tl-dur">{b.dur}</span>
                  </h3>
                  <p className="tl-p">{b.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Feasibility() {
  return (
    <section className="section feasible">
      <div className="wrap feasible-inner">
        <p className="overline">„Aber ich kann doch nicht programmieren"</p>
        <h2>Musst du nicht. Software entsteht heute durch Sprache.</h2>
        <p className="feasible-p">
          Du beschreibst in normalen Worten, was dein Produkt können soll – und die KI baut es. Dafür gibt es längst ein
          eigenes Wort: <strong>Vibe-Coding</strong>, 2025 zum Wort des Jahres gewählt. Was früher ein Agentur-Projekt
          über Wochen war, entsteht heute an einem Nachmittag. Die einzige Voraussetzung: Du kannst erklären, wie du
          arbeitest. Genau das üben wir im Workshop.
        </p>
        <div className="mini-obj">
          {MINI_OBJ.map((o, i) => (
            <article className="obj-card" key={i}>
              <h3>{o.q}</h3>
              <p>{o.a}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function RegisterBlock() {
  return (
    <section className="section whynow">
      <div className="wrap whynow-inner">
        <p className="overline on-navy">Jetzt anmelden</p>
        <h2>Sichere dir deinen kostenlosen Platz.</h2>
        <p className="whynow-sub">
          Ein Termin, 2 Stunden, und du gehst raus mit deiner konkreten Produktidee. Kostenlos – die Plätze sind
          begrenzt, damit ich im Workshop auf einzelne Teilnehmer eingehen kann.
        </p>
        <MetaRow />
        <div className="whynow-form">
          <WorkshopForm variant="dark" />
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section about">
      <div className="wrap about-grid">
        <div className="about-photo">
          <image-slot id="tristan-foto" shape="rounded" radius="8" placeholder="Foto von Tristan hierher ziehen"></image-slot>
        </div>
        <div className="about-copy">
          <p className="overline">Wer den Workshop leitet</p>
          <h2>Tristan Bestle</h2>
          <p className="about-text">{ABOUT}</p>
        </div>
      </div>
    </section>
  );
}

function Faq() {
  return (
    <section className="section faq">
      <div className="wrap">
        <div className="section-head center">
          <p className="overline">Bevor du fragst</p>
          <h2>Häufige Fragen</h2>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <div className="faq-item" key={i}>
              <h3 className="faq-q">{f.q}</h3>
              <p className="faq-a">{f.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="section final-cta">
      <div className="wrap final-inner">
        <span className="accent-rule center"></span>
        <p className="final-quote">„Dein Wissen ist bereit. Die Technik ist es jetzt auch."</p>
        <p className="final-sub">Komm in den kostenlosen Workshop und mach den ersten Schritt – in unter einer Minute angemeldet.</p>
        <div className="final-form">
          <WorkshopForm />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap footer-inner">
        <span className="footer-copy">© 2026 Online Business Schmiede – Tristan Bestle</span>
        <nav className="footer-links">
          <a href="Impressum.html">Impressum</a>
          <a href="Datenschutz.html">Datenschutz</a>
          <button type="button" className="reopen-consent" onClick={() => window.CookieConsent && window.CookieConsent.open()}>Cookie-Einstellungen</button>
        </nav>
      </div>
    </footer>
  );
}

function StickyCta() {
  return (
    <a className="sticky-cta" href="#anmelden">
      Kostenlosen Platz sichern <ArrowRight s={16} />
    </a>
  );
}

function WorkshopApp() {
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <TurningPoint />
        <Outcomes />
        <Agenda />
        <Feasibility />
        <RegisterBlock />
        <About />
        <Faq />
        <FinalCta />
      </main>
      <Footer />
      <StickyCta />
    </React.Fragment>
  );
}

window.WorkshopApp = WorkshopApp;