/** @jsx React.createElement */

function Technologies() {
  const logos = [
    ['assets/python.svg', 'Python', 'https://www.python.org/'],
    ['assets/ollama.png', 'Ollama / Gemma 4', 'https://ollama.com/'],
    ['assets/langchain.png', 'LangChain / LangGraph', 'https://www.langchain.com/'],
    ['assets/mcp.png', 'MCP (Model Context Protocol)', 'https://modelcontextprotocol.io/'],
    ['assets/postgres.png', 'PostgreSQL', 'https://www.postgresql.org/'],
    ['assets/oracle.png', 'Oracle', 'https://www.oracle.com/'],
    ['assets/openintegrationeng.png', 'Open Integration Engine', 'https://www.nextgen.com/products-and-services/integration-engine'],
    ['assets/mirth.png', 'Mirth Connect', 'https://www.nextgen.com/products-and-services/integration-engine'],
    ['assets/fhir.png', 'FHIR', 'https://www.hl7.org/fhir/'],
    ['assets/dotnet.png', 'Microsoft .NET', 'https://dotnet.microsoft.com/'],
    ['assets/docker.png', 'Docker / Kubernetes', 'https://www.docker.com/'],
    ['assets/haproxy.png', 'HAProxy / EdgeNexus', 'https://www.haproxy.org/'],
    ['assets/grafana.png', 'Grafana', 'https://grafana.com/'],
  ];
  return (
    <section id="technologies" className="section">
      <div className="container">
        <div className="eyebrow section-eyebrow">Nuestra caja de herramientas</div>
        <h2 className="section-title"><span className="accent">TECNOLOGÍAS &</span> HERRAMIENTAS</h2>
        <div className="logo-grid logo-grid-4">
          {logos.map(([src, alt, href]) => (
            <a key={alt} className="logo-tile" href={href} target="_blank" rel="noopener">
              {src
                ? <img src={src} alt={alt} />
                : <span className="logo-tile-text">{alt}</span>
              }
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Technologies = Technologies;