/* dataflow.jsx — wizualizacja przepływu danych:
   Marketplace → BaseLinker → Sklep własny → Klient → CRM
   3 wersje wizualne, używane w 3 wariantach landinga. */

const { useState: dfUseState, useEffect: dfUseEffect, useRef: dfUseRef } = React;

// ────────────────────────────────────────────────────────
// Animated packet flowing along a path
// ────────────────────────────────────────────────────────
function FlowPacket({ pathId, color, delay = 0, dur = 3, label, size = 8 }) {
  return (
    <g>
      <circle r={size} fill={color}>
        <animateMotion dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`}>
          <mpath href={`#${pathId}`} />
        </animateMotion>
        <animate attributeName="opacity" values="0;1;1;0" dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`} keyTimes="0;0.1;0.9;1" />
      </circle>
      {label && (
        <text fontSize="9" fontWeight="600" fill={color} fontFamily="var(--font-mono)">
          <animateMotion dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`}>
            <mpath href={`#${pathId}`} />
          </animateMotion>
          <animate attributeName="opacity" values="0;1;1;0" dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`} keyTimes="0;0.1;0.9;1" />
          <tspan dx="10" dy="3">{label}</tspan>
        </text>
      )}
    </g>
  );
}

// ────────────────────────────────────────────────────────
// DataFlowA — Horizontal "pipeline" view (used in Variant A)
// Marketplace pipes feed BaseLinker, BaseLinker feeds Sklep,
// Sklep emits data back to CRM / Newsletter / BI
// ────────────────────────────────────────────────────────
function DataFlowA() {
  return (
    <div data-reveal className="card" style={{ padding: 0, overflow: 'hidden', background: '#0A1F44' }}>
      {/* header */}
      <div style={{ padding: '24px 32px 0', color: '#fff' }}>
        <span className="eyebrow" style={{ color: 'var(--accent)' }}>Architektura przepływu danych</span>
        <h3 className="h3" style={{ color: '#fff', marginTop: 10 }}>Marketplace dalej działa. Dane wracają do Ciebie.</h3>
        <p className="lead" style={{ color: 'rgba(255,255,255,.7)', marginTop: 8, maxWidth: 620 }}>
          Klient kupuje gdzie chce — Allegro, Amazon, sklep. Zamówienie zawsze ląduje w jednym miejscu, a Ty zostajesz właścicielem danych.
        </p>
      </div>

      <div style={{ position: 'relative', padding: '40px 20px 48px' }}>
        <svg viewBox="0 0 1100 380" style={{ width: '100%', height: 'auto', display: 'block' }}>
          <defs>
            {/* paths: marketplace → BaseLinker */}
            <path id="dfA-p1" d="M120,80 C 280,80 320,150 460,180" fill="none" />
            <path id="dfA-p2" d="M120,180 C 280,180 340,180 460,180" fill="none" />
            <path id="dfA-p3" d="M120,280 C 280,280 320,210 460,180" fill="none" />
            {/* BaseLinker → Sklep */}
            <path id="dfA-p4" d="M620,180 C 720,180 760,180 850,180" fill="none" />
            {/* Sklep → CRM/Newsletter/BI (down split) */}
            <path id="dfA-p5" d="M960,200 C 960,260 800,320 530,320" fill="none" />
            <path id="dfA-p6" d="M960,200 C 960,300 760,340 350,340" fill="none" />
            <path id="dfA-p7" d="M960,200 C 960,280 800,300 700,300" fill="none" />

            <linearGradient id="dfA-g" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%"  stopColor="#3D5AFE" stopOpacity="0"/>
              <stop offset="50%" stopColor="#3D5AFE" stopOpacity=".5"/>
              <stop offset="100%" stopColor="#3D5AFE" stopOpacity="0"/>
            </linearGradient>
          </defs>

          {/* tracks (dim) */}
          {['dfA-p1','dfA-p2','dfA-p3','dfA-p4','dfA-p5','dfA-p6','dfA-p7'].map((id) => (
            <use key={id} href={`#${id}`} stroke="rgba(255,255,255,.08)" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
          ))}

          {/* Marketplace tiles */}
          <FlowNodeMP x={40}   y={60}   logo="amazon"  label="Amazon"   sub="123 zam./dzień" />
          <FlowNodeMP x={40}   y={160}  logo="allegro" label="Allegro"  sub="287 zam./dzień" />
          <FlowNodeMP x={40}   y={260}  logo="ebay"    label="eBay"     sub="34 zam./dzień" />

          {/* BaseLinker hub */}
          <FlowHub x={460} y={140} w={160} h={80} title="BaseLinker / EPP" sub="Integration hub" tone="accent" />

          {/* Own store */}
          <FlowHub x={850} y={140} w={170} h={80} title="Sklep własny" sub="Shopify / Headless" tone="primary" iconStore />

          {/* Outputs */}
          <FlowNodeOut x={250} y={310} icon="crm"  title="CRM" sub="Klaviyo · HubSpot" />
          <FlowNodeOut x={460} y={310} icon="mail" title="Newsletter" sub="Segmentacja, lifecycle" />
          <FlowNodeOut x={670} y={310} icon="bi"   title="BI / Dane" sub="GA4 · Looker · BigQuery" />

          {/* Packets — inbound */}
          <FlowPacket pathId="dfA-p1" color="#FF9900" delay={0}   dur={2.6} />
          <FlowPacket pathId="dfA-p2" color="#FF5A00" delay={0.4} dur={2.4} />
          <FlowPacket pathId="dfA-p3" color="#86B817" delay={0.8} dur={2.8} />
          <FlowPacket pathId="dfA-p1" color="#FF9900" delay={1.3} dur={2.6} />
          <FlowPacket pathId="dfA-p2" color="#FF5A00" delay={1.7} dur={2.4} />
          {/* Hub → Store */}
          <FlowPacket pathId="dfA-p4" color="#3D5AFE" delay={0.5} dur={1.6} />
          <FlowPacket pathId="dfA-p4" color="#3D5AFE" delay={1.4} dur={1.6} />
          <FlowPacket pathId="dfA-p4" color="#3D5AFE" delay={2.2} dur={1.6} />
          {/* Store → outputs */}
          <FlowPacket pathId="dfA-p5" color="#00C896" delay={0}   dur={3.2} />
          <FlowPacket pathId="dfA-p6" color="#00C896" delay={1}   dur={3.4} />
          <FlowPacket pathId="dfA-p7" color="#00C896" delay={2}   dur={3.0} />
        </svg>

        {/* Legend */}
        <div style={{ display: 'flex', gap: 24, padding: '0 20px', flexWrap: 'wrap', marginTop: 8 }}>
          <LegendDot color="#FF9900" label="Zamówienia z marketplace" />
          <LegendDot color="#3D5AFE" label="Synchronizacja stanu / cen" />
          <LegendDot color="#00C896" label="Dane klienta zostają u Ciebie" />
        </div>
      </div>
    </div>
  );
}

function FlowNodeMP({ x, y, logo, label, sub }) {
  const colors = { amazon: '#FF9900', allegro: '#FF5A00', ebay: '#0064D2' };
  const bg = { amazon: '#232F3E', allegro: '#FF5A00', ebay: '#fff' };
  const text = { amazon: '#FF9900', allegro: '#fff', ebay: '#0064D2' };
  return (
    <g transform={`translate(${x},${y})`}>
      <rect width="160" height="56" rx="10" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.12)" />
      <rect x="12" y="14" width="28" height="28" rx="6" fill={bg[logo]} stroke={logo === 'ebay' ? 'rgba(0,0,0,.1)' : 'none'} />
      <text x="26" y="33" fontSize="11" fontWeight="800" fill={text[logo]} textAnchor="middle" fontFamily="var(--font-sans)">
        {logo === 'amazon' ? 'a.' : logo === 'allegro' ? 'A!' : ''}
      </text>
      {logo === 'ebay' && (
        <text x="26" y="32" fontSize="8" fontWeight="800" textAnchor="middle" fontFamily="var(--font-sans)">
          <tspan fill="#E53238">e</tspan><tspan fill="#0064D2">b</tspan><tspan fill="#F5AF02">a</tspan><tspan fill="#86B817">y</tspan>
        </text>
      )}
      <text x="50" y="26" fontSize="13" fontWeight="600" fill="#fff" fontFamily="var(--font-sans)">{label}</text>
      <text x="50" y="42" fontSize="11" fill="rgba(255,255,255,.55)" fontFamily="var(--font-sans)">{sub}</text>
      {/* live pulse dot */}
      <circle cx="148" cy="14" r="3" fill={colors[logo]}>
        <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite" />
      </circle>
    </g>
  );
}

function FlowHub({ x, y, w, h, title, sub, tone = 'accent', iconStore }) {
  const fill = tone === 'accent' ? '#3D5AFE' : '#fff';
  const tcol = tone === 'accent' ? '#fff'    : '#0A1F44';
  const scol = tone === 'accent' ? 'rgba(255,255,255,.75)' : 'rgba(10,31,68,.6)';
  return (
    <g transform={`translate(${x},${y})`}>
      <rect width={w} height={h} rx="14" fill={fill} stroke={tone === 'accent' ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.1)'} />
      {iconStore ? (
        <g transform="translate(16,26) scale(1.4)" stroke="#0A1F44" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M2 6h16l-1 4c-.2 1.1-1.2 2-2.4 2H5.4c-1.2 0-2.2-.9-2.4-2L2 6z"/><path d="M2 6l1-3h14l1 3"/><path d="M5 12v6h10v-6"/>
        </g>
      ) : (
        <g transform={`translate(${w/2 - 18},20)`}>
          <rect width="36" height="6" rx="3" fill="rgba(255,255,255,.4)" />
          <rect y="10" width="36" height="6" rx="3" fill="rgba(255,255,255,.55)" />
          <rect y="20" width="36" height="6" rx="3" fill="rgba(255,255,255,.7)" />
        </g>
      )}
      <text x={iconStore ? 60 : w/2} y={h - 22} textAnchor={iconStore ? 'start' : 'middle'} fontSize="14" fontWeight="700" fill={tcol} fontFamily="var(--font-sans)">{title}</text>
      <text x={iconStore ? 60 : w/2} y={h - 8}  textAnchor={iconStore ? 'start' : 'middle'} fontSize="11" fill={scol} fontFamily="var(--font-sans)">{sub}</text>
    </g>
  );
}

function FlowNodeOut({ x, y, icon, title, sub }) {
  const icons = {
    crm:  <path d="M5 18a5 5 0 0110 0M10 11a3 3 0 100-6 3 3 0 000 6z"/>,
    mail: <path d="M2 5h16v10H2zM2 5l8 6 8-6"/>,
    bi:   <path d="M3 17V8m5 9V5m5 12v-7m5 7V11"/>,
  };
  return (
    <g transform={`translate(${x},${y})`}>
      <rect width="180" height="54" rx="10" fill="rgba(0,200,150,.08)" stroke="rgba(0,200,150,.4)" />
      <g transform="translate(14,17)" stroke="#00C896" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
        {icons[icon]}
      </g>
      <text x="48" y="24" fontSize="13" fontWeight="600" fill="#fff" fontFamily="var(--font-sans)">{title}</text>
      <text x="48" y="40" fontSize="10.5" fill="rgba(255,255,255,.55)" fontFamily="var(--font-sans)">{sub}</text>
    </g>
  );
}

function LegendDot({ color, label }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <span style={{ width: 8, height: 8, borderRadius: 4, background: color, boxShadow: `0 0 12px ${color}` }} />
      <span style={{ font: '500 12.5px/1 var(--font-sans)', color: 'rgba(255,255,255,.7)' }}>{label}</span>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// DataFlowB — Editorial vertical timeline (used in Variant B)
// "Path" of a single customer order through your stack
// ────────────────────────────────────────────────────────
function DataFlowB() {
  const steps = [
    { side: 'left',  brand: 'Amazon',   color: '#FF9900', t: '14:02:11', title: 'Klient kupuje na Amazonie',  body: 'Płaci kartą, dostaje pakiet. Z perspektywy klienta — kupił od Amazona.' },
    { side: 'right', brand: 'BaseLinker', color: '#3D5AFE', t: '14:02:14', title: 'Zamówienie ląduje w BaseLinkerze', body: 'Synchronizacja w 3 sekundy. Stan magazynowy spada na wszystkich kanałach.' },
    { side: 'left',  brand: 'Sklep',    color: '#00C896', t: '14:02:15', title: 'Klient zostaje w Twoim CRM',  body: 'Email, produkt, kategoria, wartość. Trafia do Klaviyo z tagiem source=amazon.' },
    { side: 'right', brand: 'Email',    color: '#7A5AE0', t: '+3 dni',   title: 'Pierwszy newsletter "od marki"', body: 'Welcome flow z kodem 10% — przekierowuje na Twój sklep. CAC ≈ 0.' },
    { side: 'left',  brand: 'Repeat',   color: '#F59E0B', t: '+18 dni',  title: 'Drugi zakup już na Twoim sklepie', body: 'Bez prowizji 14%, z pełnymi danymi, z brandingiem. Margin recovery: +14 pp.' },
  ];

  return (
    <div data-reveal style={{ background: 'var(--bg-tint)', borderRadius: 28, padding: '56px 40px', position: 'relative' }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
        <span className="eyebrow">Ścieżka jednego zamówienia</span>
        <h3 className="h2" style={{ marginTop: 14 }}>Co się dzieje od kliknięcia „Kup" do drugiego zakupu</h3>
        <p className="lead" style={{ marginTop: 14 }}>Marketplace daje pierwszy zakup. My zamieniamy go w klienta na całe życie — bez wyłączania marketplace.</p>
      </div>

      <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto' }}>
        {/* central line */}
        <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 2, background: 'linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent)', transform: 'translateX(-1px)' }} />

        {steps.map((s, i) => (
          <div key={i} data-reveal style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            position: 'relative', padding: '14px 0', minHeight: 100,
            '--reveal-d': `${i * 80}ms`,
          }}>
            {/* node dot */}
            <div style={{
              position: 'absolute', left: '50%', top: 28, transform: 'translateX(-50%)',
              width: 16, height: 16, borderRadius: 8, background: '#fff',
              border: `3px solid ${s.color}`, zIndex: 2,
              boxShadow: `0 0 0 6px ${s.color}22`,
            }} />

            {s.side === 'left' ? (
              <>
                <div style={{ paddingRight: 56, textAlign: 'right' }}>
                  <div style={{ font: '500 12px/1 var(--font-mono)', color: 'var(--ink-mute)', letterSpacing: '0.04em' }}>{s.t}</div>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    marginTop: 8, padding: '4px 10px', borderRadius: 999,
                    background: `${s.color}1a`, color: s.color, font: '600 11px/1 var(--font-sans)',
                    textTransform: 'uppercase', letterSpacing: '0.08em',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: s.color }} />{s.brand}
                  </div>
                  <h4 style={{ font: '600 18px/1.3 var(--font-head)', marginTop: 12, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{s.title}</h4>
                  <p style={{ font: '400 14.5px/1.5 var(--font-body)', color: 'var(--ink-soft)', marginTop: 6, maxWidth: 360, marginLeft: 'auto' }}>{s.body}</p>
                </div>
                <div />
              </>
            ) : (
              <>
                <div />
                <div style={{ paddingLeft: 56 }}>
                  <div style={{ font: '500 12px/1 var(--font-mono)', color: 'var(--ink-mute)', letterSpacing: '0.04em' }}>{s.t}</div>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    marginTop: 8, padding: '4px 10px', borderRadius: 999,
                    background: `${s.color}1a`, color: s.color, font: '600 11px/1 var(--font-sans)',
                    textTransform: 'uppercase', letterSpacing: '0.08em',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: s.color }} />{s.brand}
                  </div>
                  <h4 style={{ font: '600 18px/1.3 var(--font-head)', marginTop: 12, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{s.title}</h4>
                  <p style={{ font: '400 14.5px/1.5 var(--font-body)', color: 'var(--ink-soft)', marginTop: 6, maxWidth: 360 }}>{s.body}</p>
                </div>
              </>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// DataFlowC — Interactive node graph (used in Variant C)
// Force-directed-ish static layout with hoverable nodes
// ────────────────────────────────────────────────────────
function DataFlowC() {
  const [hover, setHover] = dfUseState(null);

  const nodes = [
    { id: 'amazon',   x: 80,  y: 110, r: 36, color: '#FF9900', label: 'Amazon',     count: '123 ord/d' },
    { id: 'allegro',  x: 80,  y: 220, r: 38, color: '#FF5A00', label: 'Allegro',    count: '287 ord/d' },
    { id: 'ebay',     x: 80,  y: 330, r: 30, color: '#86B817', label: 'eBay',       count: '34 ord/d' },
    { id: 'base',     x: 360, y: 220, r: 60, color: '#3D5AFE', label: 'BaseLinker', count: 'Hub' },
    { id: 'store',    x: 660, y: 220, r: 70, color: '#0A1F44', label: 'Twój sklep', count: 'Shopify+' },
    { id: 'crm',      x: 880, y: 80,  r: 32, color: '#00C896', label: 'CRM',        count: '32k kontaktów' },
    { id: 'mail',     x: 940, y: 220, r: 32, color: '#7A5AE0', label: 'Newsletter', count: '18% CTR' },
    { id: 'bi',       x: 880, y: 360, r: 32, color: '#F59E0B', label: 'BI',         count: 'GA4 + Looker' },
  ];

  const edges = [
    { from: 'amazon',  to: 'base',  c: '#FF9900' },
    { from: 'allegro', to: 'base',  c: '#FF5A00' },
    { from: 'ebay',    to: 'base',  c: '#86B817' },
    { from: 'base',    to: 'store', c: '#3D5AFE' },
    { from: 'store',   to: 'crm',   c: '#00C896' },
    { from: 'store',   to: 'mail',  c: '#7A5AE0' },
    { from: 'store',   to: 'bi',    c: '#F59E0B' },
  ];
  const map = Object.fromEntries(nodes.map((n) => [n.id, n]));

  return (
    <div data-reveal style={{
      background: 'linear-gradient(180deg, #050B1F 0%, #0A1F44 100%)',
      borderRadius: 28, padding: 0, overflow: 'hidden',
      position: 'relative', border: '1px solid rgba(255,255,255,.06)',
    }}>
      <div style={{ padding: '32px 36px 0', color: '#fff' }}>
        <span className="eyebrow" style={{ color: '#00C896' }}>Live · System integracji</span>
        <h3 className="h2" style={{ color: '#fff', marginTop: 14 }}>Jeden graf. Trzy marketplace. Twoja kontrola.</h3>
        <p className="lead" style={{ color: 'rgba(255,255,255,.7)', marginTop: 12, maxWidth: 600 }}>
          Najedź na węzeł, żeby zobaczyć, co przepływa. Wszystko, co zielone — to dane, które wcześniej zostawały u operatora marketplace.
        </p>
      </div>

      <div style={{ padding: '20px 16px 32px' }}>
        <svg viewBox="0 0 1020 440" style={{ width: '100%', height: 'auto', display: 'block' }}>
          <defs>
            <filter id="dfC-glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="3" result="b" />
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
            {edges.map((e, i) => (
              <path key={i} id={`dfC-e${i}`} d={curvedPath(map[e.from], map[e.to])} fill="none" />
            ))}
          </defs>

          {/* grid bg */}
          <g opacity="0.4">
            {Array.from({ length: 16 }, (_, i) => (
              <line key={`v${i}`} x1={i * 68} y1="0" x2={i * 68} y2="440" stroke="rgba(255,255,255,.04)" />
            ))}
            {Array.from({ length: 10 }, (_, i) => (
              <line key={`h${i}`} x1="0" y1={i * 50} x2="1020" y2={i * 50} stroke="rgba(255,255,255,.04)" />
            ))}
          </g>

          {/* edges */}
          {edges.map((e, i) => {
            const active = hover === e.from || hover === e.to;
            return (
              <g key={i}>
                <use href={`#dfC-e${i}`} stroke={e.c} strokeOpacity={active ? 0.5 : 0.2} strokeWidth={active ? 2 : 1.2} fill="none" strokeDasharray="2 3" />
              </g>
            );
          })}

          {/* packets */}
          {edges.map((e, i) => (
            <g key={`p${i}`}>
              <circle r="4" fill={e.c} filter="url(#dfC-glow)">
                <animateMotion dur="2.8s" repeatCount="indefinite" begin={`${i * 0.4}s`}>
                  <mpath href={`#dfC-e${i}`} />
                </animateMotion>
              </circle>
              <circle r="4" fill={e.c} filter="url(#dfC-glow)" opacity="0.6">
                <animateMotion dur="2.8s" repeatCount="indefinite" begin={`${i * 0.4 + 1.4}s`}>
                  <mpath href={`#dfC-e${i}`} />
                </animateMotion>
              </circle>
            </g>
          ))}

          {/* nodes */}
          {nodes.map((n) => {
            const active = hover === n.id;
            return (
              <g key={n.id}
                 onMouseEnter={() => setHover(n.id)}
                 onMouseLeave={() => setHover(null)}
                 style={{ cursor: 'pointer' }}>
                <circle cx={n.x} cy={n.y} r={n.r + 8} fill={n.color} opacity={active ? 0.2 : 0.08}>
                  <animate attributeName="r" values={`${n.r + 6};${n.r + 12};${n.r + 6}`} dur="2.4s" repeatCount="indefinite" />
                </circle>
                <circle cx={n.x} cy={n.y} r={n.r} fill={n.color} opacity={0.95} filter="url(#dfC-glow)" />
                <circle cx={n.x} cy={n.y} r={n.r - 2} fill="rgba(0,0,0,.3)" />
                <text x={n.x} y={n.y - 2} textAnchor="middle" fontSize="13" fontWeight="700" fill="#fff" fontFamily="var(--font-sans)">{n.label}</text>
                <text x={n.x} y={n.y + 14} textAnchor="middle" fontSize="10" fill="rgba(255,255,255,.7)" fontFamily="var(--font-mono)">{n.count}</text>
              </g>
            );
          })}
        </svg>

        {/* status row */}
        <div style={{ display: 'flex', gap: 32, padding: '16px 24px 0', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <StatusPill color="#00C896" label="Wszystkie integracje online" pulse />
          <StatusPill color="rgba(255,255,255,.4)" label="Ostatnia synchronizacja: 2s temu" />
          <StatusPill color="rgba(255,255,255,.4)" label="14 232 produkty · 3 platformy" />
        </div>
      </div>
    </div>
  );
}

function curvedPath(a, b) {
  const dx = b.x - a.x;
  const cx1 = a.x + dx * 0.5;
  const cx2 = b.x - dx * 0.5;
  return `M${a.x},${a.y} C${cx1},${a.y} ${cx2},${b.y} ${b.x},${b.y}`;
}

function StatusPill({ color, label, pulse }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: '500 12.5px/1 var(--font-sans)', color: 'rgba(255,255,255,.7)' }}>
      <span style={{ position: 'relative', width: 8, height: 8 }}>
        <span style={{ position: 'absolute', inset: 0, borderRadius: 4, background: color }} />
        {pulse && <span style={{ position: 'absolute', inset: -3, borderRadius: 7, background: color, opacity: .3, animation: 'pulse 1.6s ease-out infinite' }} />}
      </span>
      {label}
      <style>{`@keyframes pulse { 0% { transform: scale(.6); opacity: .6 } 100% { transform: scale(1.4); opacity: 0 } }`}</style>
    </div>
  );
}

Object.assign(window, { DataFlowA, DataFlowB, DataFlowC });