/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ============================================================
   DIAGRAMS — three SVG variants for the Sistema section
   ============================================================ */

const AGENTS = [
  { id: 'BRAND',  label: 'Brand' },
  { id: 'GROWTH', label: 'Growth' },
  { id: 'OPS',    label: 'Ops' },
  { id: 'DATA',   label: 'Data' },
  { id: 'TECH',   label: 'Tech' },
  { id: 'CONT',   label: 'Content' },
  { id: 'SEO',    label: 'SEO' },
  { id: 'CRM',    label: 'CRM' },
  { id: 'ADS',    label: 'Ads' },
  { id: 'BI',     label: 'BI' },
];

function NetworkDiagram() {
  // Mauro center, 6 satellite nodes around — clean hub-and-spoke
  const W = 480, H = 480, cx = 240, cy = 240, R = 165;
  const nodes = AGENTS.slice(0, 6).map((a, i) => {
    const angle = (-Math.PI / 2) + (i * (2 * Math.PI / 6));
    return { ...a, x: cx + Math.cos(angle) * R, y: cy + Math.sin(angle) * R, angle };
  });
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto' }} aria-label="Diagrama de sistema de agentes">
      {/* spokes */}
      {nodes.map((n, i) => (
        <line key={i} x1={cx} y1={cy} x2={n.x} y2={n.y}
          stroke="var(--color-border)" strokeWidth="1" />
      ))}
      {/* satellite labels */}
      {nodes.map((n, i) => {
        const lx = cx + Math.cos(n.angle) * (R + 32);
        const ly = cy + Math.sin(n.angle) * (R + 32);
        return (
          <text key={`l-${i}`} x={lx} y={ly}
            textAnchor="middle" dominantBaseline="middle"
            fontFamily="Arimo" fontSize="12" fill="var(--color-text-secondary)">
            {n.label}
          </text>
        );
      })}
      {/* satellite nodes */}
      {nodes.map((n, i) => (
        <g key={`n-${i}`}>
          <circle cx={n.x} cy={n.y} r="14" fill="var(--color-surface-dark)" />
          <text x={n.x} y={n.y + 0.5}
            textAnchor="middle" dominantBaseline="middle"
            fontFamily="Inter" fontWeight="600" fontSize="9"
            fill="var(--color-text-inverse)" letterSpacing="0.5">
            {n.id}
          </text>
        </g>
      ))}
      {/* center isotipo */}
      <g>
        <circle cx={cx} cy={cy} r="36" fill="var(--color-accent)" />
        <text x={cx} y={cy + 1}
          textAnchor="middle" dominantBaseline="middle"
          fontFamily="Space Grotesk" fontWeight="600" fontSize="22"
          fill="#fff" letterSpacing="0.5">V</text>
      </g>
      {/* group ticks */}
      <text x={cx} y={28} textAnchor="middle"
        fontFamily="Arimo" fontSize="10" fill="var(--color-text-tertiary)" letterSpacing="1.5">
        DIRECCIÓN HUMANA
      </text>
      <text x={cx} y={H - 18} textAnchor="middle"
        fontFamily="Arimo" fontSize="10" fill="var(--color-text-tertiary)" letterSpacing="1.5">
        PRECISIÓN ALGORÍTMICA
      </text>
    </svg>
  );
}

function RadialDiagram() {
  // concentric rings — Mauro center, inner ring of 4 disciplines, outer of 8 agents
  const W = 480, H = 480, cx = 240, cy = 240;
  const inner = [
    { id: 'STRAT', label: 'Strategy' },
    { id: 'BRAND', label: 'Brand' },
    { id: 'GROWTH', label: 'Growth' },
    { id: 'TECH', label: 'Tech' },
  ];
  const outerLabels = AGENTS.slice(0, 8);
  const R1 = 90, R2 = 175;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto' }}>
      <circle cx={cx} cy={cy} r={R1} fill="none" stroke="var(--color-border)" strokeWidth="1" />
      <circle cx={cx} cy={cy} r={R2} fill="none" stroke="var(--color-border)" strokeWidth="1" strokeDasharray="2 4" />
      {/* inner spokes */}
      {inner.map((n, i) => {
        const a = (-Math.PI / 2) + (i * (2 * Math.PI / 4));
        const x = cx + Math.cos(a) * R1, y = cy + Math.sin(a) * R1;
        return (
          <g key={i}>
            <line x1={cx} y1={cy} x2={x} y2={y} stroke="var(--color-border)" strokeWidth="1" />
            <circle cx={x} cy={y} r="14" fill="var(--color-surface-dark)" />
            <text x={x} y={y + 0.5} textAnchor="middle" dominantBaseline="middle"
              fontFamily="Inter" fontWeight="600" fontSize="9" fill="var(--color-text-inverse)" letterSpacing="0.5">
              {n.id}
            </text>
          </g>
        );
      })}
      {/* outer dots */}
      {outerLabels.map((n, i) => {
        const a = (-Math.PI / 2) + (i * (2 * Math.PI / 8));
        const x = cx + Math.cos(a) * R2, y = cy + Math.sin(a) * R2;
        const lx = cx + Math.cos(a) * (R2 + 26);
        const ly = cy + Math.sin(a) * (R2 + 26);
        return (
          <g key={`o-${i}`}>
            <circle cx={x} cy={y} r="5" fill="var(--color-surface-dark)" />
            <text x={lx} y={ly} textAnchor="middle" dominantBaseline="middle"
              fontFamily="Arimo" fontSize="11" fill="var(--color-text-secondary)">
              {n.label}
            </text>
          </g>
        );
      })}
      <g>
        <circle cx={cx} cy={cy} r="36" fill="var(--color-accent)" />
        <text x={cx} y={cy + 1} textAnchor="middle" dominantBaseline="middle"
          fontFamily="Space Grotesk" fontWeight="600" fontSize="22" fill="#fff">V</text>
      </g>
    </svg>
  );
}

function ConstellationDiagram() {
  // scattered nodes connected with thin lines — feels like a star map
  const W = 480, H = 480;
  const pts = [
    { id: 'BRAND',  label: 'Brand',   x: 110, y: 100 },
    { id: 'STRAT',  label: 'Strategy',x: 240, y: 70  },
    { id: 'GROWTH', label: 'Growth',  x: 380, y: 120 },
    { id: 'TECH',   label: 'Tech',    x: 410, y: 250 },
    { id: 'ADS',    label: 'Ads',     x: 360, y: 380 },
    { id: 'CONT',   label: 'Content', x: 215, y: 410 },
    { id: 'SEO',    label: 'SEO',     x: 90,  y: 365 },
    { id: 'DATA',   label: 'Data',    x: 60,  y: 235 },
    { id: 'CRM',    label: 'CRM',     x: 175, y: 230 },
    { id: 'BI',     label: 'BI',      x: 305, y: 240 },
  ];
  const center = { x: 240, y: 240 };
  const edges = [
    [0,8],[1,8],[2,9],[3,9],[4,9],[5,8],[6,8],[7,8],
    [8,9],[1,2],[0,1],[3,4],[5,6],[7,0],
  ];
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto' }}>
      {edges.map(([a, b], i) => (
        <line key={i}
          x1={pts[a].x} y1={pts[a].y} x2={pts[b].x} y2={pts[b].y}
          stroke="var(--color-border)" strokeWidth="1" />
      ))}
      {/* center pulses out to inner ring */}
      {[8, 9].map((idx, i) => (
        <line key={`c-${i}`} x1={center.x} y1={center.y} x2={pts[idx].x} y2={pts[idx].y}
          stroke="var(--color-accent)" strokeWidth="1" strokeDasharray="2 3" opacity="0.4" />
      ))}
      {pts.map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r={p.id === 'CRM' || p.id === 'BI' ? 10 : 6} fill="var(--color-surface-dark)" />
          <text x={p.x} y={p.y + 22} textAnchor="middle"
            fontFamily="Arimo" fontSize="11" fill="var(--color-text-secondary)">
            {p.label}
          </text>
        </g>
      ))}
      <g>
        <circle cx={center.x} cy={center.y} r="28" fill="var(--color-accent)" />
        <text x={center.x} y={center.y + 1} textAnchor="middle" dominantBaseline="middle"
          fontFamily="Space Grotesk" fontWeight="600" fontSize="18" fill="#fff">V</text>
      </g>
    </svg>
  );
}

Object.assign(window, { NetworkDiagram, RadialDiagram, ConstellationDiagram });