// Stylized "connected systems" diagram used as the hero visual.
// Built with SVG, pure CSS animation for the live pulse on the central node.
function SystemDiagram() {
  return (
    <div style={diagramStyles.wrap}>
      <div style={diagramStyles.gridOverlay} />
      <svg viewBox="0 0 480 360" style={diagramStyles.svg}>
        {/* Connecting paths */}
        <g stroke="#2F76FF" strokeWidth="1" fill="none" opacity="0.45" strokeDasharray="3 3">
          <path d="M80 70 L240 180" />
          <path d="M400 70 L240 180" />
          <path d="M80 290 L240 180" />
          <path d="M400 290 L240 180" />
          <path d="M240 40 L240 180" />
        </g>
        {/* Solid active connection */}
        <g stroke="#2DCEFF" strokeWidth="1.5" fill="none" opacity="0.9">
          <path d="M240 180 L240 320" />
        </g>

        {/* Outer nodes */}
        {[
          { x: 80, y: 70, label: 'Dashboards', color: '#2F76FF' },
          { x: 400, y: 70, label: 'Automation', color: '#2F76FF' },
          { x: 240, y: 40, label: 'Operations', color: '#2DCEFF' },
          { x: 80, y: 290, label: 'CRM', color: '#2F76FF' },
          { x: 400, y: 290, label: 'AI Systems', color: '#2F76FF' },
        ].map((n, i) => (
          <g key={i}>
            <rect x={n.x - 56} y={n.y - 16} width="112" height="32" rx="6"
                  fill="#121F33" stroke={n.color} strokeWidth="1" />
            <text x={n.x} y={n.y + 4} textAnchor="middle"
                  fontFamily="JetBrains Mono, monospace" fontSize="11"
                  fill="#F4F7FB" letterSpacing="0.04em">{n.label}</text>
          </g>
        ))}

        {/* Center hub */}
        <g>
          <circle cx="240" cy="180" r="38" fill="#0A1220" stroke="#FFD13A" strokeWidth="1.5" />
          <circle cx="240" cy="180" r="38" fill="none" stroke="#FFD13A" strokeWidth="1" opacity="0.4">
            <animate attributeName="r" from="38" to="58" dur="2.4s" repeatCount="indefinite" />
            <animate attributeName="opacity" from="0.4" to="0" dur="2.4s" repeatCount="indefinite" />
          </circle>
          <text x="240" y="176" textAnchor="middle"
                fontFamily="Montserrat" fontWeight="700" fontSize="11"
                fill="#FFD13A" letterSpacing="0.1em">SYSTEM</text>
          <text x="240" y="190" textAnchor="middle"
                fontFamily="Montserrat" fontWeight="700" fontSize="11"
                fill="#FFD13A" letterSpacing="0.1em">CORE</text>
        </g>

        {/* Bottom node — output */}
        <g>
          <rect x="184" y="304" width="112" height="32" rx="6"
                fill="#121F33" stroke="#2DCEFF" strokeWidth="1" />
          <text x="240" y="324" textAnchor="middle"
                fontFamily="JetBrains Mono, monospace" fontSize="11"
                fill="#2DCEFF" letterSpacing="0.04em">Business Output</text>
        </g>
      </svg>
    </div>
  );
}

const diagramStyles = {
  wrap: {
    position: 'relative', width: '100%', aspectRatio: '4/3',
    background: 'var(--ink-900)', border: '1px solid var(--border-default)',
    borderRadius: 16, overflow: 'hidden',
  },
  gridOverlay: {
    position: 'absolute', inset: 0,
    backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
    backgroundSize: '32px 32px', pointerEvents: 'none',
  },
  svg: { position: 'absolute', inset: 0, width: '100%', height: '100%' },
};