function SuiteDiagram() {
  // Five nodes orbiting Tessa core. Layered animations: rotating dashed rings,
  // pulsing core, traveling data dots along each spoke, floating labels.
  const NODES = [
    { x: 270, y: 50,  label: "ADS",     sub: "Performance" },
    { x: 480, y: 200, label: "CRM",     sub: "Captación" },
    { x: 400, y: 460, label: "CONTENT", sub: "Creativo" },
    { x: 140, y: 460, label: "SEO",     sub: "Orgánico" },
    { x: 60,  y: 200, label: "HR",      sub: "Talento" },
  ];

  return (
    <svg viewBox="0 0 540 540" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="suiteCoreGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.85" />
          <stop offset="40%" stopColor="var(--accent)" stopOpacity="0.25" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="suiteNodeGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--bg-card)" />
          <stop offset="100%" stopColor="var(--bg)" />
        </radialGradient>
        <filter id="suiteGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      {/* Outer rotating dashed ring */}
      <g className="suite-spin-slow">
        <circle cx="270" cy="270" r="240" fill="none" stroke="var(--line-strong)" strokeWidth="0.8" strokeDasharray="2 6" opacity="0.7" />
      </g>

      {/* Mid rotating dotted ring (counter direction) */}
      <g className="suite-spin-fast">
        <circle cx="270" cy="270" r="200" fill="none" stroke="var(--line-strong)" strokeWidth="0.6" strokeDasharray="1 4" opacity="0.5" />
      </g>

      {/* Static reference rings */}
      <circle cx="270" cy="270" r="220" fill="none" stroke="var(--line)" strokeWidth="0.5" />
      <circle cx="270" cy="270" r="160" fill="none" stroke="var(--line)" strokeWidth="0.5" />

      {/* Spokes — node lines */}
      {NODES.map((n) => (
        <line
          key={`spoke-${n.label}`}
          x1="270" y1="270" x2={n.x} y2={n.y}
          stroke="var(--line-strong)"
          strokeWidth="0.8"
          className="suite-ring-dashed"
        />
      ))}

      {/* Animated data dots traveling INTO core (from each node) — staggered */}
      {NODES.map((n, i) => {
        const path = `M ${n.x} ${n.y} L 270 270`;
        return (
          <circle
            key={`in-${n.label}`}
            r="2.5"
            fill="var(--accent)"
            className="suite-data-dot"
            style={{
              offsetPath: `path('${path}')`,
              animationDelay: `${i * 0.6}s`,
              animationDuration: '3s',
            }}
          />
        );
      })}

      {/* Animated data dots traveling OUT from core */}
      {NODES.map((n, i) => {
        const path = `M 270 270 L ${n.x} ${n.y}`;
        return (
          <circle
            key={`out-${n.label}`}
            r="1.8"
            fill="var(--accent)"
            opacity="0.55"
            className="suite-data-dot"
            style={{
              offsetPath: `path('${path}')`,
              animationDelay: `${1.5 + i * 0.6}s`,
              animationDuration: '4s',
            }}
          />
        );
      })}

      {/* Center pulsing glow */}
      <circle cx="270" cy="270" r="120" fill="url(#suiteCoreGrad)" className="suite-core-glow" />

      {/* Center core disc */}
      <g className="suite-core-ring">
        <circle cx="270" cy="270" r="56" fill="var(--bg)" stroke="var(--accent)" strokeWidth="1.2" />
        <circle cx="270" cy="270" r="50" fill="none" stroke="var(--accent)" strokeWidth="0.5" opacity="0.4" />
      </g>
      <text x="270" y="266" textAnchor="middle" fontFamily="Instrument Serif" fontStyle="italic" fontSize="28" fill="var(--ink)">
        Tessa
      </text>
      <text x="270" y="288" textAnchor="middle" fontFamily="Geist Mono" fontSize="9" letterSpacing="2.5" fill="var(--ink-mute)">
        CORE · IA
      </text>

      {/* Nodes */}
      {NODES.map((n, i) => (
        <g key={n.label} className="suite-label-float" style={{ animationDelay: `${i * 0.4}s` }}>
          {/* node halo */}
          <circle cx={n.x} cy={n.y} r="52" fill="var(--accent)" opacity="0.06" />
          {/* node disc */}
          <circle cx={n.x} cy={n.y} r="44" fill="url(#suiteNodeGrad)" stroke="var(--line-strong)" strokeWidth="1" />
          <circle cx={n.x} cy={n.y} r="44" fill="none" stroke="var(--accent)" strokeWidth="0.6" opacity="0.3" />
          {/* pulsing center dot */}
          <g style={{ transformOrigin: `${n.x}px ${n.y}px` }}>
            <circle
              cx={n.x} cy={n.y} r="4"
              fill="var(--accent)"
              filter="url(#suiteGlow)"
              className="suite-node-dot"
              style={{ animationDelay: `${i * 0.45}s`, transformOrigin: `${n.x}px ${n.y}px` }}
            />
          </g>
          <text x={n.x} y={n.y + 22} textAnchor="middle" fontFamily="Geist Mono" fontSize="10" letterSpacing="2" fill="var(--ink)">
            {n.label}
          </text>
          <text x={n.x} y={n.y - 12} textAnchor="middle" fontFamily="Instrument Serif" fontStyle="italic" fontSize="13" fill="var(--ink-dim)">
            {n.sub}
          </text>
        </g>
      ))}
    </svg>
  );
}

function Suite() {
  const bullets = [
    { n: "01", text: <><strong>Un solo login</strong>, un solo dashboard, un solo equipo de soporte. Sin saltar entre cinco herramientas.</> },
    { n: "02", text: <>Los datos del CRM <strong>alimentan a los otros agentes</strong>. Mejor segmentación, mejores creativos, mejor pauta.</> },
    { n: "03", text: <><strong>Ahorro del 25-30%</strong> vs comprar los módulos por separado. Sin contratos largos.</> },
    { n: "04", text: <>Onboarding completo <strong>en 72 horas</strong>. Día 4 ya estás generando data accionable.</> },
  ];
  return (
    <section className="suite-section" id="suite">
      <div className="shell">
        <SectionLabel num="05 / Camino dos" label="Suite Tessa" right="Cinco agentes, un cerebro" />
        <div className="suite-grid">
          <div className="suite-diagram">
            <SuiteDiagram />
          </div>
          <div>
            <h2 className="h-section" style={{ maxWidth: "18ch", marginBottom: 24 }}>
              Cuando los cinco agentes <span className="italic" style={{ color: "var(--accent)" }}>trabajan juntos</span>, pasa esto.
            </h2>
            <p className="lede" style={{ marginBottom: 8 }}>
              Tessa Ads genera campañas → Tessa CRM captura los leads → Tessa
              Content los nutre → Tessa SEO trae tráfico orgánico complementario.
              Todo conectado en un solo dashboard.
            </p>
            <ul className="suite-bullets">
              {bullets.map((b) => (
                <li key={b.n}>
                  <span className="n">{b.n}</span>
                  <span>{b.text}</span>
                </li>
              ))}
            </ul>
            <div className="suite-actions">
              <a href="/modulos/tessa-suite" className="btn btn-primary">Ver detalles de la Suite <Arrow /></a>
              <a href="https://agencia.teamsolutionss.com/book/team/teamsolutions-agencia-evaluacion" target="_blank" rel="noopener" className="btn btn-ghost">Demo con el equipo · 30 min</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Suite = Suite;