// Agent Builder — Process (desenho → produção) + Operation bento

const FLOW = [
  { n: "01", t: "Crie", d: "Construa agentes rapidamente usando uma experiência visual e intuitiva." },
  { n: "02", t: "Conecte", d: "Ligue documentos, APIs e sistemas corporativos ao agente." },
  { n: "03", t: "Configure", d: "Defina regras, permissões e o contexto que orienta cada ação." },
  { n: "04", t: "Publique", d: "Coloque o agente em produção instantaneamente." },
];

const NO_NEED = ["Sem deploy complexo", "Sem infraestrutura manual", "Sem equipes dedicadas para cada novo agente"];

function Process() {
  return (
    <section className="section" id="producao">
      <div className="container split">
        <div>
          <Reveal><Eyebrow>Do desenho à produção</Eyebrow></Reveal>
          <Reveal delay={80}><h2 className="title t-sec">Do primeiro prompt à produção em poucos cliques.</h2></Reveal>
          <div className="flow" style={{ marginTop: 36 }}>
            {FLOW.map((s, i) => (
              <Reveal key={s.n} delay={120 + i * 70}>
                <div className="flow-step">
                  <div className="flow-rail">
                    <span className="flow-num">{s.n}</span>
                    <span className="flow-line"></span>
                  </div>
                  <div className="flow-body">
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <Reveal className="split-media" delay={160}>
          <div className="reassure-card">
            <div className="rc-eyebrow">
              <span style={{ width: 8, height: 8, borderRadius: 50, background: "var(--ab-primary)" }}></span>
              O que você não precisa fazer
            </div>
            <ul className="reassure" style={{ marginTop: 6 }}>
              {NO_NEED.map((t) => (
                <li key={t}>
                  <span className="x"><svg width="13" height="13" viewBox="0 0 16 16"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg></span>
                  {t}
                </li>
              ))}
            </ul>
            <div style={{ height: 1, background: "var(--ab-border)", margin: "26px 0" }}></div>
            <p style={{ fontSize: 15, color: "var(--ab-fg-muted)", margin: 0, lineHeight: 1.7 }}>
              A plataforma cuida do provisionamento, da escala e da operação. Sua equipe foca no que o agente deve fazer — não em mantê-lo de pé.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const OPS = [
  { ic: "brain", t: "Consultar conhecimento corporativo", span: "op-card s3" },
  { ic: "flow", t: "Executar workflows", span: "op-card s3" },
  { ic: "sync", t: "Atualizar sistemas", span: "op-card s4" },
  { ic: "doc", t: "Gerar documentos", span: "op-card s4" },
  { ic: "cast", t: "Disparar comunicações", span: "op-card s4" },
  { ic: "nodes", t: "Orquestrar processos entre áreas", span: "op-card s4" },
  { ic: "loop", t: "Automatizar tarefas repetitivas", span: "op-card s4" },
];

function OpIcon({ name }) {
  const p = {
    brain: <g stroke="currentColor" strokeWidth="1.4" fill="none"><path d="M8 4a3 3 0 0 0-3 3c-1.2.3-2 1.3-2 2.6 0 1.1.7 2 1.7 2.4M8 4a3 3 0 0 1 3 3c1.2.3 2 1.3 2 2.6 0 1.1-.7 2-1.7 2.4M8 4v11M6 15a2 2 0 0 0 4 0"/></g>,
    flow:  <g stroke="currentColor" strokeWidth="1.4" fill="none"><rect x="3" y="3.5" width="5" height="5" rx="1"/><rect x="12" y="11.5" width="5" height="5" rx="1"/><path d="M8 6h4a2 2 0 0 1 2 2v3.5"/></g>,
    sync:  <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M4 9a6 6 0 0 1 10-4.5M16 11a6 6 0 0 1-10 4.5"/><path d="M14 3v3h-3M6 17v-3h3"/></g>,
    doc:   <path d="M5 2.5h6l4 4v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Z M11 2.5V7h4 M7 11h6 M7 14h4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    cast:  <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><circle cx="10" cy="10" r="2"/><path d="M5.5 5.5a6.4 6.4 0 0 0 0 9M14.5 5.5a6.4 6.4 0 0 1 0 9M3 3a10 10 0 0 0 0 14M17 3a10 10 0 0 1 0 14"/></g>,
    nodes: <g stroke="currentColor" strokeWidth="1.4" fill="none"><circle cx="4" cy="10" r="2"/><circle cx="15" cy="4.5" r="2"/><circle cx="15" cy="15.5" r="2"/><path d="M6 9 13 5.3M6 11l7 3.7"/></g>,
    loop:  <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M5 7.5A5.5 5.5 0 0 1 15 6M15 12.5A5.5 5.5 0 0 1 5 14"/><path d="M5 3.5V7h3.5M15 16.5V13h-3.5"/></g>,
  }[name];
  return <svg width="20" height="20" viewBox="0 0 20 20">{p}</svg>;
}

function Operation() {
  return (
    <section className="section" id="operacao">
      <div className="container">
        <div className="op-grid">
          <Reveal className="op-card op-lead">
            <Eyebrow>Não é só IA. É operação.</Eyebrow>
            <h3>Inúmeras possibilidades de ganhar produtividade e eficiência com agentes de IA.</h3>
            <p>Seus agentes não param na resposta — eles agem dentro dos seus sistemas.</p>
          </Reveal>
          {OPS.map((o) => (
            <Reveal key={o.t} className={o.span}>
              <span className="op-ic"><OpIcon name={o.ic} /></span>
              <h4>{o.t}</h4>
            </Reveal>
          ))}
          <Reveal className="op-card s4" style={{ background: "linear-gradient(135deg,rgba(41,106,237,.16),rgba(255,255,255,.01))", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <h4 className="op-lead-h4" style={{ fontSize: 22 }}>Do entendimento à execução.</h4>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Operation });