function MazzuMission() {
  const containerRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    let raf = 0;
    const handle = () => {
      raf = 0;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // 0 when section top is at bottom of viewport (start end)
      // 1 when section bottom is at top of viewport (end start)
      const totalDist = rect.height + vh;
      const traveled = vh - rect.top;
      const p = Math.max(0, Math.min(1, traveled / totalDist));
      setProgress(p);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(handle); };
    handle();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const p1Text = "Seit 2009 kuratieren wir in Bad Vilbel — wo Mode, Beratung und Atmosphäre zusammenfinden. Drei Räume, 300 m², über 25 Labels. Alle mit Bedacht ausgewählt.";
  const p2Text = "Eine Bar im Store, Termine nach deinem Rhythmus, kein Kaufzwang. Mode soll Freude machen, nicht Druck.";
  const highlights = new Set(["mode", "beratung", "atmosphäre"]);

  const words1 = p1Text.split(" ");
  const words2 = p2Text.split(" ");
  const total = words1.length + words2.length;

  const start = 0.18;
  const end = 0.72;
  const stepRange = end - start;
  const windowSpan = (stepRange / total) * 4;

  const opacityFor = (index) => {
    const ws = start + (index / total) * stepRange;
    const we = ws + windowSpan;
    if (progress <= ws) return 0.15;
    if (progress >= we) return 1;
    const t = (progress - ws) / (we - ws);
    return 0.15 + t * 0.85;
  };

  const renderWord = (w, index, isHighlight, keyPrefix) => {
    const opacity = opacityFor(index);
    const color = isHighlight ? "hsl(var(--foreground))" : "hsl(var(--hero-subtitle))";
    return (
      <span
        key={`${keyPrefix}-${index}`}
        className="mission-word"
        style={{ opacity, color, transition: "opacity 0.18s linear" }}
      >
        {w}
      </span>
    );
  };

  return (
    <section
      ref={containerRef}
      style={{
        position: "relative",
        paddingTop: 0,
        paddingBottom: "clamp(128px, 14vw, 176px)",
      }}
    >
      <div style={{
        display: "flex", justifyContent: "center", alignItems: "center",
        padding: "0 clamp(16px,4vw,40px)",
        marginBottom: "clamp(64px, 8vw, 96px)"
      }}>
        <div style={{
          width: "min(720px, 100%)",
          aspectRatio: "2 / 3",
          borderRadius: 24,
          overflow: "hidden",
          boxShadow: "0 60px 120px -40px rgba(0,0,0,0.8), inset 0 0 0 1px hsla(0,0%,100%,0.06)",
          position: "relative"
        }}>
          <img
            src="images/store-08.jpg"
            alt="MAZZU MAZZU Editorial Still"
            style={{
              width: "100%", height: "100%", objectFit: "cover",
              filter: "saturate(0.9) brightness(0.95)"
            }}
          />
        </div>
      </div>

      <div style={{
        maxWidth: 1100,
        margin: "0 auto",
        padding: "0 clamp(20px,6vw,80px)",
      }}>
        <p style={{
          fontSize: "clamp(24px, 4.2vw, 56px)",
          fontWeight: 500,
          letterSpacing: "-1px",
          lineHeight: 1.18,
          marginBottom: 40,
          textWrap: "balance"
        }}>
          {words1.map((w, i) => {
            const clean = w.replace(/[—,.()²]/g, "").toLowerCase();
            return renderWord(w, i, highlights.has(clean), "p1");
          })}
        </p>

        <p style={{
          fontSize: "clamp(20px, 3vw, 36px)",
          fontWeight: 500,
          lineHeight: 1.32,
          color: "hsl(var(--hero-subtitle))",
          textWrap: "pretty"
        }}>
          {words2.map((w, i) => renderWord(w, words1.length + i, false, "p2"))}
        </p>
      </div>
    </section>
  );
}

window.MazzuMission = MazzuMission;