// social.jsx — Social media with industry filter + FLIP animation
const { useEffect: _sUseE, useRef: _sUseR, useState: _sUseS, useMemo: _sUseM, useLayoutEffect: _sUseL } = React;

const SOCIAL = [
  // Jewellery (Dori) — 23
  { i: "jewellery", brand: "Dori", line: "Jewellery — campaign post", src: "assets/social/jewellery/j-02nd.jpg" },
  { i: "jewellery", brand: "Dori", line: "Jewellery — editorial post", src: "assets/social/jewellery/j-03.jpg" },
  { i: "jewellery", brand: "Dori", line: "Jewellery — series", src: "assets/social/jewellery/j-04.jpg" },
  { i: "jewellery", brand: "Dori", line: "Jewellery — lead post", src: "assets/social/jewellery/j-a.jpg" },
  { i: "jewellery", brand: "Dori", line: "Jewellery — set", src: "assets/social/jewellery/j-art12.jpg" },
  { i: "jewellery", brand: "Dori", line: "Diwali greeting", src: "assets/social/jewellery/j-diwali.jpg" },
  { i: "jewellery", brand: "Dori", line: "Father's Day", src: "assets/social/jewellery/j-fathers.jpg" },
  { i: "jewellery", brand: "Dori", line: "Hero post", src: "assets/social/jewellery/j-file.jpg" },
  { i: "jewellery", brand: "Dori", line: "Final post", src: "assets/social/jewellery/j-final.jpg" },
  { i: "jewellery", brand: "Dori", line: "Gandhi Jayanti — reel", src: "assets/social/jewellery/j-gandhi.mp4", video: true },
  { i: "jewellery", brand: "Dori", line: "Hanuman Jayanti", src: "assets/social/jewellery/j-hanuman.jpg" },
  { i: "jewellery", brand: "Dori", line: "Instagram cover", src: "assets/social/jewellery/j-insta.jpg" },
  { i: "jewellery", brand: "Dori", line: "Lokkhi Puja", src: "assets/social/jewellery/j-lokkhi.jpg" },
  { i: "jewellery", brand: "Dori", line: "Mahalaya", src: "assets/social/jewellery/j-mahalaya.jpg" },
  { i: "jewellery", brand: "Dori", line: "Mahavir Jayanti", src: "assets/social/jewellery/j-mahavir.jpg" },
  { i: "jewellery", brand: "Dori", line: "Moodboard 01", src: "assets/social/jewellery/j-mb1.jpg" },
  { i: "jewellery", brand: "Dori", line: "Moodboard 02", src: "assets/social/jewellery/j-mb2.jpg" },
  { i: "jewellery", brand: "Dori", line: "Moodboard 03", src: "assets/social/jewellery/j-mb3.jpg" },
  { i: "jewellery", brand: "Dori", line: "Moodboard 04", src: "assets/social/jewellery/j-mb4.jpg" },
  { i: "jewellery", brand: "Dori", line: "Mother's Day", src: "assets/social/jewellery/j-mothers.jpg" },
  { i: "jewellery", brand: "Dori", line: "Reveal post", src: "assets/social/jewellery/j-new.jpg" },
  { i: "jewellery", brand: "Dori", line: "Puja wish", src: "assets/social/jewellery/j-puja-wish.jpg" },
  { i: "jewellery", brand: "Dori", line: "Campaign hero", src: "assets/social/jewellery/j-rrr.jpg" },

  // F&B — 14
  { i: "fnb", brand: "Premier's Tea", line: "Tea — feature post", src: "assets/social/fnb/f-01.jpg" },
  { i: "fnb", brand: "F&B", line: "Beverage — campaign", src: "assets/social/fnb/f-04.jpg" },
  { i: "fnb", brand: "F&B", line: "Series post", src: "assets/social/fnb/f-07.png" },
  { i: "fnb", brand: "F&B", line: "Set", src: "assets/social/fnb/f-08.jpg" },
  { i: "fnb", brand: "F&B", line: "Campaign", src: "assets/social/fnb/f-09.jpg" },
  { i: "fnb", brand: "F&B", line: "Editorial", src: "assets/social/fnb/f-10.jpg" },
  { i: "fnb", brand: "F&B", line: "Lead", src: "assets/social/fnb/f-11.jpg" },
  { i: "fnb", brand: "F&B", line: "Hero", src: "assets/social/fnb/f-a1a.jpg" },
  { i: "fnb", brand: "F&B", line: "Variant", src: "assets/social/fnb/f-a1b.jpg" },
  { i: "fnb", brand: "F&B", line: "Set 01", src: "assets/social/fnb/f-art1.jpg" },
  { i: "fnb", brand: "F&B", line: "Set 02", src: "assets/social/fnb/f-art2.jpg" },
  { i: "fnb", brand: "F&B", line: "Set 04", src: "assets/social/fnb/f-art4.jpg" },
  { i: "fnb", brand: "F&B", line: "Quote post", src: "assets/social/fnb/f-q.jpg" },
  { i: "fnb", brand: "F&B", line: "Wish post", src: "assets/social/fnb/f-w.jpg" },

  // Healthcare — 5
  { i: "healthcare", brand: "Healthcare", line: "Ad 01", src: "assets/social/healthcare/h-ads1.jpg" },
  { i: "healthcare", brand: "Healthcare", line: "Ad 02", src: "assets/social/healthcare/h-ads2.jpg" },
  { i: "healthcare", brand: "Healthcare", line: "Awareness 01", src: "assets/social/healthcare/h-art1.jpg" },
  { i: "healthcare", brand: "Healthcare", line: "Awareness 02", src: "assets/social/healthcare/h-art1b.png" },
  { i: "healthcare", brand: "Healthcare", line: "Awareness 03", src: "assets/social/healthcare/h-art1c.png" },

  // Restaurants (Lucky Tiger) — 24
  { i: "restaurants", brand: "Lucky Tiger", line: "Cocktail post", src: "assets/social/restaurants/rs-02.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Hero post", src: "assets/social/restaurants/rs-11.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Drinks set", src: "assets/social/restaurants/rs-22.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Variant", src: "assets/social/restaurants/rs-34.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 01", src: "assets/social/restaurants/rs-art1.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 01b", src: "assets/social/restaurants/rs-art1-2.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 01c", src: "assets/social/restaurants/rs-art1c.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 1-1", src: "assets/social/restaurants/rs-art11.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 02", src: "assets/social/restaurants/rs-art2.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 02b", src: "assets/social/restaurants/rs-art2-2.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Art 05", src: "assets/social/restaurants/rs-art5.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Brunch post", src: "assets/social/restaurants/rs-brunch.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Dussera", src: "assets/social/restaurants/rs-dussera.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set H", src: "assets/social/restaurants/rs-h.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set I", src: "assets/social/restaurants/rs-i.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set K", src: "assets/social/restaurants/rs-k.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Pujo moodboard", src: "assets/social/restaurants/rs-pujo-mb.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set Q", src: "assets/social/restaurants/rs-q.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set R", src: "assets/social/restaurants/rs-r.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set U", src: "assets/social/restaurants/rs-u.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Wish", src: "assets/social/restaurants/rs-wish.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set Y", src: "assets/social/restaurants/rs-y.jpg" },
  { i: "restaurants", brand: "Lucky Tiger", line: "Set YY", src: "assets/social/restaurants/rs-yy.jpg" },

  // Apparel — 1
  { i: "apparel", brand: "Apparel", line: "Lookbook post", src: "assets/social/apparel/a-01.jpg" },

  // Real Estate (Ozone, Puja) — 16
  { i: "realestate", brand: "Ozone", line: "Hero post", src: "assets/social/realestate/re-ozone.jpg" },
  { i: "realestate", brand: "Ozone", line: "Variant", src: "assets/social/realestate/re-02.jpg" },
  { i: "realestate", brand: "Ozone", line: "Variant 02", src: "assets/social/realestate/re-02a.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Art 01", src: "assets/social/realestate/re-art1.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Art 01 alt", src: "assets/social/realestate/re-art1.png" },
  { i: "realestate", brand: "Real Estate", line: "File", src: "assets/social/realestate/re-file-mb.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set G", src: "assets/social/realestate/re-g.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set H", src: "assets/social/realestate/re-h.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set J", src: "assets/social/realestate/re-j.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set K", src: "assets/social/realestate/re-k.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set L", src: "assets/social/realestate/re-l.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set N", src: "assets/social/realestate/re-n.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set U", src: "assets/social/realestate/re-u.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Set Z", src: "assets/social/realestate/re-z.jpg" },
  { i: "realestate", brand: "Real Estate", line: "Snap", src: "assets/social/realestate/re-snap.jpg" },
  { i: "realestate", brand: "Puja Builders", line: "Puja — Art 01", src: "assets/social/realestate/re-puja-art1.jpg" },
  { i: "realestate", brand: "Puja Builders", line: "Puja — Art 01 alt", src: "assets/social/realestate/re-puja-art1.png" },
  { i: "realestate", brand: "Puja Builders", line: "Puja — Moodboard 02", src: "assets/social/realestate/re-puja-mb2.jpg" },
];

const FILTERS = [
  { key: "all", label: "All" },
  { key: "jewellery", label: "Jewellery" },
  { key: "fnb", label: "Food & Beverage" },
  { key: "restaurants", label: "Restaurants" },
  { key: "realestate", label: "Real Estate" },
  { key: "healthcare", label: "Healthcare" },
  { key: "apparel", label: "Apparel" },
  { key: "fmcg", label: "FMCG" },
];

function Social() {
  const [active, setActive] = _sUseS("all");
  const gridRef = _sUseR(null);
  const lastRects = _sUseR(new Map());

  const items = _sUseM(() => {
    if (active === "all") return SOCIAL;
    return SOCIAL.filter((s) => s.i === active);
  }, [active]);

  const counts = _sUseM(() => {
    const c = { all: SOCIAL.length };
    SOCIAL.forEach((s) => { c[s.i] = (c[s.i] || 0) + 1; });
    return c;
  }, []);

  // FLIP animation
  _sUseL(() => {
    const grid = gridRef.current;
    if (!grid) return;
    const cards = grid.querySelectorAll("[data-flip]");
    cards.forEach((c) => {
      const key = c.dataset.flip;
      const prev = lastRects.current.get(key);
      const rect = c.getBoundingClientRect();
      if (prev) {
        const dx = prev.left - rect.left;
        const dy = prev.top - rect.top;
        if (dx || dy) {
          c.animate(
            [
              { transform: `translate(${dx}px, ${dy}px)` },
              { transform: "translate(0,0)" },
            ],
            { duration: 650, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }
          );
        }
      }
      lastRects.current.set(key, rect);
    });
  }, [active]);

  return (
    <section className="social" id="social" data-screen-label="07 Social Media">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Work / 05 — Social media</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Feeds that earn the double-tap.</WordsReveal>
            <p className="reveal">Daily creative across industries. Pick a flavor:</p>
          </div>
          <span className="mono reveal" style={{ color: "var(--muted)" }}>{SOCIAL.length}+ posts</span>
        </div>

        <div className="filters reveal">
          {FILTERS.map((f) => (
            <button
              key={f.key}
              className={`filter-btn ${active === f.key ? "active" : ""}`}
              onClick={() => setActive(f.key)}
              data-cursor=""
            >
              {f.label}<span className="count">{counts[f.key] || 0}</span>
            </button>
          ))}
        </div>

        <div className="social-grid" ref={gridRef}>
          {items.map((s, i) => (
            <div
              className={`social-card ${i % 5 === 2 ? "tall" : ""}`}
              key={s.src}
              data-flip={s.src}
              data-cursor={s.video ? "play" : "view"}
              data-lb={s.src}
              data-lb-type={s.video ? "video" : "image"}
              data-lb-caption={`${s.brand} · ${s.line}`}
              data-lb-ratio={s.video ? "9:16" : ""}
            >
              {s.video
                ? <video src={s.src} muted loop playsInline autoPlay preload="auto" />
                : <img src={s.src} alt={s.line} loading="lazy" />}
              <span className="tag">{s.brand} · {s.line}</span>
            </div>
          ))}
        </div>

        <p className="note reveal">
          Also crafted creatives for dentists, clinics, bakeries, and a long list of brands
          that didn't fit in chips.
        </p>
      </div>
    </section>
  );
}

window.Social = Social;