<div id="firme-counter">Caricamento...</div>
<script>
(async function() {
  try {
    const [sigRes, csvRes] = await Promise.all([
      fetch('https://ondata.github.io/campagna_femminicidi_risorse/signatures.json'),
      fetch('https://docs.google.com/spreadsheets/d/e/2PACX-1vQJ4liVoeQ8REFXv7cPwCVQGJF4P8bCfo1aOq_fr9TDA6jfvENrllGMS__phYVhYNHwSzqQHzeDzt1-/pub?gid=1714177666&single=true&output=csv')
    ]);
    const sigData = await sigRes.json();
    const csvText = await csvRes.text();
    const orgCount = csvText.trim().split('\\n').length - 1;

    document.getElementById('firme-counter').innerHTML = `
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; margin: 0 auto;">
        <div style="text-align: center; padding: 24px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border-radius: 8px;">
          <div style="font-size: 2.5rem; font-weight: bold;">${sigData.firme.toLocaleString('it-IT')}</div>
          <div style="font-size: 0.9rem; margin-top: 8px;">firme raccolte</div>
        </div>
        <div style="text-align: center; padding: 24px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-radius: 8px;">
          <div style="font-size: 2.5rem; font-weight: bold;">${orgCount}</div>
          <div style="font-size: 0.9rem; margin-top: 8px;">organizzazioni</div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 16px;">
        <a href="https://www.change.org/p/vogliamo-i-dati-sulla-violenza-di-genere"
           style="display: inline-block; padding: 12px 24px; background: #667eea; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;"
           target="_blank">Firma anche tu</a>
      </div>
    `;
  } catch (error) {
    document.getElementById('firme-counter').textContent = 'Errore caricamento';
  }
})();
</script>