/* eslint-disable */
/**
 * marketing-showcases.jsx — globale Komponenten:
 *   window.Showcase        — 3 n8n-Workflow-Beispiele mit animierten SVG-Visuals
 *   window.NumbersCounter  — animated counter (CV-Zahlen)
 *   window.PricerCTABanner — kompakter Banner unter Hero
 *   window.StickyCTA       — sticky bottom-bar mit Quick-Actions
 *   window.ToolsWall       — Tech-Stack-Logos im Footer
 *
 * Geladen via <script type="text/babel" src="marketing-showcases.jsx?v=1"></script>
 */

(function (global) {
  const { useState, useEffect, useRef } = React;
  const t = window.t || function(de, en){ return de; };

  // ===== ANIMATED SVG WORKFLOW =====
  function WorkflowSVG({ nodes, edges, accentColor = "#d9a441" }) {
    return React.createElement(
      "svg",
      {
        viewBox: "0 0 400 220",
        style: { width: "100%", height: 220, overflow: "visible" },
      },
      React.createElement("defs", null,
        React.createElement("filter", { id: "glow", x: "-50%", y: "-50%", width: "200%", height: "200%" },
          React.createElement("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
          React.createElement("feMerge", null,
            React.createElement("feMergeNode", { in: "blur" }),
            React.createElement("feMergeNode", { in: "SourceGraphic" })
          )
        )
      ),
      // Edges (lines between nodes)
      edges.map((e, i) => {
        const from = nodes[e[0]];
        const to = nodes[e[1]];
        const dx = to.x - from.x;
        const dy = to.y - from.y;
        const midX = from.x + dx / 2;
        const midY = from.y + dy / 2 - 20;
        const path = "M" + from.x + "," + from.y + " Q" + midX + "," + midY + " " + to.x + "," + to.y;
        return React.createElement(React.Fragment, { key: "e" + i },
          React.createElement("path", {
            d: path,
            stroke: accentColor,
            strokeWidth: "1.5",
            fill: "none",
            opacity: 0.45,
          }),
          // Animated traveling dot
          React.createElement("circle", {
            r: "3.5",
            fill: accentColor,
            filter: "url(#glow)",
          },
            React.createElement("animateMotion", {
              dur: (2.5 + i * 0.4) + "s",
              repeatCount: "indefinite",
              path: path,
              begin: (i * 0.6) + "s",
            })
          )
        );
      }),
      // Nodes
      nodes.map((n, i) =>
        React.createElement(React.Fragment, { key: "n" + i },
          React.createElement("circle", {
            cx: n.x, cy: n.y, r: 22,
            fill: n.highlight ? accentColor : "#1a1408",
            stroke: accentColor,
            strokeWidth: "1.8",
            filter: n.highlight ? "url(#glow)" : "none",
          }),
          React.createElement("text", {
            x: n.x, y: n.y + 4,
            textAnchor: "middle",
            fontSize: "11",
            fill: n.highlight ? "#1a1408" : "#e6e1d5",
            fontWeight: "700",
            fontFamily: "monospace",
          }, n.icon),
          React.createElement("text", {
            x: n.x, y: n.y + 38,
            textAnchor: "middle",
            fontSize: "9",
            fill: "#9b937e",
            fontFamily: "monospace",
            letterSpacing: "0.04em",
          }, n.label)
        )
      )
    );
  }

  // ===== SHOWCASE — 3 n8n-Beispiele =====
  function Showcase() {
    const cases = [
      {
        title: "Content-Factory",
        tagline: t("1× RSS-Feed → 5× Plattformen automatisch.", "1× RSS feed → 5× platforms automatically."),
        problem: t("5 Stunden pro Tag für Social Media. Jeden Tag das Gleiche.", "5 hours a day on social media. Every day the same."),
        nodes: [
          { x: 35, y: 90, icon: "📰", label: "RSS-Feed" },
          { x: 130, y: 50, icon: "🤖", label: "Claude" },
          { x: 130, y: 130, icon: "🎨", label: "DALL·E" },
          { x: 230, y: 90, icon: "🔀", label: t("Verteiler", "Distributor"), highlight: true },
          { x: 330, y: 30, icon: "in", label: "LinkedIn" },
          { x: 330, y: 75, icon: "X", label: "Twitter" },
          { x: 330, y: 120, icon: "📧", label: "Newsletter" },
          { x: 330, y: 165, icon: "📸", label: "Instagram" },
        ],
        edges: [[0,1],[0,2],[1,3],[2,3],[3,4],[3,5],[3,6],[3,7]],
        kpi: t("17 h/Woche gespart", "17 h/week saved"),
        kpiLabel: t("Schweizer Marketing-Agentur, 8 MA", "Swiss marketing agency, 8 staff"),
      },
      {
        title: "Order-Automation",
        tagline: t("E-Mail-Rechnungen → Bexio automatisch erfasst.", "Email invoices → automatically recorded in Bexio."),
        problem: t("50 Rechnungen/Monat × 4 Min manuelles Eintragen = 3.3 Stunden.", "50 invoices/month × 4 min of manual entry = 3.3 hours."),
        nodes: [
          { x: 35, y: 110, icon: "✉️", label: "E-Mail" },
          { x: 110, y: 70, icon: "📎", label: "PDF" },
          { x: 110, y: 150, icon: "🤖", label: "Claude" },
          { x: 200, y: 110, icon: "✓", label: t("Validierung", "Validation"), highlight: true },
          { x: 290, y: 70, icon: "B", label: "Bexio-API" },
          { x: 290, y: 150, icon: "📊", label: "Audit-Log" },
          { x: 360, y: 110, icon: "📨", label: t("Bestätigung", "Confirmation") },
        ],
        edges: [[0,1],[0,2],[1,3],[2,3],[3,4],[3,5],[4,6]],
        kpi: t("3.3 h/Monat gespart", "3.3 h/month saved"),
        kpiLabel: t("Pro 50 Rechnungen — skaliert linear", "Per 50 invoices — scales linearly"),
      },
      {
        title: "Onboarding-Fan-Out",
        tagline: t("1× Bestellung → Notion + Slack + Drive + Mail automatisch.", "1× order → Notion + Slack + Drive + Mail automatically."),
        problem: t("Jeder neue Kunde = 2 Stunden Setup. Bei 10 Kunden/Woche = 20h.", "Every new customer = 2 hours of setup. At 10 customers/week = 20h."),
        nodes: [
          { x: 35, y: 110, icon: "💳", label: "Stripe" },
          { x: 130, y: 110, icon: "⚡", label: "Make", highlight: true },
          { x: 240, y: 30, icon: "N", label: t("Notion-Page", "Notion page") },
          { x: 240, y: 75, icon: "#", label: t("Slack-Channel", "Slack channel") },
          { x: 240, y: 120, icon: "D", label: t("Drive-Ordner", "Drive folder") },
          { x: 240, y: 165, icon: "✉", label: t("Welcome-Mail", "Welcome email") },
          { x: 360, y: 100, icon: "✓", label: t("Team-Notify", "Team notify") },
        ],
        edges: [[0,1],[1,2],[1,3],[1,4],[1,5],[2,6],[3,6],[4,6],[5,6]],
        kpi: t("Onboarding: 2 h → 5 Min", "Onboarding: 2 h → 5 min"),
        kpiLabel: t("Multiplikator 24× bei jedem Neukunden", "24× multiplier per new customer"),
      },
    ];

    return React.createElement(
      "section",
      {
        id: "showcase",
        className: "wrap",
        style: { paddingTop: 80, paddingBottom: 80, borderTop: "1px solid var(--line, #2a2620)" },
      },
      React.createElement(
        "div",
        { style: { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--gold, #d9a441)", marginBottom: 12, textTransform: "uppercase" } },
        t("Showcase · Was möglich ist", "Showcase · What's possible")
      ),
      React.createElement(
        "h2",
        { className: "h-section", style: { marginBottom: 12 } },
        t("Drei reale Automationen.", "Three real automations.")
      ),
      React.createElement(
        "p",
        { style: { color: "var(--ink-dim)", fontSize: 16, maxWidth: 720, marginBottom: 36, lineHeight: 1.6 } },
        t("So sehen typische Pipelines aus, die ich für KMU baue. Jede dieser drei Lösungen lief in der Praxis und spart messbar Zeit. Klicken Sie sich durch — wenn etwas Ähnliches in Ihrem Betrieb hilft, öffnet der KI-Pricer in 60 Sekunden ein konkretes Angebot.", "These are typical pipelines I build for SMBs. Each of the three solutions ran in production and saves measurable time. Browse through them — if something similar would help your business, the AI pricer opens a concrete quote in 60 seconds.")
      ),
      React.createElement(
        "div",
        {
          style: {
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
            gap: 18,
          },
        },
        cases.map((c, i) =>
          React.createElement(
            "div",
            {
              key: i,
              style: {
                padding: "20px 22px",
                borderRadius: 14,
                background: "var(--bg-elev, #14110c)",
                border: "1px solid var(--line, #2a2620)",
                display: "flex",
                flexDirection: "column",
                gap: 10,
              },
            },
            React.createElement(
              "div",
              { style: { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" } },
              t("Beispiel ", "Example ") + (i + 1)
            ),
            React.createElement(
              "div",
              { style: { fontWeight: 700, fontSize: 19, color: "var(--ink)" } },
              c.title
            ),
            React.createElement(
              "div",
              { style: { color: "var(--gold)", fontSize: 13, fontStyle: "italic", marginBottom: 4 } },
              c.tagline
            ),
            React.createElement(
              "div",
              { style: { color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.55 } },
              React.createElement("b", null, t("Problem: ", "Problem: ")),
              c.problem
            ),
            React.createElement(
              "div",
              { style: { margin: "8px -10px" } },
              React.createElement(WorkflowSVG, { nodes: c.nodes, edges: c.edges })
            ),
            React.createElement(
              "div",
              {
                style: {
                  marginTop: "auto",
                  padding: "10px 12px",
                  borderRadius: 8,
                  background: "rgba(217,164,65,0.08)",
                  border: "1px solid rgba(217,164,65,0.3)",
                },
              },
              React.createElement(
                "div",
                { style: { color: "var(--gold)", fontSize: 18, fontWeight: 700 } },
                c.kpi
              ),
              React.createElement(
                "div",
                { style: { color: "var(--ink-mute, #9b937e)", fontSize: 11, marginTop: 2 } },
                c.kpiLabel
              )
            )
          )
        )
      ),
      React.createElement(
        "div",
        { style: { marginTop: 30, textAlign: "center" } },
        React.createElement(
          "a",
          { href: "#pricer", className: "btn btn-primary btn-arrow", style: { fontSize: 14 } },
          t("Etwas Ähnliches für Ihr Unternehmen? → KI-Pricer öffnen", "Something similar for your business? → Open AI pricer")
        )
      )
    );
  }

  // ===== NUMBERS COUNTER — CV-Stats =====
  function NumbersCounter() {
    const ref = useRef(null);
    const [active, setActive] = useState(false);

    useEffect(() => {
      if (!ref.current) return;
      const obs = new IntersectionObserver((entries) => {
        for (const e of entries) if (e.isIntersecting) setActive(true);
      }, { threshold: 0.4 });
      obs.observe(ref.current);
      return () => obs.disconnect();
    }, []);

    const stats = [
      { value: 20, suffix: "+", label: t("Jahre Berufserfahrung", "Years of experience") },
      { value: 6, suffix: "", label: t("Länder im Lebenslauf", "Countries on the CV") },
      { value: 5, suffix: "", label: t("Sprachen fließend", "Languages fluent") },
      { value: 4, suffix: "", label: t("Branchen Know-how", "Industries expertise") },
    ];

    return React.createElement(
      "section",
      {
        ref: ref,
        className: "wrap",
        style: { paddingTop: 60, paddingBottom: 60, borderTop: "1px solid var(--line, #2a2620)" },
      },
      React.createElement(
        "div",
        {
          style: {
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
            gap: 18,
            textAlign: "center",
          },
        },
        stats.map((s, i) =>
          React.createElement(
            "div",
            { key: i, style: { padding: "10px" } },
            React.createElement(AnimatedNumber, { target: s.value, active: active, suffix: s.suffix }),
            React.createElement(
              "div",
              { style: { color: "var(--ink-dim)", fontSize: 13, marginTop: 6, fontFamily: "var(--mono)", letterSpacing: "0.05em" } },
              s.label
            )
          )
        )
      )
    );
  }

  function AnimatedNumber({ target, active, suffix }) {
    const [value, setValue] = useState(0);
    useEffect(() => {
      if (!active) return;
      const dur = 1400;
      const start = performance.now();
      let raf;
      const step = (t) => {
        const p = Math.min(1, (t - start) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setValue(Math.round(target * eased));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      return () => cancelAnimationFrame(raf);
    }, [active, target]);
    return React.createElement(
      "div",
      { style: { fontSize: 48, fontWeight: 800, color: "var(--gold, #d9a441)", lineHeight: 1, fontFamily: "var(--mono)" } },
      value + suffix
    );
  }

  // ===== PRICER CTA BANNER (direkt unter Hero) =====
  function PricerCTABanner() {
    return React.createElement(
      "section",
      {
        style: {
          background: "linear-gradient(90deg, rgba(217,164,65,0.12), rgba(217,164,65,0.04))",
          borderTop: "1px solid rgba(217,164,65,0.3)",
          borderBottom: "1px solid rgba(217,164,65,0.3)",
          padding: "18px 0",
        },
      },
      React.createElement(
        "div",
        {
          className: "wrap",
          style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap" },
        },
        React.createElement(
          "div",
          { style: { display: "flex", alignItems: "center", gap: 14, flex: 1, minWidth: 280 } },
          React.createElement(
            "div",
            {
              style: {
                width: 40, height: 40, borderRadius: 8,
                background: "var(--gold, #d9a441)",
                color: "#1a1408",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontWeight: 800, fontSize: 20,
              },
            },
            "⚡"
          ),
          React.createElement(
            "div",
            null,
            React.createElement("div", { style: { color: "var(--ink)", fontWeight: 700, fontSize: 15 } },
              t("Probieren Sie den KI-Pricer.", "Try the AI pricer.")
            ),
            React.createElement("div", { style: { color: "var(--ink-dim)", fontSize: 13, marginTop: 2 } },
              t("Beschreiben Sie Ihr Anliegen → in unter 60 Sekunden ein konkretes Festpreis-Angebot mit Aufwand und Liefer-Spec.", "Describe your project → get a concrete fixed-price quote with effort and delivery spec in under 60 seconds.")
            )
          )
        ),
        React.createElement(
          "a",
          { href: "#pricer", className: "btn btn-primary btn-arrow", style: { whiteSpace: "nowrap" } },
          t("Pricer starten", "Start pricer")
        )
      )
    );
  }

  // ===== STICKY BOTTOM CTA =====
  function StickyCTA() {
    const [visible, setVisible] = useState(false);
    useEffect(() => {
      const onScroll = () => setVisible(window.scrollY > 600);
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);
    if (!visible) return null;
    return React.createElement(
      "div",
      {
        style: {
          position: "fixed",
          bottom: 16,
          right: 16,
          zIndex: 100,
          display: "flex",
          gap: 10,
        },
      },
      React.createElement(
        "a",
        {
          href: "#pricer",
          style: {
            padding: "12px 18px",
            borderRadius: 24,
            background: "var(--gold, #d9a441)",
            color: "#1a1408",
            fontWeight: 700,
            fontSize: 14,
            textDecoration: "none",
            boxShadow: "0 8px 24px rgba(217,164,65,0.4), 0 2px 8px rgba(0,0,0,0.4)",
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
          },
        },
        "⚡ KI-Pricer"
      ),
      React.createElement(
        "button",
        {
          onClick: () => { try { if (window.__openAppointmentModal) window.__openAppointmentModal(); } catch(_) {} },
          style: {
            padding: "12px 18px",
            borderRadius: 24,
            background: "var(--gold, #d9a441)",
            color: "#1a1408",
            border: "none",
            fontWeight: 700,
            fontSize: 14,
            cursor: "pointer",
            fontFamily: "inherit",
            boxShadow: "0 8px 24px rgba(217,164,65,0.4), 0 2px 8px rgba(0,0,0,0.4)",
          },
        },
        t("Termin", "Appointment")
      )
    );
  }

  // ===== TOOLS WALL (Tech-Stack als Trust-Signal) =====
  function ToolsWall() {
    const tools = [
      "n8n", "Make", "Claude AI", "OpenAI", "Bexio",
      "Stripe", "WordPress", "JavaScript", "Python",
      "PHP", "Cloudflare", "Resend", "Google Calendar",
      "Notion", "Slack", "Vectorize",
    ];
    return React.createElement(
      "section",
      {
        className: "wrap",
        style: { paddingTop: 50, paddingBottom: 30, borderTop: "1px solid var(--line, #2a2620)" },
      },
      React.createElement(
        "div",
        { style: { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--ink-mute, #9b937e)", marginBottom: 18, textTransform: "uppercase", textAlign: "center" } },
        t("Tech-Stack — täglich im Einsatz", "Tech stack — used daily")
      ),
      React.createElement(
        "div",
        {
          style: {
            display: "flex",
            flexWrap: "wrap",
            gap: 10,
            justifyContent: "center",
            opacity: 0.8,
          },
        },
        tools.map((t, i) =>
          React.createElement(
            "div",
            {
              key: i,
              style: {
                padding: "6px 14px",
                borderRadius: 999,
                border: "1px solid var(--line-strong, #3a3528)",
                background: "var(--bg-elev, #14110c)",
                color: "var(--ink-dim)",
                fontSize: 12,
                fontFamily: "var(--mono)",
                letterSpacing: "0.03em",
              },
            },
            t
          )
        )
      )
    );
  }

  global.Showcase        = Showcase;
  global.NumbersCounter  = NumbersCounter;
  global.PricerCTABanner = PricerCTABanner;
  global.StickyCTA       = StickyCTA;
  global.ToolsWall       = ToolsWall;
})(window);