// Eu Faço Parte — Sections part 2: O que fazemos / Apoio a projetos / Iniciativas / Stats

const ApoioProjetos = () => (
  <section className="oque" id="oquefazemos">
    <div className="section">
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="num">01</span> · O que fazemos</span>
        </div>
        <div className="head-right head-right--with-img">
          <h2 className="h-section">
            <em>Apoio</em> a projetos.
          </h2>
          <img className="head-section-img head-section-img--contain" src="images/section-apoio-caneta.png" alt="Apoio a projetos" />
        </div>
      </div>

      <div className="oque-grid">
        <div className="oque-text body-text">
          <p className="dropcap">
            Para viabilizar a ressocialização apoiamos projetos buscando impulsionar e tracionar pessoas que desejam realizar seus sonhos e impactar positivamente a sua comunidade. Não apenas construindo uma rede de suporte, mas também abrimos portas para que esse ciclo virtuoso ecoe e, em troca, abram as oportunidades para os jovens que assistenciamos, assim criando novas oportunidades de inserção no mercado de trabalho, proporcionando experiência, aprendizado e maturidade. Dessa forma, garantimos o crescimento e também a promovemos a autonomia dos jovens que acolhemos e um futuro digno.
          </p>
          <div className="cf-quote">
            <span className="quotemark">"</span>
            <p>
              Cada projeto apoiado é uma porta aberta, não apenas para quem precisa, mas para toda uma <em>comunidade</em> que encontra nessa corrente de generosidade um novo horizonte.
            </p>
          </div>

          <p>
            Através de projetos de impacto, juntos estamos transformando vidas, possibilitando sonhos e trazendo para todos uma nova chance de continuar sua jornada. Protegendo, cuidando e mantendo, criando um legado benevolente para todos nossos apoiadores.
          </p>
          <a href="nossa-historia.html" className="btn btn-ghost" style={{ alignSelf: 'flex-start', marginTop: '8px' }}>
            <span className="aster">✻</span> conheça mais sobre nosso impacto.
          </a>
        </div>

        <div className="oque-figure">
          <figure className="figure">
            <img
              src="images/artesanato.jpg"
              alt="Crianças nos projetos sociais apoiados"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph oque-ph'; ph.dataset.label = '— Projetos · iniciativas locais'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>Iniciativas · 12 comunidades</figcaption>
          </figure>
          <figure className="figure" style={{ marginTop: '24px' }}>
            <img
              src="images/apoio-peneira.png"
              alt="5 Jovens jogando em clubes oficiais esportivos"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph oque-ph'; ph.dataset.label = '— Projetos · peneira esportiva'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>5 Jovens jogando em clubes oficiais esportivos</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>
);

// ---- Initiatives grid ----
const initiatives = [
  { name: 'Surf Sagi',                      slug: 'surf-sagi',     href: 'projeto-surf-sagi.html',    img: 'images/iniciativa-surf-sagi.jpg' },
  { name: 'Artesanato & Brinquedos',        slug: 'artesanato',    href: 'projeto-artesanato.html',   img: 'images/iniciativa-artesanato.jpg' },
  { name: 'Sagi Vidas',                     slug: 'sagi-vidas',    href: 'projeto-sagi-vidas.html',   img: 'images/iniciativa-sagi-vidas.jpg' },
  { name: 'Sonhos em Campo',                slug: 'sonhos-campo',  href: 'projeto-sonhos-campo.html', img: 'images/iniciativa-sonhos-campo.png' },
  { name: 'Juntos nós Cuidamos',            slug: 'juntos',        href: 'projeto-juntos.html',       img: 'images/iniciativa-juntos.png' },
  { name: 'Abrigo ANCA & Educação Profissional', slug: 'anca',     href: 'projeto-anca.html',         img: 'images/iniciativa-anca.jpg' },
  { name: 'Roupas & Memórias',              slug: 'roupas',        href: 'projeto-roupas.html',       img: 'images/iniciativa-roupas.jpg' },
  { name: 'Dia das Crianças para 300 jovens', slug: 'dia-criancas', href: 'projeto-dia-criancas.html', img: 'https://eufacoparte.org/uploads/2024/05/Imagem-do-WhatsApp-de-2024-03-25-as-09.06.40_924bb40f.jpg' },
  { name: 'O direito de celebrar',           slug: 'celebrar',     href: 'projeto-celebrar.html',     img: 'https://eufacoparte.org/uploads/2024/05/Imagem-do-WhatsApp-de-2024-05-17-as-15.50.26_13059e0d-1.jpg' },
  { name: 'Memórias Afetivas e Saudáveis na Cozinha', slug: 'cozinha', href: 'projeto-cozinha.html',  img: 'https://eufacoparte.org/uploads/2024/05/Imagem-do-WhatsApp-de-2024-04-21-as-16.35.53_ad5169b4.jpg' },
];

const Initiatives = () => {
  const VISIBLE = 4, GAP = 20, DUR = 520;
  const total   = initiatives.length;
  const LEAD    = VISIBLE;
  const extended = [
    ...initiatives.slice(-LEAD),
    ...initiatives,
    ...initiatives.slice(0, LEAD),
  ];

  const [idx,        setIdx]        = React.useState(LEAD);
  const [anim,       setAnim]       = React.useState(false);
  const [containerW, setContainerW] = React.useState(0);
  const [paused,     setPaused]     = React.useState(false);
  const wrapRef  = React.useRef(null);
  const timerRef = React.useRef(null);

  React.useLayoutEffect(() => {
    if (!wrapRef.current) return;
    const ro = new ResizeObserver(([e]) => setContainerW(e.contentRect.width));
    ro.observe(wrapRef.current);
    setContainerW(wrapRef.current.offsetWidth);
    return () => ro.disconnect();
  }, []);

  const cardW = containerW ? (containerW - GAP * (VISIBLE - 1)) / VISIBLE : 0;
  const step  = cardW + GAP;

  const goto = (newIdx, animate) => { setAnim(animate); setIdx(newIdx); };

  const advance = React.useCallback(() => {
    setAnim(true);
    setIdx(prev => {
      const next = prev + 1;
      if (next >= LEAD + total) setTimeout(() => goto(LEAD, false), DUR + 16);
      return next;
    });
  }, [LEAD, total, DUR]);

  const retreat = () => {
    setAnim(true);
    setIdx(prev => {
      const next = prev - 1;
      if (next < LEAD) setTimeout(() => goto(LEAD + total - 1, false), DUR + 16);
      return next;
    });
  };

  React.useEffect(() => {
    if (paused) return;
    timerRef.current = setInterval(advance, 3500);
    return () => clearInterval(timerRef.current);
  }, [advance, paused]);

  const translateX  = -idx * step;
  const currentDot  = ((idx - LEAD) % total + total) % total;

  return (
    <section className="iniciativas" id="projetos">
      <div className="section">
        <div className="section-head">
          <div className="head-left">
            <span className="eyebrow"><span className="num">01.1</span> · Nossas iniciativas</span>
          </div>
          <div className="head-right" />
        </div>

        <div
          className="init-carousel"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div ref={wrapRef} className="init-carousel-clip">
            <div
              className="init-carousel-track"
              style={{
                transform: `translateX(${translateX}px)`,
                transition: anim ? `transform ${DUR}ms cubic-bezier(0.25,0.46,0.45,0.94)` : 'none',
                gap: `${GAP}px`,
              }}
            >
              {extended.map((it, i) => (
                <a
                  href={it.href}
                  key={`${it.slug}-${i}`}
                  className="init-card"
                  style={{ flex: `0 0 ${cardW}px` }}
                >
                  <div className="init-thumb">
                    <img src={it.img} alt={it.name} />
                  </div>
                  <div className="init-body">
                    <h3 className="init-title">{it.name}</h3>
                    <span className="init-arrow">Conheça →</span>
                  </div>
                </a>
              ))}
            </div>
          </div>

          <div className="init-nav">
            <button className="init-nav-btn" onClick={retreat} aria-label="Anterior">←</button>
            <div className="init-dots">
              {initiatives.map((_, i) => (
                <button
                  key={i}
                  className={`init-dot${currentDot === i ? ' init-dot--on' : ''}`}
                  onClick={() => goto(LEAD + i, true)}
                  aria-label={`Ir para ${initiatives[i].name}`}
                />
              ))}
            </div>
            <button className="init-nav-btn" onClick={advance} aria-label="Próximo">→</button>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---- Stats count-up ----
const CountUp = ({ numStr, duration = 1800 }) => {
  const target   = parseInt(numStr.replace(/\./g, ''), 10);
  const [val, setVal]       = React.useState(0);
  const started             = React.useRef(false);
  const ref                 = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting || started.current) return;
      started.current = true;
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min((now - t0) / duration, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(eased * target));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, duration]);

  return <span ref={ref}>{val.toLocaleString('pt-BR')}</span>;
};

// ---- Stats ----
const stats = [
  {
    pre: '+ de',
    num: '1.200',
    label: 'vidas',
    body: 'Transformadas através da nossa jornada em devolver o direito de sonhar entre jovens, crianças, adolescentes e familiares com uma nova possibilidade de futuro, e o direito à vida de animais abandonados.',
  },
  {
    pre: 'dividido em',
    num: '12',
    label: 'comunidades',
    body: 'Sendo afetadas por nossas ações, possibilitando novas formas de sustentabilidade, desenvolvimento de visão social, combate ao status quo e criação de novas oportunidades.',
  },
  {
    pre: 'por',
    num: '12',
    label: 'projetos',
    body: 'De impacto social realizados, possibilitando a realização de sonhos e a integração no esporte, no mercado de trabalho e na sociedade de jovens em situação de vulnerabilidade social e/ou financeira.',
  },
];

const Stats = () => (
  <section className="stats" id="impacto">
    <div className="section">
      <div className="stats-head">
        <span className="eyebrow"><span className="num">02</span> · Impacto até hoje</span>
        <h2 className="h-section stats-title">
          Números que <em>contam histórias</em>.
        </h2>
      </div>

      <div className="stats-grid">
        {stats.map((s, i) => (
          <article className="stat" key={i}>
            <div className="stat-mark">
              <span className="stat-pre">{s.pre}</span>
              <span className="stat-num"><CountUp numStr={s.num} /></span>
              <span className="stat-label">{s.label}</span>
            </div>
            <p className="stat-body body-text">{s.body}</p>
            <div className="stat-rule"></div>
          </article>
        ))}
      </div>

      <a href="https://www.instagram.com/eufacoparte.ong/" className="ig-link">
        <span className="aster">✻</span>
        Acompanhe @eufacoparte.ong no Instagram
        <span className="arrow">→</span>
      </a>
    </div>
  </section>
);

// ---- Mapa do Brasil ----
const BRASIL_ACTIVE = new Set(['DF', 'RN', 'RJ', 'GO', 'MG']);
const GEOJSON_URL = 'https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/brazil-states.geojson';

const STATE_TO_SIGLA = {
  'Acre':'AC','Alagoas':'AL','Amapá':'AP','Amazonas':'AM','Bahia':'BA',
  'Ceará':'CE','Espírito Santo':'ES','Maranhão':'MA','Mato Grosso':'MT',
  'Mato Grosso do Sul':'MS','Pará':'PA','Paraíba':'PB','Paraná':'PR',
  'Pernambuco':'PE','Piauí':'PI','Rio Grande do Sul':'RS','Rondônia':'RO',
  'Roraima':'RR','Santa Catarina':'SC','São Paulo':'SP','Sergipe':'SE','Tocantins':'TO',
};

const BrasilMapSVG = ({ chosen }) => {
  const svgRef = React.useRef(null);
  const geoRef = React.useRef(null);

  const applyFills = (chosenSigla) => {
    if (!svgRef.current || typeof d3 === 'undefined') return;
    d3.select(svgRef.current).selectAll('path').attr('fill', d => {
      const s = d.properties.sigla;
      if (BRASIL_ACTIVE.has(s)) return 'var(--accent)';
      if (chosenSigla && s === chosenSigla) return 'oklch(0.42 0.13 145)';
      return 'var(--rule-strong)';
    });
  };

  React.useEffect(() => {
    if (!svgRef.current || typeof d3 === 'undefined') return;
    const W = 400, H = 460;
    fetch(GEOJSON_URL)
      .then(r => r.json())
      .then(geo => {
        geoRef.current = geo;
        const projection = d3.geoMercator().fitSize([W, H], geo);
        const pathGen = d3.geoPath().projection(projection);
        const svg = d3.select(svgRef.current);
        svg.selectAll('*').remove();
        svg.selectAll('path')
          .data(geo.features)
          .join('path')
          .attr('d', pathGen)
          .attr('stroke', 'var(--paper)')
          .attr('stroke-width', 0.8);
        applyFills(chosen ? STATE_TO_SIGLA[chosen] : null);
      });
  }, []);

  React.useEffect(() => {
    if (geoRef.current) applyFills(chosen ? STATE_TO_SIGLA[chosen] : null);
  }, [chosen]);

  return <svg ref={svgRef} viewBox="0 0 400 460" className="brasil-svg" aria-label="Mapa do Brasil com estados de atuação destacados" />;
};

const STATE_PREP = {
  'Acre':'no','Amapá':'no','Amazonas':'no','Ceará':'no',
  'Espírito Santo':'no','Maranhão':'no','Mato Grosso':'no',
  'Mato Grosso do Sul':'no','Pará':'no','Paraná':'no','Piauí':'no',
  'Rio Grande do Sul':'no',
  'Bahia':'na','Paraíba':'na',
  'Alagoas':'em','Pernambuco':'em','Rondônia':'em','Roraima':'em',
  'Santa Catarina':'em','São Paulo':'em','Sergipe':'em','Tocantins':'em',
};

const MAPA_INACTIVE_STATES = [
  'Acre','Alagoas','Amapá','Amazonas','Bahia','Ceará',
  'Espírito Santo','Maranhão','Mato Grosso','Mato Grosso do Sul',
  'Pará','Paraíba','Paraná','Pernambuco','Piauí',
  'Rio Grande do Sul','Rondônia','Roraima','Santa Catarina',
  'São Paulo','Sergipe','Tocantins',
];

const BrasilMap = () => {
  const [picking, setPicking] = React.useState(false);
  const [chosen, setChosen]   = React.useState(null);

  const select = (state) => { setChosen(state); setPicking(false); };

  return (
    <section className="mapa-section" style={{ borderBottom: '1px solid var(--rule)' }}>
      <div className="section">
        <div className="mapa-inner">
          <div className="mapa-text">
            <span className="eyebrow"><span className="num">01.2</span> · Nossa atuação</span>
            <h2 className="h-section" style={{ marginTop: '16px' }}>Onde <em>atuamos</em>.</h2>
            <div className="mapa-legend" style={{ marginTop: '32px' }}>
              <div className="mapa-legend-item">
                <span className="mapa-legend-dot"></span>
                <span className="mapa-legend-label">Estados no qual atuamos</span>
              </div>
              <div className="mapa-legend-item" style={{ marginTop: '10px' }}>
                <span className="mapa-legend-dot mapa-legend-dot--inactive"></span>
                <span className="mapa-legend-label">Demais estados</span>
              </div>
            </div>

            {chosen ? (
              <div className="mapa-chosen">
                Em breve estaremos <strong>{STATE_PREP[chosen] || 'em'} {chosen}</strong> 🤍
                <button className="mapa-chosen-reset" onClick={() => setChosen(null)}>×</button>
              </div>
            ) : (
              <>
                <button className="mapa-want-btn" onClick={() => setPicking(p => !p)}>
                  <span>+</span> quero o eu faço parte no meu estado
                </button>
                {picking && (
                  <div className="mapa-picker">
                    {MAPA_INACTIVE_STATES.map(s => (
                      <button key={s} className="mapa-pick-tag" onClick={() => select(s)}>{s}</button>
                    ))}
                  </div>
                )}
              </>
            )}

            <ul className="mapa-states-list">
              {['Distrito Federal', 'Rio Grande do Norte', 'Rio de Janeiro', 'Goiás', 'Minas Gerais'].map(s => (
                <li key={s} className="mapa-state-tag">{s}</li>
              ))}
            </ul>
          </div>
          <BrasilMapSVG chosen={chosen} />
        </div>
      </div>
    </section>
  );
};

// ── Ações Recentes & Arrecadações ────────────────────────────

const ACOES = [
  {
    badge: 'Maio 2026',
    category: 'Solidariedade & Inclusão',
    title: 'Doações para a Rede de Apoio de Pais Atípicos',
    desc: 'Em parceria com a Scarlety Shoes (Planaltina/DF), distribuímos novos calçados para a Rede de Apoio de Pais Atípicos de Planaltina/GO, um gesto de solidariedade a quem cuida com tanto amor.',
    impact: 'Famílias atípicas atendidas',
    img: 'images/acao-rede-pais-atipicos-2026.jpg',
    href: 'index.html#projetos',
  },
  {
    badge: 'Maio 2026',
    category: 'Eventos & Comunidade',
    title: 'Dia das Mães com Direito a Celebrar',
    desc: 'Em Teófilo Otoni, reunimos doadores para celebrar as mães que raramente têm a chance de ser homenageadas, uma festa cheia de afeto, reconhecimento e alegria para cada uma delas.',
    impact: 'Mães celebradas',
    img: 'images/acao-dia-das-maes-2026.jpg',
    href: 'projeto-celebrar.html',
  },
  {
    badge: 'Abril 2026',
    category: 'Eventos & Comunidade',
    title: 'Páscoa Solidária',
    desc: 'Reunimos doadores para levar doces e alegria às crianças em situação de vulnerabilidade em Teófilo Otoni, porque toda criança merece comemorar um dia tão especial.',
    impact: 'Crianças alcançadas',
    img: 'images/acao-pascoa-solidaria-2026.jpg',
    href: 'index.html#projetos',
  },
  {
    badge: 'Abril 2025',
    category: 'Esporte & Inclusão',
    title: 'Peneira Sonhos em Campo',
    desc: '17 jovens de Xerem (RJ) patrocinados com uniformes, calçados e exames médicos. Ryan e Enzo garantiram vagas no Fluminense.',
    impact: '17 atletas patrocinados',
    img: 'https://eufacoparte.org/uploads/2025/09/peneira_social_atletas_eu_faco_parte_movimento_do_esporte.png',
    href: 'projeto-sonhos-campo.html',
  },
  {
    badge: 'Janeiro 2025',
    category: 'Esporte & Desenvolvimento',
    title: '3ª Etapa Campeonato Sagi Surf',
    desc: 'Jovens de Sagi/RN competiram pela terceira vez no circuito regional com suporte completo de equipamentos e inscrições.',
    impact: '+20 competidores',
    img: 'https://eufacoparte.org/uploads/2025/01/3.png',
    href: 'projeto-surf-sagi.html',
  },
];

const ACOES_VISIBLE = 4;
const ACOES_GAP     = 18;
const ACOES_DUR     = 480;

const AcaoCard = ({ acao }) => (
  <div style={{ textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column', height: '100%' }}>
    <article style={{
      display: 'flex', flexDirection: 'column', height: '100%',
      border: '1px solid var(--rule)', borderRadius: '3px',
      overflow: 'hidden', background: 'var(--paper)',
      transition: 'box-shadow 0.22s ease, transform 0.22s ease',
    }}
      onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 28px oklch(0.3 0.02 70 / 0.1)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}
    >
      {/* image */}
      <div style={{ aspectRatio: '3/2', overflow: 'hidden', background: 'var(--paper-3)', flexShrink: 0 }}>
        <img
          src={acao.img} alt={acao.title}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.5s ease' }}
          onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.05)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
          onError={e => { e.currentTarget.closest('div').style.background = 'var(--paper-3)'; e.currentTarget.style.display = 'none'; }}
        />
      </div>

      {/* content */}
      <div style={{ padding: '18px 20px 20px', display: 'flex', flexDirection: 'column', gap: '9px', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
          <span className="eyebrow" style={{ fontSize: '0.63rem', color: 'var(--ink-3)' }}>{acao.badge}</span>
          <span style={{ width: '3px', height: '3px', borderRadius: '50%', background: 'var(--rule-strong)', flexShrink: 0 }} />
          <span className="eyebrow" style={{ fontSize: '0.63rem', color: 'var(--accent)' }}>{acao.category}</span>
        </div>

        <h3 style={{
          fontFamily: 'var(--serif)', fontWeight: 600,
          fontSize: 'clamp(0.95rem, 1.3vw, 1.15rem)', lineHeight: 1.25,
          margin: 0, color: 'var(--ink-1)',
        }}>{acao.title}</h3>

        <p style={{ margin: 0, fontSize: '0.85rem', lineHeight: 1.65, color: 'var(--ink-2)', flex: 1 }}>{acao.desc}</p>

        {/* impact pill */}
        <div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: '5px',
            background: 'oklch(0.62 0.15 145 / 0.1)',
            color: 'oklch(0.42 0.12 145)',
            border: '1px solid oklch(0.62 0.15 145 / 0.25)',
            borderRadius: '999px', padding: '3px 11px',
            fontSize: '0.7rem', fontFamily: 'var(--mono)', letterSpacing: '0.04em',
          }}>
            <span style={{ fontSize: '0.58rem' }}>✦</span> {acao.impact}
          </span>
        </div>

        {/* fundraising bar, 100% complete */}
        <div style={{ marginTop: '2px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '5px' }}>
            <span style={{ fontSize: '0.68rem', fontFamily: 'var(--mono)', color: 'var(--ink-3)', letterSpacing: '0.05em' }}>Arrecadação</span>
            <span style={{ fontSize: '0.68rem', fontFamily: 'var(--mono)', color: 'oklch(0.42 0.12 145)', fontWeight: 600 }}>100% ✓</span>
          </div>
          <div style={{ height: '4px', background: 'var(--rule)', borderRadius: '999px', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '100%', background: 'linear-gradient(90deg, oklch(0.55 0.14 145), oklch(0.68 0.16 145))', borderRadius: '999px' }} />
          </div>
        </div>
      </div>
    </article>
  </div>
);

const AcoesRecentes = () => {
  const [idx, setIdx]   = React.useState(0);
  const [anim, setAnim] = React.useState(true);
  const wrapRef = React.useRef(null);
  const [cardW, setCardW] = React.useState(0);
  const n = ACOES.length;
  const track = [...ACOES, ...ACOES.slice(0, ACOES_VISIBLE)];

  React.useEffect(() => {
    const update = () => {
      if (!wrapRef.current) return;
      const w = wrapRef.current.offsetWidth;
      setCardW((w - ACOES_GAP * (ACOES_VISIBLE - 1)) / ACOES_VISIBLE);
    };
    update();
    const ro = new ResizeObserver(update);
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);

  React.useEffect(() => {
    const iv = setInterval(() => {
      setAnim(true);
      setIdx(prev => {
        const next = prev + 1;
        if (next >= n) setTimeout(() => { setAnim(false); setIdx(0); }, ACOES_DUR + 16);
        return next;
      });
    }, 10000);
    return () => clearInterval(iv);
  }, [n]);

  return (
    <section style={{ borderBottom: '1px solid var(--rule)' }}>
      <div className="section">
        <div className="section-head">
          <div className="head-left">
            <span className="eyebrow"><span className="num">✻</span> · Ações & Arrecadações</span>
          </div>
          <div className="head-right">
            <h2 className="h-section">Ações recentes e <em>Arrecadações.</em></h2>
          </div>
        </div>

        <div ref={wrapRef} style={{ overflow: 'hidden', position: 'relative' }}>
          <div style={{
            display: 'flex',
            gap: `${ACOES_GAP}px`,
            alignItems: 'stretch',
            transform: cardW ? `translateX(${-idx * (cardW + ACOES_GAP)}px)` : 'none',
            transition: anim ? `transform ${ACOES_DUR}ms cubic-bezier(0.4, 0, 0.2, 1)` : 'none',
            willChange: 'transform',
          }}>
            {track.map((a, i) => (
              <div key={i} style={{
                flex: `0 0 ${cardW ? `${cardW}px` : `calc(${100 / ACOES_VISIBLE}% - ${ACOES_GAP * (ACOES_VISIBLE - 1) / ACOES_VISIBLE}px)`}`,
                width: cardW ? `${cardW}px` : 'auto',
              }}>
                <AcaoCard acao={a} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.ApoioProjetos = ApoioProjetos;
window.Initiatives = Initiatives;
window.Stats = Stats;
window.BrasilMap = BrasilMap;
window.AcoesRecentes = AcoesRecentes;