/* ============================================================
   Schober Automaten — B2C Erstgesprächs-Page (v5)
   Struktur 1:1 nach VSL-Funnel-Referenz, Schober-Content,
   eigenes Design (navy+blue+gold). Styling in b2c.css.
   DS-Primitives (Button, Logo, Input, Rating) + window.Icons.
   ============================================================ */
const DS = window.SchoberAutomatenDesignSystem_41a173;
const { Button, Logo, Input, Rating } = DS;
const I = window.Icons;
const { useState, useEffect, useRef } = React;

const IMG = {
  hero: 'img/team.jpg?v=1',
  vslPoster: 'img/vsl-poster.jpg?v=2',
  kiosk: 'img/grossprojekt.jpg?v=1',
  case: 'img/kassel.jpg?v=1',
  tankstelle: 'img/tankstelle.jpg?v=1',
  selfcheckout: 'img/ekiosk.jpg?v=1',
  avatarA: 'https://cdn.prod.website-files.com/69c75c9c3eb83c47871ea63b/69e2c728e608ed2ce4b0287c_image%202.avif',
  avatarB: 'https://cdn.prod.website-files.com/69c75c9c3eb83c47871ea63b/69e2c728c6aa6d627086e504_image%203.avif',
  sielaff: 'https://cdn.prod.website-files.com/69edcd882ff2b51cb2878ad7/69edcd882ff2b51cb2878ae1_icon-2.svg',
  sandenvendo: 'https://cdn.prod.website-files.com/69edcd882ff2b51cb2878ad7/69edcd882ff2b51cb2878ae0_icon-3.svg',
  p1: 'img/p1.jpg?v=12', p2: 'img/p2.jpg?v=12', p3: 'img/p3.jpg?v=12', p4: 'img/p4.jpg?v=12', p5: 'img/p5.jpg?v=12',
};

const goForm = () => window.dispatchEvent(new CustomEvent('schober:qualify'));

/* ---- Funnel-Tracking (anonym, Session-basiert) ----
   Events: view (Seite), open (Quiz gestartet), answer (Frage beantwortet),
   contact (Kontaktformular erreicht), submit (abgeschickt).
   Auswertung im Admin unter /admin/analytics. */
function trackSid() {
  try {
    let s = sessionStorage.getItem('sb_sid');
    if (!s) {
      s = (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2, 12);
      sessionStorage.setItem('sb_sid', s);
    }
    return s;
  } catch { return 'no-storage'; }
}
function track(event, extra) {
  try {
    const payload = JSON.stringify(Object.assign({ sid: trackSid(), event }, extra || {}));
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/track', new Blob([payload], { type: 'application/json' }));
    } else {
      fetch('/api/track', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload, keepalive: true }).catch(() => {});
    }
  } catch { /* Tracking darf nie die Seite brechen */ }
}

/* reveal-on-scroll */
function Rv({ as = 'div', delay = 0, className = '', children, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.style.transitionDelay = delay + 'ms'; el.classList.add('in'); io.disconnect(); }
    }, { threshold: 0.14 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return React.createElement(as, { ref, className: ('rv ' + className).trim(), ...rest }, children);
}

/* count-up number */
function CountUp({ to, decimals = 0, prefix = '', suffix = '', dur = 1400 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf;
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      io.disconnect();
      let start;
      const tick = (t) => {
        if (!start) start = t;
        const p = Math.min((t - start) / dur, 1);
        const eased = 1 - Math.pow(1 - p, 4);
        setVal(to * eased);
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    }, { threshold: 0.5 });
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, []);
  const txt = val.toLocaleString('de-DE', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return <span ref={ref}>{prefix}{txt}{suffix}</span>;
}

/* live night clock — "verkauft, während du schläfst" */
function NightClock() {
  const [t, setT] = useState('03:47');
  useEffect(() => {
    const fmt = (d) => d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
    const id = setInterval(() => setT(fmt(new Date())), 1000 * 20);
    setT(fmt(new Date()));
    return () => clearInterval(id);
  }, []);
  return <span className="nc-time">{t}</span>;
}

/* ============================================================ Header (minimal: Logo + CTA) */
function Header() {
  return (
    <header className="hdr">
      <div className="wrap hdr-in minimal">
        <Logo height={34} />
        <Button variant="primary" size="sm" onClick={goForm}>Kostenloses Erstgespräch sichern</Button>
      </div>
    </header>
  );
}

/* ============================================================ 0 · Hero */
const VSL_ID = 'h1le4t140d'; // Wistia: 260619_SAB_VSL_16x9
function Hero() {
  const [playing, setPlaying] = useState(false);
  return (
    <section className="hero grain">
      <div className="wrap hero-in">
        <div>
          <h1 className="h-display">Bau dir in wenigen Wochen ein Einkommen, das <em className="hl">auch&nbsp;ohne&nbsp;dich</em> läuft.</h1>
          <p className="lead">Wir helfen dir bei jedem Schritt, dein eigenes Automaten-Business neben dem Job aufzubauen. Mehr Geld nebenbei, mehr Freiheit, ohne dass du Technik-Profi sein oder kündigen musst.</p>
          <div className="hero-actions">
            <Button variant="primary" size="lg" iconRight={<I.ArrowRight size={20} />} onClick={goForm}>Kostenloses Erstgespräch sichern</Button>
          </div>
          <div className="hero-trust">
            <div className="avstack">
              <img src={IMG.p1} alt="" /><img src={IMG.p3} alt="" /><img src={IMG.p5} alt="" />
            </div>
            <div>
              <Rating value={5} size={16} />
              <div className="trust-txt" style={{ marginTop: 2 }}>100+ Partner, die es selbst machen</div>
            </div>
          </div>
        </div>

        <Rv className="hero-media">
          <div className="video-frame">
            {playing ? (
              <iframe
                src={'https://fast.wistia.net/embed/iframe/' + VSL_ID + '?autoPlay=true&playbar=true&fullscreenButton=true'}
                title="Schober Automaten Video"
                allow="autoplay; fullscreen"
                allowFullScreen
                frameBorder="0"
                scrolling="no"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
              />
            ) : (
              <React.Fragment>
                <img src={IMG.vslPoster} alt="Schober Automaten — Video ansehen" />
                <div className="scrim" />
                <button className="play-btn" aria-label="Video abspielen" onClick={() => setPlaying(true)}>
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="var(--brand)"><path d="M8 5v14l11-7z" /></svg>
                </button>
                <div className="video-cap">In 90 Sekunden: So einfach startest du</div>
              </React.Fragment>
            )}
          </div>
          <div className="proof-chip br">
            <span className="big">24/7</span>
            <span className="lbl">Verkauf,<br />auch nachts</span>
          </div>
        </Rv>
      </div>
    </section>
  );
}

/* ============================================================ 1 · Diagnose (6 pain cards, rot) */
function Diagnose() {
  const pains = [
    { t: 'Jeder Euro fühlt sich nach Risiko an', b: 'Du willst was Eigenes, aber was, wenn du investierst und es läuft nicht? Genau dieser Gedanke hält dich zurück.', tag: 'Angst vor Fehlinvestition' },
    { t: 'Bitte kein zweiter Vollzeitjob', b: 'Mehr Geld ja, aber nicht noch eine Sache, die dir Abende und Wochenenden frisst. Es soll nebenher laufen.', tag: 'Zeit ist knapp' },
    { t: 'Standort, Technik, Sortiment, ein Berg', b: 'So viele offene Fragen, dass du gar nicht erst anfängst. Dabei ist der Weg einfacher, als er aussieht.', tag: 'Überforderung' },
  ];
  return (
    <section className="sec pains-sec grain">
      <div className="wrap">
        <div className="pains-head">
          <span className="kicker alarm"><I.AlertTriangle size={15} /> Diagnose</span>
          <h2 className="h-sec">Erkennst du dich hier <em className="hl danger">wieder</em>?</h2>
          <p className="lead">Die meisten scheitern nicht am Geld. Sie scheitern am ersten Schritt.</p>
        </div>
        <div className="diag-grid">
          {pains.map((p, i) => (
            <Rv key={i} className="diag-card" delay={(i % 3) * 80}>
              <span className="diag-ic"><I.AlertTriangle size={18} /></span>
              <h3>{p.t}</h3>
              <p>{p.b}</p>
              <span className="diag-tag">{p.tag}</span>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 2 · Outcome (positiv, grün — was du am Ende bekommst) */
function Outcome() {
  const wins = [
    { ic: I.TrendingUp, t: 'Einkommen rund um die Uhr', b: 'Ein Standbein, das läuft, auch wenn du arbeitest, schläfst oder im Urlaub bist.' },
    { ic: I.Layers, t: 'Klein starten, frei wachsen', b: 'Du startest mit einem Automaten und skalierst genau dann, wann du willst.' },
    { ic: I.Truck, t: 'Du bist nie allein', b: 'Standort-Bewertung, Aufstellung und Service kommen komplett von uns, schlüsselfertig.' },
    { ic: I.Coins, t: 'Planbar statt Glücksspiel', b: 'Du kennst deine Zahlen ab Tag eins, mit klarer Kalkulation statt Bauchgefühl.' },
  ];
  return (
    <section className="sec outcome-sec">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker good"><I.Sparkle size={15} /> Dein Outcome</span>
          <h2 className="h-sec">In ein paar Monaten sieht dein Alltag <em className="hl green">anders</em> aus.</h2>
          <p className="lead">Kein Chef, keine festen Zeiten, kein Personal-Stress. Nur ein System, das verkauft.</p>
        </div>
        <div className="outcome-grid">
          {wins.map((w, i) => (
            <Rv key={i} className="oc-card" delay={(i % 4) * 70}>
              <span className="oc-ic"><w.ic size={24} /></span>
              <h3>{w.t}</h3>
              <p>{w.b}</p>
            </Rv>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 42 }}>
          <Button variant="primary" size="lg" iconRight={<I.ArrowRight size={20} />} onClick={goForm}>Zeig mir, wie das geht</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 3 · Case Studies (3-up vorher/nachher) */
/* NOTE: anonymisiert bis Freigabe (Briefing, offener Punkt HOCH). Zahlen dokumentiert; Kassel = Prognose. */
function Cases() {
  const support = [
    { tag: 'E-Kiosk', img: IMG.selfcheckout, before: 'Nur ein Vollzeit-Job, kein zweites Standbein, kein passives Einkommen.', after: 'Zwei E-Kioske laufen nebenbei weiter, der Job bleibt unberührt.', big: '32.500 €', lbl: 'Umsatz / Monat pro E-Kiosk', note: 'Partner aus Eschwege' },
    { tag: 'Tankstelle', img: IMG.tankstelle, before: 'Personalkosten ~12.000 €, unzuverlässiges Personal, feste Zeiten.', after: 'Autonomer Betrieb 24/7, nur noch ~2.500 € laufende Kosten.', big: '−9.500 €', lbl: 'Kosten / Monat', note: 'Tankstellen-Umstellung' },
    { tag: 'Großprojekt', img: IMG.kiosk, before: 'Leerstehende Fläche in Top-Lage, die täglich Geld kostete.', after: 'Über 20 Geräte, 24/7-Verkauf mit großem LED-Auftritt.', big: '35.000 €+', lbl: 'Umsatz / Monat', note: 'Kassel · Prognose' },
  ];
  return (
    <section className="sec cases-sec" id="erfahrungen">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker alarm"><I.TrendingUp size={15} /> Case Studies</span>
          <h2 className="h-sec">Vom Stillstand zum <em className="hl">laufenden</em> Geschäft.</h2>
          <p className="lead">Keine Hochglanz-Versprechen. Echte Partner, echte Zahlen, echtes Vorher und Nachher.</p>
        </div>

        {/* case cards: photo + Vorher / Nachher boxes + big result */}
        <div className="cstudies">
          {support.map((c, i) => (
            <Rv key={i} className="cstudy" delay={(i % 2) * 80}>
              <div className="cstudy-media">
                <img src={c.img} alt={c.tag} />
                <div className="cstudy-scrim" />
                <span className="cstudy-name">{c.tag}</span>
              </div>
              <div className="cstudy-body">
                <div className="ba-box vorher">
                  <span className="ba-label red"><span className="dotr" /> Vorher</span>
                  <p>{c.before}</p>
                </div>
                <div className="ba-box nachher">
                  <span className="ba-label green"><span className="dotg" /> Nachher</span>
                  <p>{c.after}</p>
                </div>
                <div className="cstudy-result">
                  <div className="v">{c.big}</div>
                  <div className="l">{c.lbl} · {c.note}</div>
                </div>
              </div>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 4 · 3 Säulen (So funktioniert Schober) */
function Pillars() {
  const cols = [
    { icon: I.MapPin, k: 'Säule 1', t: 'Standort', b: 'Wir bewerten gemeinsam deine Lage, ehrlich und aus eigener Betreiber-Erfahrung. So weißt du vorher, ob sich dein Standort trägt.' },
    { icon: I.Truck, k: 'Säule 2', t: 'Aufstellung & Technik', b: 'Lieferung, Aufstellung, Einrichtung, Anbindung. Hochwertige Premium-Geräte, schlüsselfertig.' },
    { icon: I.Coins, k: 'Säule 3', t: 'Service & Nachbetreuung', b: '15+ Techniker bundesweit. Geht mal was kaputt, ist jemand in deiner Nähe. Wir bleiben dabei, nicht nur bis zum Kauf.' },
  ];
  return (
    <section className="sec muted" id="prozess">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">3 Säulen, ein System</span>
          <h2 className="h-sec">So funktioniert <em className="hl">Schober</em>.</h2>
          <p className="lead">Kein einzelnes Gerät, sondern ein komplettes System, das dich vom ersten Gespräch bis zum laufenden Betrieb trägt.</p>
        </div>
        <div className="pillars">
          {cols.map((c, i) => (
            <Rv key={i} className="pillar" delay={i * 90}>
              <span className="pillar-ic"><c.icon size={26} /></span>
              <span className="pillar-k">{c.k}</span>
              <h3>{c.t}</h3>
              <p>{c.b}</p>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 5 · Founder (Familie Schober) */
function Founder() {
  return (
    <section className="sec">
      <div className="wrap">
        <div className="split flip founder">
          <Rv className="split-media">
            <div className="media-card founder-card">
              <img src={IMG.hero} alt="Familie Schober" />
              <div className="founder-badge"><span className="fb-v">Seit<br />1965</span></div>
            </div>
          </Rv>
          <div>
            <span className="kicker">Wer wir sind</span>
            <h2 className="h-sec">Wir sind <em className="hl">Familie Schober</em>.</h2>
            <p className="lead">Drei Generationen Technik aus Kassel. Was 1965 als Handwerksbetrieb begann, sind heute eigene Automaten und E-Kiosk-Läden. Wir verkaufen dir nichts, was wir nicht selbst betreiben.</p>
            <p className="lead" style={{ marginTop: 14 }}>Genau deshalb kennen wir jeden Stolperstein aus erster Hand und sagen dir ehrlich, ob sich dein Standort lohnt.</p>
            <div className="founder-stats">
              <div className="fs"><div className="v"><CountUp to={35} suffix="+" /></div><div className="l">eigene Geräte</div></div>
              <div className="fs"><div className="v"><CountUp to={15} suffix="+" /></div><div className="l">Techniker bundesweit</div></div>
              <div className="fs"><div className="v"><CountUp to={4.8} decimals={1} suffix=" ★" /></div><div className="l">Google-Bewertung</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 6 · Video-Testimonial (Burhan, dark) */
const TESTI_ID = 'ffb3vxm9fj'; // Wistia: 260619_SAB_Burhan_Testi_16x9
const TESTI_POSTER = 'https://embed-ssl.wistia.com/deliveries/3b2455b03f68a0cf927ee278aab9062b962d249c.jpg?image_crop_resized=960x540';
function VideoVoices() {
  const [playing, setPlaying] = useState(false);
  return (
    <section className="sec vids-sec dark grain">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Aus der Praxis</span>
          <h2 className="h-sec">Hör dir an, was <em className="hl">Burhan</em> sagt.</h2>
          <p className="lead">Kein bezahlter Darsteller. Ein Partner, der genau da stand, wo du jetzt stehst.</p>
        </div>

        <Rv className="vfeat">
          <div className="vfeat-video">
            {playing ? (
              <iframe
                src={'https://fast.wistia.net/embed/iframe/' + TESTI_ID + '?autoPlay=true&playbar=true&fullscreenButton=true'}
                title="Burhan über seinen Start mit Schober Automaten"
                allow="autoplay; fullscreen"
                allowFullScreen
                frameBorder="0"
                scrolling="no"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
              />
            ) : (
              <React.Fragment>
                <img src={TESTI_POSTER} alt="Video-Testimonial: Burhan über seinen Start" />
                <div className="vfeat-scrim" />
                <div className="vfeat-name-card">
                  <div className="vnc-name">Burhan</div>
                  <div className="vnc-role">E-Kiosk-Betreiber · Eschwege</div>
                </div>
                <button className="vfeat-play" aria-label="Video abspielen" onClick={() => setPlaying(true)}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z" /></svg>
                </button>
              </React.Fragment>
            )}
          </div>
          <div className="vfeat-quote">
            <div className="vfeat-headline">„Dieser Automat macht im Schnitt 24.000 € im Monat — und ich muss dafür nicht vor Ort sein.&ldquo;</div>
            <p className="vfeat-body">„Meine Automaten sind meine Kassierer. Ich habe viel mehr Zeit mit meiner Familie und meinem Kind — und der Umsatz läuft weiter. Das war das Allerwichtigste für mich.&ldquo;</p>
            <div className="vfeat-by">
              <div><div className="t-name">Burhan</div><div className="t-meta">E-Kiosk-Betreiber · Eschwege, hauptberuflich Elektroniker</div></div>
            </div>
          </div>
        </Rv>
      </div>
    </section>
  );
}

/* ============================================================ 7 · Vorteile */
function Benefits() {
  const items = [
    { icon: I.Truck, t: 'Rundum-sorglos-Aufstellung', b: 'Lieferung, Aufbau, Einrichtung, Anbindung. Den technischen Teil übernehmen wir.' },
    { icon: I.Layers, t: 'Premium-Geräte inklusive', b: 'Echte Hersteller-Qualität statt China-Ware. Premium-Geräte, die nur wenige Händler in Deutschland führen.' },
    { icon: I.MapPin, t: '1:1 Begleitung & Beratung', b: 'Standort, Sortiment, Kalkulation, Finanzierung. Wir denken den ganzen Weg mit, persönlich statt Callcenter.' },
  ];
  return (
    <section className="sec" id="warum">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Vorteile</span>
          <h2 className="h-sec">Deine Vorteile bei <em className="hl">Schober</em>.</h2>
        </div>
        <div className="usp-grid">
          {items.map((u, i) => (
            <Rv key={u.t} className="usp" delay={i * 80}>
              <span className="ic"><u.icon size={24} /></span>
              <h3>{u.t}</h3>
              <p>{u.b}</p>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 8 · Hersteller-Strip */
function BrandStrip() {
  const set = (
    <React.Fragment>
      <span><I.Check size={17} color="var(--success)" /> Premium-Hersteller statt China-Geräte</span>
      <span><I.Sparkle size={16} color="var(--gold-500)" /> Gelisteter Fachhändler in Deutschland</span>
      <span><I.Truck size={17} color="var(--brand)" /> Bundesweites Techniker-Netzwerk</span>
    </React.Fragment>
  );
  return (
    <div className="marquee">
      <div className="wrap marquee-in">
        <span className="marquee-label">Vertrauen mit Substanz</span>
        <div className="marquee-track">{set}{set}</div>
      </div>
    </div>
  );
}

/* ============================================================ 9 · Modelle */
function Solutions() {
  const models = [
    { icon: I.Store, t: 'Warenautomat', b: 'Snacks, Drinks, Non-Food. Der klassische Einstieg, kompakt und schnell rentabel.', tag: 'Einstieg' },
    { icon: I.Building, t: 'E-Kiosk', b: 'Dein autonomer Mini-Shop. 24/7 geöffnet, Self-Checkout, großes Sortiment.', tag: 'Skalierung' },
    { icon: I.Coins, t: 'Kaffee & Heißgetränke', b: 'Frischer Kaffee rund um die Uhr. Hohe Marge, treue Stammkunden.', tag: 'Marge' },
    { icon: I.Layers, t: 'Umhausung & Großlösung', b: 'Mehrere Geräte, LED-Auftritt, Top-Lage. Für den großen Wurf.', tag: 'Großprojekt' },
  ];
  return (
    <section className="sec muted">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Deine Modelle</span>
          <h2 className="h-sec">Vom ersten Gerät bis zum eigenen <em className="hl">Kiosk</em>.</h2>
          <p className="lead">Du startest klein und skalierst, wann du willst. Wir wachsen mit dir mit.</p>
        </div>
        <div className="models">
          {models.map((m, i) => (
            <Rv key={i} className="model-card" delay={(i % 4) * 70}>
              <span className="model-ic"><m.icon size={24} /></span>
              <span className="model-tag">{m.tag}</span>
              <h3>{m.t}</h3>
              <p>{m.b}</p>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 10 · Steps (Ablauf, 4) */
function Steps() {
  const steps = [
    { icon: I.Phone, t: 'Du trägst dich ein', b: 'Kostenloses Erstgespräch anfragen. Unverbindlich, in 30 Sekunden.' },
    { icon: I.MapPin, t: 'Standort-Check & Plan', b: 'Wir schauen auf Standort, Budget und Sortiment, ehrlich und kostenlos.' },
    { icon: I.Truck, t: 'Lieferung & Aufstellung', b: 'Wir liefern, stellen auf und richten alles ein, schlüsselfertig.' },
    { icon: I.TrendingUp, t: 'Verkauf läuft, wir bleiben', b: 'Dein Automat verkauft 24/7. Unser Techniker-Netzwerk ist da, wenn du es brauchst.' },
  ];
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Ablauf</span>
          <h2 className="h-sec">So einfach <em className="hl">startest</em> du.</h2>
          <p className="lead">Kein Fachchinesisch, kein Alleingang. Ein klarer Weg, den wir mit hunderten Kunden schon gegangen sind.</p>
        </div>
        <div className="steps steps-4">
          {steps.map((s, i) => (
            <Rv key={i} className="step" delay={i * 100}>
              <div className="step-badge"><s.icon size={26} /><span className="n">{i + 1}</span></div>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
            </Rv>
          ))}
        </div>
        <div style={{ marginTop: 44, textAlign: 'center' }}>
          <Button variant="primary" size="lg" iconRight={<I.ArrowRight size={20} />} onClick={goForm}>Kostenloses Erstgespräch sichern</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 11 · Vergleich */
function Compare() {
  const rows = [
    'Profitable Standort-Bewertung',
    'Lieferung, Aufstellung & Einrichtung',
    'Bundesweites Techniker-Netzwerk',
    'Sortiment- & Kalkulations-Beratung',
    'Hilfe bei der Finanzierung',
    'Erreichbar auch nach dem Kauf',
    'Eigene Betreiber-Erfahrung seit 1965',
  ];
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Vergleich</span>
          <h2 className="h-sec">Schober vs. <em className="hl">andere Anbieter</em>.</h2>
          <p className="lead">Die meisten verkaufen dir ein Gerät und sind weg. Wir sind die, die danach wirklich helfen, nicht nur abheben.</p>
        </div>
        <Rv className="cmp">
          <div className="cmp-head">
            <div className="cmp-feat" />
            <div className="cmp-col schober"><Logo height={26} /></div>
            <div className="cmp-col other">Andere Anbieter</div>
          </div>
          {rows.map((r, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-feat">{r}</div>
              <div className="cmp-cell schober"><span className="yes"><I.Check size={16} /></span></div>
              <div className="cmp-cell other"><span className="no"><I.X size={16} /></span></div>
            </div>
          ))}
        </Rv>
      </div>
    </section>
  );
}

/* ============================================================ CTA band */
function CtaBand({ variant = 'blue', kicker, title, sub }) {
  return (
    <section className="sec--tight">
      <div className="wrap">
        <Rv className={'ctaband ' + variant}>
          <div>
            <span className="kicker">{kicker}</span>
            <h2>{title}</h2>
            <p>{sub}</p>
          </div>
          <Button variant="accent" size="lg" iconRight={<I.ArrowRight size={20} />} onClick={goForm}>Kostenloses Erstgespräch</Button>
        </Rv>
      </div>
    </section>
  );
}

/* ============================================================ 13 · Testimonials (marquee) */
function Testimonials() {
  const reviews = [
    { text: 'Top Beratung! Drei Automaten gekauft, nach fünf Monaten keine Probleme. Lieferung in drei Tagen, faire Preise.', name: 'Fiorello I.', meta: 'Kassel · 3 Automaten', av: IMG.p1 },
    { text: 'Bereits den zweiten Automaten gekauft. Individuelle Beratung, zuverlässiger Support, freundliches Team.', name: 'Lucas R.', meta: 'Wien · 3 Automaten', av: IMG.p2 },
    { text: 'Als kompletter Neuling hab ich mich nie allein gelassen gefühlt. Klare Empfehlung.', name: 'Christian H.', meta: 'Zürich · 1 Automat', av: IMG.p3 },
    { text: 'Schnelle Lieferung, sauberer Aufbau, alles erklärt. So stellt man sich Service vor.', name: 'Markus T.', meta: 'Hannover · 2 Automaten', av: IMG.p4 },
    { text: 'Ehrliche Beratung statt Verkaufsmasche. Genau deshalb hab ich mich entschieden.', name: 'Daniela K.', meta: 'Leipzig · 1 Automat', av: IMG.p5 },
  ];
  const GoogleG = ({ s = 18 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}>
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.56c2.08-1.92 3.28-4.74 3.28-8.1z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.65l-3.56-2.77c-.99.66-2.25 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.11a6.6 6.6 0 0 1 0-4.22V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
    </svg>
  );
  const Verified = ({ s = 15 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" className="t-verified" role="img" aria-label="verifiziert">
      <circle cx="12" cy="12" r="11" fill="#1a73e8" />
      <path d="M10.1 15.9 6.9 12.7l1.4-1.4 1.8 1.8 4.6-4.6 1.4 1.4z" fill="#fff" />
    </svg>
  );
  const card = (r, i) => (
    <div className="tmq-card" key={i}>
      <div className="tmq-head">
        <img className="tmq-av" src={r.av} alt="" />
        <div className="tmq-who">
          <div className="t-name">{r.name}<Verified /></div>
          <div className="t-meta">{r.meta}</div>
        </div>
        <GoogleG s={20} />
      </div>
      <Rating value={5} size={15} />
      <p>„{r.text}&ldquo;</p>
      <div className="tmq-foot"><GoogleG s={14} /> Verifizierte Google-Rezension</div>
    </div>
  );
  return (
    <section className="sec muted">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Stimmen</span>
          <h2 className="h-sec">Was Partner wirklich <em className="hl">sagen</em>.</h2>
          <div className="g-trust">
            <GoogleG s={30} />
            <div className="g-trust-txt">
              <div className="g-trust-top"><strong>4,9</strong><Rating value={5} size={17} /></div>
              <div className="g-trust-sub">Google&nbsp;Bewertungen · 100+ verifizierte Partner</div>
            </div>
          </div>
        </div>
      </div>
      <div className="tmq">
        <div className="tmq-track">
          {reviews.map((r, i) => card(r, i))}
          {reviews.map((r, i) => card(r, i + 100))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 14 · Mit dabei (Inklusiv-Strip) */
function Inclusion() {
  const items = [
    'Kostenloses Erstgespräch', 'Standort-Analyse', 'Lieferung & Aufstellung',
    'Einrichtung & Anbindung', 'Sortiment-Beratung', 'Kalkulation & ROI-Plan',
    'Finanzierungs-Hilfe', 'Bundesweiter Techniker-Service', 'Persönlicher Ansprechpartner',
  ];
  return (
    <section className="sec--tight">
      <div className="wrap">
        <Rv className="incl">
          <div className="incl-head">
            <span className="kicker">Mit dabei</span>
            <h2 className="h-sec" style={{ marginTop: 10 }}>Das ist alles <em className="hl">inklusive</em>.</h2>
          </div>
          <div className="incl-grid">
            {items.map((t) => (
              <div key={t} className="incl-item"><span className="ic"><I.Check size={14} /></span>{t}</div>
            ))}
          </div>
        </Rv>
      </div>
    </section>
  );
}

/* ============================================================ 15 · FAQ */
function Faq() {
  const qs = [
    { q: 'Ist das nicht super teuer?', a: 'Die Frage ist nicht, was es kostet, sondern was es dir bringt. Im Erstgespräch rechnen wir gemeinsam, ab wann sich dein Automat trägt, ehrlich und ohne Schönrechnerei. Finanzierung ist möglich.' },
    { q: 'Ich kenn mich technisch null aus.', a: 'Musst du auch kein Techniker sein. Aufstellung, Einrichtung und Service laufen über uns und unser bundesweites Techniker-Netzwerk. Wichtig ist nur, dass du offen an den technischen Teil rangehst und bereit bist, dir mit der Zeit etwas Know-how anzueignen.' },
    { q: 'Läuft das wirklich ohne Personal?', a: 'Ehrlich: Auffüllen muss jemand, das machst du selbst oder ein Minijobber, oft unter einer Stunde am Tag. Verkauf, Kasse und Öffnungszeiten laufen rund um die Uhr von allein.' },
    { q: 'Andere Anbieter sind günstiger.', a: 'Manchmal stimmt das. Aber wer hilft dir beim Standort, beim Sortiment, wenn die Maschine mal steht? Wir sind Partner, kein einmaliger Verkäufer. Genau das macht den Unterschied.' },
    { q: 'Wie schnell kann ich starten?', a: 'Nach dem Erstgespräch und der Standort-Klärung planst du mit mindestens 2 Wochen Vorlaufzeit, bis Lieferung und Aufstellung stehen.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div style={{ textAlign: 'center' }}>
          <span className="kicker" style={{ justifyContent: 'center' }}>FAQ</span>
          <h2 className="h-sec center">Häufig <em className="hl">gefragt</em>.</h2>
        </div>
        <div className="faqwrap">
          {qs.map((item, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {item.q}<span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-in">{item.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 16 · Standort */
function Location() {
  return (
    <section className="sec muted">
      <div className="wrap">
        <div className="loc">
          <Rv className="loc-media">
            <div className="media-card"><img src={IMG.case} alt="Schober Automaten in Kassel" /></div>
          </Rv>
          <div className="loc-body">
            <span className="kicker">Standort</span>
            <h2 className="h-sec">Zuhause in <em className="hl">Kassel</em>.</h2>
            <p className="lead">Kein anonymer Online-Händler. Uns gibt es wirklich, mit Werkstatt, Lager und einem Team, das du anrufen kannst.</p>
            <div className="loc-rows">
              <div className="loc-row"><span className="ic"><I.MapPin size={18} /></span><div><div className="lr-t">Schober Automaten</div><div className="lr-s">34117 Kassel</div></div></div>
              <div className="loc-row"><span className="ic"><I.Phone size={18} /></span><div><div className="lr-t">+49 561 97062338</div><div className="lr-s">Mo–Fr, persönlich erreichbar</div></div></div>
              <div className="loc-row"><span className="ic"><I.Truck size={18} /></span><div><div className="lr-t">Lieferung im DACH-Raum</div><div className="lr-s">15+ Techniker bundesweit</div></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 17 · Final CTA (öffnet Modal) */
function Final() {
  return (
    <section className="sec" id="lead">
      <div className="wrap">
        <div className="final dark cta-only">
          <div className="final-grid">
            <div>
              <span className="kicker">Kostenlos & unverbindlich</span>
              <h2>Worauf wartest du noch?</h2>
              <p className="lead" style={{ marginTop: 0, marginInline: 'auto' }}>Jeder Monat, den du wartest, verdient ein anderer das Geld, das deins sein könnte. Sichere dir dein kostenloses Erstgespräch, wir melden uns innerhalb von 24 Stunden.</p>
              <div className="promises">
                {['Keine Kosten, keine Verpflichtung', 'Ehrliche Einschätzung statt Verkaufsdruck', 'Persönlich, kein Callcenter'].map((t) => (
                  <div key={t} className="promise"><span className="pc"><I.Check size={15} /></span>{t}</div>
                ))}
              </div>
              <div className="bigcta-wrap">
                <Button variant="accent" size="lg" iconRight={<I.ArrowRight size={20} />} onClick={goForm}>Kostenloses Erstgespräch sichern</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ 18 · Footer */
function Footer() {
  const legal = [
    { l: 'Impressum', href: 'https://www.schoberautomaten.de/impressum' },
    { l: 'Datenschutz', href: 'https://www.schoberautomaten.de/datenschutz' },
    { l: 'AGB', href: 'https://www.schoberautomaten.de/agbs' },
  ];
  return (
    <footer className="ft ft-min">
      <div className="wrap ft-min-in">
        <div className="ft-brand">
          <Logo height={30} tone="light" />
          <span>©2026 Schober Automaten · Kassel</span>
        </div>
        <div className="ft-legal">
          {legal.map((x) => (
            <a key={x.l} href={x.href} target="_blank" rel="noopener noreferrer">{x.l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

/* ============================================================ Qualify Modal */
function QualifyModal() {
  /* Reihenfolge: erst Situation & Motivation (leicht, baut Commitment auf),
     dann konkrete Qualifikation (Gewerbe, Standort), Budget als sensibelste
     Frage zum Schluss — direkt vor den Kontaktdaten. */
  const steps = [
    { key: 'beruf', q: 'Was machst du aktuell beruflich?', opts: ['Angestellt in Vollzeit', 'Selbstständig / eigenes Business', 'Teilzeit / Minijob', 'Aktuell auf Jobsuche'] },
    { key: 'ziel', q: 'Warum möchtest du ein Automaten-Business starten?', opts: ['Zweites Standbein neben dem Job', 'Raus aus dem Angestelltenverhältnis', 'Vermögen & passives Einkommen aufbauen', 'Mehr Zeit & Freiheit'] },
    { key: 'gewerbe', q: 'Besteht bereits ein Gewerbe?', opts: ['Ja, ich habe bereits ein Gewerbe', 'Nein, aber ich würde eins anmelden', 'Nein, noch nicht'] },
    { key: 'standort', q: 'Gibt es bereits einen potenziellen Standort für deinen Automaten?', opts: ['Ja, ich habe einen konkreten Standort', 'Ich habe erste Ideen, aber nichts Festes', 'Nein, ich brauche Unterstützung bei der Standortsuche'] },
    { key: 'budget', q: 'Wie viel bist du bereit, in deine neue Karriere zu investieren?', opts: ['Unter 10.000 €', '10.000 – 25.000 €', '25.000 – 50.000 €', 'Über 50.000 €'] },
  ];
  const checks = ['Deine Angaben werden geprüft', 'Dein Standort wird bewertet', 'Deine persönliche Einschätzung wird vorbereitet'];
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [loadStep, setLoadStep] = useState(0);

  const contactTracked = useRef(false);

  useEffect(() => {
    const onOpen = () => { setOpen(true); setStep(0); setAnswers({}); setSent(false); setLoading(false); setLoadStep(0); contactTracked.current = false; track('open'); };
    window.addEventListener('schober:qualify', onOpen);
    return () => window.removeEventListener('schober:qualify', onOpen);
  }, []);

  // Nach letzter Frage: kurze "Prüf"-Animation, dann Kontaktdaten
  useEffect(() => {
    if (!open || sent || step !== steps.length) return;
    setLoading(true); setLoadStep(0);
    const msgInt = setInterval(() => setLoadStep((s) => Math.min(s + 1, checks.length - 1)), 850);
    const done = setTimeout(() => setLoading(false), 2900);
    return () => { clearInterval(msgInt); clearTimeout(done); };
  }, [open, step, sent]);

  // Kontaktformular erreicht → einmal pro Quiz-Durchlauf tracken
  useEffect(() => {
    if (open && !sent && !loading && step === steps.length && !contactTracked.current) {
      contactTracked.current = true;
      track('contact');
    }
  }, [open, sent, loading, step]);
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    if (open) { document.body.style.overflow = 'hidden'; window.addEventListener('keydown', onKey); }
    else { document.body.style.overflow = ''; }
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  if (!open) return null;
  const total = steps.length + 1;
  const pick = (key, val) => {
    setAnswers(a => ({ ...a, [key]: val }));
    track('answer', { step: step + 1, q: key, answer: val });
    setTimeout(() => setStep(s => s + 1), 160);
  };
  const pct = Math.round(((sent ? total : step) / total) * 100);

  return (
    <div className="qm-overlay" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <div className="qm" role="dialog" aria-modal="true">
        <button className="qm-close" aria-label="Schließen" onClick={() => setOpen(false)}><I.X size={20} /></button>
        <div className="qm-bar"><span style={{ width: pct + '%' }} /></div>

        {sent ? (
          <div className="qm-body qm-success">
            <span className="qm-sc"><I.Check size={34} /></span>
            <h3>Wir haben deine Anfrage erhalten!</h3>
            <p>Unser Team prüft deine Angaben und meldet sich innerhalb von 24 Stunden persönlich bei dir, mit deiner kostenlosen Einschätzung. Kein Callcenter, kein Verkaufsdruck.</p>
          </div>
        ) : loading ? (
          <div className="qm-body qm-loading">
            <span className="qm-spinner" aria-hidden="true" />
            <h3 className="qm-q">Wir prüfen gerade deine Angaben …</h3>
            <div className="qm-checks">
              {checks.map((c, i) => (
                <div key={i} className={'qm-check' + (i < loadStep ? ' done' : i === loadStep ? ' active' : '')}>
                  <span className="qm-check-ic">{i < loadStep ? <I.Check size={13} /> : <span className="qm-dot-spin" />}</span>
                  <span>{c}</span>
                </div>
              ))}
            </div>
          </div>
        ) : step < steps.length ? (
          <div className="qm-body">
            <span className="qm-step">Frage {step + 1} von {total}</span>
            <h3 className="qm-q">{steps[step].q}</h3>
            <div className="qm-opts">
              {steps[step].opts.map((o) => (
                <button key={o} className={'qm-opt' + (answers[steps[step].key] === o ? ' on' : '')} onClick={() => pick(steps[step].key, o)}>
                  <span>{o}</span><span className="qm-opt-ar"><I.ArrowRight size={18} /></span>
                </button>
              ))}
            </div>
            {step > 0 && <button className="qm-back" onClick={() => setStep(s => s - 1)}>← Zurück</button>}
          </div>
        ) : (
          <div className="qm-body">
            <span className="qm-step">Letzter Schritt</span>
            <h3 className="qm-q">Wie können wir dich für deine kostenlose Beratung kontaktieren?</h3>
            <form className="qm-form" onSubmit={(e) => {
              e.preventDefault();
              const f = e.target;
              const payload = {
                vorname: f.vorname.value, nachname: f.nachname.value,
                email: f.email.value, telefon: f.telefon.value,
                beruf: answers.beruf, ziel: answers.ziel, gewerbe: answers.gewerbe,
                standort: answers.standort, budget: answers.budget,
                quelle: 'landingpage',
              };
              fetch('/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }).catch(() => {});
              track('submit');
              setSent(true);
            }}>
              <div className="qm-row2">
                <Input label="Vorname" name="vorname" placeholder="Max" autoComplete="given-name" required />
                <Input label="Nachname" name="nachname" placeholder="Mustermann" autoComplete="family-name" required />
              </div>
              <Input label="E-Mail" type="email" name="email" placeholder="name@mail.de" autoComplete="email" required />
              <Input label="Telefonnummer" type="tel" name="telefon" placeholder="+49 170 1234567" autoComplete="tel" inputMode="tel" pattern="[+]?[0-9 \(\)\/\-–]{6,}" title="Bitte gib eine gültige Telefonnummer ein (mind. 6 Ziffern)." required />
              <Button variant="primary" full size="lg" type="submit" iconRight={<I.ArrowRight size={18} />}>Kostenloses Erstgespräch sichern</Button>
              <p className="qm-privacy">Mit dem Klick auf „Kostenloses Erstgespräch sichern“ stimmst du zu, dass wir deine Angaben zur Kontaktaufnahme verarbeiten. Es entstehen keine Kosten, du gehst keine Verpflichtung ein. Mehr in unserer <a href="#" style={{ color: 'var(--brand)' }}>Datenschutzerklärung</a>.</p>
            </form>
            <button className="qm-back" onClick={() => setStep(s => s - 1)}>← Zurück</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================================================ Sticky mobile CTA — erscheint nach Hero */
function StickyCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const hero = document.querySelector('.hero');
    if (!hero) return;
    const io = new IntersectionObserver(([e]) => setShow(!e.isIntersecting), { threshold: 0, rootMargin: '-8px 0px 0px 0px' });
    io.observe(hero);
    return () => io.disconnect();
  }, []);
  return (
    <div className={'mcta' + (show ? ' show' : '')}>
      <Button variant="primary" full size="lg" onClick={goForm}>Kostenloses Erstgespräch sichern</Button>
    </div>
  );
}

/* ============================================================ App */
function App() {
  // Seitenaufruf einmal pro Browser-Session tracken (Funnel-Basis "Besucher")
  useEffect(() => {
    try {
      if (!sessionStorage.getItem('sb_viewed')) {
        sessionStorage.setItem('sb_viewed', '1');
        track('view');
      }
    } catch { track('view'); }
  }, []);
  return (
    <React.Fragment>
      <Header />
      <main>
        {/* Cold-Traffic-Funnel: Hook → Trust → Pain → Dream → Erklärung → Beweis → Autorität → Weg → Abschluss */}
        <Hero />
        <Diagnose />
        <Outcome />
        <Cases />
        <Pillars />
        <VideoVoices />
        <Founder />
        <Testimonials />
        <Benefits />
        <Solutions />
        <Steps />
        <Compare />
        <CtaBand variant="blue" kicker="Dein nächster Schritt" title="Starte jetzt in dein eigenes Standbein" sub="In 30 Minuten weißt du, ob sich dein erster Automat lohnt. Kostenlos." />
        <Inclusion />
        <Location />
        <Faq />
        <Final />
      </main>
      <Footer />
      <StickyCTA />
      <QualifyModal />
    </React.Fragment>
  );
}

const _el = document.getElementById('root');
if (!window.__schoberRoot) window.__schoberRoot = ReactDOM.createRoot(_el);
window.__schoberRoot.render(<App />);