// ResponsiveImg — <picture>-Helper mit WebP/JPG-Sources, srcset und sizes.
// Setzt voraus, dass `scripts/optimize-images.mjs` die Varianten
//   <base>-480.webp / -960.webp / -1600.webp / -960.jpg
// neben der Quelle erzeugt hat. Faellt automatisch auf das Original zurueck,
// falls die Varianten (noch) nicht existieren — der Browser ignoriert
// fehlende srcset-Eintraege nicht selbst, daher ist diese Komponente nur
// nach dem Build-Step nuetzlich; vorher liefert sie das Original-Img.

function ResponsiveImg({
  src,
  alt = '',
  sizes = '100vw',
  width,
  height,
  className,
  style,
  loading = 'lazy',
  fetchpriority,
  decoding = 'async',
  pictureStyle,
}) {
  const m = String(src).match(/^(uploads\/[^?#]+)\.(jpe?g|png)$/i);
  if (!m) {
    return <img src={src} alt={alt} className={className} style={style} loading={loading} decoding={decoding} fetchpriority={fetchpriority} width={width} height={height}/>;
  }
  const base = m[1];
  const webpSrcset = [
    `${base}-480.webp 480w`,
    `${base}-960.webp 960w`,
    `${base}-1600.webp 1600w`,
  ].join(', ');
  const jpgSrcset = [
    `${base}-960.jpg 960w`,
  ].join(', ');
  const fallback = `${base}-960.jpg`;
  return (
    <picture style={pictureStyle}>
      <source type="image/webp" srcSet={webpSrcset} sizes={sizes}/>
      <source type="image/jpeg" srcSet={jpgSrcset} sizes={sizes}/>
      <img
        src={fallback}
        alt={alt}
        className={className}
        style={style}
        loading={loading}
        decoding={decoding}
        fetchpriority={fetchpriority}
        width={width}
        height={height}
      />
    </picture>
  );
}

window.ResponsiveImg = ResponsiveImg;