function MazzuInstagram() {
  const { Reveal, InstagramIcon } = window.MazzuShared;
  const { useState, useEffect } = React;

  // ─── Behold.so Live-Feed ─────────────────────────────────────────────
  // Trage hier deine Behold-Feed-URL ein, z.B. "https://feeds.behold.so/ABCdef123".
  // Solange dieses Feld leer ist, zeigt die Sektion die Store-Fotos als Fallback.
  const BEHOLD_FEED_URL = "";
  const PROFILE_URL = "https://www.instagram.com/mazzumazzustore/";
  // ─────────────────────────────────────────────────────────────────────

  // Fallback: 9 Store-Fotos, falls Feed leer ist oder der Abruf fehlschlägt.
  const fallbackTiles = [
    { src: "images/store-11.jpg", cap: "MAZZU MAZZU · Detail", href: PROFILE_URL },
    { src: "images/store-14.jpg", cap: "Denim Wall", href: PROFILE_URL },
    { src: "images/store-08.jpg", cap: "Canada Goose · Still", href: PROFILE_URL },
    { src: "images/store-04.jpg", cap: "Women's Edit", href: PROFILE_URL },
    { src: "images/store-09.jpg", cap: "Store Overview", href: PROFILE_URL },
    { src: "images/store-13.jpg", cap: "Travel & Tweed", href: PROFILE_URL },
    { src: "images/store-05.jpg", cap: "Shoes", href: PROFILE_URL },
    { src: "images/store-10.jpg", cap: "Welcome Desk", href: PROFILE_URL },
    { src: "images/store-06.jpg", cap: "Layers", href: PROFILE_URL },
  ];

  const [tiles, setTiles] = useState(fallbackTiles);
  const [isLive, setIsLive] = useState(false);

  useEffect(() => {
    if (!BEHOLD_FEED_URL) return;
    let cancelled = false;

    fetch(BEHOLD_FEED_URL)
      .then(function (r) {
        if (!r.ok) throw new Error("Feed HTTP " + r.status);
        return r.json();
      })
      .then(function (data) {
        // Behold liefert je nach Version ein Array oder { posts: [...] }.
        const posts = Array.isArray(data) ? data : (data && data.posts) || [];
        const mapped = posts.slice(0, 9).map(function (p) {
          const medium = p.sizes && p.sizes.medium ? p.sizes.medium.mediaUrl : null;
          const src = medium || p.thumbnailUrl || p.mediaUrl;
          const rawCap = p.prunedCaption || p.caption || "@mazzumazzustore";
          const cap = rawCap.length > 40 ? rawCap.slice(0, 38).trim() + "…" : rawCap;
          return { src: src, cap: cap, href: p.permalink || PROFILE_URL };
        }).filter(function (t) { return !!t.src; });

        if (!cancelled && mapped.length) {
          setTiles(mapped);
          setIsLive(true);
        }
      })
      .catch(function (e) {
        // Bei Fehler bleiben die Store-Fotos sichtbar — Seite wirkt nie leer.
        console.warn("Instagram-Feed konnte nicht geladen werden:", e.message);
      });

    return function () { cancelled = true; };
  }, []);

  return (
    <section style={{
      paddingTop: "clamp(96px, 12vw, 144px)",
      paddingBottom: "clamp(96px, 12vw, 144px)",
      borderTop: "1px solid hsla(0,0%,100%,0.08)",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "0 clamp(20px,6vw,80px)",
      }}>
        <div style={{
          display: "flex", alignItems: "flex-end", justifyContent: "space-between",
          flexWrap: "wrap", gap: 24, marginBottom: 56
        }}>
          <div>
            <Reveal style={{ marginBottom: 18 }}>
              <span className="text-muted-foreground" style={{
                fontSize: 11, textTransform: "uppercase", letterSpacing: "3px"
              }}>Instagram · @mazzumazzustore</span>
            </Reveal>
            <Reveal delay={0.05} as="h2" style={{
              fontSize: "clamp(32px, 5vw, 72px)",
              fontWeight: 500,
              letterSpacing: "-1.5px",
              lineHeight: 1.05,
              maxWidth: 800,
              textWrap: "balance"
            }}>
              Aus dem <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>Laden</span>, jeden Tag.
            </Reveal>
          </div>

          <Reveal delay={0.1}>
            <a
              href={PROFILE_URL}
              target="_blank" rel="noopener noreferrer"
              className="liquid-glass"
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "12px 22px", borderRadius: 9999,
                fontSize: 12, letterSpacing: "1.2px",
                textTransform: "uppercase", color: "hsla(0,0%,100%,0.95)",
                textDecoration: "none", fontWeight: 600
              }}
            >
              <InstagramIcon size={14}/>
              @mazzumazzustore folgen
            </a>
          </Reveal>
        </div>

        {/* 3x3 grid — echte Posts (Behold) oder Store-Fotos als Fallback */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 8,
        }}>
          {tiles.map((t, i) => (
            <Reveal key={(t.href || t.src) + i} delay={0.05 + (i % 3) * 0.04}>
              <a
                href={t.href}
                target="_blank" rel="noopener noreferrer"
                className="img-card"
                style={{
                  display: "block",
                  aspectRatio: "1 / 1",
                  borderRadius: 4,
                }}
              >
                <img src={t.src} alt={t.cap} loading="lazy"/>
                <div className="ig-badge">
                  <span style={{
                    width: 5, height: 5, borderRadius: 9999,
                    background: "hsla(0,0%,100%,0.7)"
                  }}/>
                  {t.cap}
                </div>
              </a>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.3} style={{ marginTop: 40, textAlign: "center" }}>
          <p className="text-muted-foreground" style={{ fontSize: 13, letterSpacing: "0.3px" }}>
            {isLive
              ? "Neueingänge, Outfit-Ideen und Behind-the-Scenes — direkt von Instagram."
              : "Neueingänge, Outfit-Ideen und Behind-the-Scenes — täglich aktualisiert."}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.MazzuInstagram = MazzuInstagram;