// Pinterest-style mosaic — true masonry with CSS columns
const Pinterest = () => {
  // Mix of heights for organic Pinterest feel
  const items = [
    { tone: 'warm',    h: 380, label: 'Festival Junino' },
    { tone: 'cyan',    h: 280, label: 'Sala maker' },
    { tone: 'rose',    h: 440, label: 'Mostra cultural' },
    { tone: 'navy',    h: 320, label: 'Biblioteca' },
    { tone: 'green',   h: 360, label: 'Pátio Ed. Infantil' },
    { tone: 'purple',  h: 260, label: 'Coral Ábaco' },
    { tone: 'default', h: 420, label: 'Quadra coberta' },
    { tone: 'cyan',    h: 300, label: 'Robótica' },
    { tone: 'warm',    h: 340, label: 'Recreio' },
    { tone: 'rose',    h: 280, label: 'Aula de pintura' },
    { tone: 'navy',    h: 380, label: 'Formatura' },
    { tone: 'green',   h: 320, label: 'Saída pedagógica' },
    { tone: 'cyan',    h: 460, label: 'Festa Junina' },
    { tone: 'purple',  h: 280, label: 'Show de talentos' },
    { tone: 'default', h: 360, label: 'Aula de campo' },
    { tone: 'rose',    h: 300, label: 'Dança' },
    { tone: 'warm',    h: 240, label: 'Recreio Infantil' },
    { tone: 'cyan',    h: 400, label: 'Laboratório' },
    { tone: 'navy',    h: 320, label: 'Cantina' },
    { tone: 'green',   h: 280, label: 'Horta escolar' },
  ];

  return (
    <section className="pinterest">
      <div className="container">
        <div className="section-head pinterest-head">
          <div>
            <div className="eyebrow">Galeria · momentos</div>
            <h2>Um ano inteiro<br/>em fotos.</h2>
          </div>
          <p>Da chegada das crianças no primeiro dia ao último abraço da formatura — flagrantes do que faz o Ábaco vivo. Atualizado todo mês.</p>
        </div>
      </div>

      <div className="pinterest-stage">
        {items.map((p, i) => (
          <figure key={i}
                  className={"pin-card ph " + (p.tone === 'default' ? '' : p.tone)}
                  style={{ height: p.h + 'px' }}>
            <span>{p.label}</span>
            <figcaption>
              <span className="pin-card-label">{p.label}</span>
              <svg className="pin-card-arrow" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4">
                <path d="M7 17L17 7M9 7h8v8" />
              </svg>
            </figcaption>
          </figure>
        ))}
      </div>

      <div className="container">
        <div className="pinterest-cta">
          <a href={`https://instagram.com/${window.ABACO.instagram}`} className="btn btn-outline">
            ver galeria completa no Instagram →
          </a>
        </div>
      </div>
    </section>
  );
};

window.Pinterest = Pinterest;