// VideoGrid.jsx — 2-up video posts with floating play orb.

const VideoGrid = ({ items = defaultVideos, onPlay = () => {} }) => (
  <div style={vgStyles.grid}>
    {items.map((it, i) => (
      <article key={i} style={vgStyles.card}>
        <div style={{ ...vgStyles.still, background: it.bg || "#D8D8DC" }}>
          {it.img && <img src={it.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
          <button onClick={() => onPlay(i)} style={vgStyles.play} aria-label="Play">
            <Icon name="play-lg" size={64} />
          </button>
        </div>
        <h3 style={vgStyles.title}>{it.title}</h3>
        <p style={vgStyles.sub}>{it.subtitle}</p>
      </article>
    ))}
  </div>
);

const defaultVideos = [
  { title: "Music for the Soul by Aliza Keren", subtitle: "Дуэт скрипки и фортепиано", bg: "#1A1A1A" },
  { title: "Music for the Soul by Aliza Keren", subtitle: "Ансамбль скрипачей «Keren Aliza Violins»" },
];

const vgStyles = {
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 },
  card: { display: "flex", flexDirection: "column", gap: 12 },
  still: { position: "relative", width: "100%", aspectRatio: "16/9", borderRadius: 12, overflow: "hidden" },
  play: { position: "absolute", inset: 0, margin: "auto", width: 64, height: 64, background: "transparent", border: 0, cursor: "pointer", padding: 0, display: "flex", alignItems: "center", justifyContent: "center" },
  title: { margin: "0", fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 16, color: "#171717", letterSpacing: "-0.04em" },
  sub: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, color: "#171717" },
};

window.VideoGrid = VideoGrid;