const PRACTICE = [
  {
    n: '01',
    title: 'Entender o papel dos agentes de IA',
    body: 'Comece pelo contexto: o que são agentes de IA, como eles funcionam, onde fazem sentido e por que estão redesenhando a forma como o trabalho acontece.',
    img: 'assets/imagery/destaque06-aiagents.jpg',
  },
  {
    n: '02',
    title: 'Conectar o desafio ao método',
    body: 'Com apoio das camadas do AI7, você vai organizar o problema, o contexto, os objetivos e os critérios que precisam orientar a criação do agente.',
    img: 'assets/imagery/destaque02-aiagents.jpg',
  },
  {
    n: '03',
    title: 'Construir seu agente na prática',
    body: 'Com o notebook aberto, você será guiado pelos especialistas da Maitha para construir um agente conectado a um desafio real da sua área.',
    img: 'assets/imagery/destaque03-aiagents.jpg',
  },
  {
    n: '04',
    title: 'Avaliar aplicação e próximos passos',
    body: 'Ao final, você entenderá como avaliar o potencial do agente criado, quais cuidados considerar e como levar essa conversa para dentro da sua empresa.',
    img: 'assets/imagery/destaque04-aiagents.jpg',
  },
];

function Practice() {
  return (
    <section id="agenda">
      <div className="padding-global">
        <div className="container mid">
          <div className="section-header" style={{ marginBottom: '4rem' }}>
            <div className="section-eyebrow">A jornada</div>
            <h2 className="h2-bold" style={{ margin: 0 }}>O que você vai fazer na prática.</h2>
            <p className="text-regular opacity-70" style={{ margin: 0, maxWidth: '48ch' }}>
              Durante o encontro, você será conduzido por uma jornada prática para sair de um desafio de negócio e construir um agente de IA aplicável à sua realidade.
            </p>
          </div>
          <div className="practice-stack">
            {PRACTICE.map((p, i) => (
              <div key={p.n} className="practice-item" style={{ top: `${10 + i * 1.5}vh` }}>
                <div className="practice-card">
                  <div className="practice-left">
                    <div className="practice-num">{p.n}</div>
                    <h3 className="h3-bold" style={{ margin: 0, maxWidth: '24ch' }}>{p.title}</h3>
                    <p className="text-regular opacity-70" style={{ margin: 0, maxWidth: '42ch' }}>{p.body}</p>
                  </div>
                  <div className="practice-right">
                    <img src={p.img} alt="" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Practice });