/* global React */
const { Icon, Eyebrow } = window.UI;

function AISection() {
  return (
    <section className="sl-ai" id="ai">
      <img className="sl-ai-bg" src={window.__resources && window.__resources.aiBg || "media/ai-bg.png"} alt="" aria-hidden="true" />
      <div className="sl-ai-veil" />
      <div className="sl-wrap sl-ai-inner">
        <div>
          <div className="sl-ai-tile"><Icon name="sparkles" size={32} style={{ color: "#fff" }} /></div>
          <Eyebrow style={{ color: "var(--summit-mint)", marginTop: 26 }}>Tecnología</Eyebrow>
          <h2>AI<br />Integration</h2>
        </div>
        <div className="sl-ai-glass">
          <p>Ayudamos a organizaciones a incorporar inteligencia artificial en su operación — desde la estrategia de adopción hasta la implementación concreta en procesos, equipos y herramientas.</p>
          <p className="mint" style={{ margin: 0 }}>Diseñamos cómo la IA trabaja dentro de tu negocio.</p>
        </div>
      </div>
    </section>
  );
}
window.AISection = AISection;