const PHOTOS = [
  // Eventos
  { img: "assets/atuacao/eventos3.jpg", tag: "Eventos", title: "9º ConSindhosfil", desc: "Participação do S.A.T.E. no 9º Congresso Nacional do Sindhosfil.", pos: "center" },
  { img: "assets/atuacao/camara.jpeg", tag: "Eventos", title: "Diretoria apresentando a RN-1", desc: "Diretoria do S.A.T.E. apresenta a Resolução Normativa RN-1.", pos: "top" },
  { img: "assets/atuacao/eventos.jpeg", tag: "Eventos", title: "9º ConSindhosfil", desc: "Delegação do S.A.T.E. presente no 9º ConSindhosfil." },
  { img: "assets/atuacao/eventos5.jpg", tag: "Eventos", title: "9º ConSindhosfil", desc: "Representantes do sindicato no congresso nacional da categoria.", pos: "50% 8%" },
  { img: "assets/atuacao/camara2.jpeg", tag: "Eventos", title: "Diretoria apresentando a RN-1", desc: "Apresentação da RN-1 pela diretoria do S.A.T.E.", pos: "top" },

  // Festa da Enfermagem 23/05/2025
  { img: "assets/atuacao/festa-mocao-2.jpg", tag: "Festa da Enfermagem", title: "Moção de Aplausos", desc: "S.A.T.E. recebe Moção de Aplausos da Câmara Municipal de Bauru.", pos: "top" },
  { img: "assets/atuacao/festa-mocao-1.jpg", tag: "Festa da Enfermagem", title: "Reconhecimento oficial", desc: "Entrega da Moção de Aplausos na 1ª Festa da Enfermagem do S.A.T.E.", pos: "top" },
  { img: "assets/atuacao/festa-mocao-3.jpg", tag: "Festa da Enfermagem", title: "Diretoria e homenageados", desc: "Grupo no palco com a Moção de Aplausos — um marco histórico para a categoria.", pos: "top" },
  { img: "assets/atuacao/festa-hudson.jpg", tag: "Festa da Enfermagem", title: "Dr. Hudson Chaves", desc: "Dr. Hudson Chaves no discurso sobre a história e luta do S.A.T.E.", pos: "50% 20%" },
  { img: "assets/atuacao/festa-diretoria.jpg", tag: "Festa da Enfermagem", title: "Diretoria do S.A.T.E.", desc: "Diretoria reunida na 1ª Festa da Enfermagem de Bauru e Região.", pos: "top" },

  // Assembleia
  { img: "assets/atuacao/assembleia2.jpg", tag: "Assembleia", title: "Assembleia da categoria", desc: "Profissionais da enfermagem em assembleia convocada pelo S.A.T.E." },
  { img: "assets/atuacao/assembleia3.jpg", tag: "Assembleia", title: "Assembleia deliberativa", desc: "Categoria delibera em assembleia do sindicato." },
  { img: "assets/atuacao/assembleia4.jpg", tag: "Assembleia", title: "Votação em assembleia", desc: "Trabalhadores votam pautas em assembleia do S.A.T.E." },
  { img: "assets/atuacao/assembleia5.jpg", tag: "Assembleia", title: "Assembleia 2025", desc: "Assembleia geral com ampla participação da categoria." },
  { img: "assets/atuacao/assembleia6.jpeg", tag: "Assembleia", title: "Reunião ordinária", desc: "Reunião ordinária do sindicato com participação dos associados." },

  // S.A.T.E. em Hospitais
  { img: "assets/atuacao/upamarydota.jpeg", tag: "S.A.T.E. em Hospitais", title: "UPA Mary Dota", desc: "S.A.T.E. presente na UPA Mary Dota em Bauru." },
  { img: "assets/atuacao/maternidade.jpeg", tag: "S.A.T.E. em Hospitais", title: "Maternidade", desc: "Ação do sindicato na Maternidade de Bauru." },
  { img: "assets/atuacao/ame.jpeg", tag: "S.A.T.E. em Hospitais", title: "AME", desc: "Presença do S.A.T.E. no Ambulatório Médico de Especialidades." },
  { img: "assets/atuacao/upa-agudos.jpeg", tag: "S.A.T.E. em Hospitais", title: "UPA Agudos", desc: "S.A.T.E. em campanha na UPA de Agudos." },
  { img: "assets/atuacao/hospital-das-clinicas.jpeg", tag: "S.A.T.E. em Hospitais", title: "Hospital das Clínicas (HC)", desc: "Ação do sindicato no Hospital das Clínicas de Bauru." },
];

const TAG_COLORS = {
  "Eventos":                   { color: "var(--coral-deep)", bg: "var(--coral-soft)" },
  "Festa da Enfermagem":       { color: "var(--green)",      bg: "var(--green-soft)" },
  "Assembleia":                { color: "#b8860b",           bg: "#fdf3e0" },
  "S.A.T.E. em Hospitais":    { color: "#7b5ea7",           bg: "#f0ebf8" },
};

const TAGS = Object.keys(TAG_COLORS);

const Atuacao = () => {
  const [active, setActive] = React.useState("all");
  const filtered = active === "all" ? PHOTOS : PHOTOS.filter(p => p.tag === active);

  return (
    <section className="section atuacao" id="atuacao">
      <div className="container">
        <div className="section-head center" data-reveal="up">
          <span className="kicker">ATUAÇÃO DO SINDICATO</span>
          <h2>Na prática, <em>fazendo a diferença</em>.</h2>
          <p>
            Presença constante nos hospitais, unidades de saúde e instituições de Bauru e região.
            O S.A.T.E. está em campo todos os dias — ouvindo, mobilizando e defendendo a categoria.
          </p>
        </div>

        <div className="atuacao-filters" data-reveal="up">
          <button className={`atuacao-filter ${active === "all" ? "active" : ""}`} onClick={() => setActive("all")}>Todos</button>
          {TAGS.map(tag => (
            <button
              key={tag}
              className={`atuacao-filter ${active === tag ? "active" : ""}`}
              style={active === tag ? { background: TAG_COLORS[tag].bg, color: TAG_COLORS[tag].color, borderColor: TAG_COLORS[tag].color } : {}}
              onClick={() => setActive(tag)}
            >
              {tag}
            </button>
          ))}
        </div>

        <div className="atuacao-grid">
          {filtered.map((item, i) => {
            const tc = TAG_COLORS[item.tag];
            return (
              <article key={item.img || `placeholder-${i}`} className="atuacao-card">
                <div className="atuacao-img">
                  {item.img ? (
                    <img
                      src={item.img}
                      alt={item.title}
                      loading="lazy"
                      style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: item.pos || "center", display: "block" }}
                    />
                  ) : (
                    <div style={{ width: "100%", height: "100%", background: "linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 8 }}>
                      <span style={{ fontSize: 32, opacity: 0.4 }}>📸</span>
                      <span style={{ fontSize: 14, fontWeight: 600, color: "#999", letterSpacing: 1 }}>EM BREVE</span>
                    </div>
                  )}
                </div>
                <div className="atuacao-body">
                  <span className="atuacao-tag" style={{ color: tc.color, background: tc.bg }}>
                    {item.tag}
                  </span>
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Atuacao, PHOTOS });