/* eslint-disable */

const FRENTES = [
  {
    id: "01",
    icon: "network",
    title: "social listening estratégico",
    desc: "Monitoramento digital com queries avançadas, análise de sentimento, gestão de crises e relatórios com insights acionáveis para times de marketing, conteúdo e P&D. Sou tool-agnostic — alinho o briefing antes de escolher a stack.",
    method: [
      { n: "01", t: "briefing & escuta exploratória",
        body: "Levantamento do universo do cliente — marca, concorrência, ecossistema. Vou do micro para o macro: redes, busca, tendências, dados de site. Pergunto bastante; meu trabalho é tanto trazer respostas quanto fazer as perguntas certas para o que o projeto precisa." },
      { n: "02", t: "query, amostra & codificação",
        body: "Construção e validação de queries, amostragem e codificação de discurso em planilha. Leitura humana semana a semana, não só clusters automáticos. Brandwatch, Sprinklr, Stilingue ou outro — escolho a ferramenta depois do problema." },
      { n: "03", t: "síntese",
        body: "Famílias temáticas em 3 a 5 movimentos centrais, com narrativa curta e implicações para negócio. Cruzo com benchmark de categoria, tendência e dados secundários quando faz sentido." },
      { n: "04", t: "ativação",
        body: "Workshop com o time do cliente para virar achado em decisão. Capacitação estratégica (de C-Level a estagiários) + capacitação técnica em Emplifi, Stilingue, 9Cat, Digital Methods Initiative. Assessment de ferramentas e fontes de dados pode entrar aqui — depende do pacote contratado." },
    ],
  },
  {
    id: "02",
    icon: "question-answering",
    title: "pesquisa qualitativa em profundidade",
    desc: "Etnografia digital, netnografia, entrevistas em profundidade e tracking. Pilar com investida no médio prazo (até 5 anos): historicamente pago bem, contratado por marcas maiores, e tema que quero fortalecer.",
    method: [
      { n: "01", t: "desenho do campo",
        body: "Definição do método (entrevista em profundidade, etnografia presencial ou digital, netnografia, tracking), recrutamento e roteiro. Briefing detalhado para alinhar o que está em jogo antes do campo abrir." },
      { n: "02", t: "campo & codificação",
        body: "Condução do campo, transcrição e codificação em planilha. Não uso Atlas.ti ou MaxQDA — planilha codificada me dá controle e trânsito direto com times de cliente que já trabalham com Excel." },
      { n: "03", t: "síntese",
        body: "Relatório longo com transcrições e base de dados como anexos vivos. Narrativa que cabe na cabeça do time — 3 a 5 movimentos centrais, sem perder o detalhe que justifica a história." },
      { n: "04", t: "ativação",
        body: "Workshop com o cliente + capacitação para que o time interno siga produzindo qualitativa depois. Assessment de ferramentas/fornecedores se entrar no pacote." },
    ],
  },
  {
    id: "03",
    icon: "user-data",
    title: "audience intelligence & métodos mistos",
    desc: "Estudos de persona, segmentações culturais e diagnósticos quali-quanti que cruzam dados digitais, secundários e primários. Gosto de procurar as teias — os nexos entre dados que parecem não se relacionar.",
    method: [
      { n: "01", t: "escopo & nexos",
        body: "Defino o que vale cruzar e por quê. Procuro teias entre dados que parecem não se relacionar — assinaturas culturais escondidas em dados duros, padrões de comportamento que só aparecem quando duas fontes conversam." },
      { n: "02", t: "cruzamento & curadoria",
        body: "Mintel, Kantar TGI, MindMiners, OpinionBox + dados digitais + dados primários do cliente. Curadoria importa mais que coleta: descarte do que não responde, costura do que responde junto." },
      { n: "03", t: "síntese",
        body: "Estudo de persona (Banco do Brasil ESG, Ademicon), segmentação cultural ou de comportamento (fãs de surf, skatistas, creators de favela) — entregue como narrativa, não como deck-bingo de dados soltos." },
      { n: "04", t: "ativação",
        body: "Workshop + assessment de stack de fornecedores quando faz sentido. Independência de comissionamento — recomendo a ferramenta certa para o caso, não a que paga melhor o intermediário." },
    ],
  },
];

const Services = () => {
  const [active, setActive] = React.useState("01");
  const [openStep, setOpenStep] = React.useState("01");
  const frente = FRENTES.find((f) => f.id === active);

  // when active changes, reset open step
  React.useEffect(() => { setOpenStep("01"); }, [active]);

  return (
    <section className="section services" id="servicos">
      <div className="container">
        <Eyebrow>02 — serviços e metodologia</Eyebrow>
        <h2>três frentes, três percursos.</h2>

        {/* fichário tabs */}
        <div className="frentes" role="tablist">
          {FRENTES.map((f) => {
            const isActive = active === f.id;
            return (
              <button
                key={f.id}
                role="tab"
                aria-selected={isActive}
                className={"frente-tab" + (isActive ? " is-active" : "")}
                onClick={() => setActive(f.id)}
              >
                <span className="num">{f.id}</span>
                <span className="ttl">{f.title}</span>
                <span className="ic">
                  <img src={`./assets/icons/${f.icon}.svg`} alt="" />
                </span>
              </button>
            );
          })}
        </div>

        {/* dossier panel */}
        <div className="dossier">
          <div className="dossier-head">
            <div className="dh-num">{frente.id}</div>
            <div className="dh-body">
              <div className="dh-eye">frente {frente.id} · ficha técnica</div>
              <h3 className="dh-title">{frente.title}</h3>
              <p className="dh-desc">{frente.desc}</p>
            </div>
          </div>

          <div className="dossier-eyebrow">
            metodologia · 04 passos · clique para expandir
          </div>

          <div className="method">
            {frente.method.map((m) => (
              <div
                key={m.n}
                className={"method-row " + (openStep === m.n ? "is-open" : "")}
                onClick={() => setOpenStep(openStep === m.n ? null : m.n)}
              >
                <div className="head">
                  <div className="num">{m.n}</div>
                  <div className="ttl">{m.t}</div>
                  <div className="chev">→</div>
                </div>
                <div className="body"><div className="pad">{m.body}</div></div>
              </div>
            ))}
          </div>

          <div className="dossier-foot">
            <span>file ref · rphlmcosta-{frente.id}-2026</span>
            <span>{frente.method.length} steps · pt-br</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Services = Services;