/* eslint-disable */

const PROJECTS = [
  // PUBLICIZÁVEIS
  {
    id: "iphan",
    eye: "iphan · rede diálogo · 2024",
    title: "brand health do patrimônio cultural brasileiro",
    desc: "Mapeamento da conversa digital sobre patrimônio, lacunas de percepção e estudo de brand health — contribuiu para a vitória do cliente na licitação federal.",
    palinha: "Pesquisa quali-quanti com social listening, netnografia e curadoria de dados secundários. Mapeamos a conversa pública sobre o patrimônio cultural brasileiro, identificamos lacunas entre o discurso oficial e a percepção dos cidadãos, e avaliamos o brand health do IPHAN frente a temas adjacentes.",
    file: "IPHAN — Monitoramento e Netnografia (versão pública).pdf",
    category: "social-listening",
    sector: "publico",
    nda: false,
    year: 2024,
    tone: "petrol",
  },
  {
    id: "apex",
    eye: "apex brasil · rede diálogo · 2025",
    title: "pesquisa estratégica · licitação apex",
    desc: "Pesquisa estratégica para licitação federal — entrega final em julho de 2025, com diagnóstico de mercado e recomendações para internacionalização de marcas brasileiras.",
    palinha: "Estudo combinando dados secundários, monitoramento digital e análise diagnóstica para sustentar uma licitação federal de promoção comercial. Entregável final em julho de 2025.",
    file: "Pesquisa Estratégica - Licitação Apex Brasil - Entrega Final (13_07_2025).pdf",
    category: "audience",
    sector: "publico",
    nda: false,
    year: 2025,
    tone: "amber",
  },
  {
    id: "bb-esg",
    eye: "banco do brasil · 2024",
    title: "bb & esg — relatório final",
    desc: "Estudo de persona e segmentação cultural sobre a percepção pública das pautas ESG associadas ao Banco do Brasil.",
    palinha: "Diagnóstico quali-quanti dos públicos que se relacionam com a agenda ESG do BB: segmentação cultural, mapeamento de tensões na conversa digital e recomendações para posicionamento institucional. Relatório fechado em março de 2024.",
    file: "BB & ESG - relatório final (05 Mar 2024).pdf",
    category: "audience",
    sector: "privado",
    nda: false,
    year: 2024,
    tone: "cream",
  },
  {
    id: "creators-favela",
    eye: "youpix + data favela · 2024",
    title: "creators de favela",
    desc: "Pesquisa nacional sobre creators que vivem em favelas — entrevistas qualitativas, questionários quantitativos e curadoria de dados secundários.",
    palinha: "Liderança da pesquisa, junto à YOUPIX e Data Favela, sobre o ecossistema nacional de creators de favela: rotina criativa, monetização, relação com marcas e barreiras estruturais. Métodos mistos com entrevistas, survey e análise de discurso.",
    file: "creators de favela - digital favela (relatorio 2024).pdf",
    category: "qualitativa",
    sector: "privado",
    nda: false,
    year: 2024,
    tone: "petrol",
  },
  {
    id: "deponto-imersao",
    eye: "deponto · 2025",
    title: "imersão em inteligência de negócios",
    desc: "Apresentação-imersão sobre métodos e práticas de inteligência de negócios para o time da Deponto.",
    palinha: "Material de imersão preparado para o time da Deponto em março de 2025: pilares de inteligência de negócios, métodos de pesquisa estratégica, exemplos aplicados e roteiros de uso de social listening na rotina da agência.",
    file: "Imersão em Inteligência de Negócios - Apresentação Deponto - 28 de março de 2025.pdf",
    category: "social-listening",
    sector: "privado",
    nda: false,
    year: 2025,
    tone: "amber",
  },

  // SOB NDA — clientes nomeados
  {
    id: "google-monks",
    eye: "google brasil · monks · 2024–em curso",
    title: "social listening para android, play store e youtube",
    desc: "Pesquisa estratégica com métodos mistos para a estratégia de conteúdo do YouTube Brasil; queries avançadas, monitoramento de crises e relatórios semanais.",
    category: "social-listening",
    sector: "privado",
    nda: true,
    year: 2025,
    tone: "petrol",
  },
  {
    id: "play9-paris",
    eye: "play9 + cob + youtube · 2024",
    title: "paris é brasa — olimpíadas 2024",
    desc: "Análise de redes sociais da cobertura olímpica em parceria com o COB e o YouTube. Consolidação de resultados de influenciadores em mídia paga e orgânica.",
    category: "social-listening",
    sector: "privado",
    nda: true,
    year: 2024,
    tone: "cream",
  },
  {
    id: "loreal-sl",
    eye: "l'oréal brasil · 2016–2020",
    title: "social listening como rotina de marca",
    desc: "Liderança da operação de social listening — suporte a marketing, fábricas, P&D e gestão de crises; co-liderança do IBPAD como parceiro.",
    category: "social-listening",
    sector: "privado",
    nda: true,
    year: 2020,
    tone: "amber",
  },
  {
    id: "sebrae-debrito",
    eye: "sebrae · debrito · 2023",
    title: "compre do pequeno — campanha sebrae",
    desc: "Mapeamento de categoria, monitoramento digital com indicadores de impacto e mensuração de ROAS para apoio à decisão.",
    category: "social-listening",
    sector: "publico",
    nda: true,
    year: 2023,
    tone: "petrol",
  },
  {
    id: "tinder-jones",
    eye: "tinder · adventures (jones) · 2021–2022",
    title: "estudos de persona e relatórios quali-quanti",
    desc: "Construção de relatórios quali-quanti, estudos de persona e mentoria da equipe de analistas em diferentes verticais.",
    category: "audience",
    sector: "privado",
    nda: true,
    year: 2022,
    tone: "amber",
  },
  {
    id: "samsung-mutato",
    eye: "samsung · mutato · 2020–2021",
    title: "insights e estratégia digital",
    desc: "Relatórios estratégicos com insights para otimização de campanhas, monitoramento de concorrência e mapeamento de tendências.",
    category: "social-listening",
    sector: "privado",
    nda: true,
    year: 2021,
    tone: "cream",
  },
  {
    id: "etnografias",
    eye: "idealis research · ~2023",
    title: "etnografias de consumo · marcas globais no brasil",
    desc: "Visitas domiciliares e em lojas, entrevistas em profundidade, curadoria de dados e netnografia para suporte à definição de estratégias de mercado.",
    category: "qualitativa",
    sector: "privado",
    nda: true,
    year: 2023,
    tone: "petrol",
  },
];

const CATS = [
  { id: "todos",          label: "todas as frentes" },
  { id: "social-listening", label: "social listening" },
  { id: "qualitativa",    label: "qualitativa" },
  { id: "audience",       label: "audience intelligence" },
];
const SECTORS = [
  { id: "todos",   label: "todos os setores" },
  { id: "privado", label: "marca/privado" },
  { id: "publico", label: "setor público" },
];
const STATUSES = [
  { id: "todos",   label: "todos os status" },
  { id: "publico", label: "documento público" },
  { id: "nda",     label: "sob nda" },
];

const Portfolio = () => {
  const [cat, setCat] = React.useState("todos");
  const [sec, setSec] = React.useState("todos");
  const [stat, setStat] = React.useState("todos");
  const [openId, setOpenId] = React.useState(null);

  const filtered = PROJECTS.filter((p) =>
    (cat === "todos" || p.category === cat) &&
    (sec === "todos" || p.sector === sec) &&
    (stat === "todos" || (stat === "publico" ? !p.nda : p.nda))
  );

  const total = PROJECTS.length;
  const publicCount = PROJECTS.filter((p) => !p.nda).length;

  return (
    <section className="section portfolio" id="portfolio">
      <div className="container">
        <Eyebrow>03 — portfolio</Eyebrow>
        <div className="port-head">
          <h2>projetos recentes.</h2>
          <div className="port-counts">
            <span><b>{total}</b> projetos catalogados</span>
            <span><b>{publicCount}</b> com material público</span>
            <span>tudo sob lgpd e contratos</span>
          </div>
        </div>

        <div className="port-filters">
          <FilterRow label="frente"  options={CATS}     value={cat}  onChange={setCat} />
          <FilterRow label="setor"   options={SECTORS}  value={sec}  onChange={setSec} />
          <FilterRow label="status"  options={STATUSES} value={stat} onChange={setStat} />
        </div>

        <div className="port-meta">
          mostrando <b>{filtered.length}</b> de {total} projetos
          {(cat!=="todos"||sec!=="todos"||stat!=="todos") && (
            <button className="reset"
              onClick={() => { setCat("todos"); setSec("todos"); setStat("todos"); }}>
              limpar filtros ×
            </button>
          )}
        </div>

        <div className="proj-grid">
          {filtered.map((p) => (
            <ProjCard
              key={p.id}
              project={p}
              isOpen={openId === p.id}
              onToggle={() => setOpenId(openId === p.id ? null : p.id)}
            />
          ))}
        </div>
        {filtered.length === 0 && (
          <div className="port-empty">
            nenhum projeto bateu com esses filtros.
            <button className="reset" onClick={() => { setCat("todos"); setSec("todos"); setStat("todos"); }}>
              limpar filtros ×
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

const FilterRow = ({ label, options, value, onChange }) => (
  <div className="filter-row">
    <div className="filter-label">{label}</div>
    <div className="filter-chips">
      {options.map((o) => (
        <button
          key={o.id}
          className={"chip" + (value === o.id ? " is-active" : "")}
          onClick={() => onChange(o.id)}
        >{o.label}</button>
      ))}
    </div>
  </div>
);

const ProjCard = ({ project: p, isOpen, onToggle }) => {
  const tone = p.tone === "amber" ? " dither-amber" : p.tone === "cream" ? " dither-cream" : "";
  return (
    <article className={"proj-card" + (isOpen ? " is-open" : "")}>
      <div className="proj-top">
        <div className={"thumb dither" + tone}>
          <span className={"badge " + (p.nda ? "badge-nda" : "badge-public")}>
            {p.nda ? "sob nda" : "documento público"}
          </span>
          <span className="year">{p.year}</span>
        </div>
        <div className="body">
          <div className="eye">{p.eye}</div>
          <h3>{p.title}</h3>
          <p>{p.desc}</p>
          <div className="proj-actions">
            {p.nda ? (
              <span className="proj-locked">conteúdo sob nda · solicite uma apresentação privada</span>
            ) : (
              <button className="proj-cta" onClick={onToggle}>
                {isOpen ? "fechar palinha ↑" : "ver palinha ↓"}
              </button>
            )}
            <Tag tone={p.category === "audience" ? "amber" : p.category === "qualitativa" ? "cream" : "petrol"}>
              {p.category === "social-listening" ? "social listening" : p.category === "qualitativa" ? "qualitativa" : "audience"}
            </Tag>
          </div>
        </div>
      </div>

      {!p.nda && (
        <div className="proj-drawer" aria-hidden={!isOpen}>
          <div className="drawer-pad">
            <div className="drawer-eye">palinha · trecho público</div>
            <p>{p.palinha}</p>
            <div className="drawer-foot">
              <a className="drawer-cta" href="#contato">
                solicitar apresentação completa →
              </a>
              <span className="drawer-file">arquivo de referência: {p.file}</span>
            </div>
          </div>
        </div>
      )}
    </article>
  );
};

window.Portfolio = Portfolio;