// home.jsx — landing page

const homeUseCases = [
  {
    num: "01",
    icon: "mail",
    title: "E-Mail & Kommunikation",
    body: "KI klassifiziert eingehende E-Mails, leitet sie ans richtige Team weiter und erstellt einen ersten Antwortentwurf.",
    tools: ["gmail", "n8n", "outlook"],
    hours: "3–6",
  },
  {
    num: "02",
    icon: "file",
    title: "Dokumente & Rechnungen",
    body: "Betrag, Datum und Lieferant aus PDFs auslesen. Direkter Export in DATEV, SAP oder Sheets.",
    tools: ["datev", "sap", "n8n"],
    hours: "5–10",
  },
  {
    num: "03",
    icon: "chart",
    title: "Reporting & Daten",
    body: "Vollautomatischer Reportversand aus euren Quellsystemen — inkl. KI-Kommentar zu Auffälligkeiten.",
    tools: ["sheets", "powerbi", "n8n"],
    hours: "4–8",
  },
  {
    num: "04",
    icon: "users",
    title: "HR & Onboarding",
    body: "Vertrag unterschrieben — und alles läuft: Account, Slack, IT, Checkliste, Willkommensmail. Ohne einen Klick.",
    tools: ["workspace", "slack", "notion"],
    hours: "2–4",
  },
  {
    num: "05",
    icon: "handshake",
    title: "Vertrieb & CRM",
    body: "Lead-Qualifizierung, Angebotsentwurf auf Knopfdruck, CRM-Einträge schreiben sich selbst.",
    tools: ["hubspot", "pipedrive", "n8n"],
    hours: "5–8",
  },
];

const homeFaqs = [
  {
    q: "Wie schnell läuft so ein Workflow?",
    a: "Wir fangen klein an, damit ihr sofort Ergebnisse seht. Einfache Lösungen (wie E-Mail-Sortierung) stehen in 3–5 Tagen. Komplexere Vernetzungen dauern meist 1–2 Wochen. Wir bauen agil: Der wichtigste Zeitfresser wird zuerst eliminiert.",
  },
  {
    q: "Bleiben unsere Daten wirklich in der EU?",
    a: "Ja, ohne Wenn und Aber. Wir nutzen Hosting-Partner in Deutschland oder Finnland und Modelle von europäischen Anbietern (wie Mistral oder Aleph Alpha). Wenn gewünscht, installieren wir alles on-premise direkt auf euren eigenen Servern. Eure Daten verlassen niemals euren Kontrollbereich.",
  },
  {
    q: "Brauchen wir eigenes IT-Personal dafür?",
    a: "Nein. Wir sind eure externe Engineering-Abteilung. Wir kümmern uns um die Einrichtung und Anbindung. Euer Team muss keine einzige Zeile Code verstehen — ihr nutzt einfach das Ergebnis. Falls ihr eine eigene IT habt, arbeiten wir gerne mit ihnen zusammen, um den Zugang sicherzustellen.",
  },
  {
    q: "Was passiert, wenn ein Workflow mal stockt?",
    a: "Wir bauen robust, Error-Handling inklusive. Sollte sich eine Schnittstelle ändern (z.B. ein Update eurer Software), merken wir das oft, bevor ihr es tut. Wir bieten Wartungspakete an, damit eure Automatisierung so zuverlässig läuft wie euer Stromanschluss.",
  },
  {
    q: "Können wir Änderungen auch selbst machen?",
    a: "Unbedingt. Wir nutzen Low-Code-Tools wie n8n. Das bedeutet: Nach der Übergabe gehört der Prozess euch. Wir dokumentieren alles so einfach, dass eine technisch affine Person in eurem Team kleine Anpassungen selbst vornehmen kann. Ihr seid nicht an uns gekettet.",
  },
];

// "Warum Treibiq" - 4 Reasons mit Click-to-Modal-Popup
const whyReasons = [
  {
    num: "01",
    icon: "shield",
    title: "DSGVO-konform per Default",
    teaser: "Eure Daten bleiben bei euch — nicht in einer amerikanischen Cloud, nicht auf fremden Servern.",
    detail: "Wir bauen mit EU-Hosting und EU-Modellen wie Mistral und Aleph Alpha. Wo nötig, richten wir alles komplett on-premise ein — direkt auf eurer Infrastruktur, ohne dass ein einziges Dokument euer Unternehmen verlässt. DSGVO ist bei uns kein Häkchen in einer Checkliste, sondern der Ausgangspunkt jeder Lösung.",
    tags: ["EU-Hosting", "On-Premise möglich", "Keine US-Cloud"],
  },
  {
    num: "02",
    icon: "server",
    title: "Open-Source-Stack ohne Abo-Falle",
    teaser: "Wir setzen auf n8n: Open Source, selbst gehostet und komplett in eurem Besitz statt monatlicher Miet-Tools.",
    detail: "Andere bauen Workflows in Zapier oder Make — und ihr zahlt monatlich für die reine Ausführung. Mit unserem n8n-Ansatz gibt es keine laufenden Tool-Kosten und keine Anbieter-Abhängigkeit. Der Workflow gehört euch — auch wenn wir morgen nicht mehr da sind. Ihr könnt ihn jederzeit lesen, anpassen und erweitern.",
    tags: ["n8n statt Zapier", "Keine Abo-Kosten", "Ihr besitzt den Code"],
  },
  {
    num: "03",
    icon: "users",
    title: "Technisch und persönlich",
    teaser: "Kein Mittelsmann, keine Folien-Schubser. Ihr sprecht direkt mit den Engineers, die euren Code schreiben.",
    detail: "Wir sprechen direkt mit den Menschen, die den Workflow täglich nutzen — nicht nur mit der Geschäftsführung. Wir schreiben den Code selbst, sitzen bei Fragen am Tisch und übergeben eine vollständige Dokumentation. Was wir gebaut haben, versteht ihr. Was ihr nicht versteht, erklären wir — so lange, bis es sitzt.",
    tags: ["Kein Mittelsmann", "Direkter Draht", "Vollständig dokumentiert"],
  },
  {
    num: "04",
    icon: "zap",
    title: "Pragmatisch, nicht überdimensioniert",
    teaser: "Automatisierung in 1–2 Wochen statt monatelanger Steering Committees.",
    detail: "Wir bauen in eurem Tempo und mit eurem vorhandenen Stack — egal ob Mittelstand, Start-up oder Konzern-Tochter. Keine Überdimensionierung, keine unnötigen Features, kein Projekt-Overhead. Die erste Automatisierung läuft schnell — dann schauen wir gemeinsam datenbasiert, was als nächster Schritt sinnvoll ist.",
    tags: ["1–2 Wochen Umsetzung", "Euer Stack", "Kein Overhead"],
  },
];

// "Was wir umsetzen" - 6 Workflows mit Click-to-Modal-Popup
const workflowsList = [
  {
    icon: "mail",
    title: "Die intelligente Inbox",
    sub: "E-Mail-Triage",
    teaser: "KI sortiert eure Mails und schreibt Antwort-Entwürfe vor. Ihr klickt nur noch auf Senden.",
    problem: "Das info@-Postfach ist ein schwarzes Loch. Anfragen gehen unter, Antworten kommen zu spät.",
    loesung: "Die Flut an Anfragen wird automatisch kategorisiert. Rechnungen landen in der Buchhaltung, Termine im Kalender. Ihr startet den Tag nicht mit 100 Mails, sondern mit fertigen Lösungen.",
    bauzeit: "1–2 Wochen",
    ersparnis: "3–6 Std / Woche",
  },
  {
    icon: "file",
    title: "Digitale Poststelle",
    sub: "Dokumenten-Ablage",
    teaser: "Nie wieder Scan_123.pdf händisch umbenennen und verschieben. Die KI weiß, wo es hingehört.",
    problem: "Scans landen im Download-Ordner, müssen einzeln umbenannt und in Projektordner verschoben werden.",
    loesung: "Scans und Anhänge werden gelesen, erkannt und mit logischen Namen (Datum_Kunde_Typ) direkt in eurem Zielordner abgelegt. DATEV-Export inklusive.",
    bauzeit: "1–2 Wochen",
    ersparnis: "5–10 Std / Woche",
  },
  {
    icon: "handshake",
    title: "Angebots-Assistent",
    sub: "Vertrieb",
    teaser: "Aus euren Notizen oder Sprachnachrichten wird in Sekunden ein fertiges Angebot im Firmenlayout.",
    problem: "Nach jedem Kundentermin sitzt jemand 30 Minuten am Angebot, kopiert aus Vorlagen, vertippt sich.",
    loesung: "Ihr diktiert die Eckdaten nach dem Kundentermin ein — die KI formuliert daraus ein professionelles PDF, das sofort rausgehen kann.",
    bauzeit: "1–2 Wochen",
    ersparnis: "4–8 Std / Woche",
  },
  {
    icon: "chart",
    title: "Smartes Reporting",
    sub: "Auswertung",
    teaser: "Echte Zahlen statt Bauchgefühl. Automatische Berichte aus euren Daten direkt auf euer Handy.",
    problem: "Reports werden monatlich aus Excel, CSV und drei Systemen zusammengeklickt. Immer wieder.",
    loesung: "Wir ziehen Daten aus CRM, Excel oder Buchhaltung zusammen und erstellen Dashboards, die euch sagen, wo ihr profitabel seid — ohne dass ihr eine Liste öffnen müsst.",
    bauzeit: "1–2 Wochen",
    ersparnis: "4–8 Std / Woche",
  },
  {
    icon: "users",
    title: "Mitarbeiter-Onboarding",
    sub: "HR",
    teaser: "Neue Mitarbeiter im Team? Alle Konten, Verträge und Checklisten werden automatisch erstellt.",
    problem: "Bei jedem neuen Mitarbeiter klickt jemand 2 Stunden durch 8 Tools, vergisst die Hälfte, IT chaotisiert los.",
    loesung: "Ein Klick und der Workflow legt E-Mail, Slack und Zugriffsberechtigungen an. Kein IT-Chaos mehr am ersten Arbeitstag.",
    bauzeit: "1–2 Wochen",
    ersparnis: "2–4 Std / Woche",
  },
  {
    icon: "sparkle",
    title: "Das Company Brain",
    sub: "Wissens-Chat",
    teaser: "Stellt Fragen an eure eigenen Dokumente. Schluss mit dem Suchen in alten Handbüchern.",
    problem: "Wissen liegt in 200 PDFs, Sharepoint-Ordnern und alten Protokollen. Niemand findet was.",
    loesung: "Wir machen eure PDFs und Protokolle durchsuchbar. Mitarbeiter fragen einen Chatbot: 'Wie war die Regelung für X?' und erhalten sofort die Antwort aus euren Quellen.",
    bauzeit: "1–2 Wochen",
    ersparnis: "3–5 Std / Woche",
  },
];

// -----------------------------
// HERO with hot-swappable visual
// -----------------------------
function Hero() {
  const { tweaks } = useTweaks();
  return (
    <section className="hero hero--with-floating">
      <HeroFloating />

      <div className="hero__inner">
        <div className="hero__copy reveal-stagger">
          <h1 className="hero__title">
            Eure Routinen laufen. <em>Eure Zeit gehört wieder euch.</em>
          </h1>
          <HeroMobileFlow />
          <p className="hero__sub">
            Mit Treibiq automatisiert ihr alles, was sich täglich wiederholt und euch Zeit kostet.
          </p>
          <div className="hero__ctas">
            <a href="kontakt.html" className="btn btn--primary btn--lg">
              Kostenloses Erstgespräch <Icon name="arrow" size={16} />
            </a>
            <a href="use-cases.html" className="btn btn--secondary btn--lg">
              Use Cases ansehen
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Mobile-only: 6 Tool-Logos verstreut platziert (wie Desktop floating),
// poppen nacheinander auf + schweben subtil, dann werden die Linien
// zwischen ihnen sequenziell als SVG-Pfade "gezeichnet" (stroke-dashoffset).
// Sitzt im Hero zwischen H1 und Lede. Auf Desktop per CSS versteckt.
function HeroMobileFlow() {
  // Float-Parameter pro Logo: Frequenzen + Phasen + Amplituden fuer
  // asynchrone Sinus-Bewegung. Werte sind so gewaehlt, dass keine zwei
  // Logos synchron laufen (verschiedene Primzahl-aehnliche Frequenzen).
  // ampX/ampY in % vom Container (200px hoch x ~360px breit auf Mobile).
  // Amplituden (aX/aY) bewusst klein gehalten - User-Wunsch 2026-05-12:
  // Bewegung soll auf Mobile dezenter sein. War 1.8-2.4 / 2.6-3.4, jetzt
  // 0.9-1.2 / 1.3-1.7 -> ca. halbiert, sanftes Atmen statt Schweben.
  const tools = [
    { name: "gmail",   top: 22, left: 12, fX: 0.18, fY: 0.22, aX: 1.1, aY: 1.7, pX: 0.0, pY: 0.5 },
    { name: "n8n",     top: 14, left: 50, fX: 0.22, fY: 0.16, aX: 0.9, aY: 1.5, pX: 1.2, pY: 2.0 },
    { name: "openai",  top: 32, left: 86, fX: 0.20, fY: 0.24, aX: 1.2, aY: 1.4, pX: 2.4, pY: 0.8 },
    { name: "hubspot", top: 68, left: 78, fX: 0.17, fY: 0.20, aX: 1.0, aY: 1.5, pX: 0.6, pY: 1.4 },
    { name: "slack",   top: 78, left: 38, fX: 0.25, fY: 0.18, aX: 1.0, aY: 1.3, pX: 1.8, pY: 2.6 },
    { name: "sheets",  top: 54, left: 18, fX: 0.19, fY: 0.21, aX: 1.2, aY: 1.6, pX: 3.0, pY: 1.0 },
  ];
  // Interconnected: n8n als Hub.
  const connections = [
    [0, 1], // gmail → n8n
    [1, 2], // n8n → openai
    [2, 3], // openai → hubspot
    [3, 1], // hubspot → n8n (Quer-Verbindung)
    [1, 4], // n8n → slack
    [4, 5], // slack → sheets
  ];

  const [phase, setPhase] = useState("logos");
  const [step, setStep] = useState(0);
  // Refs auf DOM-Elements - wir updaten sie pro RAF-Frame direkt (kein
  // React re-render bei 60fps).
  const posRefs = useRef([]);
  const linePathRefs = useRef([]);
  const pulsePathRefs = useRef([]);

  useEffect(() => {
    if (phase === "logos") {
      if (step < tools.length) {
        const t = setTimeout(() => setStep(step + 1), 220);
        return () => clearTimeout(t);
      } else {
        const t = setTimeout(() => { setPhase("lines"); setStep(0); }, 400);
        return () => clearTimeout(t);
      }
    }
    if (phase === "lines" && step < connections.length) {
      const t = setTimeout(() => setStep(step + 1), 480);
      return () => clearTimeout(t);
    }
  }, [phase, step]);

  // RAF-Loop: aktualisiert Logo-Positionen UND Pfad-Endpoints in einem
  // Schritt. Damit folgen die Linien dem Float der Logos synchron.
  // Performance-Fix 2026-05-13: Loop pausiert sobald der Hero-Container
  // ausserhalb des Viewports ist (IntersectionObserver-Guard). Vorher
  // lief der Loop permanent 60fps mit ~24 DOM-Writes pro Frame, auch
  // wenn der User schon laengst weiter unten gescrollt war.
  const containerRef = useRef(null);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaReduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
    if (mediaReduced) return;

    let raf = null;
    let isVisible = true;
    let flowWidth = 0;
    let flowHeight = 0;
    const t0 = performance.now();
    const TAU = Math.PI * 2;

    const measureFlow = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      flowWidth = rect?.width || 0;
      flowHeight = rect?.height || 0;
    };
    measureFlow();
    window.addEventListener("resize", measureFlow, { passive: true });

    const bob = (tool, t) => ({
      x: tool.aX * Math.sin(t * tool.fX * TAU + tool.pX),
      y: tool.aY * Math.sin(t * tool.fY * TAU + tool.pY),
    });

    const buildD = (a, b) => {
      const midX = (a.left + b.left) / 2;
      const midY = (a.top + b.top) / 2;
      const dx = b.left - a.left;
      const dy = b.top - a.top;
      const cx = midX - dy * 0.12;
      const cy = midY + dx * 0.12;
      return `M ${a.left.toFixed(2)} ${a.top.toFixed(2)} Q ${cx.toFixed(2)} ${cy.toFixed(2)} ${b.left.toFixed(2)} ${b.top.toFixed(2)}`;
    };

    const loop = () => {
      if (!isVisible) { raf = null; return; }
      const t = (performance.now() - t0) / 1000;
      const positions = tools.map(tool => {
        const b = bob(tool, t);
        return {
          top: tool.top + b.y,
          left: tool.left + b.x,
          xPx: (b.x / 100) * flowWidth,
          yPx: (b.y / 100) * flowHeight,
        };
      });
      for (let i = 0; i < tools.length; i++) {
        const el = posRefs.current[i];
        if (el) {
          el.style.transform =
            `translate3d(${positions[i].xPx.toFixed(2)}px, ${positions[i].yPx.toFixed(2)}px, 0) translate(-50%, -50%)`;
        }
      }
      for (let i = 0; i < connections.length; i++) {
        const [from, to] = connections[i];
        const d = buildD(positions[from], positions[to]);
        const lineEl = linePathRefs.current[i];
        const pulseEl = pulsePathRefs.current[i];
        if (lineEl) lineEl.setAttribute("d", d);
        if (pulseEl) pulseEl.setAttribute("d", d);
      }
      raf = requestAnimationFrame(loop);
    };

    // IntersectionObserver: nur RAF starten wenn Hero im Viewport
    const io = new IntersectionObserver((entries) => {
      const entry = entries[0];
      isVisible = entry.isIntersecting;
      if (isVisible && raf === null) {
        raf = requestAnimationFrame(loop);
      }
    }, { threshold: 0, rootMargin: "100px" });

    const target = containerRef.current;
    if (target) io.observe(target);
    // Initial start (falls IO erst spaeter feuert)
    raf = requestAnimationFrame(loop);

    return () => {
      isVisible = false;
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener("resize", measureFlow);
      io.disconnect();
    };
  }, []);

  // Static initial d-strings (fuer reduced-motion und ersten Render bevor
  // RAF zuschlaegt)
  const initialD = (from, to) => {
    const a = tools[from];
    const b = tools[to];
    const midX = (a.left + b.left) / 2;
    const midY = (a.top + b.top) / 2;
    const dx = b.left - a.left;
    const dy = b.top - a.top;
    return `M ${a.left} ${a.top} Q ${midX - dy * 0.12} ${midY + dx * 0.12} ${b.left} ${b.top}`;
  };

  return (
    <div className="hero-mobile-flow" aria-hidden="true" ref={containerRef}>
      <svg className="hero-mobile-flow__lines" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <linearGradient id="hmf-line-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#AC88FF" />
            <stop offset="100%" stopColor="#FF9966" />
          </linearGradient>
        </defs>
        {connections.map(([from, to], i) => {
          const visible = phase === "lines" && i < step;
          return (
            <React.Fragment key={i}>
              <path
                ref={el => { linePathRefs.current[i] = el; }}
                d={initialD(from, to)}
                pathLength="100"
                className={`hmf-line ${visible ? "is-in" : ""}`}
              />
              <path
                ref={el => { pulsePathRefs.current[i] = el; }}
                d={initialD(from, to)}
                pathLength="100"
                className={`hmf-pulse ${visible ? "is-in" : ""}`}
                style={{ animationDelay: `${i * 0.7}s` }}
              />
            </React.Fragment>
          );
        })}
      </svg>
      {tools.map((tool, i) => (
        <span
          key={tool.name}
          ref={el => { posRefs.current[i] = el; }}
          className={`hero-mobile-flow__pos ${i < step || phase === "lines" ? "is-in" : ""}`}
          style={{ top: `${tool.top}%`, left: `${tool.left}%` }}
        >
          <span className="hero-mobile-flow__logo">
            <ToolLogo tool={tool.name} size={22} loading="eager" />
          </span>
        </span>
      ))}
    </div>
  );
}

function HeroVisual({ variant }) {
  if (variant === "stat") return <HeroStat />;
  if (variant === "flow") return <HeroFlow />;
  return <HeroVideo />;
}

// Variant A: video slot (default) — drop a video into <video src=>
function HeroVideo() {
  return (
    <div className="hero__stage">
      {/*
        Hier kann später ein Video eingebunden werden:
        <video className="hero__video" autoPlay muted loop playsInline poster="">
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>
      */}
      <div className="flow" aria-hidden="true">
        <div className="flow__line flow__line--l1" />
        <div className="flow__line flow__line--l2" />
        <div className="flow__line flow__line--l3" />
        <div className="flow__node flow__node--n1"><ToolLogo tool="gmail" size={16} />Eingang</div>
        <div className="flow__node flow__node--n2"><ToolLogo tool="openai" size={16} />KI klassifiziert</div>
        <div className="flow__node flow__node--n3"><ToolLogo tool="hubspot" size={16} />CRM-Eintrag</div>
        <div className="flow__node flow__node--n4"><ToolLogo tool="slack" size={16} />Slack-Notiz</div>
      </div>
      <div className="hero__stage-content">
        <span className="hero__stage-label">
          <span className="pulse" />
          Live-Workflow · Video-Slot
        </span>
        <div className="hero__stage-foot">
          <div className="hero__stage-stat">
            <span className="hero__stage-stat__num">−7 Std</span>
            <span className="hero__stage-stat__label">/ Woche im Schnitt</span>
          </div>
          <button className="btn btn--icon" aria-label="Video abspielen" style={{ background: "var(--peach-300)", color: "var(--ink)" }}>
            <Icon name="play" size={22} />
          </button>
        </div>
      </div>
    </div>
  );
}

// Variant B: animated workflow nodes (no video frame)
function HeroFlow() {
  return (
    <div className="hero__stage" style={{ background: "var(--paper-warm)" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 1 }} viewBox="0 0 500 400" fill="none" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="hf-line" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#AC88FF" />
            <stop offset="100%" stopColor="#FF9966" />
          </linearGradient>
        </defs>
        <path d="M 80 100 C 180 100 220 200 320 200" stroke="url(#hf-line)" strokeWidth="2.5" strokeDasharray="6 6" fill="none" strokeLinecap="round" />
        <path d="M 80 280 C 180 280 220 200 320 200" stroke="url(#hf-line)" strokeWidth="2.5" strokeDasharray="6 6" fill="none" strokeLinecap="round" />
        <path d="M 320 200 C 380 200 400 100 460 100" stroke="url(#hf-line)" strokeWidth="2.5" strokeDasharray="6 6" fill="none" strokeLinecap="round" />
        <path d="M 320 200 C 380 200 400 280 460 280" stroke="url(#hf-line)" strokeWidth="2.5" strokeDasharray="6 6" fill="none" strokeLinecap="round" />
      </svg>
      <div className="flow" aria-hidden="true">
        <div className="flow__node" style={{ top: "18%", left: "8%" }}><ToolLogo tool="gmail" size={16} />Gmail</div>
        <div className="flow__node" style={{ top: "62%", left: "8%" }}><ToolLogo tool="outlook" size={16} />Outlook</div>
        <div className="flow__node" style={{ top: "40%", left: "44%", background: "var(--ink)", color: "var(--paper)", fontWeight: 700 }}>
          <ToolLogo tool="openai" size={16} />n8n + GPT-4
        </div>
        <div className="flow__node" style={{ top: "18%", right: "6%" }}><ToolLogo tool="hubspot" size={16} />HubSpot</div>
        <div className="flow__node" style={{ top: "62%", right: "6%" }}><ToolLogo tool="slack" size={16} />Slack</div>
      </div>
      <div className="hero__stage-content">
        <span className="hero__stage-label" style={{ background: "var(--ink)", color: "var(--paper)", border: 0 }}>
          <span className="pulse" />Workflow läuft
        </span>
        <div className="hero__stage-foot">
          <div className="hero__stage-stat">
            <span className="hero__stage-stat__num">3 Tage</span>
            <span className="hero__stage-stat__label">Bauzeit · live</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Variant C: big stat card
function HeroStat() {
  return (
    <div className="hero__stage" style={{ background: "var(--ink)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 36 }}>
      <span className="hero__stage-label">
        <span className="pulse" />
        Durchschnittliche Ersparnis
      </span>
      <div style={{ position: "relative", zIndex: 3 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(80px, 12vw, 160px)", lineHeight: 0.95, letterSpacing: "-0.04em", color: "var(--peach-300)" }}>
          7 Std
        </div>
        <div style={{ fontSize: 16, color: "var(--violet-200)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 500, marginTop: 8 }}>
          pro Woche · pro Kunde
        </div>
        <p style={{ marginTop: 24, color: "var(--ink-faint)", fontSize: 15.5, lineHeight: 1.55, maxWidth: 360 }}>
          Über 20 Workflows live. Keine Theorie — gemessene Stunden, die sich Geschäftsführer zurückgeholt haben.
        </p>
      </div>
    </div>
  );
}

// -----------------------------
// Trust strip
// -----------------------------
function TrustStrip() {
  const tools = ["gmail", "outlook", "n8n", "openai", "hubspot", "slack", "notion", "sheets", "datev"];
  return (
    <div className="trust-strip">
      <div className="trust-strip__inner">
        <span className="trust-strip__label">Wir verbinden Tools wie</span>
        <div className="trust-strip__row">
          {tools.map((t) => <ToolChip key={t} tool={t} />)}
        </div>
      </div>
    </div>
  );
}

// -----------------------------
// Services section (Zenith-Pattern: 2x3 Grid mit Floating-Icon-Badges)
// 6 Service-Bereiche - jede Card hat Badge oben links (out-of-card),
// Title, Body, Link mit Pfeil. Section-Tint mit Dot-Pattern via background-image.
// -----------------------------
function ServicesSection() {
  const services = [
    {
      icon: "mail",
      title: "E-Mail-Triage & Antworten",
      body: "Eingehende Mails klassifizieren, weiterleiten, Antwortentwurf schreiben. KI macht die Vorarbeit, ihr entscheidet final.",
      href: "leistungen.html#email",
    },
    {
      icon: "file",
      title: "Dokumente & Rechnungen",
      body: "PDFs auslesen, in DATEV/SAP/Sheets ablegen — fehlerfrei und sofort. Keine manuelle Tipparbeit mehr.",
      href: "leistungen.html#dokumente",
    },
    {
      icon: "chart",
      title: "Reporting & Auswertung",
      body: "Reports automatisch aus euren Quellsystemen — mit KI-Kommentar zu Auffälligkeiten und Trends.",
      href: "leistungen.html#reporting",
    },
    {
      icon: "users",
      title: "HR & Onboarding",
      body: "Vom unterschriebenen Vertrag bis zum Slack-Account: alle Anlage-Schritte automatisch, ohne einen Klick.",
      href: "leistungen.html#hr",
    },
    {
      icon: "handshake",
      title: "Lead-Qualifizierung",
      body: "Eingehende Leads scoren, qualifizieren, ins CRM schreiben, weiterleiten. Kein Interessent geht mehr verloren.",
      href: "leistungen.html#vertrieb",
    },
    {
      icon: "server",
      title: "Custom-Workflows",
      body: "Eure Spezial-Anforderung passt nirgendwo rein? Wir bauen individuelle Workflows mit n8n und LLMs nach Maß.",
      href: "leistungen.html#custom",
    },
  ];
  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", alignItems: "center", margin: "0 auto 64px" }}>
          <span className="eyebrow"><span className="dot" />Was wir tun</span>
          <h2 className="section-head__title" style={{ textAlign: "center" }}>
            Sechs Workflow-Bausteine, die wir in Unternehmen produktiv eingerichtet haben.
          </h2>
          <p className="section-head__sub" style={{ textAlign: "center", margin: "0 auto" }}>
            Wir bauen euch genau das Stück, das euch am meisten Zeit zurückgibt — kein Bauchladen.
          </p>
        </div>
        <div className="services-grid">
          {services.map((s, i) => (
            <a key={i} href={s.href} className="feature-card" style={{ textDecoration: "none" }}>
              <span className="feature-card__badge">
                <Icon name={s.icon} size={26} stroke={1.8} />
              </span>
              <h3 className="feature-card__title">{s.title}</h3>
              <p className="feature-card__body">{s.body}</p>
              <span className="feature-card__link">
                Mehr Details
                <span className="feature-card__link-arrow"><Icon name="arrow" size={14} /></span>
              </span>
            </a>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 56 }}>
          <a href="leistungen.html" className="btn btn--secondary btn--lg">
            Alle Leistungen ansehen <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Welcome section (Zenith-Pattern: asymmetric Intro)
// Links: Pill + H2 + Body + Button. Rechts: Bild-Platzhalter mit Dot-Pattern.
// -----------------------------
function WelcomeSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="welcome__grid">
          <div className="welcome__copy">
            <span className="eyebrow"><span className="dot" />Über uns</span>
            <h2>
              Zwei Leute aus Hamburg, die Workflows tatsächlich bauen — nicht nur erklären.
            </h2>
            <p>
              Wir sind kein Beratungs-Theater. Wir kombinieren echtes Engineering-Handwerk mit KI-Erfahrung und liefern Workflows, die ab Tag eins laufen — DSGVO-konform, dokumentiert, übergebbar.
            </p>
            <a href="ueber-uns.html" className="btn btn--primary btn--lg">
              Mehr über uns <Icon name="arrow" size={16} />
            </a>
          </div>
          <div style={{ position: "relative" }}>
            <div className="welcome__visual" />
            <div className="welcome__decoration" />
          </div>
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Problem section
// -----------------------------
function ProblemSection() {
  const items = [
    { icon: "mail", t: "E-Mails sortieren und beantworten", b: "Das info@-Postfach ist ein schwarzes Loch. Anfragen gehen unter, Antworten kommen zu spät." },
    { icon: "file", t: "Rechnungen & Dokumente ablegen", b: "PDFs manuell abtippen, Beträge ins System eintragen — teuer, langsam, fehleranfällig." },
    { icon: "clock", t: "Termine koordinieren", b: "Hin-und-Her per Mail, bis ein Slot passt. Kalender-Tetris ohne Mehrwert." },
    { icon: "chart", t: "Reports von Hand schreiben", b: "Jeden Monat aus Excel, CSV und drei Systemen zusammenkopiert. Wieder. Und wieder." },
  ];
  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />Das Problem</span>
          <h2 className="section-head__title">
            Ihr erledigt täglich Aufgaben, die eine KI übernehmen könnte.
          </h2>
          <p className="section-head__sub">
            Jede Stunde davon kostet euch bares Geld. Wir stoppen das.
          </p>
        </div>
        <div className="wf-grid wf-grid--4">
          {items.map((it, i) => (
            <div key={i} className="wf-card" style={{ cursor: "default" }}>
              <span className="wf-card__icon"><Icon name={it.icon} size={20} /></span>
              <h3 className="wf-card__title" style={{ fontSize: 19 }}>{it.t}</h3>
              <p className="wf-card__body" style={{ flex: "none" }}>{it.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Use cases preview (5 cards on home, link to overview)
// -----------------------------
function UseCasesPreview({ onOpen, openCase }) {
  // Zenith-Pattern: Service-Card mit Bild-Platzhalter oben + Text + Tools + Metric-Pills + CTA
  // Wir zeigen 4 von 5 hier (geradzahlig fuer 2-Spalten-Grid).
  const featured = homeUseCases.slice(0, 4);
  // Icon-Map fuer Visuelle Repraesentation in der Card-Image-Area
  const iconForCase = { "01": "📨", "02": "📄", "03": "📊", "04": "👥", "05": "🤝" };
  return (
    <section className="section">
      <div className="container">
        <div className="row-head">
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow"><span className="dot" />Use Cases</span>
            <h2 className="section-head__title" style={{ marginTop: 14 }}>
              Was wir automatisieren, und was das für euch bedeutet.
            </h2>
          </div>
          <a href="use-cases.html" className="btn btn--secondary btn--md">
            Alle 5 Use Cases <Icon name="arrow" size={14} />
          </a>
        </div>
        <div className="service-grid">
          {featured.map((c) => (
            <button
              key={c.num}
              className="service-card"
              onClick={() => onOpen(c)}
              aria-haspopup="dialog"
              aria-expanded={openCase?.num === c.num}
            >
              <div className="service-card__image">
                <span className="service-card__image-icon">{iconForCase[c.num] || "✨"}</span>
              </div>
              <span className="service-card__num">{c.num} · USE CASE</span>
              <h3 className="service-card__title">{c.title}</h3>
              <p className="service-card__body">{c.body}</p>
              <div className="service-card__tools">
                {c.tools.map((t) => <ToolChip key={t} tool={t} logoOnly />)}
              </div>
              <div className="service-card__metrics">
                <span className="service-card__metric">
                  <Icon name="check" size={12} stroke={2.5} />
                  {c.hours} Std/Woche gespart
                </span>
              </div>
              <div className="service-card__cta">
                Workflow ansehen
                <span className="service-card__cta-arrow"><Icon name="arrow" size={14} /></span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Process (4 steps)
// -----------------------------
function ProcessSection() {
  const steps = [
    { n: "01", t: "Analyse", body: "Wir schauen uns eure Abläufe an und finden die größten Zeitfresser.", meta: "Kostenlos · 30 Min" },
    { n: "02", t: "Konzept", body: "Wir zeigen euch genau, was wir bauen und was es bringt.", meta: "Festpreis-Angebot" },
    { n: "03", t: "Umsetzung", body: "In 1–2 Wochen läuft euer Workflow. Wir testen mit euren echten Daten.", meta: "5–10 Werktage" },
    { n: "04", t: "Übergabe", body: "Ihr bekommt alles erklärt und dokumentiert. Wir bleiben ansprechbar.", meta: "Inkl. 30 Tage Support" },
  ];
  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />So läuft das ab</span>
          <h2 className="section-head__title">
            In 4 Schritten zu eurem<br />automatisierten Prozess.
          </h2>
        </div>
        <div className="process">
          {steps.map((s) => (
            <div key={s.n} className="step">
              <span className="step__num">{s.n}</span>
              <h3 className="step__title">{s.t}</h3>
              <p className="step__body">{s.body}</p>
              <span className="step__meta">{s.meta}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Stats (4 Datenpunkte)
// -----------------------------
function StatsSection() {
  // Zenith-Pattern: 4 helle Ghost-Cards mit grossen Gradient-Numbers
  // Content laut PDF: Realisierte Projekte, Zeitersparnis, Bauzeit, Sicherheit
  const stats = [
    { num: "20+", label: "Workflows live", desc: "Bei kleinen und mittleren Unternehmen — vom Handwerksbetrieb bis zur Kanzlei." },
    { num: "7 Std", label: "Pro Woche gespart", desc: "Gemessene Zeitersparnis pro Kunde, die wir durch einen einzigen Workflow zurückgeben." },
    { num: "1–2", label: "Wochen Bauzeit", desc: "Von der ersten Skizze bis zum produktiv laufenden Workflow in eurer Infrastruktur." },
    { num: "100%", label: "DSGVO-konform", desc: "EU-Hosting, eure Daten bleiben bei euch. Keine US-Cloud per Default." },
  ];
  return (
    <section className="section stats-section">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <h2 className="section-head__title">
            Konkrete Stunden. Echte Kunden. Keine Werbeversprechen.
          </h2>
        </div>
        <div className="stats-row">
          {stats.map((s, i) => (
            <div key={i} className="stat-card">
              <div className="stat-card__num">
                <AnimatedStatNum value={s.num} />
              </div>
              <div className="stat-card__label">{s.label}</div>
              <div className="stat-card__desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// USP / Why Treibiq - 4 Karten, click-to-modal
// -----------------------------
function WhySection({ onOpen, openReason }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", alignItems: "center", margin: "0 auto 56px" }}>
          <span className="eyebrow"><span className="dot" />Vier Gründe</span>
          <h2 className="section-head__title" style={{ textAlign: "center" }}>
            Warum Treibiq?
          </h2>
        </div>
        <div className="why-grid">
          {whyReasons.map((r) => (
            <button
              key={r.num}
              className="why-card"
              onClick={() => onOpen(r)}
              aria-haspopup="dialog"
              aria-expanded={openReason?.num === r.num}
            >
              <span className="why-card__num">{r.num}</span>
              <h3 className="why-card__title">{r.title}</h3>
              <p className="why-card__teaser">{r.teaser}</p>
              <span className="why-card__cta">
                Details ansehen
                <span className="why-card__cta-arrow"><Icon name="arrow" size={13} /></span>
              </span>
            </button>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 56 }}>
          <a href="kontakt.html" className="btn btn--primary btn--lg">
            Klingt nach dem, was ihr gesucht habt? <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>
    </section>
  );
}

// Modal fuer Why-Reasons
function WhyModal({ reason, onClose }) {
  if (!reason) return null;
  // Exit-Animation: isClosing setzt .is-closing CSS-Klasse, dann unmount
  // ueber onClose nach 180ms (= modal-out keyframe-Duration).
  const [isClosing, setIsClosing] = useState(false);
  const handleClose = () => {
    if (isClosing) return;
    setIsClosing(true);
    setTimeout(onClose, 180);
  };
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") handleClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [handleClose]);
  return (
    <div className={`overlay ${isClosing ? "is-closing" : ""}`} onClick={handleClose}>
      <div className={`modal ${isClosing ? "is-closing" : ""}`} onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={handleClose} aria-label="Schließen"><Icon name="close" size={16} /></button>
        <div className="modal__head">
          <span className="wf-card__icon"><Icon name={reason.icon} size={24} /></span>
          <div>
            <span className="eyebrow">Warum Treibiq · {reason.num}</span>
            <h3 className="modal__title">{reason.title}</h3>
          </div>
        </div>
        <p className="modal__lede">{reason.detail}</p>
        <div className="modal__tags">
          {reason.tags.map((t, i) => (
            <span key={i} className="modal__tag">{t}</span>
          ))}
        </div>
        <div className="modal__actions">
          <a href="kontakt.html" className="btn btn--primary btn--md" style={{ flex: 1 }}>
            Erstgespräch buchen <Icon name="arrow" size={14} />
          </a>
          <button className="btn btn--ghost btn--md" onClick={handleClose}>Schließen</button>
        </div>
      </div>
    </div>
  );
}

// -----------------------------
// Workflow-Canvas-Demo: interaktiver Live-Flow im n8n-Stil.
// Statt 6 statischen Cards ein konkretes Beispiel (E-Mail-Triage) das der
// Besucher anfassen und ziehen kann. Story: "Genau so bauen wir das bei euch."
// Inspiriert von shadcn/framer-motion Vorlage, neu gebaut ohne Tailwind/
// framer-motion, mit Treibiq-Branding (violet+peach Gradient).
// -----------------------------
function WorkflowCanvasDemo() {
  // Beispiel-Workflow "E-Mail-Triage" - 4 Nodes als End-to-End-Flow.
  // Zwei Layout-Varianten: DESKTOP horizontal mit Branches, MOBILE vertikal
  // mit Chain. So bleiben die Nodes auf dem Handy voll lesbar (kein
  // Down-Scaling), und Desktop-User sehen den Branch-Style.
  const NODE_W_D = 200, NODE_H_D = 96;
  const NODE_W_M = 248, NODE_H_M = 84;
  const CANVAS_W_D = 980, CANVAS_H_D = 440;
  const CANVAS_W_M = 300, CANVAS_H_M = 860;

  // Mobile-Mode aus Viewport-Width, mit Resize-Listener
  const detectMobile = () => typeof window !== "undefined" && window.innerWidth <= 720;
  const [isMobile, setIsMobile] = useState(detectMobile);

  // Initial-Nodes mit beiden Layouts. id, type, title etc bleiben gleich -
  // nur x/y sind layout-spezifisch. Lookup-Object damit der Switch sauber ist.
  const initialNodeData = [
    { id: "n1", type: "Trigger", title: "Mail-Eingang",      desc: "Gmail / Outlook Webhook",       icon: "mail",    color: "violet" },
    { id: "n2", type: "Aktion",  title: "KI-Klassifikation", desc: "Mistral analysiert Inhalt",     icon: "sparkle", color: "peach"  },
    { id: "n3", type: "Logik",   title: "Routing",           desc: "An passendes Team weiterleiten", icon: "users",  color: "violet" },
    { id: "n4", type: "Aktion",  title: "Antwort-Entwurf",   desc: "Draft zurück ins Postfach",     icon: "file",    color: "peach"  },
  ];
  const desktopPositions = { n1:{x:30,y:170}, n2:{x:270,y:110}, n3:{x:510,y:220}, n4:{x:750,y:170} };
  const mobilePositions  = { n1:{x:26,y:24},  n2:{x:26,y:128}, n3:{x:26,y:232}, n4:{x:26,y:336} };

  const buildInitialNodes = (mobile) => initialNodeData.map((n) => ({
    ...n,
    ...(mobile ? mobilePositions[n.id] : desktopPositions[n.id]),
  }));

  const initialConns = [
    { from: "n1", to: "n2" },
    { from: "n2", to: "n3" },
    { from: "n3", to: "n4" },
  ];

  // 3 Add-Slots, beide Layouts. Desktop verzweigt (fromDesktop), Mobile
  // chained vertikal (immer am letzten Node).
  const addSlots = [
    {
      fromDesktop: "n4",
      desktop: { x: 750, y: 320 },
      mobile:  { x: 26,  y: 440 },
      tpl: { type: "Aktion", title: "Slack-Notify",     desc: "Team-Channel benachrichtigen", icon: "bell",  color: "violet" },
    },
    {
      fromDesktop: "n3",
      desktop: { x: 510, y: 20 },
      mobile:  { x: 26,  y: 544 },
      tpl: { type: "Aktion", title: "Auswertung",       desc: "Reporting in Sheets schreiben", icon: "chart", color: "peach"  },
    },
    {
      fromDesktop: "n2",
      desktop: { x: 270, y: 320 },
      mobile:  { x: 26,  y: 648 },
      tpl: { type: "Logik",  title: "Wenn-Dann-Logik",  desc: "Bedingung pruefen + verzweigen", icon: "zap",  color: "violet" },
    },
  ];

  const [nodes, setNodes] = useState(() => buildInitialNodes(detectMobile()));
  const [conns, setConns] = useState(initialConns);
  const [draggingId, setDraggingId] = useState(null);
  const [addIdx, setAddIdx] = useState(0);
  const [lastAddedId, setLastAddedId] = useState(null);
  const dragOffset = useRef({ x: 0, y: 0 });
  const canvasRef = useRef(null);
  const innerRef = useRef(null);

  // Resize-Listener: bei Mode-Wechsel Nodes/Conns auf initial-Layout
  // der neuen Variante resetten, damit nichts schief sitzt.
  useEffect(() => {
    const onResize = () => {
      const nowMobile = detectMobile();
      setIsMobile((wasMobile) => {
        if (wasMobile === nowMobile) return wasMobile;
        setNodes(buildInitialNodes(nowMobile));
        setConns(initialConns);
        setAddIdx(0);
        setLastAddedId(null);
        return nowMobile;
      });
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const NODE_W = isMobile ? NODE_W_M : NODE_W_D;
  const NODE_H = isMobile ? NODE_H_M : NODE_H_D;
  const CANVAS_W = isMobile ? CANVAS_W_M : CANVAS_W_D;
  const CANVAS_H = isMobile ? CANVAS_H_M : CANVAS_H_D;

  // Helper: aktuelle CSS-Scale des inner-Containers (kann auf Mobile via
  // CSS media-query auf z.B. 0.36 gesetzt sein). Wir korrigieren die
  // Pointer-Math entsprechend, sodass Drag bei jeder Skalierung passt.
  const getInnerScale = () => {
    if (!innerRef.current) return 1;
    const r = innerRef.current.getBoundingClientRect();
    return r.width / CANVAS_W || 1;
  };

  // Pointer-Handlers: vanilla statt framer-motion. Funktioniert auf
  // Maus + Touch + Pen automatisch via PointerEvents.
  const handlePointerDown = (nodeId, e) => {
    e.preventDefault();
    const node = nodes.find((n) => n.id === nodeId);
    const inner = innerRef.current;
    if (!node || !inner) return;
    const rect = inner.getBoundingClientRect();
    const scale = getInnerScale();
    dragOffset.current = {
      x: (e.clientX - rect.left) / scale - node.x,
      y: (e.clientY - rect.top) / scale - node.y,
    };
    setDraggingId(nodeId);
  };

  useEffect(() => {
    if (!draggingId) return;
    const onMove = (e) => {
      const inner = innerRef.current;
      if (!inner) return;
      const rect = inner.getBoundingClientRect();
      const scale = getInnerScale();
      const newX = Math.max(0, Math.min(CANVAS_W - NODE_W,
        (e.clientX - rect.left) / scale - dragOffset.current.x));
      const newY = Math.max(0, Math.min(CANVAS_H - NODE_H,
        (e.clientY - rect.top) / scale - dragOffset.current.y));
      setNodes((prev) =>
        prev.map((n) => (n.id === draggingId ? { ...n, x: newX, y: newY } : n))
      );
    };
    const onUp = () => setDraggingId(null);
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", onUp);
    window.addEventListener("pointercancel", onUp);
    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", onUp);
      window.removeEventListener("pointercancel", onUp);
    };
  }, [draggingId]);

  // Bezier-Pfad zwischen Nodes. Desktop = horizontal (right-edge -> left-edge),
  // Mobile = vertikal (bottom-edge -> top-edge). Macht den Flow auf dem
  // Handy "von oben nach unten" lesbar.
  const buildPath = (from, to) => {
    const a = nodes.find((n) => n.id === from);
    const b = nodes.find((n) => n.id === to);
    if (!a || !b) return "";
    if (isMobile) {
      const sx = a.x + NODE_W / 2;
      const sy = a.y + NODE_H;
      const ex = b.x + NODE_W / 2;
      const ey = b.y;
      const cp1y = sy + (ey - sy) * 0.5;
      const cp2y = ey - (ey - sy) * 0.5;
      return `M${sx},${sy} C${sx},${cp1y} ${ex},${cp2y} ${ex},${ey}`;
    }
    const sx = a.x + NODE_W;
    const sy = a.y + NODE_H / 2;
    const ex = b.x;
    const ey = b.y + NODE_H / 2;
    const cp1x = sx + (ex - sx) * 0.5;
    const cp2x = ex - (ex - sx) * 0.5;
    return `M${sx},${sy} C${cp1x},${sy} ${cp2x},${ey} ${ex},${ey}`;
  };

  const handleAddNode = () => {
    if (addIdx >= addSlots.length) return; // max 3 adds
    const slot = addSlots[addIdx];
    const pos = isMobile ? slot.mobile : slot.desktop;
    const newId = `n-${Date.now()}`;
    const newNode = {
      id: newId,
      ...slot.tpl,
      x: pos.x,
      y: pos.y,
    };
    // Mobile: chain ans letzte (added oder initial n4). Desktop: branch via slot.fromDesktop.
    const fromId = isMobile ? (lastAddedId || "n4") : slot.fromDesktop;
    setNodes((prev) => [...prev, newNode]);
    setConns((prev) => [...prev, { from: fromId, to: newId }]);
    setLastAddedId(newId);
    setAddIdx((i) => i + 1);
  };
  const canAddMore = addIdx < addSlots.length;

  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", alignItems: "center", margin: "0 auto 48px" }}>
          <span className="eyebrow"><span className="dot" />Live-Workflow zum Anfassen</span>
          <h2 className="section-head__title" style={{ textAlign: "center" }}>
            Genau so sehen die Workflows aus, die wir bei euch bauen.
          </h2>
          <p className="section-head__sub" style={{ textAlign: "center", margin: "12px auto 0" }}>
            Drag and Drop, durchklicken, verstehen. Bei euch live in 1–2 Wochen — mit euren Tools, in eurer Cloud.
          </p>
        </div>

        <div className="wf-canvas-block reveal">
          {/* Header: Status-Badge + Workflow-Label + Add-Button */}
          <div className="wf-canvas-block__head">
            <div className="wf-canvas-block__head-left">
              <span className="wf-canvas-block__status">
                <span className="wf-canvas-block__pulse" />
                Live
              </span>
              <span className="wf-canvas-block__label">E-Mail-Triage · Beispiel-Flow</span>
            </div>
            <button
              type="button"
              className="wf-canvas-block__add"
              onClick={handleAddNode}
              disabled={!canAddMore}
              aria-label="Workflow-Knoten hinzufügen"
            >
              <Icon name="plus" size={14} />
              <span>{canAddMore ? "Knoten hinzufügen" : "Workflow voll"}</span>
            </button>
          </div>

          {/* Canvas mit SVG-Linien + absolut positionierten Nodes.
              Fixed-size content (CANVAS_W x CANVAS_H), kein horizontaler
              Scroll noetig - Add platziert Nodes in vordefinierte
              Branch-Slots oberhalb/unterhalb der Initial-Reihe. */}
          <div className="wf-canvas" ref={canvasRef}>
            <div
              className="wf-canvas__inner"
              ref={innerRef}
              style={{ width: CANVAS_W, height: CANVAS_H }}
            >
              <svg
                className="wf-canvas__lines"
                width={CANVAS_W}
                height={CANVAS_H}
                viewBox={`0 0 ${CANVAS_W} ${CANVAS_H}`}
                style={{ overflow: "visible" }}
                aria-hidden="true"
              >
                <defs>
                  <linearGradient id="wf-line-grad" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stopColor="var(--violet-500)" stopOpacity="0.65" />
                    <stop offset="100%" stopColor="var(--peach-500)" stopOpacity="0.65" />
                  </linearGradient>
                </defs>
                {conns.map((c) => (
                  <path
                    key={`${c.from}-${c.to}`}
                    d={buildPath(c.from, c.to)}
                    fill="none"
                    stroke="url(#wf-line-grad)"
                    strokeWidth="2"
                    strokeDasharray="7,5"
                    strokeLinecap="round"
                  />
                ))}
              </svg>
              {nodes.map((n) => (
                <div
                  key={n.id}
                  className={`wf-node wf-node--${n.color} ${draggingId === n.id ? "is-dragging" : ""}`}
                  style={{ left: n.x, top: n.y, width: NODE_W, height: NODE_H }}
                  onPointerDown={(e) => handlePointerDown(n.id, e)}
                  role="article"
                  aria-label={`${n.type}: ${n.title}`}
                >
                  <div className="wf-node__head">
                    <span className="wf-node__icon">
                      <Icon name={n.icon} size={16} stroke={1.8} />
                    </span>
                    <span className="wf-node__type">{n.type}</span>
                  </div>
                  <h4 className="wf-node__title">{n.title}</h4>
                  <p className="wf-node__desc">{n.desc}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Footer: Stats + Hint */}
          <div className="wf-canvas-block__foot">
            <div className="wf-canvas-block__stats">
              <span><span className="wf-stat-dot wf-stat-dot--violet" />{nodes.length} {nodes.length === 1 ? "Knoten" : "Knoten"}</span>
              <span><span className="wf-stat-dot wf-stat-dot--peach" />{conns.length} {conns.length === 1 ? "Verbindung" : "Verbindungen"}</span>
            </div>
            <span className="wf-canvas-block__hint">Knoten anfassen und ziehen</span>
          </div>
        </div>

        {/* CTA zu Leistungen (statt 6 Cards inline) */}
        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
          <a href="leistungen.html" className="btn btn--primary btn--lg">
            Alle Workflows im Detail ansehen <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// "Was wir umsetzen" - 6 Workflows mit Click-to-Modal
// (auf Home aktuell ersetzt durch WorkflowCanvasDemo, bleibt erhalten fuer
// andere Pages oder Re-Aktivierung)
// -----------------------------
function WorkflowsSection({ onOpen, openWorkflow }) {
  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", alignItems: "center", margin: "0 auto 56px" }}>
          <span className="eyebrow"><span className="dot" />Eure Zeitfresser — von uns automatisiert</span>
          <h2 className="section-head__title" style={{ textAlign: "center" }}>
            Lösungen nach Maß.
          </h2>
          <p className="section-head__sub" style={{ textAlign: "center", margin: "0 auto" }}>
            Wir verkaufen keine Software von der Stange. Wir bauen die digitalen Brücken, die eure manuellen Routineaufgaben übernehmen. Pragmatisch, schnell und sicher.
          </p>
        </div>
        <div className="workflow-grid reveal-stagger">
          {workflowsList.map((w, i) => (
            <button
              key={i}
              className="workflow-card"
              onClick={() => onOpen(w)}
              aria-haspopup="dialog"
              aria-expanded={openWorkflow?.title === w.title}
            >
              <span className="workflow-card__icon"><Icon name={w.icon} size={26} stroke={1.8} /></span>
              <h3 className="workflow-card__title">{w.title}</h3>
              <span className="workflow-card__sub">{w.sub}</span>
              <p className="workflow-card__teaser">{w.teaser}</p>
              <span className="workflow-card__cta">
                Wie es funktioniert
                <span className="workflow-card__cta-arrow"><Icon name="arrow" size={13} /></span>
              </span>
            </button>
          ))}
        </div>
        <div className="workflow-cta">
          <p>Euer spezieller Prozess ist nicht dabei? Wir bauen auch Custom-Workflows.</p>
          <a href="kontakt.html" className="btn btn--primary btn--md">
            Projekt anfragen <Icon name="arrow" size={14} />
          </a>
        </div>
      </div>
    </section>
  );
}

// Modal fuer Workflows
function WorkflowModal({ workflow, onClose }) {
  if (!workflow) return null;
  const [isClosing, setIsClosing] = useState(false);
  const handleClose = () => {
    if (isClosing) return;
    setIsClosing(true);
    setTimeout(onClose, 180);
  };
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") handleClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [handleClose]);
  return (
    <div className={`overlay ${isClosing ? "is-closing" : ""}`} onClick={handleClose}>
      <div className={`modal ${isClosing ? "is-closing" : ""}`} onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={handleClose} aria-label="Schließen"><Icon name="close" size={16} /></button>
        <div className="modal__head">
          <span className="wf-card__icon"><Icon name={workflow.icon} size={24} /></span>
          <div>
            <span className="eyebrow">{workflow.sub}</span>
            <h3 className="modal__title">{workflow.title}</h3>
          </div>
        </div>
        <div className="modal__block">
          <span className="modal__block-label">Der Use Case</span>
          <p>{workflow.problem}</p>
        </div>
        <dl style={{ margin: "0 0 8px" }}>
          <div className="modal__row"><dt>Bauzeit</dt><dd>{workflow.bauzeit}</dd></div>
          <div className="modal__row"><dt>Ersparnis</dt><dd>{workflow.ersparnis}</dd></div>
        </dl>
        <div className="modal__actions">
          <a href="kontakt.html" className="btn btn--primary btn--md" style={{ flex: 1 }}>
            Diesen Workflow besprechen <Icon name="arrow" size={14} />
          </a>
          <button className="btn btn--ghost btn--md" onClick={handleClose}>Schließen</button>
        </div>
      </div>
    </div>
  );
}

// -----------------------------
// Testimonials section (Zenith-Pattern: Quote-Cards mit Author + Role)
// Platzhalter-Testimonials bis echte Pilot-Kunden da sind.
// -----------------------------
function TestimonialsSection() {
  const items = [
    {
      quote: "Innerhalb von zwei Wochen lief der Mail-Triage-Workflow. Seitdem sind unsere Antwortzeiten von 2 Tagen auf 4 Stunden runter, ohne dass jemand mehr arbeitet.",
      name: "Pilot-Kunde 1",
      role: "Geschäftsführer, Handwerksbetrieb",
    },
    {
      quote: "Endlich jemand der nicht 80 Folien Powerpoint aufmacht, sondern den Workflow direkt baut. Festpreis, 10 Tage, fertig. Das war einfach angenehm.",
      name: "Pilot-Kunde 2",
      role: "Operations, B2B-SaaS",
    },
    {
      quote: "Die Kombination aus echtem Coding-Skill und Verständnis für unsere Abläufe macht den Unterschied zu allen anderen Anbietern, die wir uns angeschaut haben.",
      name: "Pilot-Kunde 3",
      role: "Inhaber, Steuerkanzlei",
    },
    {
      quote: "Wir haben drei Tage Aufwand pro Woche gespart, ohne dass wir IT-Know-how aufbauen mussten. Genau das, was wir gesucht haben.",
      name: "Pilot-Kunde 4",
      role: "Inhaberin, Marketing-Agentur",
    },
    {
      quote: "Die Übergabe war unfassbar sauber: Doku, Loom-Walkthrough, klare Verantwortlichkeiten. So professionell hat uns vorher noch niemand etwas übergeben.",
      name: "Pilot-Kunde 5",
      role: "CTO, Maschinenbau",
    },
    {
      quote: "Hat sich nach drei Monaten amortisiert. Was wir vorher in 5 Stunden mailten, läuft jetzt im Hintergrund — wir merken's nicht mal mehr.",
      name: "Pilot-Kunde 6",
      role: "Geschäftsführer, Logistik-Dienstleister",
    },
  ];
  // Duplikat fuer seamless Marquee-Loop: Track haelt 2 Sets der Items.
  // Translation -6 * (card-width + gap) ueber 42s bringt das zweite Set
  // exakt in die Startposition des ersten - kein sichtbarer Sprung.
  return (
    <section className="section section--tint">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />Stimmen</span>
          <h2 className="section-head__title">
            Was unsere Kund:innen sagen.
          </h2>
          <p className="section-head__sub">
            Echte Workflows, echte Stunden gespart. Hier ein paar Worte aus laufenden Pilotprojekten.
          </p>
        </div>
      </div>
      <div className="testimonials-carousel">
        <div className="testimonials-track">
          {[...items, ...items].map((t, i) => (
            <div key={i} className="testimonial-card" aria-hidden={i >= items.length ? "true" : "false"}>
              <div className="testimonial-card__quote-mark">"</div>
              <p className="testimonial-card__body">{t.quote}</p>
              <div className="testimonial-card__author">
                <div className="testimonial-card__avatar" />
                <div>
                  <div className="testimonial-card__author-name">{t.name}</div>
                  <div className="testimonial-card__author-role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// FAQ
// -----------------------------
function FaqSection({ faqs = homeFaqs }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container">
        <div className="faq">
          <div className="faq__head reveal-left">
            <span className="eyebrow"><span className="dot" />FAQ</span>
            <h2 className="section-head__title" style={{ marginTop: 14, textWrap: "balance" }}>
              Was Geschäftsführer:innen uns oft fragen.
            </h2>
            <p className="section-head__sub" style={{ marginTop: 14 }}>
              Steht eure Frage nicht dabei? Schreibt uns.
            </p>
            <a href="kontakt.html" className="btn btn--secondary btn--md" style={{ marginTop: 24 }}>
              Direkt fragen <Icon name="arrow" size={14} />
            </a>
          </div>
          <div className="faq__list reveal-stagger faq__list--delayed">
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={`faq__item ${isOpen ? "is-open" : ""}`}>
                  <button className="faq__q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span>{f.q}</span>
                    <span className="faq__q-icon"><Icon name="plus" size={16} /></span>
                  </button>
                  <div className="faq__a">
                    <div className="faq__a-inner">
                      <p>{f.a}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// Use case modal (used by home + use cases page)
// -----------------------------
function UseCaseModal({ wf, onClose }) {
  if (!wf) return null;
  const [isClosing, setIsClosing] = useState(false);
  const handleClose = () => {
    if (isClosing) return;
    setIsClosing(true);
    setTimeout(onClose, 180);
  };
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") handleClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [handleClose]);
  return (
    <div className={`overlay ${isClosing ? "is-closing" : ""}`} onClick={handleClose}>
      <div className={`modal ${isClosing ? "is-closing" : ""}`} onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={handleClose} aria-label="Schließen"><Icon name="close" size={16} /></button>
        <div className="modal__head">
          <span className="wf-card__icon"><Icon name={wf.icon} size={24} /></span>
          <div>
            <span className="eyebrow">Use Case · {wf.num}</span>
            <h3 className="modal__title">{wf.title}</h3>
          </div>
        </div>
        <p className="modal__lede">{wf.body}</p>
        <div className="modal__pipe">
          {wf.tools.map((t, i) => (
            <React.Fragment key={t}>
              <ToolChip tool={t} size="sm" />
              {i < wf.tools.length - 1 && <span className="arrow"><Icon name="arrow" size={14} /></span>}
            </React.Fragment>
          ))}
        </div>
        <dl style={{ margin: 0 }}>
          <div className="modal__row"><dt>Zeitersparnis</dt><dd>{wf.hours} Std / Woche</dd></div>
          <div className="modal__row"><dt>Aufbauzeit</dt><dd>1–2 Wochen</dd></div>
          <div className="modal__row"><dt>Status</dt><dd style={{ color: "var(--success)" }}>● Live bei Kunden</dd></div>
        </dl>
        <div className="modal__actions">
          <a href="kontakt.html" className="btn btn--primary btn--md" style={{ flex: 1 }}>
            Diesen Workflow besprechen <Icon name="arrow" size={14} />
          </a>
          <button className="btn btn--ghost btn--md" onClick={handleClose}>Schließen</button>
        </div>
      </div>
    </div>
  );
}

// -----------------------------
// Partner-Logos-Carousel
// Echte Partner-Logos aus /assets/partners/. Einheitliche Hoehe via
// CSS, Greyscale-Filter fuer visuelle Beruhigung. Marquee infinite loop.
// -----------------------------
function PartnerLogos() {
  const partners = [
    { slug: "basilika", name: "Basilika Mannheim" },
    { slug: "bellavie", name: "BellaVie" },
    { slug: "triebskorn", name: "Pflegedienst Triebskorn" },
    { slug: "pilatte", name: "Pilatte" },
  ];
  // Duplizieren fuer nahtlosen Marquee-Loop.
  const track = [...partners, ...partners, ...partners];
  return (
    <section className="section partner-logos">
      <div className="container">
        <h3 className="partner-logos__heading">Unsere Partner</h3>
        <div className="logos-carousel" aria-label="Unsere Partner">
          <div className="logos-track">
            {track.map((p, i) => (
              <div key={`${p.slug}-${i}`} className="logos-track__item">
                <img
                  className="partner-logo"
                  src={`assets/partners/${p.slug}.webp`}
                  alt={p.name}
                  loading="lazy"
                  decoding="async"
                  fetchpriority="low"
                  width="200"
                  height="64"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// -----------------------------
// App
// -----------------------------
function HomeApp() {
  const [openWhy, setOpenWhy] = useState(null);
  const [openWorkflow, setOpenWorkflow] = useState(null);
  return (
    <Page active="home">
      <Hero />
      {/* Partner-Logos direkt unter Hero, kleine Heading, danach Karussell. */}
      <PartnerLogos />
      <WhySection onOpen={(r) => setOpenWhy(r)} openReason={openWhy} />
      <StatsSection />
      {/* WorkflowCanvasDemo (n8n-style interactive flow) entfernt 2026-05-14 -
          live demo gibt's auf /leistungen.html via Quiz. Komponente bleibt
          im Code (shared.jsx hat keine Abhaengigkeit, hier weiter unten in
          home.jsx definiert) falls Re-Aktivierung gewuenscht. */}
      <FaqSection />
      <CtaBand />
      {openWhy && <WhyModal reason={openWhy} onClose={() => setOpenWhy(null)} />}
      {openWorkflow && <WorkflowModal workflow={openWorkflow} onClose={() => setOpenWorkflow(null)} />}
    </Page>
  );
}

Object.assign(window, {
  homeUseCases, homeFaqs, whyReasons, workflowsList,
  Hero, HeroVisual, TrustStrip, WelcomeSection, ServicesSection, ProblemSection, UseCasesPreview,
  ProcessSection, StatsSection, WhySection, WhyModal, WorkflowsSection, WorkflowModal,
  TestimonialsSection, FaqSection, UseCaseModal,
});

ReactDOM.createRoot(document.getElementById("app")).render(<HomeApp />);