// FeatureQuote — fullbleed foto + grote Gochi-quote, donkergroene overlay.
// Wordt op scroll-in-view geactiveerd:
//   1. Achtergrondfoto fade'd in van links naar rechts (clip-path inset)
//   2. Quote verschijnt woord voor woord na de fotofade
//   3. Mirjam's profielfoto + naam (in wit) verschijnt na de quote

function FeatureQuote({
  photo = "assets/photos/voetballende-kinderen.jpg",
  focus = "center 55%",
  alt = "Vier kinderen voetballen samen in het park",
  quote = "Door een appgroep aan te maken en af en toe een activiteit voor te stellen, help je de kinderen op weg, zodat ze daarna ook zelf met elkaar blijven afspreken. Kleine moeite, groot buitenspeelplezier!",
  attribution = "Mirjam",
  attributionRole = "groepsbeheerder Haarlem-Zuid",
  attribPhoto = "assets/photos/mirjam-citaat-3.jpg",
}) {
  const ref = useRef(null);
  const [played, setPlayed] = useState(false);

  useEffect(() => {
    if (!ref.current || played) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setPlayed(true);
            obs.disconnect();
          }
        });
      },
      { threshold: 0.35 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [played]);

  // Animatie timings — gelden alleen als 'played' true is
  const photoMs        = 1200;
  const wordStartMs    = 1300;   // start net voor foto klaar is
  const wordStaggerMs  = 170;    // langzamer woord voor woord
  const wordAnimMs     = 950;
  const words          = quote.split(" ");
  const attribDelayMs  = wordStartMs + (words.length + 2) * wordStaggerMs + wordAnimMs + 350;

  return (
    <section
      ref={ref}
      className={"bb-feature-quote" + (played ? " bb-fq--in" : "")}
      aria-label="Citaat van een groepsbeheerder"
      data-screen-label="Feature quote"
    >
      <div className="bb-feature-quote__inner">
        <div className="bb-feature-quote__photo">
          <img
            src={photo}
            alt={alt}
            loading="lazy"
            style={{ objectPosition: focus }}
          />
        </div>
        <div className="bb-feature-quote__overlay" aria-hidden="true"></div>
        <div className="bb-feature-quote__body">
          <blockquote>
            <span
              className="bb-fq-word bb-fq-word--quote"
              aria-hidden="true"
              style={{ animationDelay: wordStartMs + "ms" }}
            >&ldquo;</span>
            {words.map((w, i) => (
              <React.Fragment key={i}>
                <span
                  className="bb-fq-word"
                  style={{ animationDelay: (wordStartMs + (i + 1) * wordStaggerMs) + "ms" }}
                >
                  {w}
                </span>
                {i < words.length - 1 ? " " : ""}
              </React.Fragment>
            ))}
            <span
              className="bb-fq-word bb-fq-word--quote"
              aria-hidden="true"
              style={{ animationDelay: (wordStartMs + (words.length + 1) * wordStaggerMs) + "ms" }}
            >&rdquo;</span>
          </blockquote>
          <div
            className="bb-feature-quote__attrib"
            style={{ animationDelay: attribDelayMs + "ms" }}
          >
            <span className="ph"><img src={attribPhoto} alt="" /></span>
            <span>
              {attribution}{" "}
              <span className="role">&middot; {attributionRole}</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeatureQuote });