/* Channels.jsx — "Soluções": central AI agent connected to every channel */
const Channels = () => {
  const channels = [
    { icon: 'message-circle', t: 'WhatsApp' },
    { icon: 'camera', t: 'Instagram' },
    { icon: 'globe', t: 'Sites' },
    { icon: 'send', t: 'Telegram' },
    { icon: 'contact', t: 'CRM' },
    { icon: 'server', t: 'Sistemas internos' },
    { icon: 'mail', t: 'E-mail' },
    { icon: 'layout-dashboard', t: 'Apps web' },
  ];

  const W = 760, H = 520, cx = 380, cy = 260, rx = 300, ry = 198;
  const nodes = channels.map((c, i) => {
    const ang = (-90 + i * (360 / channels.length)) * Math.PI / 180;
    return { ...c, x: cx + Math.cos(ang) * rx, y: cy + Math.sin(ang) * ry };
  });

  return (
    <section id="solucoes" style={{ background: 'var(--ar-bg-section)', padding: '116px 0', position: 'relative', overflow: 'hidden' }}>
      <Container>
        <SectionHead
          align="center" maxWidth={780}
          eyebrow="SOLUÇÕES · CANAIS COM IA"
          title={<>Um agente de IA, <GradText>conectado a todos os seus canais</GradText></>}
          sub="Os agentes da AR não vivem só no WhatsApp. Conectamos a mesma inteligência aos canais e sistemas que sua empresa já usa — com contexto compartilhado entre todos eles."
        />

        {/* Radial hub (desktop) */}
        <Reveal delay={120}>
          <div className="hub-desktop" style={{ marginTop: 48, position: 'relative' }}>
            <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block', overflow: 'visible' }}>
              <defs>
                <radialGradient id="hubGlow" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="rgba(0,94,255,0.35)" />
                  <stop offset="100%" stopColor="rgba(0,94,255,0)" />
                </radialGradient>
                <linearGradient id="hubLine" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#005EFF" /><stop offset="100%" stopColor="#00D4FF" />
                </linearGradient>
              </defs>

              <ellipse cx={cx} cy={cy} rx={210} ry={150} fill="url(#hubGlow)" />

              {/* connection lines + flowing pulses */}
              {nodes.map((n, i) => (
                <g key={'l' + i}>
                  <line x1={cx} y1={cy} x2={n.x} y2={n.y} stroke="url(#hubLine)" strokeWidth="1.5" opacity="0.32" />
                  <line x1={cx} y1={cy} x2={n.x} y2={n.y} stroke="#00D4FF" strokeWidth="1.5"
                        strokeDasharray="3 12" opacity="0.85">
                    <animate attributeName="stroke-dashoffset" from={i % 2 ? 0 : 30} to={i % 2 ? 30 : 0} dur="1.8s" repeatCount="indefinite" />
                  </line>
                </g>
              ))}

              {/* channel nodes */}
              {nodes.map((n, i) => (
                <foreignObject key={'n' + i} x={n.x - 66} y={n.y - 44} width="132" height="88">
                  <div className="reveal hub-node" style={{ transitionDelay: `${160 + i * 50}ms` }}>
                    <ChannelNode icon={n.icon} label={n.t} />
                  </div>
                </foreignObject>
              ))}

              {/* center agent */}
              <foreignObject x={cx - 86} y={cy - 64} width="172" height="128">
                <div style={{
                  width: 172, height: 128, borderRadius: 24, boxSizing: 'border-box',
                  background: 'linear-gradient(150deg, rgba(0,94,255,0.30), rgba(16,24,43,0.96))',
                  border: '1px solid rgba(0,212,255,0.45)',
                  boxShadow: '0 0 60px rgba(0,94,255,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8,
                  backdropFilter: 'blur(6px)',
                }}>
                  <div style={{ width: 48, height: 48, borderRadius: 14, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', boxShadow: '0 0 24px rgba(0,212,255,0.6)' }}>
                    <i data-lucide="bot" style={{ width: 24, height: 24 }}></i>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 15, color: '#fff' }}>Agente AR</div>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--ar-font-body)', fontSize: 10.5, color: '#1FD17B', marginTop: 2 }}>
                      <span className="ar-pulse" style={{ width: 5, height: 5, borderRadius: 999, background: '#1FD17B' }} />em execução
                    </div>
                  </div>
                </div>
              </foreignObject>
            </svg>
          </div>
        </Reveal>

        {/* Grid fallback (mobile) */}
        <div className="hub-mobile" style={{ marginTop: 36 }}>
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
            padding: '22px', marginBottom: 18, borderRadius: 20,
            background: 'linear-gradient(150deg, rgba(0,94,255,0.22), rgba(16,24,43,0.9))',
            border: '1px solid rgba(0,212,255,0.4)',
          }}>
            <div style={{ width: 44, height: 44, borderRadius: 13, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
              <i data-lucide="bot" style={{ width: 22, height: 22 }}></i>
            </div>
            <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 16, color: '#fff' }}>Agente AR · em execução</div>
          </div>
          <div className="chan-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
            {channels.map(c => <ChannelNode key={c.t} icon={c.icon} label={c.t} boxed />)}
          </div>
        </div>
      </Container>

      <style>{`
        .hub-mobile { display: none; }
        @media (max-width: 760px) {
          .hub-desktop { display: none; }
          .hub-mobile { display: block; }
        }
      `}</style>
    </section>
  );
};

const ChannelNode = ({ icon, label, boxed }) => (
  <div style={{
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
    padding: boxed ? '16px 8px' : 0,
    background: boxed ? 'var(--ar-bg-card)' : 'transparent',
    border: boxed ? '1px solid rgba(255,255,255,0.10)' : 'none',
    borderRadius: 16,
  }}>
    <div style={{
      width: 52, height: 52, borderRadius: 15, flexShrink: 0,
      background: 'rgba(16,24,43,0.92)', border: '1px solid rgba(0,212,255,0.32)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#00D4FF',
      boxShadow: '0 8px 24px -10px rgba(0,0,0,0.8)',
    }}>
      <i data-lucide={icon} style={{ width: 22, height: 22 }}></i>
    </div>
    <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12.5, fontWeight: 500, color: 'var(--ar-text-main)', textAlign: 'center', lineHeight: 1.2 }}>{label}</div>
  </div>
);

window.Channels = Channels;