// Agent Builder — Differentials + Final CTA + Footer

const DIFFS = [
  { ic: "oss", t: "Open Source", d: "Baseado nas tecnologias mais modernas e adotadas do mercado." },
  { ic: "label", t: "White-label", d: "A experiência pode ser totalmente personalizada para sua empresa." },
  { ic: "unlock", t: "Zero Lock-in", d: "Seus agentes, seus dados e sua estratégia permanecem sob seu controle." },
  { ic: "tower", t: "Enterprise Ready", d: "Arquitetura preparada para escala corporativa." },
];

function DiffIcon({ name, size = 24 }) {
  const p = {
    oss:   <g stroke="currentColor" strokeWidth="1.5" fill="none"><circle cx="6" cy="5.5" r="2.2"/><circle cx="6" cy="18.5" r="2.2"/><circle cx="18" cy="9" r="2.2"/><path d="M6 7.7v8.6M6 12h6a4 4 0 0 0 4-4"/></g>,
    label: <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><path d="M11.5 3 21 12.5 13.5 20 4 10.5V3h7.5Z"/><circle cx="8" cy="7" r="1.3"/></g>,
    unlock:<g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><rect x="4.5" y="11" width="15" height="9" rx="1.6"/><path d="M8 11V7a4 4 0 0 1 7.7-1.5"/></g>,
    tower: <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"><path d="M4 21V6l7-3 7 3v15"/><path d="M3 21h18M8 9h0M8 12.5h0M8 16h0M14 9h0M14 12.5h0M14 16h0"/></g>,
    gear:  <g stroke="currentColor" strokeWidth="1.5" fill="none"><circle cx="9" cy="9" r="3.4"/><circle cx="16" cy="16" r="3.4"/><path d="M9 2.5v2M9 13.5v2M2.5 9h2M13.5 9h2"/></g>,
  }[name];
  return <svg width={size} height={size} viewBox="0 0 24 24">{p}</svg>;
}

function Differentials() {
  return (
    <section className="section" id="diferenciais">
      <div className="container">
        <SectionHead center eyebrow="Diferenciais" title="Construído para empresas que pensam no longo prazo." />
        <div className="diff-grid">
          {DIFFS.map((d, i) => (
            <Reveal key={d.t} className="diff-card" delay={(i % 3) * 70}>
              <span className="diff-ic"><DiffIcon name={d.ic} /></span>
              <h4>{d.t}</h4>
              <p>{d.d}</p>
            </Reveal>
          ))}
          <Reveal className="diff-card wide">
            <span className="diff-ic"><DiffIcon name="gear" /></span>
            <div className="dc-body">
              <h4>Serviços Gerenciados</h4>
              <p>Nossa equipe ajuda você a desenhar, construir e operar seus agentes.</p>
            </div>
            <button className="ghost-cta wide-cta" onClick={() => { const el = document.getElementById("agendar"); if (el) window.scrollTo({ top: el.offsetTop - 76, behavior: "smooth" }); }}>
              falar com especialista
              <span className="gc-arrow"><svg width="13" height="13" viewBox="0 0 16 16"><path d="M3 8h9M8 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
            </button>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final" id="demo">
      <div className="container">
        <Reveal className="final-band">
          <Eyebrow center>O próximo passo da sua empresa</Eyebrow>
          <h2 style={{ marginTop: 18 }}>O futuro não será composto por softwares. Será composto por <em>agentes</em>.</h2>
          <p>As empresas que aprenderem a criar, governar e escalar agentes de IA terão uma vantagem operacional difícil de replicar. O Agent Builder foi criado para acelerar essa jornada.</p>
          <div className="final-cta">
            <CTAButton onClick={() => { const el = document.getElementById("agendar"); if (el) window.scrollTo({ top: el.offsetTop - 76, behavior: "smooth" }); }}>agende uma demonstração</CTAButton>
          </div>
          <p style={{ fontSize: 14, marginTop: 22, opacity: .8 }}>Conheça a plataforma que está ajudando empresas a construir sua força de trabalho digital.</p>
        </Reveal>
      </div>
    </section>
  );
}

const FOOT_NAV = [
  { label: "Plataforma", href: "Plataforma.html" },
  { label: "Governança", href: "Governanca.html" },
  { label: "Observabilidade", href: "Observabilidade.html" },
  { label: "Serviços", href: "Servicos.html" },
];

function Footer() {
  const [theme, setTheme] = useState(() =>
    (typeof document !== "undefined" && document.documentElement.getAttribute("data-theme")) || "dark"
  );
  useEffect(() => {
    const on = () => setTheme(document.documentElement.getAttribute("data-theme") || "dark");
    window.addEventListener("ab-theme", on);
    return () => window.removeEventListener("ab-theme", on);
  }, []);
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-min">
          <a className="hdr-logo" href="index.html">
            <img src={theme === "light" ? "assets/logo-agentbuilder-dark-tight.svg" : "assets/logo-agentbuilder-white-tight.svg"} alt="Agent Builder" style={{ height: 30, width: "auto" }} />
          </a>
          <ul className="foot-nav" style={{ margin: 0 }}>
            {FOOT_NAV.map((n) => (
              <li key={n.href}><a href={n.href}>{n.label}</a></li>
            ))}
          </ul>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <a className="ghost-btn" href="https://portal-agent-lab.maitha.com.br/" target="_blank" rel="noopener noreferrer">acesso plataforma</a>
            <a className="solid-btn" href="Contato.html"><span>solicitar demonstração</span></a>
          </div>
        </div>
        <div className="foot-bottom" style={{ marginTop: 36, borderTop: "1px solid var(--ab-border)", paddingTop: 24 }}>
          <span>© 2026 Agent Builder. Todos os direitos reservados.</span>
        </div>
        <div className="foot-big">Agent Builder</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Differentials, FinalCTA, Footer });