/* Página: Agentes de IA — SimplesDesk */

function AgentesIAPage() {
  return (
    <React.Fragment>
      <Nav />
      <main>
        <AiaHero />
        <AiaCapabilities />
        <AiaSimple1 />
        <AiaCompare />
        <AiaWhoFor />
        <AiaBenefits />
        <AiaDifferent />
        <AiaFaq />
        <CTAFinal />
      </main>
      <Footer />
    </React.Fragment>
  );
}

const AIA_SIGNUP = "https://chat.simplesdesk.com.br/app/auth/signup?ref=simplesdesk&code=site&campaign=AgentesIA";

function AiaHero() {
  const stats = [
    { v: "24/7", l: "atendimento sem fila" },
    { v: "-70%", l: "de tarefas repetitivas" },
    { v: "+8", l: "canais conectados" },
  ];
  return (
    <section style={{ position: "relative", paddingTop: 180, paddingBottom: 56, overflow: "hidden" }} id="top">
      <div className="m-grid-bg" />
      <div className="m-glow" />
      <div className="m-container" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 10 }}>
          <Simple1Mascot size={148} />
        </div>
        <span className="m-eyebrow is-brand" style={{ marginBottom: 18, display: "inline-block" }}>
          Agentes de IA
        </span>
        <h1 className="m-display" style={{ marginBottom: 24, maxWidth: 1000, marginInline: "auto" }}>
          Agentes de IA para conversas que <span className="m-grad">geram receita</span>
        </h1>
        <p className="m-lead" style={{ margin: "0 auto 30px", textAlign: "center" }}>
          Os Agentes de IA da SimplesDesk qualificam leads, atualizam o CRM, roteiam conversas,
          agendam e recomendam produtos em tempo real no WhatsApp, Instagram, Telegram,
          webchat, e-mail e mais — com escalonamento humano quando importa.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 34 }}>
          <a href={AIA_SIGNUP} className="m-btn m-btn-primary">
            Iniciar teste grátis <Icon name="arrow-right" size={15} />
          </a>
          <a href="/agendar" className="m-btn m-btn-ghost">
            Falar com especialista
          </a>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 28, flexWrap: "wrap", color: "var(--m-fg-3)", fontSize: 13 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18,
                color: "var(--m-brand-2)", letterSpacing: "-0.02em",
              }}>{s.v}</span>
              <span>{s.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AiaCard({ icon, title, text }) {
  return (
    <div style={{
      padding: 22, borderRadius: 16,
      background: "var(--m-bg-card)", border: "1px solid var(--m-border)",
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 11, display: "grid", placeItems: "center",
        background: "var(--m-brand-soft)", color: "var(--m-brand-2)",
      }}>
        <Icon name={icon} size={18} />
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "var(--m-fg)" }}>{title}</div>
      <div style={{ fontSize: 13.5, color: "var(--m-fg-3)", lineHeight: 1.6 }}>{text}</div>
    </div>
  );
}

function AiaCapabilities() {
  const items = [
    { icon: "brain", title: "Compreensão multimodal", text: "Interpreta texto, imagens, PDFs e áudios do WhatsApp para entender a intenção e agir." },
    { icon: "trending-up", title: "Ações que vendem", text: "Qualifica, recomenda produtos, envia links de pagamento e agenda sem intervenção humana." },
    { icon: "users", title: "Agentes especializados", text: "Recepção, vendas, suporte e financeiro: cada agente com escopo, tom e permissões próprias." },
    { icon: "shield-check", title: "Guardrails e transbordo", text: "Regras claras do que pode e não pode. Ao detectar negociação ou risco, chama o humano." },
    { icon: "inbox", title: "Base de conhecimento viva", text: "Responde apenas com fontes aprovadas (site, artigos, PDFs) — atualize sem retreinar nada." },
    { icon: "workflow", title: "Modelos ou 100% custom", text: "Comece com templates prontos ou construa o agente do zero e teste em sandbox antes de publicar." },
    { icon: "sparkles", title: "IA dentro da caixa de entrada", text: "Sugere respostas, traduz, ajusta o tom e resume conversas longas para o time humano." },
    { icon: "workflow", title: "Integrações e CRM", text: "Atualiza estágios, cria negócios e dispara requisições HTTP para ERPs, Asaas, Omie e mais." },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="m-eyebrow">Capacidades</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>
            Como os Agentes de IA <span className="m-grad">conduzem a conversa</span>
          </h2>
        </div>
        <div className="m-aia-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16,
        }}>
          {items.map((it, i) => <AiaCard key={i} {...it} />)}
        </div>
      </div>
    </section>
  );
}

/* ============ Simple1 — copiloto de IA nativo ============ */
/* Simple1Mascot é global (mascot.jsx) */


function AiaSimple1() {
  const capabilities = [
    { icon: "megaphone", t: "Campanhas em massa", d: "Gera disparos de WhatsApp com segmentação, variáveis e aprovação em segundos." },
    { icon: "globe", t: "Landing pages", d: "Cria páginas de captura prontas para publicar, com copy e SEO no piloto automático." },
    { icon: "bar-chart", t: "Apresentações", d: "Transforma um briefing em slides estruturados para vendas, demos e treinamentos." },
    { icon: "inbox", t: "Lê contratos", d: "Resume cláusulas, aponta riscos e extrai obrigações de PDFs longos." },
    { icon: "trending-up", t: "Assistente financeiro", d: "Cobre inadimplência, projeta fluxo de caixa e gera relatórios conectados ao Asaas." },
    { icon: "scale", t: "Assistente jurídico", d: "Redige minutas, revisa termos e responde dúvidas com base na sua base de conhecimento." },
    { icon: "code", t: "Assistente de tecnologia", d: "Escreve integrações, webhooks e queries — e explica o raciocínio passo a passo." },
  ];
  const powers = [
    { l: "Claude 3.5 Sonnet", c: "#D97757" },
    { l: "GPT-4o", c: "#10A37F" },
    { l: "Multi-LLM", c: "#5B5BD6" },
    { l: "100% nativo", c: "var(--m-brand-2)" },
  ];
  return (
    <section className="m-section" id="simple1" style={{ background: "var(--m-bg-soft)", overflow: "hidden" }}>
      <div className="m-container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,0.85fr) minmax(0,1.15fr)", gap: 48, alignItems: "center" }}>
          {/* Mascot */}
          <div style={{ display: "grid", placeItems: "center", order: 2 }}>
            <div style={{ position: "relative" }}>
              <Simple1Mascot size={260} />
              <div style={{
                position: "absolute", bottom: -6, left: "50%", transform: "translateX(-50%)",
                display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center", maxWidth: 320,
              }}>
                {powers.map((p, i) => (
                  <span key={i} style={{
                    fontSize: 11, fontWeight: 600, padding: "5px 11px", borderRadius: 999,
                    background: "var(--m-bg-card)", border: "1px solid var(--m-border)",
                    color: p.c, display: "inline-flex", alignItems: "center", gap: 6,
                  }}>
                    <span style={{ width: 7, height: 7, borderRadius: 999, background: p.c, boxShadow: `0 0 0 3px ${p.c}22` }} />
                    {p.l}
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* Copy */}
          <div style={{ order: 1 }}>
            <span className="m-eyebrow is-brand" style={{ display: "inline-block", marginBottom: 16 }}>
              Conheça o Simple1
            </span>
            <h2 className="m-h2" style={{ marginBottom: 18 }}>
              O copiloto de IA <span className="m-grad">nativo da SimplesDesk</span>
            </h2>
            <p className="m-lead" style={{ marginBottom: 16 }}>
              O Simple1 é o copiloto que vive dentro da sua operação. Ele lê, escreve, executa e
              decide — acionando os modelos frontier da Anthropic (Claude) e da OpenAI (GPT-4o) em
              sequência, escolhendo o melhor cérebro para cada tarefa.
            </p>
            <p className="m-lead" style={{ marginBottom: 26 }}>
              Enquanto outros copilotos só conversam, o Simple1 <strong style={{ color: "var(--m-fg)" }}>age</strong>:
              monta campanhas em massa, cria landing pages e apresentações, lê contratos inteiros e
              atua como auxiliar financeiro, jurídico e de tecnologia — sem você sair da caixa de entrada.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12, marginBottom: 28 }}>
              {capabilities.map((c, i) => (
                <div key={i} className="s1-pill" style={{
                  display: "flex", gap: 10, alignItems: "flex-start",
                  padding: "12px 14px", borderRadius: 12,
                  background: "var(--m-bg-card)", border: "1px solid var(--m-border)",
                  animationDelay: `${i * 80}ms`,
                }}>
                  <div style={{
                    width: 30, height: 30, borderRadius: 8, flexShrink: 0,
                    display: "grid", placeItems: "center",
                    background: "rgba(91,91,214,0.14)", color: "#B4B6F5",
                    border: "1px solid rgba(91,91,214,0.28)",
                  }}>
                    <Icon name={c.icon} size={15} />
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13.5, color: "var(--m-fg)" }}>{c.t}</div>
                    <div style={{ fontSize: 12, color: "var(--m-fg-3)", lineHeight: 1.5, marginTop: 2 }}>{c.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
              <a href={AIA_SIGNUP} className="m-btn m-btn-primary">
                Testar o Simple1 grátis <Icon name="arrow-right" size={15} />
              </a>
              <span style={{ fontSize: 12.5, color: "var(--m-fg-3)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Icon name="shield-check" size={14} color="var(--m-brand-2)" />
                Multi-LLM · Claude + GPT-4o · sem código
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* responsive collapse */}
      <style>{`
        @media (max-width: 880px) {
          #simple1 .m-container > div { grid-template-columns: 1fr !important; gap: 32px !important; }
          #simple1 .m-container > div > div:first-child { order: 1 !important; }
          #simple1 .m-container > div > div:last-child { order: 2 !important; }
        }
      `}</style>
    </section>
  );
}

function AiaCompare() {
  const rows = [
    ["Volume de conversas", "Baixo e previsível", "Alto volume simultâneo, chat e voz"],
    ["Fluxo", "Linear, baseado em regras", "Jornadas não-lineares com contexto persistente"],
    ["Entradas", "Somente texto", "Texto, imagem, PDF e áudio"],
    ["Execução", "Respostas estáticas", "Ações reais durante a conversa"],
    ["Integrações", "Sem CRM ou roteamento", "Atualiza CRM, roteia e muda estágio do funil"],
    ["Quando usar", "Interações simples e roteirizadas", "Quando a conversa impacta diretamente a receita"],
  ];
  return (
    <section className="m-section" style={{ background: "var(--m-bg-soft)" }}>
      <div className="m-container">
        <div style={{ textAlign: "center", marginBottom: 34 }}>
          <span className="m-eyebrow">Comparativo</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>Chatbot ou <span className="m-grad">Agente de IA</span>?</h2>
          <p className="m-lead" style={{ margin: "18px auto 0", textAlign: "center" }}>
            Chatbots resolvem o previsível. Agentes de IA resolvem o que é ambíguo, contextual e ligado à venda.
          </p>
        </div>
        <div style={{ overflowX: "auto", borderRadius: 16, border: "1px solid var(--m-border)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5, minWidth: 720 }}>
            <thead>
              <tr style={{ background: "var(--m-bg-card)" }}>
                {["Melhor para", "Chatbot tradicional", "Agentes de IA SimplesDesk"].map((h, i) => (
                  <th key={i} style={{
                    textAlign: "left", padding: "14px 16px",
                    color: i === 2 ? "var(--m-brand-2)" : "var(--m-fg)",
                    fontFamily: "var(--font-display)", fontWeight: 600,
                    borderBottom: "1px solid var(--m-border)",
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  {r.map((c, j) => (
                    <td key={j} style={{
                      padding: "13px 16px", verticalAlign: "top",
                      color: j === 0 ? "var(--m-fg)" : "var(--m-fg-3)",
                      fontWeight: j === 0 ? 600 : 400,
                      borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--m-border)",
                      background: j === 2 ? "var(--m-brand-soft)" : "transparent",
                    }}>{c}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function AiaWhoFor() {
  const segs = [
    { icon: "truck", t: "E-commerce e varejo", d: "Rastreio, recompra e recomendação de produtos no WhatsApp." },
    { icon: "graduation-cap", t: "Educação", d: "Captação de matrículas, dúvidas do curso e follow-up automático." },
    { icon: "scale", t: "Serviços e agências", d: "Qualificação de leads, orçamento e agendamento sem SDR ocioso." },
    { icon: "shield", t: "Saúde e clínicas", d: "Agendamento, confirmação e triagem com escalonamento humano." },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <span className="m-eyebrow">Para quem é</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>Feito para times com <span className="m-grad">alto volume de conversas</span></h2>
          <p className="m-lead" style={{ margin: "18px auto 0", textAlign: "center" }}>
            Operações B2C onde a jornada não é linear e a confiabilidade do atendimento impacta o faturamento.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }}>
          {segs.map((s, i) => <AiaCard key={i} icon={s.icon} title={s.t} text={s.d} />)}
        </div>
      </div>
    </section>
  );
}

function AiaBenefits() {
  const items = [
    { icon: "trending-up", t: "Mais conversão", d: "Follow-ups e recomendações automáticas trabalhando 24/7." },
    { icon: "users", t: "Transbordo com contexto", d: "O humano assume com histórico e resumo prontos." },
    { icon: "star", t: "Leads quentes primeiro", d: "A IA filtra spam e entrega só o que vale atenção humana." },
    { icon: "zap", t: "Nenhum lead perdido", d: "Resposta instantânea captura o cliente antes do concorrente." },
    { icon: "clock", t: "Ciclo de venda menor", d: "Ações em canais e integrações movem o negócio em tempo real." },
  ];
  return (
    <section className="m-section" style={{ background: "var(--m-bg-soft)" }}>
      <div className="m-container">
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <span className="m-eyebrow">Benefícios</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>O que muda na sua <span className="m-grad">operação</span></h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }}>
          {items.map((s, i) => <AiaCard key={i} icon={s.icon} title={s.t} text={s.d} />)}
        </div>
      </div>
    </section>
  );
}

function AiaDifferent() {
  const items = [
    { icon: "shield-check", t: "Plataforma oficial Meta", d: "Somos Meta Business Partner: WhatsApp Business API oficial, sem risco de banimento." },
    { icon: "settings", t: "100% Whitelabel", d: "Revendas usam a plataforma com marca própria e podem cadastrar o próprio app Tech Provider." },
    { icon: "users", t: "Humano no circuito", d: "A IA sugere, executa e escala — o time mantém o controle das negociações críticas." },
    { icon: "code", t: "Aberto a integrações", d: "APIs, webhooks e integrações nativas com Asaas, Omie, Meta Ads e mais." },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <span className="m-eyebrow">Diferenciais</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>Por que na <span className="m-grad">SimplesDesk</span></h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }}>
          {items.map((s, i) => <AiaCard key={i} icon={s.icon} title={s.t} text={s.d} />)}
        </div>
      </div>
    </section>
  );
}

function AiaFaq() {
  const faqs = [
    { q: "Preciso saber programar para criar um agente?", a: "Não. Você começa por um modelo pronto, define objetivo, tom e base de conhecimento, e testa em sandbox antes de publicar." },
    { q: "O agente pode transferir para um atendente humano?", a: "Sim. Você define as condições de transbordo e o humano recebe a conversa com histórico e resumo." },
    { q: "Em quais canais o agente funciona?", a: "WhatsApp Business API oficial, Instagram, Messenger, Telegram, webchat, e-mail e SMS." },
    { q: "Consigo usar com minha própria marca?", a: "Sim. No modelo Whitelabel a plataforma fica com a sua marca e a sua revenda pode registrar o próprio app Tech Provider na Meta." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="m-section" style={{ background: "var(--m-bg-soft)" }}>
      <div className="m-container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <span className="m-eyebrow">Dúvidas</span>
          <h2 className="m-h2" style={{ marginTop: 14 }}>Perguntas frequentes</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{
              borderRadius: 14, border: "1px solid var(--m-border)",
              background: "var(--m-bg-card)", overflow: "hidden",
            }}>
              <button type="button" onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 12, padding: "16px 18px", background: "none", border: "none", cursor: "pointer",
                color: "var(--m-fg)", fontFamily: "var(--font-display)", fontWeight: 600,
                fontSize: 15, textAlign: "left",
              }}>
                {f.q}
                <Icon name={open === i ? "minus" : "plus"} size={16} />
              </button>
              {open === i && (
                <div style={{ padding: "0 18px 18px", fontSize: 14, color: "var(--m-fg-3)", lineHeight: 1.65 }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}