// Agent Builder — Governance + Observability

const GOV = [
  "Controle de acesso", "Segregação de ambientes", "Auditoria completa",
  "Rastreabilidade", "Compliance LGPD", "Proteção de dados sensíveis", "Histórico operacional",
];

function GovChip({ name, style }) {
  const p = {
    lock:  <path d="M6 9V7a4 4 0 0 1 8 0v2 M5 9h10v7H5z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    eye:   <g stroke="currentColor" strokeWidth="1.4" fill="none"><path d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"/><circle cx="10" cy="10" r="2.2"/></g>,
    check: <path d="M4 10.5 8 14.5 16 5.5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    layers:<path d="M10 3 17 7l-7 4-7-4 7-4Z M3 11l7 4 7-4 M3 7v4 M17 7v4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    doc:   <path d="M5 2.5h6l4 4v11H5z M11 2.5V7h4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
  }[name];
  return <span className="shield-chip" style={style}><svg width="20" height="20" viewBox="0 0 20 20">{p}</svg></span>;
}

function Governance() {
  return (
    <section className="section gov" id="governanca">
      <div className="container">
        <Reveal className="gov-panel">
          <div className="gov-grid">
            <div>
              <Eyebrow>Governança</Eyebrow>
              <h2 className="title t-sec" style={{ marginTop: 14 }}>Governança do primeiro ao último token.</h2>
              <p className="lede">Quando a IA entra na empresa, segurança deixa de ser opcional. Por isso o Agent Builder foi criado para ambientes corporativos.</p>
              <ul className="gov-list">
                {GOV.map((g) => (
                  <li key={g}><Check /> {g}</li>
                ))}
              </ul>
              <p className="gov-note">Controle total sobre cada agente, cada ação e cada decisão.</p>
            </div>
            <div className="split-media">
              <div className="shield">
                <div className="shield-ring r1"></div>
                <div className="shield-ring r2"></div>
                <div className="shield-ring r3"></div>
                <div className="shield-orbit" style={{ animation: "none" }}>
                  <GovChip name="lock" style={{ transform: "translate(-50%,-50%)", marginLeft: 0, top: "8%", left: "50%" }} />
                  <GovChip name="eye" style={{ top: "38%", left: "92%", transform: "translate(-50%,-50%)" }} />
                  <GovChip name="check" style={{ top: "84%", left: "74%", transform: "translate(-50%,-50%)" }} />
                  <GovChip name="layers" style={{ top: "84%", left: "26%", transform: "translate(-50%,-50%)" }} />
                  <GovChip name="doc" style={{ top: "38%", left: "8%", transform: "translate(-50%,-50%)" }} />
                </div>
                <div className="shield-core">
                  <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 2.5 5 5.2v6c0 4.8 3.1 8 7 9.3 3.9-1.3 7-4.5 7-9.3v-6L12 2.5Z" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round"/><path d="M8.8 11.8 11 14l4.2-4.4" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Observability ---------- */
function useInView() {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }), { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return [ref, seen];
}

function CountUp({ to, dur = 1300, suffix = "", prefix = "", decimals = 0, go }) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!go) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min((t - start) / dur, 1);
      const e = 1 - Math.pow(1 - p, 3);
      setV(to * e);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [go]);
  const num = decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString("pt-BR");
  return <span>{prefix}{num}{suffix}</span>;
}

const OBS_BARS = [38, 52, 44, 67, 58, 80, 72, 91, 84, 76, 95, 88];
const OBS_LOG = [
  { t: "10:42:07", tag: "exec", m: "Agente Pós-venda concluiu cancelamento #4471" },
  { t: "10:42:01", tag: "tool", m: "Atualização gravada no CRM · Salesforce" },
  { t: "10:41:55", tag: "audit", m: "Ação registrada no histórico operacional" },
  { t: "10:41:48", tag: "exec", m: "Agente Financeiro gerou relatório mensal" },
];
const OBS_LIST = ["Execuções", "Logs", "Custos", "Consumo de tokens", "Histórico operacional", "Ações realizadas"];

function Observability() {
  const [ref, seen] = useInView();
  return (
    <section className="section" id="observabilidade">
      <div className="container split rev">
        <Reveal className="split-media" delay={120}>
          <div className="obs-panel" ref={ref}>
            <div className="obs-bar">
              <span className="tl"><i></i><i></i><i></i></span>
              <span className="title">painel de observabilidade</span>
              <span className="live">ao vivo</span>
            </div>
            <div className="obs-metrics">
              <div className="obs-metric"><div className="ml">Execuções hoje</div><div className="mv"><CountUp to={12480} go={seen} /></div><div className="md">+18% vs ontem</div></div>
              <div className="obs-metric"><div className="ml">Tokens</div><div className="mv"><CountUp to={4.2} decimals={1} suffix="M" go={seen} /></div><div className="md">em 24h</div></div>
              <div className="obs-metric"><div className="ml">Custo</div><div className="mv"><CountUp to={1284} prefix="R$ " go={seen} /></div><div className="md">controlado</div></div>
              <div className="obs-metric"><div className="ml">Ações</div><div className="mv"><CountUp to={37900} go={seen} /></div><div className="md">executadas</div></div>
            </div>
            <div className="obs-chart">
              <div className="ct">Execuções · últimas 24h</div>
              <div className="obs-bars">
                {OBS_BARS.map((h, i) => <span key={i} className="b" style={{ height: seen ? h + "%" : "6%", transitionDelay: i * 50 + "ms" }}></span>)}
              </div>
            </div>
            <div className="obs-log">
              {OBS_LOG.map((r, i) => (
                <div className="row" key={i}><span className="t">{r.t}</span><span className="tag">{r.tag}</span><span className="m">{r.m}</span></div>
              ))}
            </div>
          </div>
        </Reveal>
        <div>
          <Reveal><Eyebrow>Observabilidade</Eyebrow></Reveal>
          <Reveal delay={80}><h2 className="title t-sec">Veja tudo o que seus agentes fazem.</h2></Reveal>
          <Reveal delay={140}><p className="lede">Monitore seu ecossistema de IA em tempo real. Acompanhe:</p></Reveal>
          <Reveal delay={200}>
            <ul className="obs-list">
              {OBS_LIST.map((o) => <li key={o}><span className="od"></span> {o}</li>)}
            </ul>
          </Reveal>
          <Reveal delay={280}>
            <p className="impact-turn" style={{ fontSize: 24, textAlign: "left", marginTop: 34 }}>Porque não basta criar agentes.<br /><em>É preciso governá-los.</em></p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Governance, Observability });