/* Product gallery — main image + angle thumbnails with RGB-glow active state. */
function ProductGallery({ images = [], alt = "" }) {
  const [active, setActive] = React.useState(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--mg-space-3)" }}>
      <div style={{ position: "relative", borderRadius: "var(--mg-radius-3)", overflow: "hidden", background: "var(--mg-void)", border: "1px solid var(--mg-slate)", aspectRatio: "4 / 3" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(70% 90% at 50% 100%, var(--mg-kb-glow), transparent 60%)" }} />
        <img src={images[active]} alt={alt} style={{ position: "relative", width: "100%", height: "100%", objectFit: "contain", padding: "var(--mg-space-4)", boxSizing: "border-box", display: "block" }} />
      </div>
      <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
        {images.map((src, i) => (
          <button key={i} type="button" onClick={() => setActive(i)} aria-label={"Vue " + (i + 1)}
            style={{ width: "72px", height: "72px", padding: "5px", borderRadius: "var(--mg-radius-2)", overflow: "hidden", cursor: "pointer", background: "var(--mg-surface)",
              border: i === active ? "2px solid var(--mg-kb-accent)" : "1px solid var(--mg-slate)", boxShadow: "none" }}>
            <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
          </button>
        ))}
      </div>
    </div>
  );
}
window.ProductGallery = ProductGallery;