/* ────────────────────────────────────────────────────────────
   INSTAGRAM — community feed strip
   Real embeds from instagram.com/playseer via the official
   embed.js. Add/remove reels by editing the REELS list.
   ──────────────────────────────────────────────────────────── */
function SiteInstagram() {
  const IG_URL = "https://www.instagram.com/playseer/";

  const REELS = [
    "https://www.instagram.com/reel/DZitG6fq2VD/",
    "https://www.instagram.com/reel/DZGVVydqwsp/",
    "https://www.instagram.com/reel/DYwnjceK2pk/",
  ];

  const TILE_HEIGHT = 680;
  const TILE_WIDTH = 380;
  const railRef = React.useRef(null);

  const scrollRail = (dir) => {
    const el = railRef.current;
    if (el) el.scrollBy({ left: dir * (TILE_WIDTH + 14), behavior: "smooth" });
  };

  React.useEffect(() => {
    const process = () => {
      if (window.instgrm && window.instgrm.Embeds) window.instgrm.Embeds.process();
    };
    if (document.getElementById("ig-embed-js")) {
      process();
    } else {
      const s = document.createElement("script");
      s.id = "ig-embed-js";
      s.async = true;
      s.src = "https://www.instagram.com/embed.js";
      s.onload = process;
      document.body.appendChild(s);
    }
  }, []);

  return (
    <section id="instagram" style={{ position: "relative", marginTop: 150 }}>
      <div className="ps-section" style={{ position: "relative", zIndex: 2 }}>

        {/* ── Header row ── */}
        <div style={{
          display: "flex", flexWrap: "wrap", alignItems: "flex-end",
          justifyContent: "space-between", gap: 24, marginBottom: 36,
        }}>
          <div>
            <div className="ps-sr" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "6px 14px", borderRadius: 999,
              border: "1px solid var(--border-1)",
              background: "rgba(17,19,26,0.6)",
              fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.18em", color: "var(--fg-3)",
            }}>
              COMMUNITY · @PLAYSEER
            </div>
            <h2 className="ps-sr" style={{
              "--sr-delay": "80ms",
              margin: "22px 0 0", fontFamily: "var(--font-display)",
              fontSize: 48, fontWeight: 500, letterSpacing: "-0.025em",
              color: "var(--fg-1)", lineHeight: 1.06, textWrap: "balance",
            }}>
              Straight from{" "}
              <span style={{
                background: "var(--ps-gradient)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent", color: "transparent",
              }}>the table.</span>
            </h2>
          </div>

          <a className="ps-sr" href={IG_URL} target="_blank" rel="noopener"
             style={{
               "--sr-delay": "140ms",
               display: "inline-flex", alignItems: "center", gap: 10,
               padding: "12px 22px", borderRadius: 999,
               border: "1px solid var(--border-1)",
               background: "rgba(17,19,26,0.6)",
               color: "var(--fg-1)", textDecoration: "none",
               fontFamily: "var(--font-display)", fontSize: 14,
               letterSpacing: "0.04em",
             }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <rect x="3" y="3" width="18" height="18" rx="5"></rect>
              <circle cx="12" cy="12" r="4"></circle>
              <circle cx="17.2" cy="6.8" r="0.9" fill="currentColor" stroke="none"></circle>
            </svg>
            Follow @playseer
          </a>
        </div>

        {/* ── Embed carousel ── */}
        <div style={{ position: "relative" }}>
          <div ref={railRef} className="ps-no-scrollbar" style={{
            display: "flex", gap: 14,
            overflowX: "auto",
            scrollSnapType: "x mandatory",
            paddingBottom: 4,
          }}>
            {REELS.map((url) => (
              <div key={url} className="ps-sr"
                   style={{
                     flex: "0 0 auto",
                     width: TILE_WIDTH, height: TILE_HEIGHT,
                     scrollSnapAlign: "start",
                     borderRadius: 14, overflow: "hidden",
                     background: "rgba(17,19,26,0.6)",
                     border: "1px solid var(--border-1)",
                   }}
                   dangerouslySetInnerHTML={{ __html:
                     '<blockquote class="instagram-media" ' +
                     'data-instgrm-permalink="' + url + '?utm_source=ig_embed&utm_campaign=loading" ' +
                     'data-instgrm-version="14" ' +
                     'style="background:#FFF; border:0; border-radius:12px; margin:0; ' +
                     'max-width:540px; min-width:280px; width:100%; padding:0;">' +
                     '<a href="' + url + '" target="_blank" rel="noopener" ' +
                     'style="display:block; padding:24px; text-align:center; ' +
                     'font-family:Arial,sans-serif; font-size:14px; color:#3897f0; ' +
                     'text-decoration:none;">View this post on Instagram</a>' +
                     '</blockquote>'
                   }} />
            ))}
          </div>

          {/* ── Carousel arrows ── */}
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 16 }}>
            {[[-1, "Previous posts", "M15 18l-6-6 6-6"], [1, "Next posts", "M9 6l6 6-6 6"]].map(([dir, label, d]) => (
              <button key={label} type="button" aria-label={label}
                      onClick={() => scrollRail(dir)}
                      style={{
                        width: 44, height: 44, borderRadius: "50%",
                        display: "grid", placeItems: "center",
                        background: "rgba(17,19,26,0.6)",
                        border: "1px solid var(--border-1)",
                        color: "var(--fg-1)", cursor: "pointer",
                      }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d={d}></path>
                </svg>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.SiteInstagram = SiteInstagram;