// Animated workflow diagram for the hero
const HeroDiagram = () => {
  const [pulse, setPulse] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setPulse(p => (p + 1) % 4), 1800);
    return () => clearInterval(id);
  }, []);

  const nodes = [
    { id: "in", x: 60, y: 80, label: "Inbound", sub: "Email · Slack · Form", kind: "io" },
    { id: "ai", x: 240, y: 50, label: "Classify", sub: "GPT-4 · Triage", kind: "ai" },
    { id: "wf", x: 240, y: 170, label: "Enrich", sub: "CRM · Vector DB", kind: "wf" },
    { id: "out", x: 420, y: 110, label: "Action", sub: "Reply · Ticket · Hand-off", kind: "io" },
  ];

  const edges = [
    { from: "in", to: "ai" },
    { from: "in", to: "wf" },
    { from: "ai", to: "out" },
    { from: "wf", to: "out" },
  ];

  const nodeById = Object.fromEntries(nodes.map(n => [n.id, n]));

  return (
    <div className="hero-visual">
      <span className="hv-tag">live · workflow.lunarc · melbourne</span>
      <span className="hv-tag hv-tag-r">latency 412ms</span>

      <svg viewBox="0 0 500 280" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--ink-3)" />
          </marker>
        </defs>

        {edges.map((e, i) => {
          const a = nodeById[e.from];
          const b = nodeById[e.to];
          const x1 = a.x + 70, y1 = a.y + 24;
          const x2 = b.x, y2 = b.y + 24;
          const cx = (x1 + x2) / 2;
          return (
            <g key={i}>
              <path
                d={`M ${x1} ${y1} C ${cx} ${y1}, ${cx} ${y2}, ${x2} ${y2}`}
                fill="none"
                stroke="var(--line-strong)"
                strokeWidth="1"
              />
              <path
                d={`M ${x1} ${y1} C ${cx} ${y1}, ${cx} ${y2}, ${x2} ${y2}`}
                fill="none"
                stroke="var(--accent-a)"
                strokeWidth="1.5"
                strokeDasharray="4 6"
                style={{ animation: `flow-dash ${2 + i * 0.3}s linear infinite` }}
                markerEnd="url(#arrow)"
              />
            </g>
          );
        })}

        {nodes.map((n, i) => {
          const active = pulse === i || (pulse === 3 && n.id === "out");
          return (
            <g key={n.id} transform={`translate(${n.x}, ${n.y})`}>
              <rect
                width="70" height="48"
                rx="8"
                fill="var(--bg)"
                stroke={active ? "var(--accent-a)" : "var(--line-strong)"}
                strokeWidth={active ? "1.5" : "1"}
                style={{ transition: "stroke 0.3s ease" }}
              />
              <circle
                cx="9" cy="10" r="3"
                fill={n.kind === "ai" ? "var(--accent-b)" : n.kind === "wf" ? "var(--accent-a)" : "var(--ink-3)"}
              />
              <text x="9" y="26" fontSize="9" fontFamily="var(--font-mono)" fill="var(--ink-3)" letterSpacing="0.5">
                {n.kind.toUpperCase()}
              </text>
              <text x="9" y="40" fontSize="11" fontFamily="var(--font-display)" fill="var(--ink)" fontWeight="500">
                {n.label}
              </text>
              <text x="9" y="64" fontSize="9" fontFamily="var(--font-mono)" fill="var(--ink-4)">
                {n.sub}
              </text>
            </g>
          );
        })}
      </svg>

      {/* Floating data chips */}
      <div style={{
        position: "absolute", left: "8%", top: "62%",
        background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "8px",
        padding: "8px 12px", fontSize: "11px", fontFamily: "var(--font-mono)",
        color: "var(--ink-2)", boxShadow: "0 4px 12px #1a1a1c0d",
        animation: "float-y 3s ease-in-out infinite",
      }}>
        <div style={{ color: "var(--ink-4)", fontSize: "9px", letterSpacing: "0.1em" }}>EVENTS / DAY</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "16px", marginTop: "2px" }}>
          184,209
        </div>
      </div>

      <div style={{
        position: "absolute", right: "6%", top: "70%",
        background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "8px",
        padding: "8px 12px", fontSize: "11px", fontFamily: "var(--font-mono)",
        color: "var(--ink-2)", boxShadow: "0 4px 12px #1a1a1c0d",
        animation: "float-y 3.4s ease-in-out infinite",
        animationDelay: "0.5s",
      }}>
        <div style={{ color: "var(--ink-4)", fontSize: "9px", letterSpacing: "0.1em" }}>AUTO-RESOLVED</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "16px", marginTop: "2px", color: "var(--accent-a)" }}>
          92.4%
        </div>
      </div>
    </div>
  );
};

window.HeroDiagram = HeroDiagram;