// Agent Builder — Impact statement + Positioning (empresa agêntica)

function Impact() {
  const negs = [
    "Sem integração", "Sem governança", "Sem capacidade de executar", "Sem escala",
  ];
  return (
    <section className="impact" id="impacto">
      <div className="container impact-inner">
        <Reveal>
          <h2>A maioria das iniciativas de IA <span className="neg">morre antes de gerar resultado.</span></h2>
        </Reveal>
        <Reveal delay={100}>
          <div className="impact-negs">
            <span style={{ alignSelf: "center", color: "var(--ab-fg-muted)", fontSize: 15, marginRight: 4 }}>Porque nascem isoladas:</span>
            {negs.map((n) => (
              <span key={n} className="neg-chip">
                <svg width="14" height="14" viewBox="0 0 16 16"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="#888686" strokeWidth="1.6" strokeLinecap="round"/></svg>
                {n}
              </span>
            ))}
          </div>
        </Reveal>
        <Reveal delay={160}>
          <p className="impact-body">Enquanto isso, as empresas seguem tentando transformar o negócio usando ferramentas criadas apenas para conversar.</p>
        </Reveal>
        <Reveal delay={220}><div className="impact-rule" style={{ marginTop: 40 }}></div></Reveal>
        <Reveal delay={260}>
          <p className="impact-turn">O Agent Builder nasceu para resolver esse problema. Uma plataforma corporativa para construir agentes que não apenas respondem.<br /><em>Eles executam.</em></p>
        </Reveal>
      </div>
    </section>
  );
}

const CAPS = [
  { ic: "doc", t: "Consultar contratos" },
  { ic: "scan", t: "Analisar documentos internos" },
  { ic: "db", t: "Atualizar sistemas corporativos" },
  { ic: "flow", t: "Executar fluxos operacionais" },
  { ic: "report", t: "Gerar relatórios" },
  { ic: "mail", t: "Enviar comunicações" },
  { ic: "shield", t: "Tomar ações dentro dos limites da sua governança" },
];

function CapIcon({ name }) {
  const p = {
    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" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    scan:  <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><circle cx="9" cy="9" r="5"/><path d="m13 13 4 4"/></g>,
    db:    <g stroke="currentColor" strokeWidth="1.4" fill="none"><ellipse cx="10" cy="5" rx="6" ry="2.4"/><path d="M4 5v10c0 1.3 2.7 2.4 6 2.4s6-1.1 6-2.4V5"/></g>,
    flow:  <g stroke="currentColor" strokeWidth="1.4" fill="none"><rect x="3" y="3" width="5" height="5" rx="1"/><rect x="12" y="12" width="5" height="5" rx="1"/><path d="M8 5.5h4a2 2 0 0 1 2 2v4"/></g>,
    report:<g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M4 16V9M9 16V5M14 16v-4"/><path d="M3 17h14"/></g>,
    mail:  <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"><rect x="3" y="5" width="14" height="10" rx="1.6"/><path d="m3.5 6 6.5 5 6.5-5"/></g>,
    shield:<path d="M10 2.5 4 5v4.5c0 4 2.6 6.7 6 8 3.4-1.3 6-4 6-8V5l-6-2.5Z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
  }[name];
  return <svg width="19" height="19" viewBox="0 0 20 20">{p}</svg>;
}

function Positioning() {
  return (
    <section className="section" id="plataforma" style={{ paddingTop: 30 }}>
      <div className="container split">
        <div>
          <Reveal><Eyebrow>Empresa agêntica</Eyebrow></Reveal>
          <Reveal delay={80}><h2 className="title t-sec">O início da sua transição para uma empresa agêntica.</h2></Reveal>
          <Reveal delay={140}><p className="lede">Imagine um agente capaz de executar trabalho real — conectado ao seu ecossistema, dentro das suas regras.</p></Reveal>
          <Reveal delay={220}>
            <div className="cap-foot" style={{ justifyContent: "flex-start", marginTop: 30 }}>
              <span><Check /> Tudo conectado</span>
              <span><Check /> Tudo auditável</span>
              <span><Check /> Tudo seguro</span>
            </div>
          </Reveal>
        </div>
        <Reveal className="split-media" delay={140}>
          <div className="cap-grid" style={{ gridTemplateColumns: "1fr" }}>
            {CAPS.map((c) => (
              <div key={c.t} className="cap-item">
                <span className="ci-ic"><CapIcon name={c.ic} /></span>
                <span className="ci-t">{c.t}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Impact, Positioning });