// Animated automation diagram for hero
const { useEffect, useState } = React;

function HeroDiagram() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 4), 1800);
    return () => clearInterval(id);
  }, []);

  // Fix #6: IA triage creates CRM lead (ai→crm), not raw WhatsApp message
  const nodes = [
    { id: 'wa',       label: 'WHATSAPP',       x: 12, y: 38, kind: 'plain' },
    { id: 'ai',       label: 'IA · FILTRO',    x: 50, y: 38, kind: 'ink'   },
    { id: 'crm',      label: 'CRM · PROSPECTO',x: 86, y: 20, kind: 'plain' },
    { id: 'reply',    label: 'RESPUESTA · 12s', x: 86, y: 52, kind: 'accent'},
    { id: 'erp',      label: 'ERP · PEDIDO',   x: 50, y: 72, kind: 'plain' },
    { id: 'inv',      label: 'INVENTARIO',     x: 86, y: 80, kind: 'plain' },
  ];

  const edges = [
    { from: 'wa',  to: 'ai'    },
    { from: 'ai',  to: 'crm'   },
    { from: 'ai',  to: 'reply' },
    { from: 'ai',  to: 'erp'   },
    { from: 'erp', to: 'inv'   },
  ];

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

  return (
    <div className="diagram">
      <span className="label-tl">nodo:&nbsp;cliente</span>
      <span className="label-tr">nodo:&nbsp;sistema</span>
      <span className="label-bl mono" style={{ color: 'var(--accent-deep)' }}>● en vivo</span>
      <span className="label-br">altavia.cr/v.04</span>

      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1 }}
      >
        {edges.map((e, i) => {
          const a = nodeMap[e.from];
          const b = nodeMap[e.to];
          return (
            <g key={i}>
              <line
                x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                stroke="rgba(15,33,23,0.35)" strokeWidth="0.25"
                strokeDasharray="0.8 0.6" vectorEffect="non-scaling-stroke"
              />
              <circle r="0.9" fill="#C7973C" vectorEffect="non-scaling-stroke"
                style={{ filter: 'drop-shadow(0 0 4px rgba(199,151,60,0.7))' }}>
                <animateMotion dur="1.8s" repeatCount="indefinite" begin={`${i * 0.36}s`}
                  path={`M ${a.x} ${a.y} L ${b.x} ${b.y}`} />
                <animate attributeName="opacity" values="0;1;1;0"
                  dur="1.8s" repeatCount="indefinite" begin={`${i * 0.36}s`} />
              </circle>
            </g>
          );
        })}
      </svg>

      {nodes.map((n) => {
        const cls = 'node ' + (n.kind === 'accent' ? 'accent ' : '') + (n.kind === 'ink' ? 'ink pulse' : '');
        return (
          <div key={n.id} className={cls}
            style={{ left: `${n.x}%`, top: `${n.y}%`, transform: 'translate(-50%, -50%)' }}>
            {n.label}
          </div>
        );
      })}

      <div style={{
        position: 'absolute', left: '50%', top: '38%',
        transform: 'translate(-50%, 28px)',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: '10px', color: 'var(--muted)', letterSpacing: '0.1em', zIndex: 2,
      }}>
        procesando{tick === 0 ? '' : tick === 1 ? '.' : tick === 2 ? '..' : '...'}
      </div>
    </div>
  );
}

window.HeroDiagram = HeroDiagram;