// HeroCanvas.jsx — visualización animada de red/automatización para el hero
//
// mode="panel" → panel derecho (variante sober), con cards flotantes y red completa
// mode="bg"    → fondo completo (variante bold), más tenue, sin cards, no compite con el texto
//
// mouse: { x: 0..1, y: 0..1 } — posición normalizada para parallax

function HeroCanvas({ mouse = { x: 0.5, y: 0.5 }, mode }) {
  const isBg = mode === 'bg';
  const mx = mouse.x;
  const my = mouse.y;

  // Capas de parallax: offset proporcional a la profundidad
  // Cuanto mayor depth, más se mueve (aparece más "cerca")
  function layer(depth, extra) {
    return {
      position: 'absolute',
      inset: 0,
      transform: `translate(${(mx - 0.5) * -42 * depth}px, ${(my - 0.5) * -24 * depth}px)`,
      transition: 'transform 0.75s cubic-bezier(0.25, 0.1, 0.25, 1)',
      willChange: 'transform',
      ...extra,
    };
  }

  // Cards de microcopy flotantes
  const cards = [
    {
      label: 'Lead enriquecido',
      dot: 'green',
      pos: { top: '8%',  left: '-1%' },
      floatCls: 'f0',
      delay: '0s',
    },
    {
      label: 'CRM conectado',
      dot: 'blue',
      pos: { top: '5%',  left: '50%' },
      floatCls: 'f2',
      delay: '1.3s',
    },
    {
      label: 'IA clasificando',
      dot: 'processing',
      pos: { top: '37%', right: '-1%' },
      floatCls: 'f1',
      delay: '0.7s',
    },
    {
      label: 'Workflow ejecutado ✓',
      dot: 'green',
      pos: { top: '66%', left: '46%' },
      floatCls: 'f0',
      delay: '2.1s',
    },
    {
      label: 'Pipeline actualizado',
      dot: 'blue',
      pos: { top: '61%', left: '-1%' },
      floatCls: 'f2',
      delay: '1.6s',
    },
  ];

  // Coordenadas de nodos en viewBox 0 0 400 500
  // N-central (hub): 200, 250
  // N periféricos distribuidos orgánicamente
  const nodesCx = [
    { cx: 66,  cy: 96  }, // N1 top-left
    { cx: 318, cy: 78  }, // N2 top-right
    { cx: 358, cy: 214 }, // N3 right
    { cx: 295, cy: 368 }, // N4 bottom-right
    { cx: 76,  cy: 358 }, // N5 bottom-left
    { cx: 116, cy: 222 }, // N6 mid-left
    { cx: 248, cy: 148 }, // N7 top-center-right (hub secundario)
  ];

  // Paths de cables (hilos de conexión)
  const wires = [
    'M66,96  C116,146 156,200 200,250',
    'M318,78  C284,132 248,188 200,250',
    'M358,214 C306,230 258,242 200,250',
    'M200,250 C232,285 262,325 295,368',
    'M200,250 C168,288 128,325 76,358',
    'M116,222 C148,236 174,244 200,250',
    'M200,250 C212,196 228,168 248,148',   // hub secundario
    'M248,148 C282,112 300,94 318,78',     // hub→N2
  ];

  // Pulsos que viajan por los cables (animados)
  const pulses = [
    { d: 'M66,96  C116,146 156,200 200,250', cls: 'hot', id: 1 },
    { d: 'M318,78  C284,132 248,188 200,250', cls: 'hot', id: 2 },
    { d: 'M358,214 C306,230 258,242 200,250', cls: 'cool', id: 3 },
    { d: 'M200,250 C232,285 262,325 295,368', cls: 'hot', id: 4 },
    { d: 'M200,250 C168,288 128,325 76,358', cls: 'cool', id: 5 },
    { d: 'M200,250 C212,196 228,168 248,148', cls: 'hot', id: 6 },
  ];

  return (
    <div className={`im-hcanvas${isBg ? ' im-hcanvas--bg' : ''}`}>

      {/* Capa 1 — glow ambiental (profundidad baja, se mueve poco) */}
      <div className="im-hcanvas-glow" style={layer(0.18, { pointerEvents: 'none' })} />

      {/* Grid técnico muy sutil */}
      <div className="im-hcanvas-grid" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />

      {/* Capa 2 — SVG de red (profundidad media) */}
      <div
        className="im-hcanvas-svg-wrap"
        style={layer(0.45, { pointerEvents: 'none' })}
      >
        <svg
          viewBox="0 0 400 500"
          xmlns="http://www.w3.org/2000/svg"
          className="im-hsvg"
          aria-hidden="true"
        >
          <defs>
            <filter id="hc-glow" x="-60%" y="-60%" width="220%" height="220%">
              <feGaussianBlur stdDeviation="4" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            <filter id="hc-glow-sm" x="-80%" y="-80%" width="260%" height="260%">
              <feGaussianBlur stdDeviation="2.5" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>

          {/* Cables estáticos */}
          {wires.map((d, i) => (
            <path key={`w${i}`} className="im-hpath-wire" d={d} />
          ))}

          {/* Pulsos viajando por los cables */}
          {pulses.map((p) => (
            <path
              key={`p${p.id}`}
              className={`im-hpath-pulse im-hpath-pulse--${p.cls} im-hpp-${p.id}`}
              d={p.d}
            />
          ))}

          {/* Nodos periféricos */}
          {nodesCx.map((n, i) => (
            <circle
              key={`ns${i}`}
              className={`im-hnode-sm im-hnsm-${i + 1}`}
              cx={n.cx}
              cy={n.cy}
              r="3.5"
              filter="url(#hc-glow-sm)"
            />
          ))}

          {/* Hub secundario (nodo mediano) */}
          <circle
            className="im-hnode-md"
            cx="248"
            cy="148"
            r="5"
            filter="url(#hc-glow-sm)"
          />

          {/* Nodo central — hub principal con anillos */}
          <circle className="im-hnode-ring im-hnr-1" cx="200" cy="250" r="24" />
          <circle className="im-hnode-ring im-hnr-2" cx="200" cy="250" r="16" />
          <circle className="im-hnode-ring im-hnr-3" cx="200" cy="250" r="10" />
          <circle
            className="im-hnode-center"
            cx="200"
            cy="250"
            r="6"
            filter="url(#hc-glow)"
          />
        </svg>
      </div>

      {/* Capa 3 — cards flotantes (primer plano, solo en modo panel) */}
      {!isBg && (
        <div
          className="im-hcanvas-cards"
          style={layer(0.88, { pointerEvents: 'none' })}
        >
          {cards.map((c, i) => (
            <div
              key={i}
              className={`im-hcard im-hcard-${c.floatCls}`}
              style={{ ...c.pos, animationDelay: c.delay }}
            >
              <span className={`im-hcard-dot im-hcard-dot--${c.dot}`} />
              <span className="im-hcard-label">{c.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

window.HeroCanvas = HeroCanvas;