// sections.jsx — M. Arndt — AI Systems · CRO-optimiert nach Value Equation (Hormozi)
// Sektionsreihenfolge: Hero → Problem → CostOfInaction → Mechanism → UseCases →
//   SelectedWork → HowItWorks → Services → Proof → Investment → AudienceFit →
//   About → WhyMe → FAQ → FinalCTA

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// ─── HEADER ────────────────────────────────────────────────
const NAV_ITEMS = [
  { label: "Anwendungsfälle",  href: "#use-cases" },
  { label: "So arbeite ich",   href: "#process" },
  { label: "Leistungen",       href: "#services" },
  { label: "Über mich",        href: "#about" },
];

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    f();
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);

  React.useEffect(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [mobileOpen]);

  const closeMobile = () => setMobileOpen(false);

  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`} role="banner">
      <div className="container site-header-inner">
        <a href="#top" className="brand" aria-label="M. Arndt — AI Systems · Startseite">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" focusable="false"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" strokeWidth="1"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>
          </span>
          <span className="brand-name"><strong>M. Arndt</strong> <span className="muted">— AI Systems</span></span>
        </a>
        <nav className="nav-links" aria-label="Hauptnavigation">
          {NAV_ITEMS.map(item => (
            <a key={item.href} href={item.href}>{item.label}</a>
          ))}
        </nav>
        <a
          href="https://calendly.com/martinarndt"
          className="btn btn-primary btn-sm header-cta"
          aria-label="Kostenloses Erstgespräch vereinbaren"
          data-event="header_cta_click"
        >
          Kostenloses Erstgespräch<Arrow />
        </a>
        <button
          type="button"
          className={`burger ${mobileOpen ? "open" : ""}`}
          aria-label={mobileOpen ? "Menü schließen" : "Menü öffnen"}
          aria-expanded={mobileOpen}
          aria-controls="mobile-nav"
          onClick={() => setMobileOpen(v => !v)}
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div
        id="mobile-nav"
        className={`nav-mobile ${mobileOpen ? "open" : ""}`}
        aria-hidden={!mobileOpen}
      >
        <nav className="nav-mobile-inner" aria-label="Mobile Hauptnavigation">
          {NAV_ITEMS.map(item => (
            <a key={item.href} href={item.href} onClick={closeMobile}>{item.label}</a>
          ))}
          <a
            href="https://calendly.com/martinarndt"
            className="btn btn-primary nav-mobile-cta"
            aria-label="Kostenloses Erstgespräch vereinbaren"
            data-event="header_mobile_cta_click"
            onClick={closeMobile}
          >
            Kostenloses Erstgespräch<Arrow />
          </a>
        </nav>
      </div>
      {mobileOpen && (
        <div className="nav-mobile-overlay" onClick={closeMobile} aria-hidden="true" />
      )}
    </header>
  );
};

// ─── TRUST TICKER ──────────────────────────────────────────
const TrustTicker = () => {
  const companies = [
    { name: "Stomutec",  logo: "images/logos/stomutec.png"  },
    { name: "Labochem",  logo: "images/logos/labochem.png"  },
    { name: "Endin",     logo: "images/logos/endin.png"     },
    { name: "Santoslab", logo: "images/logos/santoslab.png" },
  ];
  // 2× duplizieren → nahtloser Loop mit translateX(-50%)
  const items = [...companies, ...companies];

  return (
    <div className="trust-ticker" aria-label="Referenzunternehmen">
      <p className="trust-ticker-label mono">Ausgewählte Kunden</p>
      <div className="trust-ticker-mask">
        <div className="trust-ticker-track">
          {items.map((c, i) => (
            <span key={i} className="trust-ticker-item">
              <img
                src={c.logo}
                alt={c.name}
                className="trust-ticker-logo"
                loading="lazy"
                onError={e => {
                  e.currentTarget.style.display = "none";
                  e.currentTarget.nextSibling.style.display = "inline";
                }}
              />
              <span className="trust-ticker-fallback">{c.name}</span>
              <span className="trust-ticker-sep" aria-hidden="true" />
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── HERO — kompakt, Headline + Subtext ────────────────────
const Hero = () => (
  <section id="top" className="section hero-section" aria-labelledby="hero-h">
    <div className="container hero-grid">
      <div className="hero-copy">
        <div className="hero-meta reveal">
          <span className="eyebrow eyebrow-no-rule">
            <span className="status-dot" /> AI Systems Consultant · Künzelsau · Remote-DACH
          </span>
        </div>

        <h1 id="hero-h" className="h-display hero-h reveal" style={{"--reveal-delay":"60ms"}}>
          Manuelle Prozesse, die täglich Zeit kosten — <em className="hero-em">automatisiert</em> in 14 Tagen.
        </h1>

        <p className="hero-sub reveal" style={{"--reveal-delay":"140ms"}}>
          KI-Systeme, die in deine bestehenden Tools integriert werden —
          ohne Software-Wechsel, ohne Großprojekt.
        </p>

        <div className="hero-ctas reveal" style={{"--reveal-delay":"200ms"}}>
          <a
            href="https://calendly.com/martinarndt"
            className="btn btn-primary btn-lg"
            data-event="hero_cta_click"
          >
            Kostenloses Erstgespräch<Arrow />
          </a>
          <a href="#mechanism" className="btn btn-ghost btn-lg" data-event="hero_secondary_click">
            Wie es funktioniert
          </a>
        </div>

        <p className="hero-cta-sub mono reveal" style={{"--reveal-delay":"240ms"}}>
          30 Min · unverbindlich · kein Pitch
        </p>
      </div>

      <div className="hero-visual reveal" style={{"--reveal-delay":"120ms"}}>
        <HeroOrb />
      </div>
    </div>

    <TrustTicker />
  </section>
);

// ─── PROBLEM — konkrete operative Schmerzen ────────────────
const Problem = () => {
  const items = [
    { k: "01", t: "Leads werden zu spät beantwortet.", d: "Bis eine Anfrage bei der richtigen Person landet, hat der potenzielle Kunde bereits bei drei Wettbewerbern angefragt. Reaktionszeit entscheidet über den Auftrag." },
    { k: "02", t: "Angebote brauchen Tage, nicht Minuten.", d: "Preise aus dem ERP, Texte aus alten Angeboten, Verfügbarkeit aus dem Kalender — alles manuell zusammengetragen. Jedes Angebot kostet ein bis zwei Stunden erfahrener Mitarbeiterzeit." },
    { k: "03", t: "CRM-Daten stimmen nicht — oder fehlen.", d: "Kein verlässlicher Forecast, kein automatischer Follow-up, keine belastbare Pipeline. Was nicht manuell gepflegt wird, bleibt leer." },
    { k: "04", t: "Routine bindet die falschen Mitarbeiter.", d: "Erfahrene Mitarbeitende verbringen Stunden mit Dateneingabe, Tickets und Statusupdates. Für komplexe Fälle und strategische Arbeit bleibt zu wenig Kapazität." },
  ];
  return (
    <FlowSection id="problem" ariaLabel="Das Problem">
      <div className="flow-zone-head">
        <div className="flow-eyebrow">
          <span className="flow-rule" aria-hidden="true" />
          <span className="mono flow-label">Das Problem</span>
        </div>
        <h2 className="flow-h2">
          Operative Arbeit<br />frisst Zeit — täglich,<br />in jedem Unternehmen.
        </h2>
        <hr className="flow-hr" />
      </div>
      <div className="flow-zone-main">
        <ol className="flow-cards-4" aria-label="Operative Probleme">
          {items.map(it => (
            <li key={it.k} className="flow-card">
              <span className="mono flow-card-k">{it.k}</span>
              <h3 className="flow-card-t">{it.t}</h3>
              <p className="flow-card-d">{it.d}</p>
            </li>
          ))}
        </ol>
      </div>
      <div className="flow-zone-foot">
        <p className="flow-footnote">
          Manuelle Übergaben, fehlende Daten und langsame Reaktionszeiten sind keine Ausnahme — sie sind der Normalzustand ohne Automatisierung.
        </p>
      </div>
    </FlowSection>
  );
};

// ─── COST OF INACTION — was manuell bleibt, kostet ────────
const CostOfInaction = () => {
  const costs = [
    { n: "01", t: "Täglich 1–3 Stunden bezahlte Routinezeit", d: "Jeder manuelle Schritt summiert sich. Bei einem Team von 10 Personen mit je einer Stunde Routine sind das 50 Stunden pro Woche — bezahlte Zeit für unkritische Aufgaben." },
    { n: "02", t: "Leads, die kalt werden", d: "Jede Stunde Verzögerung bei der Erstantwort senkt die Abschlusswahrscheinlichkeit. Wer nach 24 Stunden antwortet, kämpft gegen Wettbewerber, die bereits im Gespräch sind." },
    { n: "03", t: "Wachstum durch Köpfe statt durch Systeme", d: "Ohne automatisierte Prozesse wächst der Aufwand linear mit dem Umsatz. Mehr Aufträge bedeuten mehr manuelle Arbeit — nicht mehr Effizienz." },
    { n: "04", t: "Fehler durch manuelle Datenpflege", d: "Falsche Preise im Angebot, vergessene Follow-ups, fehlende Informationen im CRM. Manuell bedeutet fehleranfällig — und Fehler kosten Vertrauen und Aufträge." },
  ];
  return (
    <FlowSection ariaLabel="Was auf dem Spiel steht" bg="var(--bg-elev)">
      <div className="flow-zone-head">
        <div className="flow-eyebrow">
          <span className="flow-rule" aria-hidden="true" />
          <span className="mono flow-label">Was auf dem Spiel steht</span>
        </div>
        <h2 className="flow-h2">
          Was manuelle Prozesse<br />wirklich kosten —<br />Woche für Woche.
        </h2>
        <hr className="flow-hr" />
      </div>
      <div className="flow-zone-main">
        <div className="flow-cards-4" role="list" aria-label="Kosten manueller Prozesse">
          {costs.map(c => (
            <div key={c.n} className="flow-card" role="listitem">
              <span className="mono flow-card-k">{c.n}</span>
              <h3 className="flow-card-t">{c.t}</h3>
              <p className="flow-card-d">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="flow-zone-foot">
        <p className="flow-footnote">
          Keine Katastrophe — aber ein struktureller Nachteil gegenüber Unternehmen, die ihre Abläufe bereits automatisiert haben.
        </p>
      </div>
    </FlowSection>
  );
};

// ─── MECHANISM — der Automatisierungsablauf ────────────────
const Mechanism = () => {
  const flow = [
    { k: "01", t: "Eingang",        d: "Anfrage kommt rein — Mail, WhatsApp, Formular, Webchat.", accent: false },
    { k: "02", t: "Erkennung",      d: "Inhalt, Kontext und Dringlichkeit werden automatisch erkannt.", accent: false },
    { k: "03", t: "Klassifikation", d: "Lead, Support, Beschwerde, interne Aufgabe — kategorisiert ohne manuelles Lesen.", accent: true },
    { k: "04", t: "Weiterleitung",  d: "Richtige Person, richtiges System, zur richtigen Zeit.", accent: false },
    { k: "05", t: "Aufgabe",        d: "Antwort verfasst, CRM-Eintrag angelegt, Angebot erstellt — durch den Agenten.", accent: false },
    { k: "06", t: "Status",         d: "Dashboard zeigt offen, erledigt, eskaliert — in Echtzeit.", accent: false },
  ];
  return (
    <FlowSection id="mechanism" ariaLabel="Der Mechanismus">
      <div className="flow-zone-head">
        <div className="flow-eyebrow">
          <span className="flow-rule" aria-hidden="true" />
          <span className="mono flow-label">Der Mechanismus</span>
        </div>
        <h2 className="flow-h2">
          So funktioniert Automatisierung<br />in der Praxis — Schritt für Schritt.
        </h2>
        <hr className="flow-hr" />
      </div>
      <div className="flow-zone-main">
        <div className="flow-mech-steps">
          {flow.map((s, i) => (
            <React.Fragment key={s.k}>
              <div className={`flow-mech-step${s.accent ? ' is-accent' : ''}`}>
                <span className="mono flow-card-k">{s.k}</span>
                <strong className="flow-mech-t">{s.t}</strong>
                <p className="flow-card-d">{s.d}</p>
              </div>
              {i < flow.length - 1 && (
                <div className="flow-mech-arrow" aria-hidden="true">
                  <Arrow size={12} />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="flow-zone-foot">
        <div className="flow-mech-foot">
          <span className="mono flow-footnote">Was bei dir konkret Sinn macht, klären wir im Erstgespräch — entspannt und unverbindlich.</span>
          <a href="https://calendly.com/martinarndt" className="btn btn-ghost btn-sm" data-event="mechanism_cta_click">
            Kostenloses Erstgespräch<Arrow size={12}/>
          </a>
        </div>
      </div>
    </FlowSection>
  );
};

// ─── AUDIENCE FIT ──────────────────────────────────────────
const FitCheck = ({ ok = true }) => (
  ok
    ? <svg viewBox="0 0 14 14" width="12" height="12" fill="none"><path d="M3 7.5l2.6 2.5L11 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
    : <svg viewBox="0 0 14 14" width="12" height="12" fill="none"><path d="M4 7h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
);

const AudienceFit = () => {
  const yes = [
    "Du führst ein mittelständisches Unternehmen mit 10–250 Mitarbeitern und klaren operativen Prozessen.",
    "In deinem Tagesgeschäft verlieren Mitarbeitende Zeit an wiederkehrende Anfragen, Dateneingabe oder Angebote.",
    "Du hast Tools im Einsatz (CRM, ERP, Mail, Messenger) und willst sie verbinden, statt sie zu ersetzen.",
    "Du bist bereit, ein Pilot-System für einen konkreten Use Case in 14 Tagen zu testen.",
  ];
  const no = [
    "Du suchst eine günstige Out-of-the-box-Lösung ohne Integration in deine Systeme.",
    "Du willst KI als Marketing-Etikett, ohne messbare Veränderung im Tagesgeschäft.",
    "Mangelndes C-Level-Commitment und fehlende Umsetzungsgeschwindigkeit.",
    "Du erwartest, dass KI komplexe Einzelfallentscheidungen ohne menschliche Kontrolle trifft.",
  ];
  return (
    <section id="fit" className="section sec-fit" aria-labelledby="fit-h">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">Passung</span>
            <h2 id="fit-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
              Für wen ich arbeite — und für wen nicht.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Das Erstgespräch ist kostenlos und unverbindlich. Damit es für
            uns beide Sinn macht, lohnt sich vorab ein kurzer Blick auf die Basis.
          </p>
        </div>
        <div className="fit-grid">
          <div className="fit-block is-yes reveal">
            <div className="fit-h"><span className="glyph"><FitCheck ok /></span> Passt, wenn …</div>
            <ul className="fit-list">
              {yes.map(t => <li key={t}>{t}</li>)}
            </ul>
          </div>
          <div className="fit-block is-no reveal" style={{"--reveal-delay":"100ms"}}>
            <div className="fit-h"><span className="glyph"><FitCheck ok={false}/></span> Passt nicht, wenn …</div>
            <ul className="fit-list">
              {no.map(t => <li key={t}>{t}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── INVESTMENT ────────────────────────────────────────────
const tiers = [
  {
    h: "Erstgespräch",
    name: "Kennenlernen",
    price: "0 €",
    unit: "30 Min · unverbindlich",
    d: "Wir lernen uns kennen. Du schilderst, wo es bei dir klemmt — ich höre zu und gebe eine ehrliche Einschätzung.",
    list: [
      "30 Min Video-Call — unverbindlich, ohne Verkaufsdruck",
      "Keine Folien, kein Pitch — nur Austausch auf Augenhöhe",
      "Klare Empfehlung am Ende: lohnt sich oder nicht",
    ],
    cta: "Erstgespräch buchen",
    ctaHref: "https://calendly.com/martinarndt",
    featured: false,
    event: "offer_free_cta_click",
  },
  {
    h: "Pilot",
    name: "Use-Case-Prototyp",
    from: "ab",
    price: "4.900 €",
    unit: "Festpreis · 10–14 Tage",
    d: "Ein konkreter Prozess wird in 14 Tagen automatisiert — testbar an echten Daten.",
    list: [
      "Funktionsfähiger Prototyp für einen Use Case",
      "Anbindung an ein Quell- und ein Zielsystem",
      "Übergabe inkl. Wirkungsmessung gegen Baseline",
    ],
    cta: "Pilot besprechen",
    ctaHref: "#contact",
    featured: true,
    event: "offer_pilot_cta_click",
  },
  {
    h: "System",
    name: "Produktiv-Integration",
    from: "ab",
    price: "12.000 €",
    unit: "je Modul · 4–8 Wochen",
    d: "Stabile, beobachtbare Integration in dein Tooling — mit Doku, Monitoring und Schulung.",
    list: [
      "Multi-System-Integration (CRM, ERP, Mail, Messenger)",
      "Monitoring, Logs, DSGVO-konforme Datenflüsse",
      "Schulung & Übergabe an dein Team",
    ],
    cta: "System besprechen",
    ctaHref: "#contact",
    featured: false,
    event: "offer_system_cta_click",
  },
];

const Investment = () => (
  <section id="invest" className="section sec-invest" aria-labelledby="invest-h">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow reveal">Investition</span>
          <h2 id="invest-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
            Drei Einstiegspunkte. Festpreis. Keine Überraschung.
          </h2>
        </div>
        <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
          Der erste Schritt ist immer kostenlos und unverbindlich — erst danach entscheidest du, ob es weitergeht.
          Finaler Festpreis nach Scope-Gespräch.
        </p>
      </div>
      <div className="invest-grid">
        {tiers.map((tier, i) => (
          <article key={tier.h} className={`invest-card ${tier.featured ? "featured" : ""} reveal`} style={{"--reveal-delay":`${i*60}ms`}}>
            <div className="invest-h">{tier.h}</div>
            <h3 className="invest-name">{tier.name}</h3>
            <div className="invest-price">
              {tier.from && <span className="from">{tier.from}</span>}
              <span>{tier.price}</span>
              <span className="unit">· {tier.unit}</span>
            </div>
            <p className="invest-d">{tier.d}</p>
            <ul className="invest-list">
              {tier.list.map(li => <li key={li}>{li}</li>)}
            </ul>
            <a href={tier.ctaHref || "#contact"} className="invest-cta" data-event={tier.event}>
              {tier.cta} <Arrow size={12}/>
            </a>
          </article>
        ))}
      </div>
      <div className="invest-foot reveal">
        <span className="mono">* Preisrahmen netto. Konkreter Festpreis nach Scoping. DSGVO-konforme Datenflüsse inklusive.</span>
        <span className="mono">Verfügbar · KW 19–22</span>
      </div>
    </div>
  </section>
);

// ─── ABOUT ─────────────────────────────────────────────────
const About = () => (
  <section id="about" className="section sec-about" aria-labelledby="about-h">
    <div className="container about-grid">
      <div className="about-portrait reveal">
        <img src="images/martin-arndt-portrait.jpg" alt="Martin Arndt — AI Systems Consultant, auf der Bühne" loading="lazy" decoding="async" width="1000" height="1252" />
      </div>
      <div className="about-text reveal" style={{"--reveal-delay":"100ms"}}>
        <span className="eyebrow eyebrow-no-rule">Wer arbeitet mit dir</span>
        <h2 id="about-h" className="h-1">
          Ich baue KI-Systeme, die im Tagesgeschäft <em className="hero-em">tragen</em> — nicht nur in der Demo.
        </h2>
        <p className="lede">
          Mein Fokus: operative Prozesse im Mittelstand. Statt Werkzeuge zu sammeln, baue ich
          Systeme, die dein Team eigenständig bedienen, weiterentwickeln und bewerten kann.
        </p>
        <ul className="about-credentials">
          <li><span className="dt">Spezialisierung</span><span className="dd">KI-Automationen für KMU</span></li>
          <li><span className="dt">Branchen</span><span className="dd">Solar · Bau · Handwerk · Arztpraxen · B2B</span></li>
          <li><span className="dt">Stack</span><span className="dd">Anthropic · n8n · SQL · Mistral</span></li>
          <li><span className="dt">Standort</span><span className="dd">Künzelsau · Remote in DACH</span></li>
        </ul>
      </div>
    </div>
  </section>
);

// ─── USE-CASE PORTALS ──────────────────────────────────────
const useCases = [
  { id: "lead",    k: "01", t: "Lead-Reaktion unter 2 Minuten",        b: "Anfragen aus Web, WhatsApp und Mail werden qualifiziert, beantwortet und mit vollem Kontext im CRM angelegt — bevor der Wettbewerb antwortet.", tags: ["n8n", "OpenAI", "WhatsApp", "HubSpot"], ui: "inbox" },
  { id: "quote",   k: "02", t: "Angebot in 15 Minuten",                b: "Aus Anfragen werden geprüfte Angebote: Preise aus dem ERP, Texte aus deinen Vorlagen, abgelegt im CRM. Sachbearbeitung wird entlastet.", tags: ["LLM", "PDF", "ERP"],                    ui: "quote" },
  { id: "crm",     k: "03", t: "CRM-Pflege nach Kundengesprächen",     b: "Aus Notizen und E-Mails werden Stammdaten, Aufgaben und Follow-ups — automatisch im CRM. Pipeline und Forecast bleiben belastbar.", tags: ["HubSpot", "Pipedrive", "n8n"],          ui: "crm"   },
  { id: "support", k: "04", t: "Ticket-Vorqualifizierung",             b: "Eingehende Tickets werden klassifiziert, mit Kontext angereichert und weitergeleitet — wiederkehrende Fragen löst der Agent direkt.", tags: ["Voice", "Chat", "Email"],               ui: "chat"  },
  { id: "kb",      k: "05", t: "Interne Wissensdatenbank",             b: "Verträge, Normen und Prozesse werden durchsuchbar — Antworten in Sekunden statt Stunden, mit Quellenangabe.",                                       tags: ["RAG", "Search", "ACL"],                 ui: "kb"    },
  { id: "report",  k: "06", t: "Reporting ohne Excel-Zusammenführung", b: "Wöchentliche Reports werden aus den richtigen Quellen erstellt, kommentiert und an die richtigen Teams verteilt — ohne manuelles Zusammenkopieren.", tags: ["BI", "Slack", "Email"],                ui: "dash"  },
];

const UseCaseCard = ({ uc, i }) => {
  const UI = { inbox: UIInbox, crm: UICRM, quote: UIQuote, chat: UIChat, kb: UIKB, dash: UIDash }[uc.ui];
  return (
    <article className="uc-card reveal" style={{"--reveal-delay": `${i * 50}ms`}}>
      <div className="uc-head">
        <span className="uc-k mono">{uc.k}</span>
        <span className="uc-status"><span className="status-dot" /> aktiv</span>
      </div>
      <h3 className="h-3 uc-title">{uc.t}</h3>
      <p className="uc-body muted">{uc.b}</p>
      <div className="uc-tags">
        {uc.tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>
      <div className="uc-preview">
        <div className="uc-preview-inner"><UI /></div>
        <div className="uc-portal-glow" aria-hidden />
      </div>
      <a
        href="https://calendly.com/martinarndt"
        className="uc-cta"
        aria-label={`${uc.t}: im Erstgespräch besprechen`}
        data-event="demo_cta_click"
        data-use-case={uc.id}
      >
        Im Erstgespräch besprechen <Arrow size={12}/>
      </a>
    </article>
  );
};

const UseCases = () => {
  const wrapRef = React.useRef(null);
  const [enabled, setEnabled] = React.useState(false);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 1024px) and (prefers-reduced-motion: no-preference)');
    const update = () => setEnabled(mq.matches);
    update();
    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', update) : mq.removeListener(update); };
  }, []);

  React.useEffect(() => {
    if (!enabled) { setProgress(0); return; }
    let raf = 0;
    const tick = () => {
      raf = 0;
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      const p = total > 0 ? Math.min(1, Math.max(0, -rect.top / total)) : 0;
      setProgress(p);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [enabled]);

  const N = useCases.length;
  const tx = enabled ? `translate3d(${(-progress * (N - 1) * 100).toFixed(3)}vw, 0, 0)` : 'none';
  const activeIdx = Math.min(N - 1, Math.floor(progress * N + 0.0001));

  return (
    <section className={`section sec-usecases ${enabled ? 'is-pinned' : ''}`} aria-labelledby="uc-h">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">Anwendungsfälle</span>
            <h2 id="uc-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop: "16px"}}>
              Wo KI-Automationen im Mittelstand sofort wirken.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Sechs Systeme, die in mittelständischen Unternehmen sofort Wirkung zeigen.
            Jedes ist als Modul aufgebaut — und an deine Tools andockbar.
          </p>
        </div>
      </div>
      <div id="use-cases" ref={wrapRef} className="uc-pinwrap" style={{height: enabled ? `${N * 100}vh` : 'auto'}}>
        <div className="uc-pinstage">
          <div className="uc-track" style={{transform: tx}}>
            {useCases.map((uc, i) => (
              <div key={uc.id} className="uc-panel" aria-hidden={enabled && i !== activeIdx ? 'true' : undefined}>
                <UseCaseCard uc={uc} i={i} />
              </div>
            ))}
          </div>
          {enabled && (
            <div className="uc-progress" aria-hidden="true">
              <div className="uc-progress-meta mono">
                <span>{String(activeIdx + 1).padStart(2,'0')} / {String(N).padStart(2,'0')}</span>
                <span className={`uc-hint ${progress > 0.04 ? 'is-faded' : ''}`}>↓ scrollen</span>
              </div>
              <div className="uc-progress-rail"><div className="uc-progress-bar" style={{transform: `scaleX(${progress})`}} /></div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// ─── SELECTED WORK ─────────────────────────────────────────
const cases = [
  {
    id: "solar",
    label: "Beispiel-Szenario",
    name: "Solar Lead Agent",
    industry: "Solarunternehmen, 18 Mitarbeiter",
    problem: "Lead-Anfragen kamen über sechs Kanäle — Reaktionszeit lag bei 9 Stunden, jede vierte Anfrage blieb liegen.",
    solution: "Multikanal-Inbox mit Klassifikation, Erstantwort-Agent, Übergabe an HubSpot mit vollständigem Kontext.",
    result: ["Reaktionszeit < 2 Min", "Kein verlorener Lead", "Ein Kanal statt sechs"],
    tools: ["n8n", "OpenAI", "WhatsApp Business", "HubSpot"],
    ui: "inbox",
  },
  {
    id: "quote",
    label: "Beispiel-Szenario",
    name: "Angebotsautomatisierung",
    industry: "Dienstleister, 35 Mitarbeiter",
    problem: "Angebote brauchten 2–3 Tage; Sachbearbeiter pflegten Preise manuell aus PDFs in CRM und ERP.",
    solution: "Agent extrahiert Anfragen, prüft Verfügbarkeit gegen ERP, baut Angebot aus Vorlage und legt es im CRM ab.",
    result: ["Angebot in unter 15 Min", "Konsistente Preise", "Sachbearbeitung entlastet"],
    tools: ["LLM", "ERP-API", "PDF", "Pipedrive"],
    ui: "quote",
  },
  {
    id: "support",
    label: "Beispiel-Szenario",
    name: "Support-KI für wiederkehrende Fragen",
    industry: "Immobilienverwaltung, 60 Mitarbeiter",
    problem: "70 % der Tickets waren wiederkehrende Mieterfragen — Service-Team kam kaum zu komplexen Fällen.",
    solution: "RAG-basierter Service-Agent mit Zugriff auf Verträge und Hausordnungen; Eskalationspfad an Menschen.",
    result: ["~60% Auto-Resolution", "Kürzere Wartezeit", "Konsistente Auskunft"],
    tools: ["RAG", "Email", "Chat-Widget", "ACL"],
    ui: "chat",
  },
  {
    id: "crm",
    label: "Beispiel-Szenario",
    name: "CRM-Follow-up-System",
    industry: "B2B-Service, 12 Mitarbeiter",
    problem: "Vertrieb pflegte Pipelines unregelmäßig, Follow-ups gingen verloren, kein klarer Forecast.",
    solution: "Agent strukturiert Calls aus Mail/Notes, schreibt CRM, plant Follow-ups, generiert Wochenreport.",
    result: ["Pipeline immer aktuell", "Follow-ups automatisch", "Wöchentlicher Report"],
    tools: ["Whisper", "OpenAI", "HubSpot", "Slack"],
    ui: "crm",
  },
];

const CaseCard = ({ c, i }) => {
  const UI = { inbox: UIInbox, crm: UICRM, quote: UIQuote, chat: UIChat }[c.ui];
  const flip = i % 2 === 1;
  return (
    <article className={`case-card ${flip ? "flip" : ""} reveal`}>
      <div className="case-mock">
        <div className="case-mock-frame">
          <div className="case-mock-bar">
            <span className="mac-dot" /><span className="mac-dot" /><span className="mac-dot" />
            <span className="mac-url mono">app.{c.id}.local</span>
          </div>
          <div className="case-mock-stage"><UI /></div>
        </div>
      </div>
      <div className="case-content">
        <div className="case-meta">
          <span className="eyebrow eyebrow-no-rule">{c.label}</span>
          <span className="case-num mono">0{i+1}</span>
        </div>
        <h3 className="h-2 case-name">{c.name}</h3>
        <div className="case-industry muted">{c.industry}</div>
        <dl className="case-pql">
          <div><dt>Problem</dt><dd>{c.problem}</dd></div>
          <div><dt>Lösung</dt><dd>{c.solution}</dd></div>
          <div>
            <dt>Ergebnis</dt>
            <dd>
              <ul className="case-res">
                {c.result.map(r => <li key={r}>{r}</li>)}
              </ul>
            </dd>
          </div>
        </dl>
        <div className="case-tools">
          {c.tools.map(t => <span key={t} className="tag">{t}</span>)}
        </div>
      </div>
    </article>
  );
};

const SelectedWork = () => (
  <section id="work" className="section sec-work" aria-labelledby="work-h">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow reveal">Beispiele</span>
          <h2 id="work-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
            Beispielhafte Szenarien aus typischen Mittelstandsprozessen.
          </h2>
        </div>
        <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
          Diese Szenarien zeigen typische Einsatzbereiche und welcher wirtschaftliche Nutzen entsteht.
          Konkrete Umsetzung und Wirtschaftlichkeit klären wir gemeinsam im Erstgespräch.
        </p>
      </div>
      <div className="case-list">
        {cases.map((c, i) => <CaseCard key={c.id} c={c} i={i} />)}
      </div>
    </div>
  </section>
);

// ─── SERVICES ──────────────────────────────────────────────
const services = [
  { k: "01", t: "KI-Prozessanalyse",       d: "Gemeinsam identifizieren wir die Prozesse, in denen KI wirtschaftlich Sinn ergibt — und welche besser nicht angefasst werden." },
  { k: "02", t: "KI-Agenten",              d: "Agenten, die Aufgaben eigenständig erledigen: Anfragen klassifizieren, Daten zusammenführen, Antworten verfassen." },
  { k: "03", t: "Automationen",            d: "Workflows zwischen deinen Tools — von Posteingang bis ERP. Stabil, beobachtbar, dokumentiert." },
  { k: "04", t: "Tool-Integration",        d: "CRM, ERP, Telefonie, Mail, Messenger — saubere Anbindung statt Insellösung." },
  { k: "05", t: "Dashboards & Interfaces", d: "Operative Oberflächen, in denen das Team mit den Systemen arbeitet — keine Black Box." },
  { k: "06", t: "Schulung & Übergabe",     d: "Dein Team kann das System bedienen, weiterentwickeln und auswerten — ohne mich als Engpass." },
];

const Services = () => (
  <section id="services" className="section sec-services" aria-labelledby="svc-h">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow reveal">Leistungen</span>
          <h2 id="svc-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
            KI-Beratung von Analyse bis Go-Live.
          </h2>
        </div>
        <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
          Sechs Bausteine. Einzeln buchbar — oder als kompletter Lieferweg von der Bestandsaufnahme bis zum produktiven System.
        </p>
      </div>
      <div className="svc-grid">
        {services.map((s, i) => (
          <div key={s.k} className="svc-card reveal" style={{"--reveal-delay":`${i*40}ms`}}>
            <div className="svc-top">
              <span className="svc-k mono">{s.k}</span>
              <ServiceGlyph k={s.k} />
            </div>
            <h3 className="h-3 svc-t">{s.t}</h3>
            <p className="svc-d muted">{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ServiceGlyph = ({ k }) => {
  const stroke = "var(--ink)";
  const sw = 1.1;
  switch (k) {
    case "01": return <svg viewBox="0 0 28 28" width="28" height="28"><circle cx="14" cy="14" r="9" fill="none" stroke={stroke} strokeWidth={sw}/><path d="M14 5v18M5 14h18" stroke={stroke} strokeWidth={sw}/><circle cx="14" cy="14" r="2" fill="var(--accent)"/></svg>;
    case "02": return <svg viewBox="0 0 28 28" width="28" height="28"><rect x="5" y="9" width="18" height="14" rx="2" fill="none" stroke={stroke} strokeWidth={sw}/><circle cx="10" cy="6" r="1.6" fill="var(--accent)"/><path d="M10 7.6V9M18 9V6M14 14h4M10 17h8" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></svg>;
    case "03": return <svg viewBox="0 0 28 28" width="28" height="28"><path d="M5 8h6l3 6 3-6h6" stroke={stroke} strokeWidth={sw} fill="none" strokeLinejoin="round"/><circle cx="5" cy="20" r="2" fill="var(--accent)"/><circle cx="14" cy="20" r="2" fill="none" stroke={stroke} strokeWidth={sw}/><circle cx="23" cy="20" r="2" fill="none" stroke={stroke} strokeWidth={sw}/><path d="M7 20h5M16 20h5" stroke={stroke} strokeWidth={sw}/></svg>;
    case "04": return <svg viewBox="0 0 28 28" width="28" height="28"><circle cx="9" cy="9" r="3" fill="none" stroke={stroke} strokeWidth={sw}/><circle cx="19" cy="19" r="3" fill="none" stroke={stroke} strokeWidth={sw}/><circle cx="19" cy="9" r="3" fill="var(--accent)"/><path d="M9 12v7M12 19h4M12 9h4" stroke={stroke} strokeWidth={sw}/></svg>;
    case "05": return <svg viewBox="0 0 28 28" width="28" height="28"><rect x="4" y="6" width="20" height="14" rx="2" fill="none" stroke={stroke} strokeWidth={sw}/><path d="M8 16l3-4 3 2 4-5 2 3" stroke="var(--accent)" strokeWidth={sw+0.2} fill="none" strokeLinecap="round" strokeLinejoin="round"/><path d="M9 24h10" stroke={stroke} strokeWidth={sw}/></svg>;
    case "06": return <svg viewBox="0 0 28 28" width="28" height="28"><path d="M5 22V8l9-3 9 3v14" fill="none" stroke={stroke} strokeWidth={sw}/><path d="M9 22v-7h10v7" fill="none" stroke={stroke} strokeWidth={sw}/><circle cx="14" cy="13" r="1.5" fill="var(--accent)"/></svg>;
    default: return null;
  }
};

// ─── HOW IT WORKS — 4-Schritt-Ablauf mit Scroll-Animation ─
const HowItWorks = () => {
  const steps = [
    { n: "01", t: "Prozess beschreiben",           d: "30-Minuten-Call: Sie schildern 2–3 manuelle Abläufe, die täglich Zeit kosten. Keine Vorbereitung, keine Präsentation.", week: "Tag 1"      },
    { n: "02", t: "Bottleneck priorisieren",        d: "Ich identifiziere, welcher Prozess den höchsten Zeitverlust verursacht und für Automatisierung am besten geeignet ist — und warum.", week: "Woche 1"  },
    { n: "03", t: "Prototyp in 14 Tagen",           d: "Ein funktionsfähiger Prototyp für den priorisierten Use Case — testbar an echten Daten, integriert in Ihre bestehenden Systeme.", week: "Woche 2–3" },
    { n: "04", t: "Wirkung prüfen, dann entscheiden", d: "Sie sehen den Prototyp live, messen die Wirkung gegen Ihre Baseline — und entscheiden erst dann, ob und wie es weitergeht.", week: "Woche 3+"  },
  ];
  const N = steps.length;
  // Schwellwert (0–1) pro Node: gleichmäßig verteilt
  const thresholds = steps.map((_, i) => i / (N - 1));

  const [trackP, setTrackP] = React.useState(0);
  // Pro Node: hochzählen → zwingt React zum Remount → CSS-Animation startet neu
  const [pulseKeys, setPulseKeys] = React.useState(() => new Array(N).fill(0));
  const prevLitRef = React.useRef(new Array(N).fill(false));

  React.useEffect(() => {
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const mobile = window.matchMedia('(max-width: 1080px)').matches;
    if (reducedMotion || mobile) return;

    const section = document.getElementById('process');
    if (!section) return;
    let raf = 0;

    const update = () => {
      raf = 0;
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      // p=0: Section-Oberkante auf halber Viewport-Höhe (Section gut sichtbar)
      // p=1: Section-Oberkante erreicht Viewport-Top (= "rausfahren" beginnt)
      const startAt = vh * 0.5;
      const p = Math.min(1, Math.max(0, (startAt - rect.top) / startAt));
      setTrackP(p);

      // Neu beleuchtete Nodes erkennen → pulseKey hochzählen
      const nowLit = thresholds.map(thresh => p >= thresh);
      const newKeys = [...pulseKeys];
      let changed = false;
      nowLit.forEach((lit, i) => {
        if (lit && !prevLitRef.current[i]) { newKeys[i]++; changed = true; }
      });
      if (changed) setPulseKeys(newKeys);
      prevLitRef.current = nowLit;
    };

    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const litStates = thresholds.map(t => trackP >= t);
  const showDot = trackP > 0.01 && trackP < 0.995;
  // Dot-Position: von linkestem Node (7px) bis rechtestem Node (100% - 7px)
  const dotLeft = `calc(7px + ${trackP} * (100% - 14px))`;

  return (
    <section id="process" className="section sec-process" aria-labelledby="proc-h">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">Ablauf</span>
            <h2 id="proc-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
              Vier Schritte. Kein Großprojekt ohne Ergebnis.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Jeder Schritt hat einen klaren Liefergegenstand —
            Sie entscheiden am Ende jeder Phase selbst, ob Sie weitermachen.
          </p>
        </div>

        <div className="process-wrap">
          {/* Orange Fill-Bar: scaleX 0→1 beim Scrollen */}
          <div
            className="process-track-fill-bar"
            aria-hidden="true"
            style={{transform: `scaleX(${trackP})`}}
          />
          {/* Leuchtender Führungs-Punkt an der Spitze */}
          {showDot && (
            <div
              className="process-track-dot"
              aria-hidden="true"
              style={{left: dotLeft}}
            />
          )}

          <ol className="process-rail">
            {steps.map((s, i) => (
              <li
                key={s.n}
                className={`process-step${litStates[i] ? ' is-lit' : ''}`}
              >
                <div className="process-line">
                  {/* key-Wechsel → Remount → CSS-Animation startet neu */}
                  <span className="process-node" key={`node-${i}-${pulseKeys[i]}`} />
                </div>
                <div className="process-body">
                  <div className="process-head-row">
                    <span className="process-num mono">{s.n}</span>
                    <span className="process-week">{s.week}</span>
                  </div>
                  <h3 className="h-3 process-t">{s.t}</h3>
                  <p className="muted process-d">{s.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
};

// ─── PROOF ─────────────────────────────────────────────────
const proofs = [
  { l: "Schnellere Lead-Reaktion",      d: "Anfragen werden in Minuten statt Stunden bearbeitet — ohne dass das Team mehr arbeiten muss.", chart: "speed" },
  { l: "Weniger manuelle Dateneingabe", d: "Stammdaten, Notizen und Statusupdates laufen automatisch zwischen den Systemen.",            chart: "data"  },
  { l: "Strukturierte Angebote",        d: "Konsistente Preise, geprüfte Bedingungen, dokumentierte Versionen.",                          chart: "quote" },
  { l: "Weniger wiederkehrende Tickets",d: "Standardfragen löst der Agent — dein Team kümmert sich um die komplexen Fälle.",              chart: "tix"   },
];

const ProofChart = ({ k }) => {
  if (k === "speed") return (
    <svg viewBox="0 0 200 80" className="proof-chart">
      <line x1="0" y1="60" x2="200" y2="60" stroke="var(--line-2)" strokeWidth="0.5"/>
      <rect x="20" y="14" width="22" height="46" fill="var(--line-2)"/>
      <rect x="50" y="22" width="22" height="38" fill="var(--line-2)"/>
      <rect x="80" y="36" width="22" height="24" fill="var(--line-2)"/>
      <rect x="110" y="48" width="22" height="12" fill="var(--accent)"/>
      <rect x="140" y="52" width="22" height="8"  fill="var(--accent)"/>
      <rect x="170" y="55" width="22" height="5"  fill="var(--accent)"/>
      <text x="0" y="74" fontSize="7" fill="var(--muted)">vorher</text>
      <text x="170" y="74" fontSize="7" fill="var(--muted)">nachher</text>
    </svg>
  );
  if (k === "data") return (
    <svg viewBox="0 0 200 80" className="proof-chart">
      <circle cx="40" cy="40" r="28" fill="none" stroke="var(--line-2)" strokeWidth="6"/>
      <circle cx="40" cy="40" r="28" fill="none" stroke="var(--accent)" strokeWidth="6"
              strokeDasharray="176" strokeDashoffset="44" transform="rotate(-90 40 40)" strokeLinecap="butt"/>
      <text x="80" y="32" fontSize="9" fill="var(--ink)" fontWeight="500">manuelle Eingabe</text>
      <text x="80" y="46" fontSize="14" fill="var(--ink)" fontWeight="500" letterSpacing="-0.5" style={{fontVariantNumeric:'tabular-nums'}}>stark reduziert</text>
      <text x="80" y="60" fontSize="7" fill="var(--muted)">durch System-zu-System-Sync</text>
    </svg>
  );
  if (k === "quote") return (
    <svg viewBox="0 0 200 80" className="proof-chart">
      {[0,1,2,3,4].map(i => (
        <g key={i}>
          <rect x={10 + i*38} y="14" width="30" height="6" fill="var(--line-2)"/>
          <rect x={10 + i*38} y="24" width="22" height="6" fill="var(--line-2)"/>
          <rect x={10 + i*38} y="34" width="26" height="6" fill={i < 5 ? "var(--accent)" : "var(--line-2)"} opacity={0.3 + i*0.16}/>
          <rect x={10 + i*38} y="44" width="18" height="6" fill="var(--line-2)"/>
        </g>
      ))}
      <line x1="0" y1="62" x2="200" y2="62" stroke="var(--line-2)" strokeWidth="0.5"/>
      <text x="0" y="74" fontSize="7" fill="var(--muted)">konsistente Vorlagen, geprüfte Preise</text>
    </svg>
  );
  return (
    <svg viewBox="0 0 200 80" className="proof-chart">
      <polyline points="0,60 25,52 50,55 75,40 100,42 125,28 150,30 175,16 200,18"
                fill="none" stroke="var(--line-strong)" strokeWidth="0.7" strokeDasharray="2 3"/>
      <polyline points="0,60 25,55 50,52 75,46 100,40 125,32 150,24 175,18 200,12"
                fill="none" stroke="var(--accent)" strokeWidth="1.6"/>
      <circle cx="200" cy="12" r="3" fill="var(--accent)"/>
      <text x="0" y="74" fontSize="7" fill="var(--muted)">Auto-Resolution-Quote</text>
    </svg>
  );
};

const Proof = () => (
  <section className="section sec-proof" aria-labelledby="proof-h">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow reveal">Wirkung</span>
          <h2 id="proof-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
            Was sich durch KI-Automatisierung messbar verändert.
          </h2>
        </div>
        <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
          Typische Effekte aus Demo- und Pilotprojekten — gemessen gegen den Zustand vor der Einführung.
          Keine Erfolgsgarantien. Konkrete Wirkung wird vor Go-Live gegen Ihre Baseline gemessen.
        </p>
      </div>
      <div className="proof-grid">
        {proofs.map((p, i) => (
          <div key={p.l} className="proof-card reveal" style={{"--reveal-delay":`${i*60}ms`}}>
            <div className="proof-chart-wrap"><ProofChart k={p.chart} /></div>
            <div className="proof-text">
              <div className="proof-l">{p.l}</div>
              <div className="proof-d muted">{p.d}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="proof-foot reveal">
        <span className="mono muted">* Beobachtete Tendenzen aus Demo- und Pilotprojekten. Konkrete Wirkung wird vor Go-Live gegen Ihre Baseline gemessen.</span>
      </div>
    </div>
  </section>
);

// ─── WHY M. ARNDT ──────────────────────────────────────────
const WhyMe = () => {
  const reasons = [
    { k: "01", t: "Spezialisiert auf operative Mittelstandsprozesse", d: "Kein generisches KI-Lab. Fokus auf Vertrieb, Service, Backoffice — wo Zeit und Geld täglich liegen bleiben." },
    { k: "02", t: "Vorhandene Tools verbinden statt ersetzen", d: "CRM, ERP, Mail, Messenger bleiben, was sie sind. Die Automation legt sich darüber, nicht darunter." },
    { k: "03", t: "Erst Erstgespräch, dann Pilot, dann Skalierung", d: "Jede Stufe hat ein klares Lieferergebnis und eine Entscheidung am Ende. Kein Großprojekt ohne vorherige Wirkungsprüfung." },
    { k: "04", t: "Wirtschaftliche Bewertung vor jedem Schritt", d: "Aufwand, Hebel und Risiko werden vor Beauftragung benannt. Keine KI-Spielerei — Prozessentlastung mit messbarem Nutzen." },
  ];
  return (
    <section id="why" className="section sec-why" aria-labelledby="why-h">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">Warum M. Arndt</span>
            <h2 id="why-h" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
              Was die Zusammenarbeit unterscheidet.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Ich verkaufe keine KI. Ich baue Systeme, die wiederkehrende Arbeit aus deinem Alltag nehmen — und übergebe sie so, dass dein Team sie selbst betreibt.
          </p>
        </div>
        <ol className="why-grid">
          {reasons.map((r, i) => (
            <li key={r.k} className="why-item reveal" style={{"--reveal-delay":`${i*60}ms`}}>
              <span className="why-k mono">{r.k}</span>
              <h3 className="h-3 why-t">{r.t}</h3>
              <p className="muted why-d">{r.d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

// ─── FAQ — alle Einwände beantwortet ──────────────────────
const FAQ_ITEMS = [
  {
    q: "Müssen wir unsere bestehende Software ersetzen?",
    a: "Nein. Die Automation legt sich über deine bestehenden Systeme — CRM, ERP, Mail, Messenger bleiben, was sie sind. Ich verbinde sie mit Automatisierungsschichten, die dazwischen arbeiten. Keine Migration, keine Neuinstallation.",
  },
  {
    q: "Brauchen wir eine eigene API oder technisches Personal?",
    a: "Nein. Ich übernehme die technische Umsetzung vollständig. Dein Team muss keine Schnittstellen konfigurieren. Du siehst das fertige System und lernst, es zu bedienen — das ist alles.",
  },
  {
    q: "Wie läuft das Erstgespräch ab?",
    a: "30 Minuten per Video-Call — unverbindlich und ohne feste Agenda. Du schilderst, wo bei dir gerade Zeit verloren geht, ich frage gezielt nach. Am Ende bekommst du eine ehrliche Einschätzung, und wir wissen beide, ob eine Zusammenarbeit Sinn macht. Kein Slide-Deck, kein Sales-Pitch.",
  },
  {
    q: "Wie lange dauert die Umsetzung?",
    a: "Ein Prototyp ist in 10–14 Tagen testbar. Eine produktive Integration mit Anbindung an deine Systeme dauert je nach Komplexität 4 bis 8 Wochen. Jede Phase hat einen klaren Liefergegenstand.",
  },
  {
    q: "Was kostet eine KI-Automatisierung?",
    a: "Pro Use Case wird ein Festpreis vereinbart. Ein operativer Prototyp liegt typischerweise im niedrigen bis mittleren vierstelligen Bereich, ein produktiv integriertes System darüber. Das Erstgespräch ist kostenlos und unverbindlich — und gibt dir eine ehrliche Grundlage für deine Entscheidung.",
  },
  {
    q: "Wie sicher sind unsere Daten?",
    a: "Datenflüsse werden DSGVO-konform gestaltet — inklusive EU-Hosting-Optionen, Auftragsverarbeitungsvertrag und klarer Zugriffstrennung. Personenbezogene Daten werden minimiert oder maskiert, wo möglich.",
  },
  {
    q: "Was passiert, wenn unsere Prozesse individuell sind?",
    a: "Das ist der Normalfall. Kein Prozess ist identisch — deshalb beginnt jedes Projekt mit einer Analyse deiner spezifischen Abläufe. Der Prototyp wird für deine Prozesse gebaut, nicht umgekehrt.",
  },
  {
    q: "Welche Tools können angebunden werden?",
    a: "CRM (HubSpot, Pipedrive, Salesforce), ERP, Mail, Kalender, Messenger (WhatsApp Business, Slack, Teams), Telefonie und beliebige Systeme mit API. Für nicht-unterstützte Systeme prüfen wir Alternativen.",
  },
  {
    q: "Welche Prozesse lassen sich mit KI automatisieren?",
    a: "Geeignet sind regelhafte, wiederkehrende und gut dokumentierte Prozesse: Lead-Qualifizierung, Angebotsvorbereitung, Stammdatenpflege, Kundenanfragen, internes Wissensmanagement und Reporting. Komplexe Einzelfallentscheidungen bleiben beim Menschen.",
  },
  {
    q: "Was passiert, wenn der Prototyp nicht wie erwartet funktioniert?",
    a: "Jeder Prototyp wird gegen eine klar definierte Baseline getestet. Wenn die Wirkung nicht dem Vereinbarten entspricht, passen wir nach — das ist Teil des Übergabeprozesses. Kein Blackbox-Deployment.",
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section sec-faq" aria-labelledby="faq-heading">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">FAQ</span>
            <h2 id="faq-heading" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
              Antworten auf die Fragen, die fast immer zuerst kommen.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Software-Austausch, API, Datenschutz, Kosten, Zeitaufwand —
            alles, was du vor dem ersten Gespräch wissen solltest.
          </p>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            const id = `faq-${i}`;
            return (
              <div key={i} className={`faq-row ${isOpen ? "open" : ""}`}>
                <h3 className="faq-q">
                  <button
                    type="button"
                    aria-expanded={isOpen}
                    aria-controls={`${id}-a`}
                    id={`${id}-q`}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="faq-btn"
                    data-event="faq_open"
                    data-question={item.q}
                  >
                    <span>{item.q}</span>
                    <svg className="faq-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                      <path d="M3 6l5 5 5-5" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                </h3>
                <div id={`${id}-a`} role="region" aria-labelledby={`${id}-q`} className="faq-a" hidden={!isOpen}>
                  <p>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
        <div className="faq-cta reveal">
          <p className="muted">Frage nicht dabei? <a href="#contact">Sprechen wir im Erstgespräch darüber →</a></p>
        </div>
      </div>
    </section>
  );
};

// ─── FINAL CTA — DARK · einziger primärer CTA ─────────────
const FinalCTA = () => (
  <section id="contact" className="section sec-cta" data-theme="dark" aria-labelledby="cta-h">
    <div className="container cta-grid">
      <div className="cta-copy">
        <span className="eyebrow eyebrow-no-rule reveal">Nächster Schritt</span>
        <h2 id="cta-h" className="h-display cta-h reveal" style={{"--reveal-delay":"60ms"}}>
          In 30 Minuten klären, ob wir zusammenpassen.
        </h2>
        <p className="lede reveal" style={{"--reveal-delay":"120ms"}}>
          Du schilderst, wo bei dir gerade Zeit verloren geht. Ich höre zu, frage nach
          und gebe eine ehrliche Einschätzung — ob eine Zusammenarbeit Sinn macht oder nicht.
        </p>
        <p className="cta-sub mono reveal" style={{"--reveal-delay":"160ms"}}>
          30 Min · unverbindlich · kein Sales-Pitch
        </p>
        <div className="hero-ctas reveal" style={{"--reveal-delay":"190ms"}}>
          <a
            href="https://calendly.com/martinarndt"
            className="btn btn-primary btn-lg"
            data-event="final_cta_click"
          >
            Kostenloses Erstgespräch<Arrow />
          </a>
        </div>
        <p className="cta-sub muted reveal" style={{"--reveal-delay":"230ms", marginTop:"16px"}}>
          Oder direkt schreiben:{" "}
          <a href="mailto:hello@arndt-ai.de" style={{color:"rgba(245,243,238,.7)", borderBottom:"0.5px solid currentColor"}}>
            hello@arndt-ai.de
          </a>
        </p>
      </div>
      <div className="cta-card reveal" style={{"--reveal-delay":"160ms"}}>
        <div className="cta-card-h">
          <span className="status-dot light" />
          <span>Kostenloses Erstgespräch</span>
        </div>
        <ul className="cta-card-list">
          <li><span className="cta-num mono">01</span><span>30 Minuten Video-Call — unverbindlich, ohne Verkaufsdruck.</span></li>
          <li><span className="cta-num mono">02</span><span>Du schilderst, wo es klemmt — ich höre zu und frage gezielt nach.</span></li>
          <li><span className="cta-num mono">03</span><span>Ehrliche Empfehlung: ob eine Zusammenarbeit Sinn macht oder nicht.</span></li>
        </ul>
        <div className="cta-card-foot mono">
          <span>verfügbar · KW 19–22</span>
          <span>Antwort &lt; 4h</span>
        </div>
      </div>
    </div>
  </section>
);

// ─── STICKY MOBILE CTA ─────────────────────────────────────
const StickyCTA = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 500);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a
      href="https://calendly.com/martinarndt"
      className={`sticky-cta ${show ? "is-visible" : ""}`}
      aria-label="Kostenloses Erstgespräch vereinbaren"
      data-event="sticky_cta_click"
    >
      <span className="sticky-cta-l">
        <span className="status-dot light" aria-hidden />
        <span>Kostenloses Erstgespräch</span>
      </span>
      <Arrow />
    </a>
  );
};

// ─── FOOTER (shadcn-inspired) ──────────────────────────────
const XIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.74l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  </svg>
);

const LinkedInIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
    <rect x="2" y="9" width="4" height="12"/>
    <circle cx="4" cy="4" r="2"/>
  </svg>
);

const Footer = () => (
  <footer id="footer" className="site-footer" role="contentinfo">
    <div className="container ft-row">
      {/* Left: Brand */}
      <a href="#top" className="ft-brand-link" aria-label="M. Arndt — AI Systems · Startseite">
        <span className="ft-brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
            <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1"/>
            <circle cx="12" cy="12" r="4" fill="currentColor"/>
          </svg>
        </span>
        <span>M. Arndt — AI Systems</span>
      </a>

      {/* Middle: Copyright + Legal */}
      <div className="ft-meta">
        <span className="mono ft-copy">© 2026 · Alle Rechte vorbehalten</span>
        <span className="ft-sep" aria-hidden="true">·</span>
        <nav className="ft-legal" aria-label="Rechtliches">
          <a href="/impressum.html">Impressum</a>
          <a href="/datenschutz.html">Datenschutz</a>
        </nav>
      </div>

      {/* Right: Social */}
      <ul className="ft-social-list" aria-label="Social Media">
        <li>
          <a href="https://x.com/Kunstsammler123" target="_blank" rel="noopener noreferrer"
             className="ft-social-btn" aria-label="M. Arndt auf X (ehemals Twitter)">
            <XIcon />
          </a>
        </li>
        <li>
          <a href="https://www.linkedin.com/in/martin-arndt-5b16a3399/" target="_blank" rel="noopener noreferrer"
             className="ft-social-btn" aria-label="M. Arndt auf LinkedIn">
            <LinkedInIcon />
          </a>
        </li>
      </ul>
    </div>
  </footer>
);

Object.assign(window, {
  Header, Hero, Problem, CostOfInaction, Mechanism,
  AudienceFit, Investment, About,
  UseCases, SelectedWork, Services,
  HowItWorks, Proof, WhyMe, FAQ, FinalCTA,
  Footer, StickyCTA,
});