// Bigger animated workflow diagram for the "How it works" section
const WorkflowDiagram = () => {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 5), 1600);
    return () => clearInterval(id);
  }, []);

  const lanes = [
    { y: 70, label: "TRIGGERS", items: ["Form submission", "Inbound call", "CRM event"] },
    { y: 170, label: "AGENTS", items: ["Voice agent", "Workflow agent", "AIOS router"] },
    { y: 270, label: "TOOLS", items: ["HubSpot", "n8n / Make", "Slack"] },
    { y: 370, label: "OUTPUTS", items: ["Lead booked", "Task automated", "Live dashboard"] },
  ];

  return (
    <div style={{
      position: "relative",
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)",
      padding: "20px",
      aspectRatio: "16 / 9",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: 16, left: 20,
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.12em", color: "var(--ink-3)",
        textTransform: "uppercase",
      }}>
        flow.production · region ap-southeast-melbourne
      </div>
      <div style={{
        position: "absolute", top: 16, right: 20,
        display: "flex", gap: 12, alignItems: "center",
        fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)",
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: "50%",
          background: "#19a974",
          boxShadow: "0 0 0 3px #19a97426",
        }}></span>
        running · 184k events/day
      </div>

      <svg viewBox="0 0 900 460" style={{ width: "100%", height: "100%", marginTop: 30 }}>
        <defs>
          <marker id="arrow2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--accent-a)" />
          </marker>
        </defs>

        {/* Lanes */}
        {lanes.map((lane, li) => (
          <g key={li}>
            <text x="20" y={lane.y - 16} fontSize="10" fontFamily="var(--font-mono)" fill="var(--ink-4)" letterSpacing="1.5">
              {lane.label}
            </text>
            <line x1="20" y1={lane.y - 8} x2="880" y2={lane.y - 8} stroke="var(--line)" strokeWidth="1" />
            {lane.items.map((item, ii) => {
              const x = 140 + ii * 240;
              const isActive = li === step % 4 && ii === Math.floor(step / 4);
              const wasActive = li < step % 4 || (li === step % 4 && ii < Math.floor(step / 4));
              return (
                <g key={ii} transform={`translate(${x}, ${lane.y - 4})`}>
                  <rect
                    width="190" height="48"
                    rx="8"
                    fill="var(--bg)"
                    stroke={isActive ? "var(--accent-a)" : "var(--line-strong)"}
                    strokeWidth={isActive ? "1.5" : "1"}
                    style={{ transition: "all 0.4s ease" }}
                  />
                  <circle
                    cx="14" cy="24" r="4"
                    fill={isActive ? "var(--accent-a)" : wasActive ? "var(--ink-3)" : "var(--bg-sunk)"}
                    stroke={isActive ? "var(--accent-a)" : "var(--line-strong)"}
                    style={{ transition: "all 0.4s ease" }}
                  />
                  <text x="28" y="20" fontSize="10" fontFamily="var(--font-mono)" fill="var(--ink-4)">
                    {String(li * 3 + ii + 1).padStart(2, "0")}
                  </text>
                  <text x="28" y="36" fontSize="13" fontFamily="var(--font-display)" fill="var(--ink)" fontWeight="500">
                    {item}
                  </text>
                </g>
              );
            })}
          </g>
        ))}

        {/* Connecting lines down through lanes */}
        {[0, 1, 2].map(col => {
          const x = 140 + col * 240 + 95;
          return (
            <g key={col}>
              {[0, 1, 2].map(li => (
                <line
                  key={li}
                  x1={x} y1={lanes[li].y + 44}
                  x2={x} y2={lanes[li + 1].y - 4}
                  stroke="var(--line-strong)"
                  strokeWidth="1"
                  strokeDasharray="3 4"
                />
              ))}
              {/* animated pulse */}
              <circle r="4" fill="var(--accent-a)" opacity={col === Math.floor(step / 1.5) % 3 ? 1 : 0}>
                <animate
                  attributeName="cy"
                  values={`${lanes[0].y + 44};${lanes[3].y - 4}`}
                  dur="1.5s"
                  repeatCount="indefinite"
                />
                <animate attributeName="cx" values={`${x};${x}`} dur="1.5s" repeatCount="indefinite" />
              </circle>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

window.WorkflowDiagram = WorkflowDiagram;