// Pagina Hoe werkt het — 7 stappen voor jongeren, 7 voor groepsbeheerders,
// plus uitleg over de WhatsApp-buurtapp. Teksten letterlijk uit het contentdocument.

const BB_HW_STAPPEN = {
  jongeren: [
    ["Meld je aan", "Meld je samen met een van je ouders aan via het aanmeldformulier.", "check"],
    ["Wij nemen contact op", "We checken even of er al een groep is in jouw buurt en sturen daarna de uitnodigingslink.", "phone"],
    ["Meld je aan op jouw buurtapp", "Je kunt je daarna aanmelden op jouw buurtapp.", "users"],
    ["Gebruiksregels", "Wij leggen je via WhatsApp de gebruiksregels uit.", "shield"],
    ["Stel jezelf voor", "Stel jezelf kort voor in de app.", "hand"],
    ["Kennismakingsspel", "Wanneer kinderen elkaar niet kennen, organiseren wij een kennismakingsspel.", "sparkle"],
    ["Afspreken maar!", "Plan een afspraak, spreek af en ga samen naar buiten. Veel plezier!", "calendar"],
  ],
  beheerder: [
    ["Meld je aan", "Meld je eenvoudig aan via het aanmeldformulier.", "check"],
    ["Wij regelen de start", "De coördinator neemt contact met je op en maakt de WhatsApp-buurtapp alvast voor je aan, inclusief de juiste instellingen.", "sparkle"],
    ["Persoonlijke uitleg", "Je ontvangt een korte persoonlijke uitleg over jouw rol als groepsbeheerder, zodat je precies weet wat er van je verwacht wordt.", "phone"],
    ["Werven van jongeren", "Je helpt mee om jongeren uit jouw buurt uit te nodigen voor de app, via buurtapps, bekenden, flyers of iets anders wat jij denkt dat werkt.", "users"],
    ["Kennismaken en ijs breken", "Zodra er minimaal 6 aanmeldingen zijn, organiseren we een eerste buitenspeelactiviteit zodat jongeren elkaar leren kennen.", "hand"],
    ["Toezicht houden en stimuleren", "Je houdt een oogje in het zeil, controleert nieuwe aanmeldingen en stimuleert de groep tot buitenspel, totdat ze het zelf gaan doen.", "shield"],
    ["Zie het groeien en geniet", "Je ziet hoe jongeren elkaar vinden, samen buiten afspreken en echte verbinding maken in de buurt.", "heart"],
  ],
};

const BB_HW_TAB = {
  jongeren: {
    label: "Ouders en jongeren",
    tagline: "„Log uit, beleef echt.\u201D",
    intro: null,
    cta: "Aanmelden voor de buurtapp",
    ctaRoute: "meedoen",
    poster: "assets/infographics/stappenplan-jongeren.png",
    posterAlt: "Infographic met de zeven stappen na aanmelding voor jongeren.",
    posterBestand: "Buiten-Buddies-stappenplan-jongeren.png",
  },
  beheerder: {
    label: "Groepsbeheerder",
    tagline: "„Dank je wel! Jij maakt het verschil.\u201D",
    intro: "Samen maken we van buitenspelen weer kinderspel!",
    cta: "Word groepsbeheerder",
    ctaRoute: "meedoen-beheerder",
    poster: "assets/infographics/stappenplan-groepsbeheerder.png",
    posterAlt: "Infographic met de zeven stappen voor groepsbeheerders.",
    posterBestand: "Buiten-Buddies-stappenplan-groepsbeheerder.png",
  },
};

/* ---------------- stappenlijst met meelopende rail ---------------- */
function HwSteps({ steps }) {
  const listRef = useRef(null);
  const [done, setDone] = useState(0);

  useEffect(() => {
    const rm = window.matchMedia("(prefers-reduced-motion: reduce)").matches
      || document.documentElement.classList.contains("bb-rm-force");
    if (rm) { setDone(steps.length); return; }
    let raf = 0;
    const measure = () => {
      raf = 0;
      const nums = listRef.current ? listRef.current.querySelectorAll(".bb-hw__num") : [];
      const line = window.innerHeight * 0.62;
      let n = 0;
      nums.forEach((el) => { if (el.getBoundingClientRect().top < line) n += 1; });
      setDone(n);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(measure); };
    measure();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [steps]);

  const fill = steps.length > 1 ? Math.max(0, Math.min(1, (done - 0.5) / (steps.length - 1))) : 1;

  return (
    <ol className="bb-hw__list" ref={listRef}>
      <span className="bb-hw__rail" aria-hidden="true">
        <span className="bb-hw__railfill" style={{ transform: "scaleY(" + fill + ")" }}></span>
      </span>
      {steps.map(([titel, tekst, icon], i) => (
        <li key={titel + i} className={"bb-hw__step" + (i < done ? " is-done" : "")}>
          <span className="bb-hw__num" aria-hidden="true">{i + 1}</span>
          <FadeUp delay={40} className="bb-hw__card">
            <div className="bb-hw__cardtop">
              <span className="bb-hw__icon" aria-hidden="true"><Icon name={icon} size={24} /></span>
              <div>
                <span className="bb-hw__meta">Stap {i + 1} van {steps.length}</span>
                <h3>{titel}</h3>
              </div>
            </div>
            <p>{tekst}</p>
          </FadeUp>
        </li>
      ))}
    </ol>
  );
}

/* ---------------- infographic met lightbox ---------------- */
function HwPoster({ src, alt, downloadNaam }) {
  const [open, setOpen] = useState(false);
  const openerRef = useRef(null);
  const closeRef = useRef(null);
  const wasOpen = useRef(false);

  useEffect(() => {
    if (open && closeRef.current) closeRef.current.focus();
    if (!open && wasOpen.current && openerRef.current) openerRef.current.focus();
    wasOpen.current = open;
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      <div className="bb-hw__poster">
        <Container>
          <div className="bb-hw__posterwrap">
            <button
              type="button" className="bb-hw__posterthumb" ref={openerRef}
              onClick={() => setOpen(true)} aria-label="Stappenplan groter bekijken"
            >
              <img src={src} alt={alt} />
            </button>
            <div className="bb-hw__postertext">
              <h2>Stappenplan</h2>
              <div className="bb-hw__posteracts">
                <Button variant="primary" onClick={() => setOpen(true)}>
                  Groter bekijken <Icon name="search" />
                </Button>
                <Button variant="secondary" href={src} download={downloadNaam}>
                  Downloaden <Icon name="download" />
                </Button>
              </div>
              <p className="bb-hw__posterhint">
                <a href={src} download={downloadNaam}>
                  Stappenplan opslaan als PNG-bestand
                </a>
              </p>
            </div>
          </div>
        </Container>
      </div>

      {open && (
        <div className="bb-hw__lb" role="dialog" aria-modal="true" aria-label="Stappenplan" onClick={() => setOpen(false)}>
          <div className="bb-hw__lbinner" onClick={(e) => e.stopPropagation()}>
            <img src={src} alt={alt} />
            <button type="button" className="bb-hw__lbx" ref={closeRef} onClick={() => setOpen(false)} aria-label="Sluiten">
              <Icon name="close" size={22} />
            </button>
          </div>
        </div>
      )}
    </>
  );
}

/* ---------------- WhatsApp-buurtapp ---------------- */
function HwWhatsapp() {
  return (
    <section className="bb-hw__wa" aria-labelledby="hw-wa-kop">
      <Container>
        <div className="bb-hw__wagrid">
          <div>
            <FadeUp><h2 id="hw-wa-kop">Zo ziet een Buiten Buddies-buurtapp eruit</h2></FadeUp>
            <FadeUp delay={80}>
              <p className="bb-hw__waintro">
                De buurtapp is geen gewone chatgroep. De groepsomschrijving maakt direct duidelijk:
                alleen buitenspeelafspraken, geen nieuwtjesstroom. Een groepsbeheerder houdt op de
                achtergrond een oogje in het zeil.
              </p>
            </FadeUp>
            <FadeUp delay={140}>
              <ul className="bb-hw__wafacts">
                <li>
                  <Icon name="users" size={22} />
                  <span>
                    <b>Groepsnaam</b><br />
                    <span className="bb-hw__waname">
                      <img src="assets/logo/logo-social-400.png" alt="" />
                      Buiten Buddies + naam straten
                    </span>
                  </span>
                </li>
                <li>
                  <Icon name="calendar" size={22} />
                  <span>
                    <b>Voorbeeldpoll</b><br />
                    „Wie kan er om 16:00 sneeuwballen gevecht houden met teams tegen elkaar bij de skatebaan?&#8221;
                  </span>
                </li>
              </ul>
            </FadeUp>
            <FadeUp delay={200}>
              <p className="bb-hw__wacap">„Zo ziet een echte Buiten Buddies-buurtapp eruit.&#8221;</p>
            </FadeUp>
          </div>
          <FadeUp delay={120}>
            <div className="bb-hw__phones">
              <div className="bb-hw__phone bb-hw__phone--back">
                <div className="bb-hw__phonescr">
                  <img src="assets/whatsapp/whatsapp-thread.png" alt="Berichten in een buurtapp waarin kinderen afspreken om buiten te spelen." />
                </div>
              </div>
              <div className="bb-hw__phone">
                <div className="bb-hw__phonescr">
                  <img src="assets/whatsapp/whatsapp-poll.png" alt="Poll in de buurtapp met de vraag wie er om 16:00 een sneeuwballengevecht wil houden bij de skatebaan." />
                </div>
              </div>
            </div>
          </FadeUp>
        </div>
      </Container>
    </section>
  );
}

/* ---------------- pagina ---------------- */
function HoeWerktHetPage({ tab = "jongeren", go }) {
  const [active, setActive] = useState(tab);
  useEffect(() => { setActive(tab); }, [tab]);

  const pick = (t) => {
    setActive(t);
    const target = t === "beheerder" ? "hoe-werkt-het-beheerder" : "hoe-werkt-het";
    if (location.hash.replace("#", "") !== target) location.hash = target;
  };
  const onKey = (e) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    pick(active === "jongeren" ? "beheerder" : "jongeren");
  };

  const cfg = BB_HW_TAB[active];
  const steps = BB_HW_STAPPEN[active];

  return (
    <main id="main" tabIndex="-1" className="bb-hw" data-screen-label="Hoe werkt het">
      <header className="bb-hw__head">
        <Container>
          <FadeUp><h1>Hoe werkt het?</h1></FadeUp>
          <FadeUp delay={80}>
            <p className="bb-hw__lead">7 stappen voor jongeren en 7 stappen voor beheerders.</p>
          </FadeUp>
          <FadeUp delay={140}>
            <div className="bb-hw__tabs" role="tablist" aria-label="Kies jouw route" onKeyDown={onKey}>
              {["jongeren", "beheerder"].map((k) => (
                <button
                  key={k} type="button" role="tab" id={"hw-tab-" + k}
                  aria-selected={active === k} aria-controls={"hw-panel-" + k}
                  tabIndex={active === k ? 0 : -1}
                  className="bb-hw__tab" onClick={() => pick(k)}
                >
                  {BB_HW_TAB[k].label}
                  <span className="bb-hw__tabn">7</span>
                </button>
              ))}
            </div>
          </FadeUp>
        </Container>
      </header>

      <div id={"hw-panel-" + active} role="tabpanel" aria-labelledby={"hw-tab-" + active} tabIndex={-1}>
        {cfg.intro && (
          <div className="bb-hw__intro">
            <Container>
              <p className="bb-hw__kicker">{cfg.intro}</p>
            </Container>
          </div>
        )}

        <div className="bb-hw__steps">
          <Container>
            <HwSteps steps={steps} key={active} />
          </Container>
        </div>

        <div className="bb-hw__end">
          <Container>
            <div className="bb-hw__endcard">
              <p>{cfg.tagline}</p>
              <Button variant="yellow" onClick={() => go(cfg.ctaRoute)}>
                {cfg.cta} <Icon name="arrowRight" />
              </Button>
            </div>
          </Container>
        </div>

        <HwPoster src={cfg.poster} alt={cfg.posterAlt} downloadNaam={cfg.posterBestand} key={cfg.poster} />
      </div>

      <HwWhatsapp />

      <div className="bb-hw__next">
        <Container>
          <div className="bb-hw__nextgrid">
            <a className="bb-hw__nextcard" href={window.bbHref("waar-actief")} onClick={(e) => { e.preventDefault(); go("waar-actief"); }}>
              <span>
                <span className="t">Waar actief</span>
              </span>
              <span className="a" aria-hidden="true"><Icon name="arrowRight" size={18} /></span>
            </a>
            <a className="bb-hw__nextcard" href={window.bbHref("faq")} onClick={(e) => { e.preventDefault(); go("faq"); }}>
              <span>
                <span className="t">Veelgestelde vragen</span>
              </span>
              <span className="a" aria-hidden="true"><Icon name="arrowRight" size={18} /></span>
            </a>
          </div>
          <DeelBlok
            kop="Stap 8: vertel het door"
            tekst="De eerste zeven stappen doe je zelf, deze doe je voor de buurt. Stuur Buiten Buddies door naar de straat, de buurtgroep of de klas van je kind, dan staan er volgende week meer kinderen buiten."
          />
        </Container>
      </div>
    </main>
  );
}

Object.assign(window, { HoeWerktHetPage, HwSteps, HwPoster, HwWhatsapp });