/* Compound — diagrams.jsx
   Case study + hero visuals: warm media areas with bespoke product snapshots.
   Each case study has its own UI character — not generic checklists.
*/

/* ---------- MediaArea — warm gradient container ---------- */
function MediaArea({ children, tint = "warm", labelTL, labelTR, labelBL, labelBR }) {
  const bg = tint === "ink"
    ? "linear-gradient(135deg, #1A1814 0%, #28221C 60%, #322A22 100%)"
    : tint === "ochre"
    ? "linear-gradient(135deg, #C29A6B 0%, #A07843 50%, #7E5A2A 100%)"
    : tint === "sage"
    ? "linear-gradient(135deg, #6F7E5E 0%, #4F6043 55%, #364630 100%)"
    : "linear-gradient(135deg, #C8B59A 0%, #A88A6A 50%, #7B5E40 100%)";

  return (
    <div style={{ position: "relative", minHeight: 480, overflow: "hidden", borderRadius: 24 }}>
      <div style={{ position: "absolute", inset: 0, background: bg }} />
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")",
        opacity: 0.4, mixBlendMode: "overlay"
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(circle at 70% 30%, rgba(255,240,210,0.18), transparent 60%), radial-gradient(circle at 20% 80%, rgba(0,0,0,0.25), transparent 55%)"
      }} />
      <div className="float-a" style={{
        position: "absolute", left: "10%", top: "16%",
        width: 130, height: 130, borderRadius: 999,
        background: "radial-gradient(circle at 40% 40%, rgba(255,255,255,0.28), rgba(255,255,255,0) 65%)",
        filter: "blur(8px)", mixBlendMode: "screen"
      }} />
      <div className="float-b" style={{
        position: "absolute", right: "8%", bottom: "12%",
        width: 200, height: 200, borderRadius: 999,
        background: "radial-gradient(circle at 60% 60%, rgba(214,118,46,0.4), rgba(0,0,0,0) 65%)",
        filter: "blur(16px)", mixBlendMode: "screen"
      }} />

      {/* corner labels */}
      <div style={{ position: "absolute", top: 16, left: 18, color: "rgba(255,255,255,0.7)" }} className="meta">{labelTL}</div>
      <div style={{ position: "absolute", top: 16, right: 18, color: "rgba(255,255,255,0.7)" }} className="meta">{labelTR}</div>
      <div style={{ position: "absolute", bottom: 16, left: 18, color: "rgba(255,255,255,0.55)" }} className="meta">{labelBL}</div>
      <div style={{ position: "absolute", bottom: 16, right: 18, color: "rgba(255,255,255,0.55)" }} className="meta">{labelBR}</div>

      {/* content */}
      <div style={{ position: "relative", padding: "56px 24px", display: "flex", alignItems: "center", justifyContent: "center", minHeight: 480 }}>
        {children}
      </div>
    </div>
  );
}

/* ---------- Glass card primitive ---------- */
const glassCardStyle = {
  background: "rgba(255, 253, 247, 0.9)",
  backdropFilter: "blur(14px)",
  WebkitBackdropFilter: "blur(14px)",
  border: "1px solid rgba(255, 255, 255, 0.7)",
  boxShadow: "0 30px 60px -20px rgba(20, 14, 6, 0.28), 0 1px 0 rgba(255,255,255,0.6) inset",
  borderRadius: 18
};
const glassCardDarkStyle = {
  background: "rgba(20, 16, 12, 0.7)",
  backdropFilter: "blur(14px)",
  WebkitBackdropFilter: "blur(14px)",
  border: "1px solid rgba(255, 255, 255, 0.08)",
  boxShadow: "0 30px 60px -20px rgba(0,0,0,0.5)",
  borderRadius: 18
};

const cardHeader = (system, badge, accentBadge = true) => (
  <div className="flex items-center justify-between" style={{ padding: "13px 16px", borderBottom: "1px solid rgba(10,10,10,0.07)" }}>
    <div className="flex items-center gap-2.5">
      <span style={{
        display: "inline-block", width: 8, height: 8, borderRadius: 999,
        background: accentBadge ? "var(--accent)" : "var(--muted)",
        boxShadow: accentBadge ? "0 0 0 3px rgba(107,42,42,0.14)" : "none"
      }}></span>
      <h4 style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.01em" }}>{system}</h4>
    </div>
    <span className="meta" style={{
      background: accentBadge ? "rgba(107, 42, 42, 0.08)" : "rgba(10,10,10,0.06)",
      color: accentBadge ? "var(--accent)" : "var(--ink-2)",
      padding: "5px 8px",
      borderRadius: 6
    }}>{badge}</span>
  </div>
);

/* ---------- Hero flowlines — 5 curves that draw on scroll ----------
   Buttery-smooth on mobile: direct DOM writes (no React re-render per scroll),
   pathLength=1 (no getTotalLength), no CSS transition double-interpolation,
   GPU-promoted layer, mobile-cheap glow (stacked stroke, no SVG filter).
*/
const FLOW_PATHS = [
  "M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.815 862.827 520.069C875.952 513.049 889.748 502.706 903.5 503.736C922.677 505.171 935.293 510.562 945.817 515.673C954.234 519.76 963.095 522.792 972.199 524.954C996.012 530.611 1007.42 534.118 1034 549C1077.5 573.359 1082.5 594.5 1140 629C1206 670 1328.5 662.5 1440 662.5",
  "M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5 501.742C886.47 501.597 896.865 506.047 907.429 510.911C930.879 521.707 957.139 519.639 982.951 520.063C1020.91 520.686 1037.5 530.797 1056.5 537C1102.24 556.627 1116.5 570.704 1180.5 579.235C1257.5 589.5 1279 587 1440 588",
  "M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392C926.856 504.255 932.097 504.674 937.176 505.631C966.993 511.248 970.679 514.346 989.5 514.735C1006.3 515.083 1036.5 513.235 1055.5 513.235C1114.5 513.235 1090.5 513.235 1124 513.235C1177.5 513.235 1178.99 514.402 1241 514.402C1317.5 514.402 1274.5 512.568 1440 513.235",
  "M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178 508.764 873.089 523.365 891 523.735C907.8 524.083 923 504.235 963 506.735C1034.5 506.735 1047.5 492.68 1071 481.5C1122.5 457 1142.23 452.871 1185 446.5C1255.5 436 1294 439 1439.5 439",
  "M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.179C854.243 500.169 860.624 500.802 866.535 502.718C886.961 509.338 898.141 519.866 916 520.236C932.8 520.583 934.5 510.236 967.5 501.736C1011.5 491 1007.5 493.5 1029.5 480C1069.5 453.5 1072 440.442 1128.5 403.5C1180.5 369.5 1275 360.374 1439 364"
];

const FLOW_COLORS = ["#6B2A2A", "#8E4A2C", "#A07843", "#5A4030", "#0A0A0A"];
const FLOW_OFFSETS = [0.10, 0.07, 0.05, 0.03, 0.00];

function HeroFlowlines() {
  const wrapRef = React.useRef(null);
  const pathRefs = React.useRef([]);
  // Detect mobile once — used to skip the expensive SVG blur filter on phones.
  const isMobile = React.useMemo(() => {
    if (typeof window === "undefined") return false;
    return window.matchMedia("(max-width: 768px)").matches ||
           window.matchMedia("(pointer: coarse)").matches;
  }, []);

  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;

    let raf = 0;
    let visible = true;
    let lastP = -1;

    const write = (p) => {
      // Direct DOM writes — bypass React reconciliation entirely.
      const refs = pathRefs.current;
      for (let i = 0; i < refs.length; i++) {
        const node = refs[i];
        if (!node) continue;
        // Using pathLength="1" — offset is a fraction in [0,1].
        // Slight per-line cascade so they don't all complete in lockstep.
        const li = Math.max(0.001, Math.min(1, p + FLOW_OFFSETS[i] - 0.05));
        const offset = (1 - li).toFixed(4);
        if (node.dataset.o !== offset) {
          node.style.strokeDashoffset = offset;
          node.dataset.o = offset;
        }
      }
    };

    const compute = () => {
      raf = 0;
      const rect = el.getBoundingClientRect();
      const winH = window.innerHeight || document.documentElement.clientHeight;
      const total = rect.height + winH;
      const scrolled = winH - rect.top;
      let p = scrolled / total;
      if (p < 0) p = 0; else if (p > 1) p = 1;
      // Skip writes when progress hasn't meaningfully changed (mobile scroll fires bursts).
      if (Math.abs(p - lastP) < 0.0015) return;
      lastP = p;
      write(p);
    };

    const onScroll = () => {
      if (raf || !visible) return;
      raf = requestAnimationFrame(compute);
    };

    // Only listen while in view — avoids work on every page scroll.
    const io = "IntersectionObserver" in window
      ? new IntersectionObserver((entries) => {
          for (const e of entries) {
            visible = e.isIntersecting;
            if (visible) onScroll();
          }
        }, { rootMargin: "20% 0px 20% 0px" })
      : null;
    if (io) io.observe(el);

    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    // Initial paint (next frame so layout has settled).
    raf = requestAnimationFrame(compute);

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

  return (
    <div
      ref={wrapRef}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: "1440 / 480",
        overflow: "hidden",
        // Promote to its own GPU layer so scroll-induced repaints stay cheap.
        transform: "translateZ(0)",
        willChange: "transform",
        contain: "layout paint style"
      }}
    >
      <svg
        viewBox="0 0 1440 480"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid slice"
        shapeRendering="geometricPrecision"
        style={{ width: "100%", height: "100%", display: "block" }}
      >
        {!isMobile && (
          <defs>
            <filter id="cflow-blur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            </filter>
          </defs>
        )}

        {/* Glow layer.
            Desktop: real SVG blur filter (looks best, fine perf).
            Mobile: stacked wider strokes at low opacity (no filter rasterization). */}
        <g transform="translate(0,-180)">
          {FLOW_PATHS.map((d, i) => (
            isMobile ? (
              <g key={"g" + i}>
                <path d={d} stroke={FLOW_COLORS[i]} strokeWidth="9"
                  strokeOpacity="0.06" strokeLinecap="round" fill="none" />
                <path d={d} stroke={FLOW_COLORS[i]} strokeWidth="5"
                  strokeOpacity="0.12" strokeLinecap="round" fill="none" />
              </g>
            ) : (
              <path
                key={"g" + i}
                d={d}
                stroke={FLOW_COLORS[i]}
                strokeWidth="2.4"
                strokeOpacity="0.45"
                fill="none"
                filter="url(#cflow-blur)"
              />
            )
          ))}
        </g>

        {/* Foreground strokes — animated via direct DOM writes from the effect above. */}
        <g transform="translate(0,-180)">
          {FLOW_PATHS.map((d, i) => (
            <path
              key={"p" + i}
              ref={(node) => { pathRefs.current[i] = node; }}
              d={d}
              stroke={FLOW_COLORS[i]}
              strokeWidth="1.8"
              fill="none"
              pathLength="1"
              style={{
                strokeDasharray: 1,
                strokeDashoffset: 1
              }}
            />
          ))}
        </g>
      </svg>
    </div>
  );
}

/* ---------- HERO BRAND CARD ---------- */
/* Kept for back-compat, no longer used in Hero */
function HeroPipeline() {
  return (
    <MediaArea tint="warm" labelTL="// THE STUDIO" labelTR="EST · 2024" labelBL="FIG.00" labelBR="IRVINE · CA">
      <div style={{ ...glassCardStyle, width: "100%", maxWidth: 380, padding: 0 }}>
        {cardHeader("Compound Studio", "v.04 · LIVE")}
        <div style={{ padding: "30px 22px 24px 22px" }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
            <Mark size={56} style={{ color: "var(--ink)" }} />
          </div>
          <p style={{ fontSize: 22, lineHeight: 1.15, color: "var(--ink)", letterSpacing: "-0.02em", fontWeight: 500, textAlign: "center", textWrap: "balance" }}>
            An AI systems studio for operators who run real businesses.
          </p>
        </div>
      </div>
    </MediaArea>
  );
}

/* ---------- APPEALIO: denial → appeal product card ----------
   Two stacked tiles inside a card: incoming denial, drafted appeal.
*/
function DiagramAppealio() {
  return (
    <MediaArea
      tint="warm"
      labelTL="// APPEAL.GEN"
      labelTR="HEALTHCARE · LIVE"
      labelBL="FIG.01"
      labelBR="appealio.co"
    >
      <div style={{ ...glassCardStyle, width: "100%", maxWidth: 400, padding: 0 }}>
        {cardHeader("Appeal Workspace", "AUTO")}
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
          {/* Inbox: denial received */}
          <div style={{
            border: "1px solid rgba(10,10,10,0.08)",
            borderRadius: 12,
            padding: "12px 14px",
            background: "rgba(255,255,255,0.5)"
          }}>
            <div className="meta" style={{ color: "var(--muted)", marginBottom: 6 }}>// INBOUND · 03:21</div>
            <div className="flex items-center justify-between">
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>Denial · CO-50</span>
              <span className="meta tnum" style={{ color: "var(--accent)" }}>$ 1,842.00</span>
            </div>
            <div className="meta mt-1" style={{ color: "var(--muted)" }}>BCBS · Non-covered service · PT 014</div>
          </div>

          {/* arrow */}
          <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--muted)", justifyContent: "center" }}>
            <span className="meta">DRAFT</span>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 4l0 16M6 14l6 6 6-6" stroke="currentColor" fill="none" strokeWidth="1.5" /></svg>
          </div>

          {/* Drafted appeal */}
          <div style={{
            border: "1px solid rgba(107,42,42,0.18)",
            borderRadius: 12,
            padding: "12px 14px",
            background: "rgba(107,42,42,0.04)"
          }}>
            <div className="flex items-center justify-between">
              <div className="meta" style={{ color: "var(--accent)" }}>// APPEAL LETTER · DRAFT</div>
              <div className="meta tnum" style={{ color: "var(--accent)" }}>38s</div>
            </div>
            <div className="mt-2" style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--ink-2)" }}>
              <p style={{ fontWeight: 500, color: "var(--ink)" }}>RE: Appeal of denial CO-50 — Patient 014</p>
              <p className="mt-1.5">We respectfully appeal the above denial. Per payer policy 4.12.3, the service is covered when ordered by a treating physician for…</p>
              <p className="mt-1.5" style={{ color: "var(--muted)" }}>… ▌</p>
            </div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(10,10,10,0.07)", padding: "10px 16px", display: "flex", justifyContent: "space-between" }}>
          <span className="meta" style={{ color: "var(--muted)" }}>QUEUE · 142 PENDING</span>
          <span className="meta" style={{ color: "var(--accent)" }}>SEND ↗</span>
        </div>
      </div>
    </MediaArea>
  );
}

/* ---------- HELMET HYGIENE: configurator → quote receipt ---------- */
function DiagramHelmet() {
  return (
    <MediaArea
      tint="ochre"
      labelTL="// QUOTE.ENGINE"
      labelTR="MANUFACTURING"
      labelBL="FIG.02"
      labelBR="helmethygiene.com"
    >
      <div style={{ ...glassCardStyle, width: "100%", maxWidth: 400, padding: 0 }}>
        {cardHeader("Quote · #HH-2841", "READY")}
        <div style={{ padding: 16 }}>
          {/* Config */}
          <div className="meta" style={{ color: "var(--muted)", marginBottom: 8 }}>// CONFIGURATION</div>
          <table style={{ width: "100%", fontSize: 12.5, borderCollapse: "collapse" }}>
            <tbody>
              {[
                ["Size", "XL · 60cm"],
                ["Material", "Carbon composite"],
                ["Finish", "Matte black · custom decal"],
                ["Quantity", "12 units"],
                ["Lead time", "10 business days"]
              ].map(([k, v], i) => (
                <tr key={k} style={{ borderTop: i === 0 ? "none" : "1px solid rgba(10,10,10,0.06)" }}>
                  <td style={{ padding: "7px 0", color: "var(--muted)" }} className="meta">{k.toUpperCase()}</td>
                  <td style={{ padding: "7px 0", textAlign: "right", color: "var(--ink)", letterSpacing: "-0.005em" }}>{v}</td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* Quote summary */}
          <div style={{
            marginTop: 14,
            border: "1px solid rgba(107,42,42,0.18)",
            borderRadius: 12,
            padding: "12px 14px",
            background: "rgba(107,42,42,0.05)"
          }}>
            <div className="flex items-baseline justify-between" style={{ marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: "var(--ink-2)" }}>Subtotal</span>
              <span className="tnum" style={{ fontSize: 13, color: "var(--ink)" }}>$ 4,920.00</span>
            </div>
            <div className="flex items-baseline justify-between" style={{ marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: "var(--ink-2)" }}>Shipping (US)</span>
              <span className="tnum" style={{ fontSize: 13, color: "var(--ink)" }}>$ 124.00</span>
            </div>
            <div className="flex items-baseline justify-between" style={{ marginTop: 8, paddingTop: 8, borderTop: "1px dashed rgba(107,42,42,0.25)" }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--accent)" }}>Total</span>
              <span className="tnum" style={{ fontSize: 18, fontWeight: 600, color: "var(--accent)", letterSpacing: "-0.01em" }}>$ 5,044.00</span>
            </div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(10,10,10,0.07)", padding: "10px 16px", display: "flex", justifyContent: "space-between" }}>
          <span className="meta" style={{ color: "var(--muted)" }}>TURNAROUND · 1:47</span>
          <span className="meta" style={{ color: "var(--accent)" }}>SEND QUOTE ↗</span>
        </div>
      </div>
    </MediaArea>
  );
}

/* ---------- FIELDLAYER: live network map + ticket ---------- */
function DiagramField() {
  // small pseudo-random worker dot grid
  const cols = 14, rows = 8;
  let s = 11;
  const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const dots = [];
  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
    if (rand() > 0.16) dots.push({ c, r, hot: rand() > 0.88 });
  }
  return (
    <MediaArea
      tint="ink"
      labelTL="// FIELD.OPS"
      labelTR="NETWORK · LIVE"
      labelBL="FIG.03"
      labelBR="fieldlayer.io"
    >
      <div style={{ ...glassCardStyle, width: "100%", maxWidth: 400, padding: 0 }}>
        {cardHeader("Dispatch · LIVE", "500K+ NODES")}
        <div style={{ padding: 16 }}>
          {/* Map */}
          <div style={{
            border: "1px solid rgba(10,10,10,0.08)",
            borderRadius: 12,
            padding: 12,
            background: "rgba(247,243,234,0.5)",
            position: "relative",
            aspectRatio: "14 / 8"
          }}>
            <svg viewBox={`0 0 ${cols * 18} ${rows * 18}`} width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
              {dots.map((d, i) => (
                <circle
                  key={i}
                  cx={d.c * 18 + 9}
                  cy={d.r * 18 + 9}
                  r={d.hot ? 3.6 : 2.2}
                  fill={d.hot ? "var(--accent)" : "var(--ink)"}
                  opacity={d.hot ? 1 : 0.5}
                />
              ))}
            </svg>
          </div>
          {/* Job ticket */}
          <div style={{
            marginTop: 12,
            border: "1px solid rgba(107,42,42,0.18)",
            borderRadius: 12,
            padding: "11px 13px",
            background: "rgba(107,42,42,0.05)"
          }}>
            <div className="flex items-center justify-between">
              <div className="meta" style={{ color: "var(--accent)" }}>// ACTIVE JOB · #FL-7194</div>
              <div className="meta tnum" style={{ color: "var(--accent)" }}>ETA 18m</div>
            </div>
            <div className="mt-1.5 flex items-center justify-between">
              <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>Inspection · 124 W 41st St</span>
              <span className="meta" style={{ color: "var(--muted)" }}>AUSTIN · TX</span>
            </div>
            <div className="meta mt-1" style={{ color: "var(--muted)" }}>WORKER · J. Mendez · ★ 4.9 · 217 jobs</div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(10,10,10,0.07)", padding: "10px 16px", display: "flex", justifyContent: "space-between" }}>
          <span className="meta" style={{ color: "var(--muted)" }}>50 + PR + CA</span>
          <span className="meta" style={{ color: "var(--accent)" }}>&lt; 24 HR TURNAROUND</span>
        </div>
      </div>
    </MediaArea>
  );
}

/* ---------- Process system map ---------- */
function SystemMap({ nodes = [] }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-6 px-4 md:px-12">
      {nodes.map((n, i) => (
        <div key={i} className="relative">
          <div style={{
            background: "var(--bg)",
            border: "1px solid var(--rule-strong)",
            padding: 24,
            borderRadius: 4,
            minHeight: 140,
            position: "relative",
            zIndex: 1
          }}>
            <div className="flex items-baseline justify-between mb-5">
              <span className="num" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 0.85 }}>0{i + 1}</span>
              <span className="meta" style={{ color: "var(--muted)" }}>{n.duration}</span>
            </div>
            <div className="meta" style={{ color: "var(--accent)" }}>{n.kind}</div>
            <div className="display" style={{ fontSize: 26, marginTop: 6 }}>{n.t}</div>
          </div>
          {i < nodes.length - 1 && (
            <div className="hidden md:flex absolute" style={{
              top: "50%", right: -20, width: 20, height: 20,
              alignItems: "center", justifyContent: "center", color: "var(--ink)", zIndex: 2,
              transform: "translateY(-50%)"
            }}>
              <svg viewBox="0 0 20 20" width="16" height="16">
                <path d="M0 10 L18 10 M12 4 L18 10 L12 16" stroke="currentColor" strokeWidth="1" fill="none" />
              </svg>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

/* ---------- Hero coordinate mark (unused now, kept) ---------- */
function HeroMark() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const paths = el.querySelectorAll("[data-draw]");
    paths.forEach(p => {
      const len = p.getTotalLength ? p.getTotalLength() : 200;
      p.style.strokeDasharray = len;
      p.style.strokeDashoffset = len;
    });
    const fade = el.querySelectorAll("[data-fade]");
    fade.forEach(p => p.style.opacity = "0");
    const fire = () => {
      paths.forEach((p, i) => {
        const len = p.getTotalLength ? p.getTotalLength() : 200;
        animateIn(p, [{ strokeDashoffset: len }, { strokeDashoffset: 0 }], { duration: 900, delay: i * 70 });
        p.style.strokeDashoffset = 0;
      });
      fade.forEach((p, i) => {
        animateIn(p, [{ opacity: 0 }, { opacity: 1 }], { duration: 700, delay: 800 + i * 80 });
        p.style.opacity = "1";
      });
    };
    return (typeof registerReveal === "function") ? registerReveal(el, fire) : (setTimeout(fire, 100), undefined);
  }, []);

  return (
    <svg ref={ref} viewBox="0 0 320 320" className="w-full h-auto" style={{ color: "var(--ink)" }}>
      {[150, 120, 90, 60, 30].map((r, i) => (
        <circle key={r} cx="160" cy="160" r={r} fill="none" stroke={i === 1 ? "var(--accent)" : "var(--ink)"} strokeWidth="1" strokeOpacity={i === 1 ? "1" : "0.5"} data-draw />
      ))}
      <line x1="160" y1="0" x2="160" y2="320" stroke="var(--ink)" strokeWidth="1" strokeOpacity="0.25" data-draw />
      <line x1="0" y1="160" x2="320" y2="160" stroke="var(--ink)" strokeWidth="1" strokeOpacity="0.25" data-draw />
      <circle cx="160" cy="160" r="3" fill="var(--accent)" data-fade />
    </svg>
  );
}

Object.assign(window, {
  MediaArea, DiagramAppealio, DiagramHelmet, DiagramField, HeroPipeline, HeroFlowlines,
  SystemMap, HeroMark
});