/* ============================================================
   Family galleries — tabbed mosaic
   ============================================================ */

function Galleries({ families }) {
  const [active, setActive] = React.useState(0);
  const f = families[active];

  return (
    <div>
      <div className="gal__head shell">
        <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: "var(--space-6)" }}>
          — Histórias
        </p>
        <h2 className="display-lg gal__title">Cada parto, uma história inteira.</h2>
        <p className="body-lg gal__sub">
          Famílias que confiaram seus instantes mais sagrados ao olhar de Stephany.
          Selecione um nome para revisitar a chegada.
        </p>
      </div>

      <div className="shell">
        <div className="gal__tabs">
          {families.map((fam, i) => (
            <button
              key={fam.id}
              className={`gal__tab ${i === active ? "is-active" : ""}`}
              onClick={() => setActive(i)}
            >
              {String(i + 1).padStart(2, "0")} · {fam.name}
            </button>
          ))}
        </div>
      </div>

      <div className="gal__stage">
        <div className="gal__grid" key={f.id /* re-trigger anim */}>
          {f.cells.map((c, i) => (
            <figure
              key={i}
              className="gal__cell"
              style={{
                gridColumn: c.col,
                gridRow: c.row,
              }}
            >
              <img src={c.src} alt={`${f.name} — ${i + 1}`} loading="lazy" />
            </figure>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Galleries = Galleries;