/* Shared TestimonialStill — full-bleed photo background with rotating images,
   handwritten lead-in, large serif quote overlay, paar caption.
   Drop into any page; pass {images:[], quote, by} */

function TestimonialStill({ images, quotes, bys, quote, by, lead = "in ihren worten —", align = "left" }) {
  const items = images.map((src, idx) => ({
    src,
    quote: (quotes && quotes[idx]) || quote,
    by:    (bys    && bys[idx])    || by,
  }));
  const [i, setI] = React.useState(0);
  const timerRef = React.useRef(null);

  const start = React.useCallback(() => {
    if (timerRef.current) clearInterval(timerRef.current);
    if (!items || items.length < 2) return;
    timerRef.current = setInterval(() => setI(v => (v + 1) % items.length), 5500);
  }, [items.length]);

  React.useEffect(() => {
    start();
    return () => { if (timerRef.current) clearInterval(timerRef.current); };
  }, [start]);

  const go = (n) => {
    const total = items.length || 1;
    setI(((n % total) + total) % total);
    start();
  };

  const cur = items[i];
  const pad = (n) => String(n).padStart(2, '0');

  return (
    <section className="ts-still" data-align={align}>
      <div className="ts-imgs">
        {items.map((it, idx) => (
          <img key={it.src} src={it.src} alt="" loading="lazy" decoding="async" className={idx === i ? "is-on" : ""}/>
        ))}
      </div>
      <div className="ts-overlay"></div>
      <div className="ts-copy">
        <span className="ts-hand">{lead}</span>
        <blockquote key={i} className="ts-quote">„{cur.quote}"</blockquote>
        <div className="ts-by">{cur.by}</div>
        {items.length > 1 && (
          <div className="ts-dots">
            {items.map((_, idx) => (
              <button key={idx} className={idx === i ? "on" : ""} onClick={() => go(idx)} aria-label={`Bild ${idx+1}`}/>
            ))}
          </div>
        )}
      </div>
      {items.length > 1 && (
        <div className="ts-control">
          <div className="ts-arrows">
            <button onClick={() => go(i - 1)} aria-label="Vorheriges Bild">←</button>
            <button onClick={() => go(i + 1)} aria-label="Nächstes Bild">→</button>
          </div>
          <div className="ts-counter">
            <b>{pad(i + 1)}</b>
            <span className="sep"></span>
            <span className="total">von {pad(items.length)}</span>
          </div>
        </div>
      )}
    </section>
  );
}
window.TestimonialStill = TestimonialStill;