/* Introblok op de homepage, direct onder de hero.
   Legt in één alinea uit wat Buiten Buddies is, voor wie en waar. De bol
   wisselt tussen het logo en zes foto's. De achtergrond loopt van crème (waar
   de hero eindigt) naar mint (waar de infographics beginnen), zodat er geen
   harde kleurgrens tussen de blokken zit. */

/* Negen beelden: het logo staat op plek 1, 4 en 7, dus het komt na de start
   twee keer terug. Daartussen zes foto's uit de buurt. */
const BB_INTRO_BEELDEN = [
  { logo: true },
  { src: "assets/photos/klimnet-meiden.jpg", focus: "center 35%", alt: "Twee meiden in een touwparcours in het park" },
  { src: "assets/photos/voetballende-kinderen.jpg", focus: "center 55%", alt: "Vier kinderen voetballen samen in het park" },
  { logo: true },
  { src: "assets/photos/steppende-kinderen.jpg", focus: "center 40%", alt: "Kinderen op steppen in de buurt" },
  { src: "assets/photos/urban-sports-park.jpg", focus: "center 45%", alt: "Kinderen klimmen op een buitenspeeltoestel" },
  { logo: true },
  { src: "assets/photos/bal-overgooiend-nova.jpg", focus: "center 40%", alt: "Meisje gooit een bal over in het gras" },
  { src: "assets/photos/bal-tegen-muurtje.jpg", alt: "Drie jongens spelen met een bal in de buurt" },
];

function bbIntroStil() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
    || document.documentElement.classList.contains("bb-rm-force");
}

function IntroSection() {
  const [beeld, setBeeld] = useState(0);

  // Bol: elke 1,5 seconde het volgende beeld, met een fade ertussen.
  useEffect(() => {
    if (bbIntroStil()) return;
    const id = setInterval(() => setBeeld((p) => (p + 1) % BB_INTRO_BEELDEN.length), 1500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="bb-section bb-intro" aria-labelledby="bb-intro-kop">
      <Container>
        <div className="bb-intro__grid">
          <div>
            <h2 className="bb-intro__kop" id="bb-intro-kop">Buiten Buddies in het kort</h2>
            <p className="bb-intro__p">
              Buiten Buddies brengt Haarlemse buurtkinderen weer samen naar buiten.
              Via een WhatsApp-groep spreken ze snel af voor een sport- of spelactiviteit.
              Beheerders breken het ijs met leuke activiteiten en houden altijd een oogje in het zeil in de appgroep.
              Snel, veilig en elke dag buitenspelen!
            </p>
          </div>

          <div className="bb-intro__bol">
            {BB_INTRO_BEELDEN.map((b, i) => (
              <div
                className={"bb-intro__slot" + (b.logo ? " is-logo" : "") + (i === beeld ? " is-aan" : "")}
                key={"slot" + i}
                aria-hidden={i === beeld ? undefined : "true"}
              >
                {b.logo
                  ? <img src="assets/logo/logo.png" alt={i === beeld ? "Buiten Buddies. Log uit, beleef echt." : ""} loading="eager" />
                  : <img src={b.src} alt={i === beeld ? b.alt : ""} style={b.focus ? { objectPosition: b.focus } : null} loading="lazy" />}
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { IntroSection });