function Marquee() {
  const run = Array.from({ length: 8 });
  return (
    <div className="lv-marquee">
      <div className="lv-marquee-track">
        {[0, 1].map(k => (
          <div className="lv-marquee-set" key={k}>
            {run.map((_, i) => <span key={i}>Free shipping available<i>✳</i></span>)}
          </div>
        ))}
      </div>
    </div>
  );
}

function BannerSlider() {
  const slides = [{ id: "banner-1", src: (window.__resources&&window.__resources.banner1)||"assets/banner-1.png" }];
  const [i, setI] = React.useState(0);
  const paused = React.useRef(false);
  React.useEffect(() => {
    if (slides.length < 2) return;
    const t = setInterval(() => { if (!paused.current) setI(p => (p + 1) % slides.length); }, 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="lv-banner" onMouseEnter={() => { paused.current = true; }} onMouseLeave={() => { paused.current = false; }}>
      <div className="lv-banner-frame">
        {slides.map((s, n) => (
          <div key={s.id} className="lv-banner-slide" style={{ opacity: n === i ? 1 : 0 }} aria-hidden={n !== i}>
            <img src={s.src} alt="Le Vault vanity cases" />
          </div>
        ))}
      </div>
      {slides.length > 1 ? (
        <div className="lv-banner-dots">
          {slides.map((s, n) => (
            <button key={s.id} type="button" aria-label={"Banner " + (n + 1)} aria-pressed={n === i} onClick={() => setI(n)}></button>
          ))}
        </div>
      ) : null}
    </section>
  );
}

Object.assign(window, { Marquee, BannerSlider });