// ===== App · Suporte / Central de ajuda =====

const HELP_CATEGORIES = [
  { id: "iniciar",  ico: "🌱", n: "Primeiros passos",    desc: "Crie sua conta, sincronize o CNPJ e analise seu primeiro edital." },
  { id: "agentes",  ico: "🤖", n: "Como os agentes funcionam", desc: "O que cada um faz, quando usar e como interpretar os resultados." },
  { id: "docs",     ico: "📋", n: "Cofre de documentos",  desc: "Quais certidões emitir, onde, e como manter tudo no prazo." },
  { id: "pregao",   ico: "⚡", n: "Pregão e lances",       desc: "Configurar o robô, estratégias e o que acontece em cada fase." },
  { id: "billing",  ico: "💳", n: "Planos e cobrança",    desc: "Trocar de plano, métodos de pagamento e cancelamento." },
  { id: "lgpd",     ico: "🔐", n: "LGPD e segurança",     desc: "Como tratamos seus dados, isolamento por tenant e auditoria." },
];

const POPULAR_QA = [
  { q: "Como envio meu primeiro edital pra análise?",                   a: "Clique em '+ Analisar edital' no topo. Arraste o PDF, anexe seu contrato social e CNPJ. Em 3,4s o Comitê entrega o veredito." },
  { q: "O que significa 🟢 PARTICIPE / 🟡 CUIDADO / 🔴 NÃO PARTICIPE?", a: "São veredito sintetizado pelo Coach com base nos 6 agentes. 🟢: score ≥ 80 e nenhum bloqueio. 🟡: score 60-79 ou pendências. 🔴: bloqueio crítico ou inviável." },
  { q: "Posso cancelar quando quiser?",                                 a: "Sim, em 1 clique nas Configurações → Faturamento. Sem multa, sem letra miúda. Você mantém acesso até o fim do ciclo." },
  { q: "Meus dados ficam no Brasil?",                                   a: "Sim. Banco PostgreSQL no AWS São Paulo (sa-east-1), com isolamento RLS por tenant. Backups criptografados também no Brasil." },
  { q: "O que é o Modo Iniciante?",                                     a: "Substitui termos técnicos (\"Habilitação\" → \"Envio dos seus documentos\"), destaca o Coach e mostra tooltips em todo campo com jargão." },
  { q: "Como funciona o robô de lances?",                               a: "Você define preço inicial, mínimo e estratégia (conservadora/equilibrada/agressiva). No dia do pregão ele entra no Compras.gov e disputa em tempo real respeitando seus limites." },
];

function ScreenSuporte({ beginnerMode, setBeginnerMode }) {
  const [q, setQ] = React.useState("");
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="ajuda" crumb={["Pleita", "Central de ajuda"]}>
      {/* Hero busca */}
      <section className="rounded-[10px] overflow-hidden mb-8 relative" style={{ background: "linear-gradient(135deg, rgb(var(--pleita-ink)), rgb(var(--pleita-ink-2)))" }}>
        <div aria-hidden className="absolute -right-20 -top-20 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .12)" }} />
        <div className="relative px-6 py-12 md:px-12 md:py-16 text-pleita-paper text-center">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-lime mb-3">Central de ajuda</div>
          <h1 className="font-display text-3xl md:text-5xl text-pleita-paper leading-tight">Como podemos te ajudar<span className="text-pleita-lime">?</span></h1>
          <div className="mt-7 max-w-xl mx-auto relative">
            <Icons.Search className="size-5 text-pleita-stone-2 absolute left-4 top-1/2 -translate-y-1/2" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Buscar artigos, agentes, prazos…"
              className="w-full rounded-full bg-pleita-paper text-pleita-ink pl-12 pr-4 py-3.5 text-sm placeholder:text-pleita-stone-2 outline-none shadow-pl-md focus:ring-4 focus:ring-pleita-lime/30"
            />
          </div>
          <p className="pl-num text-[11px] text-pleita-paper/60 mt-4">tente: "renovar CND", "BDI", "modo iniciante", "como impugnar"</p>
        </div>
      </section>

      {/* Categorias */}
      <section className="mb-8">
        <h2 className="font-display text-xl text-pleita-ink mb-4">Por categoria</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {HELP_CATEGORIES.map((c) => (
            <button key={c.id} className="text-left rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md hover:-translate-y-px transition-all">
              <div className="size-10 rounded-md bg-pleita-lime/15 grid place-items-center text-xl mb-3">{c.ico}</div>
              <div className="font-display text-base text-pleita-ink">{c.n}</div>
              <p className="text-xs text-pleita-stone mt-1 leading-snug">{c.desc}</p>
              <div className="mt-3 pl-num text-[11px] text-pleita-info">Ver artigos →</div>
            </button>
          ))}
        </div>
      </section>

      {/* Populares */}
      <section className="grid grid-cols-12 gap-6">
        <div className="col-span-12 lg:col-span-8">
          <h2 className="font-display text-xl text-pleita-ink mb-4">Perguntas mais frequentes</h2>
          <div className="space-y-3">
            {POPULAR_QA.map((x) => (
              <details key={x.q} className="group rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
                <summary className="font-display text-base text-pleita-ink cursor-pointer flex items-center justify-between gap-3 list-none">
                  <span>{x.q}</span>
                  <span className="text-pleita-stone-2 shrink-0 group-open:rotate-45 transition-transform">+</span>
                </summary>
                <p className="text-sm text-pleita-stone mt-3 leading-relaxed">{x.a}</p>
              </details>
            ))}
          </div>
        </div>

        <aside className="col-span-12 lg:col-span-4 space-y-4">
          <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
            <div className="text-2xl mb-2">💚</div>
            <div className="font-display text-base text-pleita-ink">WhatsApp · resposta em ~3min</div>
            <p className="text-xs text-pleita-stone mt-1 leading-relaxed">Para urgências em pregões em andamento. Equipe humana das 8h às 22h.</p>
            <button className="mt-4 w-full pl-num text-xs px-3 py-2 rounded-md text-white font-semibold" style={{ background: "#25D366" }}>Abrir conversa →</button>
          </div>
          <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
            <div className="text-2xl mb-2">📧</div>
            <div className="font-display text-base text-pleita-ink">E-mail</div>
            <p className="text-xs text-pleita-stone mt-1">suporte@pleita.pro · resposta em até 4h úteis.</p>
            <button className="mt-4 w-full pl-num text-xs px-3 py-2 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Enviar e-mail</button>
          </div>
          <div className="rounded-[10px] bg-pleita-ink text-pleita-paper p-5 shadow-pl-sm">
            <div className="text-2xl mb-2">🎥</div>
            <div className="font-display text-base text-pleita-paper">Onboarding 1:1 grátis</div>
            <p className="text-xs text-pleita-paper/70 mt-1 leading-relaxed">30min com um especialista. Configuramos sua conta, radar e primeiro edital juntos.</p>
            <button className="mt-4 w-full pl-num text-xs px-3 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Agendar →</button>
          </div>
        </aside>
      </section>

      {/* Status + Mudanças */}
      <section className="mt-10 grid md:grid-cols-2 gap-4">
        <a className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow block">
          <div className="flex items-center gap-3">
            <span className="size-9 rounded-md bg-verdict-go/15 grid place-items-center text-verdict-go">📡</span>
            <div className="flex-1">
              <div className="font-display text-base text-pleita-ink">Status do sistema</div>
              <div className="pl-num text-[11px] text-verdict-go inline-flex items-center gap-1.5 mt-0.5"><span className="size-1.5 rounded-full bg-verdict-go animate-pulse" />todos serviços operacionais</div>
            </div>
            <Icons.ArrowUpRight className="size-4 text-pleita-stone-2" />
          </div>
        </a>
        <a className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow block">
          <div className="flex items-center gap-3">
            <span className="size-9 rounded-md bg-pleita-info/15 grid place-items-center text-pleita-info">📝</span>
            <div className="flex-1">
              <div className="font-display text-base text-pleita-ink">Changelog · v1.12.0</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">Cockpit pós-vitória, modo iniciante, melhorias no Analista</div>
            </div>
            <Icons.ArrowUpRight className="size-4 text-pleita-stone-2" />
          </div>
        </a>
      </section>
    </AppFrame>
  );
}

window.ScreenSuporte = ScreenSuporte;