/* SECCIÓN 04 · EMPRESAS — copy column + orbital diagram */

const OrbitDiagram = () => {
  // Inner SVG diagram. The rings/lines rotate (60s), the labels stay upright via counter-rotation.
  const satellites = [
    { angle: 270, label: 'Ventas' },       // top
    { angle: 0,   label: 'Atención' },     // right
    { angle: 90,  label: 'Marketing' },    // bottom
    { angle: 180, label: 'Operaciones' },  // left
  ];
  const cx = 260, cy = 260;
  const orbitR = 200;

  return (
    <div className="relative mx-auto" style={{ width: '100%', maxWidth: 520, aspectRatio: '1 / 1' }}>
      <svg viewBox="0 0 520 520" className="absolute inset-0 w-full h-full" aria-hidden="true">
        <defs>
          <linearGradient id="grad-strk" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%"  stopColor="#6B5CFF" />
            <stop offset="100%" stopColor="#2EC4F1" />
          </linearGradient>
          <radialGradient id="core-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%"  stopColor="rgba(107,92,255,0.45)" />
            <stop offset="60%" stopColor="rgba(107,92,255,0.10)" />
            <stop offset="100%" stopColor="rgba(107,92,255,0)" />
          </radialGradient>
        </defs>

        {/* Outer subtle dotted ring (rotates) */}
        <g className="orbit-ring" style={{ transformOrigin: '260px 260px' }}>
          <circle cx={cx} cy={cy} r={orbitR + 30} fill="none"
                  stroke="rgba(46,196,241,0.15)" strokeWidth="1" strokeDasharray="2 6" />
        </g>

        {/* Dashed connector lines + satellite rings (rotate together) */}
        <g className="orbit-lines" style={{ transformOrigin: '260px 260px' }}>
          {satellites.map((s) => {
            const rad = (s.angle * Math.PI) / 180;
            const x = cx + orbitR * Math.cos(rad);
            const y = cy + orbitR * Math.sin(rad);
            return (
              <g key={s.angle}>
                <line x1={cx} y1={cy} x2={x} y2={y}
                      stroke="rgba(107,92,255,0.4)" strokeWidth="1" strokeDasharray="4 6" />
              </g>
            );
          })}
          {/* Orbit ring itself */}
          <circle cx={cx} cy={cy} r={orbitR} fill="none"
                  stroke="rgba(107,92,255,0.18)" strokeWidth="1" />
        </g>

        {/* Core glow */}
        <circle cx={cx} cy={cy} r={130} fill="url(#core-glow)" />

        {/* Core circle */}
        <circle cx={cx} cy={cy} r={90} fill="#0A0A0A" stroke="url(#grad-strk)" strokeWidth="2" />

        {/* Satellite circles (do NOT rotate — overlay) */}
        {satellites.map((s) => {
          const rad = (s.angle * Math.PI) / 180;
          const x = cx + orbitR * Math.cos(rad);
          const y = cy + orbitR * Math.sin(rad);
          return (
            <g key={'sat-' + s.angle}>
              <circle cx={x} cy={y} r={50} fill="#0A0A0A" stroke="#6B5CFF" strokeOpacity="0.85" strokeWidth="1" />
              <circle cx={x} cy={y} r={50} fill="none" stroke="rgba(46,196,241,0.18)" strokeWidth="6" />
            </g>
          );
        })}
      </svg>

      {/* Labels overlaid in HTML for crisp type */}
      {/* Center label */}
      <div className="absolute" style={{
        left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        textAlign: 'center', width: 160,
      }}>
        <div className="font-mono" style={{ color: 'var(--cyan)', fontSize: 10 }}>CORE COGNITIVO</div>
        <div className="font-display text-fg mt-1.5" style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.2 }}>
          Conocimiento<br />estructurado
        </div>
      </div>

      {/* Satellites */}
      {satellites.map((s) => {
        const rad = (s.angle * Math.PI) / 180;
        const x = 50 + (orbitR / 520) * 100 * Math.cos(rad);
        const y = 50 + (orbitR / 520) * 100 * Math.sin(rad);
        return (
          <div key={'lbl-' + s.angle} className="absolute"
               style={{
                 left: x + '%', top: y + '%',
                 transform: 'translate(-50%, -50%)',
                 width: 100, textAlign: 'center',
               }}>
            <div className="font-display text-fg" style={{ fontSize: 13, fontWeight: 500 }}>{s.label}</div>
            <div className="font-mono mt-1" style={{ color: 'var(--muted)', fontSize: 9 }}>AGENTE COGNITIVO</div>
          </div>
        );
      })}
    </div>
  );
};

const Empresas = () => (
  <section id="empresas" className="relative py-section overflow-hidden">
    {/* Background image with overlay */}
    <div className="absolute inset-0 -z-0" aria-hidden="true">
      <img src="assets/hero-frame-2.jpg" alt=""
           className="absolute inset-0 w-full h-full object-cover opacity-40"
           width="1920" height="1080" />
      <div className="absolute inset-0" style={{ background: 'rgba(10,10,10,0.85)' }} />
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(60% 60% at 30% 50%, rgba(107,92,255,0.15) 0%, transparent 60%)'
      }} />
    </div>

    <div className="container-x relative">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-14 items-center">
        <div className="reveal" style={{ maxWidth: 560 }}>
          <Eyebrow>/ EMPRESAS</Eyebrow>
          <h2 className="font-display text-fg mt-4"
              style={{ fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 600, textWrap: 'balance' }}>
            Tu conocimiento. <br /><span className="text-grad">Transformado en sistema.</span>
          </h2>
          <p className="mt-6" style={{ color: 'var(--muted)', textWrap: 'pretty' }}>
            Tu empresa ya tiene experiencia, criterios y procesos valiosos. El problema es que viven dispersos: en personas, conversaciones y documentos desconectados. Construimos la Infraestructura Cognitiva que ordena ese conocimiento y lo activa a través de Agentes Cognitivos especializados en ventas, atención, marketing y operaciones.
          </p>
          <blockquote className="font-display text-grad mt-8"
            style={{ fontSize: 'clamp(22px, 1.9vw, 28px)', fontWeight: 500, lineHeight: 1.25, textWrap: 'balance' }}>
            “El conocimiento sin arquitectura no escala. Primero se estructura. Luego se amplifica.”
          </blockquote>
          <a href="#" className="btn-grad mt-9 rounded-full px-6 py-3.5 text-[15px] font-medium text-white inline-flex items-center gap-2 hover:opacity-95 transition">
            Solicitar diagnóstico empresarial <IconArrow size={16} />
          </a>
        </div>

        <div className="reveal">
          <OrbitDiagram />
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { OrbitDiagram, Empresas });