/* SEL.IA v3 — Rodada 1: faixa de credibilidade, perfil de agente,
   prova social e FAQ. Adicionados sobre a base v2, mesmos tokens/estilos.
   Copy de placeholder marcada com <Draft> onde depende de dado real. */

/* small inline marker for content pending real data */
const Draft = ({ children }) => <span className="draft-tag">{children}</span>;

/* ---------- A. Faixa de credibilidade (após o hero) ---------- */
const CredibilityBar = () => (
  <div className="credbar">
    <div className="container">
      <div className="credbar-inner">
        <div className="credbar-item">
          <LandIcon name="sparkles" size={15}/>
          <span>Uma plataforma <b>Stokhos</b> — especialistas no setor elétrico brasileiro</span>
        </div>
        <div className="credbar-item">
          <LandIcon name="server" size={15}/>
          <span>Hospedagem no Brasil · <b>LGPD</b></span>
        </div>
        <div className="credbar-item">
          <LandIcon name="shield" size={15}/>
          <span>Toda resposta com <b>fonte auditável</b></span>
        </div>
        <div className="credbar-item">
          <LandIcon name="users" size={15}/>
          <span>Especialistas em <b>regulação do setor elétrico</b></span>
        </div>
      </div>
    </div>
  </div>
);

/* ---------- B. Por perfil de agente (após os módulos) ---------- */
const COMMON_SOURCES = ["Processos SEI", "Reuniões da Diretoria ANEEL", "DOU", "Participação social", "REN 1.000", "PRORET", "Newsletters"];
const PROFILES = [
  { key:"distribuidora", tab:"Distribuidora", icon:"plug",
    temas:["Revisão tarifária periódica", "Qualidade — DEC/FEC · PRODIST Mód. 8", "Perdas técnicas e não técnicas", "Processos administrativos sancionadores"], bdgd:true },
  { key:"comercializadora", tab:"Comercializadora", icon:"chart",
    temas:["Regras de comercialização", "Garantias financeiras", "Migração ao mercado livre", "Penalidades e contabilização CCEE"] },
  { key:"transmissora", tab:"Transmissora", icon:"grid",
    temas:["Leilões de transmissão", "RAP e sua revisão", "Prazos e atrasos de obras"] },
  { key:"gerador", tab:"Gerador", icon:"zap",
    temas:["Outorgas e prorrogações", "Despacho e curtailment", "Leilões de energia", "Geração distribuída"] },
  { key:"consultoria", tab:"Consultoria & jurídico", icon:"users",
    temas:["Vários clientes / portfólios em paralelo", "Pareceres e teses", "Prazos processuais rastreáveis"] },
];

const ProfileSection = () => {
  const [active, setActive] = React.useState(0);
  const p = PROFILES[active];
  return (
    <section className="section profiles" id="perfis">
      <div className="container">
        <div className="section-header reveal">
          <div className="section-eyebrow">Para o seu perfil</div>
          <h2>A base é a mesma.<br/>O foco é seu.</h2>
          <p>Todo agente acompanha o mesmo núcleo regulatório. A SEL.IA já chega afinada com os temas e processos que importam ao seu mercado.</p>
        </div>

        {/* base comum a todos */}
        <div className="pf-common reveal">
          <div className="pf-common-label"><LandIcon name="layers" size={13}/>Todo agente acompanha</div>
          <div className="pf-common-chips">
            {COMMON_SOURCES.map((s, i) => (<span className="pf-common-chip" key={i}>{s}</span>))}
          </div>
        </div>

        <div className="profile-tabs reveal" role="tablist">
          {PROFILES.map((pr, i) => (
            <button key={pr.key} role="tab" aria-selected={i === active}
              className={`profile-tab ${i === active ? "active" : ""}`} onClick={() => setActive(i)}>
              <LandIcon name={pr.icon} size={15}/>{pr.tab}
            </button>
          ))}
        </div>

        <div className="profile-panel reveal">
          <div className="pp-icon"><LandIcon name={p.icon} size={26}/></div>
          <div className="pp-body" key={p.key}>
            <h3 className="profile-fade">{p.tab}<span className="pf-foco">foco do mercado</span></h3>
            <div className="pf-temas profile-fade">
              {p.temas.map((t, i) => (
                <span className="pf-tema" key={i}><LandIcon name="check" size={12}/>{t}</span>
              ))}
            </div>
            {p.bdgd && (
              <div className="pf-bdgd profile-fade"><LandIcon name="database" size={14}/><span><b>BDGD</b> — análises de rede, fluxo e GD exclusivas para distribuidoras</span></div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- C. Prova social (antes do CTA final) ---------- */
const SocialProof = () => (
  <section className="section proof" id="confianca">
    <div className="container">
      <div className="section-header reveal">
        <div className="section-eyebrow">Confiança</div>
        <h2>Construída com quem<br/>vive a regulação.</h2>
        <p>SEL.IA nasce dentro da Stokhos, com times que conhecem de perto o dia a dia regulatório do setor elétrico brasileiro. Estamos validando a plataforma ao lado de parceiros de design reais.</p>
      </div>

      <div className="proof-quotes">
        <div className="quote-card reveal">
          <div className="q-mark">&ldquo;</div>
          <blockquote>
            <Draft>rascunho/validar</Draft> &nbsp;Depoimento de um parceiro de design — substituir por citação real assim que aprovada pela área.
          </blockquote>
          <div className="q-author">
            <div className="q-avatar"><LandIcon name="users" size={18}/></div>
            <div>
              <div className="q-name">Gerência Regulatória</div>
              <div className="q-role">distribuidora do Sudeste · <Draft>validar</Draft></div>
            </div>
          </div>
        </div>

        <div className="quote-card reveal">
          <div className="q-mark">&ldquo;</div>
          <blockquote>
            <Draft>rascunho/validar</Draft> &nbsp;Segundo depoimento — espaço reservado para citação de parceiro, com cargo e setor (sem expor a organização).
          </blockquote>
          <div className="q-author">
            <div className="q-avatar"><LandIcon name="users" size={18}/></div>
            <div>
              <div className="q-name">Assessoria Jurídica</div>
              <div className="q-role">consultoria regulatória · <Draft>validar</Draft></div>
            </div>
          </div>
        </div>
      </div>

      <div className="partners reveal">
        <div className="partners-label">
          <LandIcon name="check" size={14}/>
          Em piloto com <Draft>validar</Draft>
        </div>
        <div className="partners-row">
          <div className="partner-chip"><LandIcon name="plug" size={16}/>uma distribuidora do Sudeste</div>
          <div className="partner-chip"><LandIcon name="chart" size={16}/>uma comercializadora nacional</div>
          <div className="partner-chip"><LandIcon name="users" size={16}/>uma consultoria regulatória</div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- D. FAQ / objeções (antes do CTA final) ---------- */
const FAQ_ITEMS = [
  {
    q: "E se a IA errar? Como sei que posso confiar na resposta?",
    a: <>Toda resposta vem com a <b>citação da fonte oficial</b> — norma, módulo, seção e trecho — para você verificar na origem em segundos. A SEL.IA não responde "de memória": ela se ancora nos documentos regulatórios e mostra de onde tirou cada afirmação. A decisão continua sua; a SEL.IA entrega a fundamentação rastreável.</>,
  },
  {
    q: "Qual a diferença para usar o ChatGPT ou outra IA genérica?",
    a: <>Ferramentas genéricas não dominam a terminologia do setor (DIC, FIC, DEC, FEC, DMIC…), não acessam as fontes oficiais atualizadas e não citam a origem — o que abre espaço para respostas inventadas. A SEL.IA é especializada no domínio regulatório do setor elétrico e responde <b>sempre com fonte verificável</b>.</>,
  },
  {
    q: "Como meus dados ficam isolados de outras organizações?",
    a: <>Cada organização opera em um <b>tenant isolado</b>. Conversas, anotações e relatórios nunca cruzam fronteiras organizacionais, e o acesso é controlado por perfil. Os dados são hospedados no Brasil, em conformidade com a <b>LGPD</b>. Detalhes da arquitetura na demonstração técnica.</>,
  },
  {
    q: "Vocês treinam modelos com minhas perguntas e documentos?",
    a: <><b>Não.</b> Suas perguntas, anotações e relatórios não alimentam modelos generalistas nem de terceiros. Mantemos auditoria completa de prompts e respostas.</>,
  },
  {
    q: "Como a SEL.IA evita virar mais uma fonte de ruído? Ela filtra o que é relevante pra mim?",
    a: <>Você define palavras-chave, processos e temas de interesse. O monitoramento e os alertas priorizam o que importa para a sua operação, em vez de despejar todas as atualizações.</>,
  },
  {
    q: "Com que frequência as fontes são atualizadas? E quando sai uma norma nova?",
    a: <>A base é atualizada <b>diariamente</b>: novos processos do SEI, publicações do DOU e reuniões entram automaticamente. Você não precisa fazer nada para se manter atualizado.</>,
  },
  {
    q: "Recebo aviso quando um processo que acompanho se movimenta?",
    a: <>Sim. Você marca processos de interesse e recebe notificação a cada nova movimentação — sem precisar entrar no SEI, resolver CAPTCHA e checar manualmente.</>,
  },
  {
    q: "Posso pedir uma funcionalidade específica para a minha necessidade?",
    a: <>Sim. A SEL.IA evolui junto com os agentes do setor: pedidos de funcionalidade entram no nosso roadmap e customizações são avaliadas caso a caso, priorizando o que gera valor para mais clientes e para o seu cenário. Traga sua necessidade para a demo — mapeamos o que já existe e o que dá para construir.</>,
  },
  {
    q: "A SEL.IA integra com meus sistemas internos (SEI, etc.)?",
    a: <>A plataforma já consome as fontes oficiais (ANEEL, DOU, SEI, BDGD). Integrações com sistemas internos são avaliadas caso a caso — leve seu cenário para a demo e mapeamos o que faz sentido.</>,
  },
  {
    q: "Como é o onboarding e quanto tempo leva?",
    a: <>Não há upload de documentos nem treinamento manual: a SEL.IA já conhece as fontes oficiais. O onboarding foca em configurar seus processos, temas e perfis de acesso.</>,
  },
  {
    q: "Como funciona a contratação?",
    a: <>O modelo é por assinatura, dimensionado pela sua equipe e uso, com um piloto focado nos seus casos reais. Os planos são apresentados na conversa com um especialista.</>,
  },
  {
    q: "Fico preso à plataforma? Consigo exportar meus dados?",
    a: <>Relatórios e análises podem ser exportados para uso fora da plataforma. Os termos de portabilidade e exportação são detalhados no contrato.</>,
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="container">
        <div className="section-header reveal">
          <div className="section-eyebrow">Perguntas frequentes</div>
          <h2>O que áreas reguladas<br/>costumam perguntar.</h2>
          <p>Respostas diretas às objeções mais comuns. Para o detalhe técnico e contratual, falamos na demonstração.</p>
        </div>

        <div className="faq-list reveal">
          {FAQ_ITEMS.map((item, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button
                className="faq-q"
                aria-expanded={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                {item.q}
                <span className="faq-plus" aria-hidden="true"/>
              </button>
              <div className="faq-a">
                <div className="faq-a-clip">
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Draft, CredibilityBar, ProfileSection, SocialProof, FAQ });