// Agent Builder — Solução completa (serviços que cercam a plataforma)

const SOLUTIONS = [
  { ic: "setup", t: "Setup e Personalização", d: "Instalação, configuração, customização visual (white-label), integração com sistemas do cliente (CRM, ERP, APIs) e criação dos primeiros agentes." },
  { ic: "wrench", t: "Suporte e Operação", d: "Monitoramento 24/7, gestão de incidentes, atualizações de plataforma, backup e disaster recovery. SLA definido por tier." },
  { ic: "people", t: "Aculturamento", d: "Workshops de adoção para times do cliente. Demonstrações de casos de uso, sessões hands-on e acompanhamento de adoção por 90 dias." },
  { ic: "shield", t: "Governança e Segurança", d: "Guardrails de segurança, controle de acesso (SSO/RBAC), audit logs, políticas de uso, compliance e soberania de dados." },
  { ic: "trend", t: "Desenvolvimento de Melhorias", d: "Banco de horas para evolução contínua: novos agentes, novos workflows, novas integrações, otimização de prompts e fine-tuning." },
  { ic: "eye", t: "Observabilidade", d: "Acompanhamento ativo dos dashboards de uso, custo por interação, qualidade das respostas, latência, tracking de tokens e relatórios executivos mensais." },
  { ic: "book", t: "Letramento em IA", d: "Programa estruturado de capacitação: o que é IA Generativa, o que são agentes, como criar prompts eficazes, governança e ética." },
];

function SolIcon({ name, size = 24 }) {
  const p = {
    setup:  <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.4M12 18.8v2.4M21.2 12h-2.4M5.2 12H2.8M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7M18.5 18.5l-1.7-1.7M7.2 7.2 5.5 5.5"/></g>,
    wrench: <path d="M14.7 6.3a3.7 3.7 0 0 0-4.9 4.6L3.5 17.2a1.8 1.8 0 0 0 2.5 2.5l6.3-6.3a3.7 3.7 0 0 0 4.6-4.9l-2.3 2.3-2.2-.6-.6-2.2 2.9-1.7Z" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"/>,
    people: <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><circle cx="8.5" cy="8" r="2.8"/><path d="M3.5 19v-1a5 5 0 0 1 10 0v1"/><path d="M16 6.2a2.8 2.8 0 0 1 0 5.4M16.5 13.4a5 5 0 0 1 4 4.9V19"/></g>,
    book:   <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><path d="M12 6.5C10.4 5.3 8.2 4.8 5.5 4.8c-.8 0-1.5.1-2 .2v13c.5-.1 1.2-.2 2-.2 2.7 0 4.9.5 6.5 1.7 1.6-1.2 3.8-1.7 6.5-1.7.8 0 1.5.1 2 .2V5c-.5-.1-1.2-.2-2-.2-2.7 0-4.9.5-6.5 1.7Z"/><path d="M12 6.5V19"/></g>,
    trend:  <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M3.5 15.5 9 10l3.5 3.5L20 6"/><path d="M15 6h5v5"/></g>,
    eye:    <g stroke="currentColor" strokeWidth="1.5" fill="none"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" strokeLinejoin="round"/><circle cx="12" cy="12" r="2.8"/></g>,
    shield: <path d="M12 2.8 5 5.5v5.4c0 4.8 3.1 8 7 9.3 3.9-1.3 7-4.5 7-9.3V5.5L12 2.8Z" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"/>,
  }[name];
  return <svg width={size} height={size} viewBox="0 0 24 24">{p}</svg>;
}

function Solution() {
  return (
    <section className="section" id="solucao">
      <div className="container">
        <Reveal className="sec-head center">
          <Eyebrow center>Plataforma e Serviços em um só lugar</Eyebrow>
          <h2 className="title t-sec">Mais que uma plataforma. Uma solução completa para levar sua empresa para a era Agêntica.</h2>
          <p className="lede" style={{ maxWidth: 800, marginLeft: "auto", marginRight: "auto" }}>Uma plataforma por si só não será suficiente para fazer uma transição completa para a era dos agentes de IA. Por isso, além da estrutura tecnológica, oferecemos todos os serviços necessários para te apoiar no mapeamento, implementação e evolução dos Agentes.</p>
        </Reveal>
        <div className="diff-grid">
          {SOLUTIONS.map((s, i) => (
            <Reveal key={s.t} className={"diff-card" + (i === SOLUTIONS.length - 1 ? " sol-last" : "")} delay={(i % 3) * 70}>
              <span className="diff-ic"><SolIcon name={s.ic} /></span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solution });